Flutter初心者がテトリスを作ってみた話【効果音・BGM・スマホインストールまで】

Flutterを使えば、初心者でもスマホで遊べるゲームアプリを作ることができます。

今回実際に作ったテトリスには、次のような機能を入れることができました。

• ライン消去の効果音
• プレイ中のBGM
• NEXTブロック表示
• ハイスコア保存
• 一時停止機能
• スワイプ操作
• スマホにインストールして遊べる

最初は「本当にできるのかな…」という感じでしたが、一つずつ進めることで、ちゃんとゲームとして遊べるレベルまで完成しました。

この記事では、その流れを私でも出来たように初心者目線でまとめます。

---

Flutterでゲームを作る理由

FlutterはGoogleが開発しているアプリ開発ツールです。

一番の特徴は、1つのコードでスマホアプリが作れるというところです。

例えば、

• Androidアプリ
• iPhoneアプリ

どちらも同じコードで作ることができます。

最初は難しそうに見えますが、慣れてくると「UIが作りやすい」と感じることが多いです。

---

今回作ったテトリスの機能

最終的に下のような機能を追加して本格的なものに仕上げました。

機能	内容
基本テトリス	ブロック落下
効果音	ライン消去音
BGM	ゲーム中の音楽
NEXT表示	次のブロック
レベル	スピードアップ
ハイスコア	最高記録保存
一時停止	ゲーム停止
スワイプ操作	スマホ操作

かなりゲームっぽくなります。

---

効果音を追加する

まず最初に追加したのは効果音です。

テトリスでラインが消えたときに「シャキーン！」みたいな音が鳴ると、かなりゲームらしくなります。

Flutterでは audioplayers というパッケージを使います。

pubspec.yaml に追加します。

dependencies:
  flutter:
    sdk: flutter
  audioplayers: ^5.2.1

そのあとターミナルで次を実行します。

flutter pub get

---

音ファイルの配置

プロジェクトの中に次のフォルダを作ります。

assets
 └ audio
     └ line.mp3

そして pubspec.yaml に登録します。

簡単に言うと、

このアプリは「何を使って動くのか」をFlutterに伝えるファイル

Flutterプロジェクトでは、とても重要なファイルの1つです。

flutter:
  uses-material-design: true

  assets:
    - assets/audio/line.mp3

これでFlutterから音を読み込めるようになります。

---

BGMを追加する

次にBGMです。

ゲーム中に音楽が流れると、雰囲気がかなり変わります。

bgmPlayer.setReleaseMode(ReleaseMode.loop);
bgmPlayer.play(
  AssetSource('audio/bgm.mp3'),
);

この設定をすると、BGMがループ再生されます。つまり、ゲーム中ずっと音楽が流れ続けます。

---

NEXTブロック表示

テトリスを遊んだことがある人なら分かると思いますが、次に落ちてくるブロックが見えるとかなり遊びやすくなります。

そこで次のブロックを保存する変数を作ります。

Tetromino? nextType;

画面の横に表示することで、「次はこの形が来るんだな」と分かるようになります。

---

ハイスコア保存

ゲームを作るならやっぱり最高記録は残したいですよね。

Flutterでは shared_preferences という仕組みを使うと、スマホにデータを保存できます。

例えば

prefs.setInt('tetris_high_score', score);

こうすることで、アプリを閉じてもハイスコアが残ります。

---

一時停止機能

ゲームを作っていると意外と欲しくなるのが一時停止です。

例えば、

• 電話がかかってきた
• ちょっと休憩したい

そんなときに便利です。

Flutterではタイマーを止めるだけで実装できます。

timer?.cancel();

再開するときは

_startTimer();

を呼びます。

---

スマホ操作（スワイプ）

ボタン操作でも遊べますが、スマホならやっぱりスワイプ操作が自然です。

例えば

操作	動き
右スワイプ	右移動
左スワイプ	左移動
下スワイプ	落下
タップ	回転

これを Flutter の GestureDetector で実装できます。

---

無料で使えるBGMサイト

ここで今回使った無料の音素材サイトを紹介します。

効果音ラボ

効果音ラボは、無料で使える効果音をダウンロードできる日本の人気サイトです。
ゲーム制作や動画編集、アプリ開発などで使える効果音が、初心者でも簡単に手に入ります。

＞＞効果音ラボ

https://soundeffect-lab.info

OtoLogic

＞＞OtoLogic

https://otologic.jp

OtoLogic（オトロジック）は、無料で高品質な効果音をダウンロードできる日本の音素材サイトです。
特に、アプリやゲーム、動画制作などで使いやすいシンプルで実用的な効果音が多いのが特徴です。

魔王魂

＞＞魔王魂

https://maou.audio

魔王魂（まおうだましい）は、無料で高品質なBGMや効果音をダウンロードできる音素材サイトです。
ゲーム制作や動画制作でよく使われており、特にBGMの種類が豊富なことで有名です。

---

スマホにインストールする方法

Flutterアプリは、最終的に APKファイル を作ります。

ターミナルで

flutter build apk

を実行すると

app-release.apk

というファイルが作られます。

そのファイルをスマホへ送ってインストールすると、自分のゲームがスマホで遊べます。

これはなかなか感動します。

---

開発中によく出たエラー

今回一番多かったエラーはこれです。

Duplicate mapping key

原因は

uses-material-design: true

を2回書いてしまうことでした。

YAMLでは同じ設定を2回書くとエラーになります。

---

まとめ

Flutterでゲームを作る流れはこんな感じです。

1. Flutterプロジェクト作成
2. テトリスロジック作成
3. 効果音追加
4. BGM追加
5. NEXT表示
6. ハイスコア保存
7. APK作成
8. スマホインストール

最初は難しく感じますが、一つずつ進めれば確実に形になります。

---

最後に

今回テトリスを作ってみて感じたのは、プログラミングは完成したときが一番楽しいということです。

特に自分の作ったゲームがスマホで動いた瞬間は、かなり嬉しい体験でした。

完璧なコードを書こうとしなくて大丈夫です。まずは小さく作って動かしてみること。それだけで、プログラミングは一気に楽しくなります。