👌

FlutterとFlameでスイカゲーム風のゲームを作る（サンプルソースあり）

2024/01/23に公開

Android

FlutterとFlameでスイカゲーム風のサンプルコード-初心者向け夏休みの工作にも良いかも

FlutterとFlameでスイカゲーム風のサンプルコードを公開します。
（コメント含めて400行程度です。）

ソースコードはかなり汚いので、適宜盗めるところだけ盗んでください。
今回公開したやつをビルドすればこんなものが出来上がります。

タップすると１、２という数字がついたボールがランダムで落ちます。
同じ数字が触れ合うと次の数字になります。
３同士が触れ合うと消えます。

できるだけコピペしやすいように作っているので
Flame初心者や、ゲーム作りたい人、プログラミング初心者向けです。
これをコピペして少し内容修正してお子さんの夏休みの宿題でもいかがでしょうか？

まずは百聞は一見にしかずという事でソースコードを以下に載せます。
githubからでも入手可能です。
スイカゲームサンプルソースコード

ソースコード

main.dart

pubspec.yaml

Assets画像

ビルドの仕方

Android Studioで「New Flutter Project」を選択してFlutterのスケルトンを作成した後
今回公開したソースコードのmain.dartとpubspec.yamlをコピー＆ペーストで張り付けて実行してください。

また上記AseetsをFlutterのスケルトンで作成した時にできるフォルダ配下にassetsというフォルダを作り、さらにその中にimagesというフォルダを作り上記のAssets画像を格納してください。

前提

Android StudioをFlutter仕様で構築する必要があります。
そこら辺は入門書は他解説サイトで構築してください。

入門書は私は以下のものをつかって構築しました。
ちょっと古いですが、構築する分にはこれがわかりやすいかと思います。

https://amzn.to/3OdaU4e

あとは修正しながら

雑で申し訳ないですが、ソースコードの解説はしません。
自分で修正しながら動かして書くソースの役割を確認した方が良いと思います。

簡単な解説

とは言え何も説明しないもアレなので少し解説します。

使用しているプラグイン

・使っているプラグインは以下２つを使用しています。
　どっちともFlutterで物理アニメーションをさせるためのプラグインです。

forge2d
flame_forge2d

プログラムの流れ

BallGameクラス

class BallGame extends Forge2DGame with TapCallbacks,HasCollisionDetection ,WidgetsBindingObserver{
  BallGame() : super(zoom: scale,gravity: Vector2(0, dbGravity));
  final List<ball> ballToRemove = [];
  final List<ball> ballToAdd = [];
  ・・・・

BallGameクラスをForge2DGameを継承して作成しています。
このゲームの物理世界をつかさどっています。

２つの重要パラメータ

生成する際に以下の２つのパラメータを渡しています。

ZOOM

BallGameクラスにおける画面の倍率です。
ゲーム用語ではスケールとも言うらしいです。
現実世界と、仮想世界での倍率と考えてもらうと良いと思います。

例えば、縦のピクセル数：700
の場合、

ZOOMが1だと現実世界では高さ700m
ZOOMが10だと現実世界では高さ70m
ZOOMが100だと現実世界では高さ7m

というようなイメージになります。
※あくまで例えですので実際はわかりません。

現在は10にしています。

gravity

BallGameクラスにおける重力です。
地球の重力は9.8ですが、しっくりこなかったのでサンプルソースは20になっています。

ballクラス

落ちるボールの全体の管理をしています。
ボールの描画、ボールがぶつかった時の挙動、以下ballBodyクラスとの連携
などなどを行っています。

タップするたびにこれが何個も生成されるというイメージですね。

ballBodyクラス

落ちるボールの情報を持っています。
反発係数、密度、摩擦を定義しています。

verticalBar、underBarクラス

verticalBar・・・左右のバー
underBar　・・・下のバー

です。

自分でダメだと自覚している箇所

グローバル変数だらけ。

グローバル変数を多用しています。
中級者には向かないソースですので、ご了承ください。
初心者の方はここら辺のグローバル変数などをちょこちょこ
変えれば動きがわかってくると思います。

flame_forege2dと純粋なforge2d両方使っている

本当はflame_forege2dだけで実装できるはずなんですが、
スイカゲームを囲う、下、左右の枠を実装するためにforge2dを使っています。
かなり気持ち悪いです。

また方法がわかったらサンプルソースコードを後日修正するかもしれません。

ちなみにこんなゲームを公開しています。

だめなところもたくさんありますが
今回公開したサンプルソースを元に色々付け加えて
Androidでこんなゲームをリリースしています。

Applivでも紹介されました！

スマホアプリレビューサイト大手のApplivさんでも紹介されています。

https://app-liv.jp/5349596/

終わりに

説明、ソースコードともに雑ですみません。

雑なのでソースコードをじっくりみるのはお勧めしません。
初心者向けですので、コピペして動かして動作を楽しんで頂ければと思います。

詳しく理解したければ、
今回公開したソースコードをChatGpt様に読み込ませればスッキリ解説してくれるはずです。