へっぽこSEが◯時間でFlutter(iOS、android、web)で2Dゲームアプリを作ってみる(3)

どうも、すえきあおいです。
前回、Flutter公式サンプルアプリの「slide_puzzle」を動かすところまで行ったんですが、いざカスタマイズしようとソースを読んでいくと、なんか難しくて。あと意外とファイル数も多くて。
読み解きながら勉強したことを[Flutter][Tips]シリーズで当ブログに投稿していたんですが、ちょっと疲れてきたと言うか、挫折しそうだったので別の方法で試すことにしました。ヘタレですみません。ハエほどの集中力もないのです。
あるいは、切り替え上手と言っていただいても大丈夫ですよ!(←ウザいw
今日試したこと:YouTube動画で自動翻訳の解説みながら、真似して作る
動画なら解説してくれてるし、自分でコーディングしたらある程度どういう感じで作っていけば良いのか把握できるんじゃね?って思いまして。
参考にした動画はこちら。
わずか1時間の動画で動く2Dゲームが作れちゃうのです。すげぇ!
準備
- Android Studioで「新しいFlutterアプリを作る」でプロジェクトを新規作成
- 「Flame」パッケージをインストール
ちなみに、下記の手順は動画と全く同じなので、よくわかんなかったら動画を参照して下さいませ。
やったこと①コンストラクタを作る
まずは「test」ディレクトリを削除します。
main.dartのソースを全部消して、動画に沿ってイチからコードを書いていきます。
lib/main.dart
import 'package:flame/util.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:fluttergame01/game_controller.dart'; void main() async { Util flameUtil = Util(); await flameUtil.fullScreen(); await flameUtil.setOrientation(DeviceOrientation.portraitUp); GameController gameController = GameController(); runApp(gameController.widget); }
次に、Flameのコンストラクタを作っていきます。
新しいファイル「game_controller.dart」を作り、FlameにあるGameクラスを継承するGameControllerクラスを作成します。
lib.game_controller.dart
import 'dart:ui'; import 'package:flame/flame.dart'; import 'package:flame/game.dart'; class GameController extends Game { //画面サイズ Size screenSize; //プレイヤーが動かす四角形の物体のサイズ double tileSize; //コンストラクタ GameController() { initialize(); } void initialize() async { resize(await Flame.util.initialDimensions() ); } //ここで背景を作る void render(Canvas c){ } //ここでアクションを計算する void update(double t){} //スクリーンサイズに合わせて背景とかキャラ(ここでは四角形)のサイズを調整する void resize(Size size){ screenSize = size; tileSize = screenSize.width / 10; } }
前に勉強した『2Dゲームアプリの仕組み』の知識が役に立ちました。
この時点で「はぁ〜?」ってなってる人は、リンクに飛んでみてください。短い記事なので一瞬で読めます。
やったこと② いったん実行してみる
MacのAndroid Studioで実行してたんですが、実行ボタン押してもうんともすんとも言わない。iPhoneエミュレータでも、Android エミュレータでも、web(Chrom)でも、エラーも起きないし実行もされない、、、
動画始まって6分くらいしか経ってないけど、早速ハマった感がある_:(´ཀ`」 ∠):
Xcodeで実行すると「Command PhaseScriptExecution failed with a nonzero exit code」というエラーになってました。
とりあえずiPhone 11エミュレータで実行するのを目標に、いろいろやりました。
で、結論だけ言うと、この動画チュートリアルを諦めました。パッケージの依存関係の問題で、自分ではどうしようもなかったのです。。。
ふう。まぁここが一番大変だから。こっから一気に進むから!元気出してがんばるー!
次回は別のチュートリアル探してみます。
それでは!