Flutterで作ったミニゲームをFlutter for Webに移植した

9435 ワード
iOS ゲーム制作 flutter_web Flutter Android Android テキストリンク

Flutter for Web

Dartを使ってiOS/AndroidのUIが簡単に開発できるFlutterのWeb版が
Google I/O 2019で発表されました。

https://www.youtube.com/watch?v=IyFZznAk69U
以下、Google I/O 19のYoutube動画のスクリーンショットです。

やった！と思いましたが動画がアーキテクチャの図になるとムムムと思いました。
描画ライブラリなどFlutterの低レイヤー部分をゲーム制作で主に利用していたのにFlutter for Webではごっそり置き換わっていたからです。

iOS/Android向け

Web向け (Engineが置き換わる)

とはいえ移植した

flutter_webのバージョンは0.0.0を使用しました。

元のコード
https://github.com/keidroid/lights_out

移植したミニゲーム
https://fir-6c1ee.firebaseapp.com/

  • スマホ縦画面のみ対応。アクセスするとすぐ遊べます)
  • アプリ版時点ではコードサイズ5KBでした。

移植の工程

プロジェクトをWeb対応した

公式ページの以下の通りの手順を行うと対応できました。

https://github.com/flutter/flutter_web
https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md

現時点ではクロスプラットフォームではなく、migrationの手順を終えると
iOS/Androidでは動作しないWeb専用アプリとなります。

ローカル実行すると localhost:8080 で実行確認できます。
ビルドすると build/フォルダにweb実行ファイルが作成されるのでbuild/フォルダを公開すれば完成です。

ローカル実行コマンド
$ webdev run
ビルドコマンド
$ webdev build

ソースコードをWeb対応した

  • dart:uiは動作せず。flutter_web:uiに変更する必要がありました。
  • Widgetなしのアプリでは動作せず。Widgetを1つ以上用意しました。
  • マスクフィルターや角丸描画など一部のflutter_web:uiは動作せず。他のAPIに置き換えました。
アプリ版 Web版

スタンドアローン対応した

以下Flutter for Webのページをスマホで開いてホーム画面に追加すると、全画面でゲームが遊べます。

これはFlutterの機能でなく従来のChrome/Safariの機能です。
Flutter for Webではweb側の設定も自由に可能なので
ネイティブアプリっぽくするためメタタグ対応しました。

変更前

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>

変更後

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="apple-touch-icon" href="./apple-touch-icon.png">
  <!-- Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="manifest" href="./manifest.json">
  <title>Lights Out</title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
manifest.json
{
  "lang": "en",
  "name": "Lights Out",
  "short_name": "Lights Out",
  "icons": [{
        "src": "/icon144.png",
        "sizes": "144x144",
        "type": "image/png"
      }],
  "start_url": "https://fir-6c1ee.firebaseapp.com/",
  "display": "standalone"
}

感想

  • がっつりソースコード変えてやっと動いた
  • まだバージョン0.0.0なので今後に期待 (現時点でもけっこう動作する)
  • 今後は高レベルAPI使ってFlutterやる
  • ネイティブもFlutterもWebアプリもすごいので、なにで作ったら良いのか迷う
  • ゲームとかすぐ遊べて良いかもしれない