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

どうも、すえきあおいです。

前回、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ゲームアプリの仕組み』の知識が役に立ちました。

この時点で「はぁ〜？」ってなってる人は、リンクに飛んでみてください。短い記事なので一瞬で読めます。