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

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

前回（FLutter開発-準備編-）に引き続き、今日はサンプルアプリをダウンロードしていきます。

皆さん、いつも開発ってどうやってやってます？

私は自分が作りたいものに近いサンプルを入手して、そいつをカスタマイズしていく方法で進めてます。

これがいいのかわからないですが、

などの理由から特にデメリットは感じていません。一石三鳥！素晴らしい！

ただ一点、サンプルが土台になるので、これが変に作り込んであったり複雑だったりするとカスタマイズする時死ぬほど苦労します。

なので、土台にするサンプルアプリは、できるだけシンプルなものを選ぶようにしましょう。

とは言え、サンプル選びは「やってみないとわからない」面があり、失敗することも多いです。そして失敗すると結構時間を無駄にします。

例えば、今回だと下記のゲームエンジン『Flame』にFlutterで実装した例とかチュートリアルがついてたので、まずはチュートリアル通りに実装してこれを動かして、そっからカスタマイズしていこうとしました。

が。

Error: The non-abstract class 'FlameBiding' is missing implementations for these members:

実行したらなんかエラーになってチュートリアルPART（１/５）で行き詰まりました。

まぁバージョン違いとかでよくある話ですね。Flutterみたいな新しいライブラリだと特に日々アップデートされていて新陳代謝が早いので半年前のコードがもう動かない、とかよくあります。

こういうのはハマると長くなるのでスッパリ諦めます。（仮にこれが解消できても、次のエラー、また次のエラーと延々トラブルシュートする羽目になることが多いw

見切りは速ければ速いほど良い。

Flutter Samplesという公式サイトにデモが載っていたサンプルコードを入手し、まずはこいつを動かして、そっからカスタマイズしていくことにしました。

＜ダウンロード＆動かし方＞

ターミナルでサンプルコードをダウンロードするディレクトリに移動し、

①Flutter for webが動くように設定

$ flutter channel dev
$ flutter upgrade
$ flutter config –enable-web

②アプリをダウンロード、必要なライブラリを取得、実行

$ git clone https://github.com/kevmoo/slide_puzzle.git
$ cd slide_puzzle
$ flutter packages get
$ flutter run -d chrome

以上。とっても簡単。

よっしゃ、これをandroid studioにimportして動かしてみます。

はいキタコレ！

開始30分できっちり動くwebゲームアプリができました（笑）

何のゲームなのかよくわかりませんが、ちょっと触ってみたところパズルゲームぽいw

多分、「1」が左上で「15」が右下になるように、より少ない手数で並び替えるゲームですね。多分。難しそうだからやりませんが、2Dゲームには変わりないですね。

それではコイツをカスタマイズしていきます。

次回に続く！