へっぽこ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エミュレータで実行するのを目標に、いろいろやりました

 

で、結論だけ言うと、この動画チュートリアルを諦めました。パッケージの依存関係の問題で、自分ではどうしようもなかったのです。。。

ふう。まぁここが一番大変だから。こっから一気に進むから!元気出してがんばるー!

 

次回は別のチュートリアル探してみます。

それでは!

末岐 碧衣
  • 末岐 碧衣
  • フリーランス のシステムエンジニア。独立後、一度も営業せずに月収 96 万円を達成。1986年大阪生まれ。早稲田大学理工学部卒。システムエンジニア歴 12年。
    2009年、ITコンサルティング企業に入社。3年目でコミュ障が爆発し人間関係が崩壊。うつにより休職するも、復帰後はコミュ障の自覚を持ち、「チームプレイ」を徹底的に避け、会社組織内においても「一人でできる仕事」に専念。社内外から評価を得た。
    無理に「チームプレイ」するよりも「一人でできる仕事」に専念した方が自分も周囲も幸せにできることを確信し、2015年フリーランスとして独立。