Flame04：Flame公式ドキュメントを読み下していく4

はじめに

前回に引き続き、Flame公式ドキュメントを読み下していく第4弾をやっていきます。

今回は前回までのコンポーネントと次の章の当たり判定という主役級の登場人物に挟まれたおまけみたいな章です。

特にウェブ向けを意識した開発での注意・アドバイスですので、モバイルを中心にまずは考えている方はスキップされてもOKです。

分量も多くないですので、サラッといきましょう。

Supported Platforms

FlameはFlutter上で動くので、Flutterが動くプラットフォームで動作します。現時点でFlameはモバイルとウェブの双方をサポートしています。
https://docs.flame-engine.org/1.0.0/platforms.html

Flameの一番の特徴はここですね。Flutter上なので、Flutterが動作するプラットフォームで動く、というところが最大の利点です。

モバイルとウェブとありますが、デスクトップのサポートも進んでいます。

通信やDB周りでは普通にFlutterの強力なパッケージを使える点も大きいところです。

Flutter channels

Flameはstable(安定)版をサポートします。dev、beta、master版は動作しますが、サポートはされません。つまりもしstable版以外でなにかの問題が発生した場合に、これへの対応の優先度は低くなります。
https://docs.flame-engine.org/1.0.0/components.html

これはほかのどのソフトウェアでも同様の大原則です。

新しい機能をいち早く使いたいからと開発版(dev)やベータテスト版(beta)を先取りするのはよいですが、問題が起こっても自力で解決していく必要がありますし(検索しても解決策は出てこないでしょうね)、APIがすぐに変更されてしまうかもしれません。

よほどのことがない限り、安定版を使っていきましょう。

Flame web

Flameのウェブ版を使う場合は、CanvasKit/Skiaレンダラーを使う必要があります。これらは分離されたDOM要素の代わりにキャンバス要素を使い、ウェブのパフォーマンスを向上させます。
skiaを使ったゲームを実行するには次のコマンドを実行します：
flutter run -d chrome --web-renderer canvaskit
skiaを使ってプロダクションのビルドをするには以下のコマンドを実行します：
flutter build web --release --web-renderer canvaskit
https://docs.flame-engine.org/1.0.0/platforms.html

SkiaとはGoogleによって買収され、その後オープンソース化されたグラフィックスライブラリです。

skia.org

上記のドキュメントを眺めるか、下の動画を眺めるとどんなものかがわかると思います：

www.youtube.com

主にAnroidやChromeを始めとするブラウザで採用されているといっていますね。歴史を遡ると懐かしのQuickDrawやPostscriptがその系譜にあるというのが興味深いところです。ひたすらその道を極めて続けているのが素晴らしいですね。

GitHubページでゲームをデプロイする

ゲームを開発する、一つの方法はGitHub Pageを使うことです。GitHubはあなたのリポジトリからウェブコンテンツを簡単にホストしてくれます。
ここではGitHubを使ったゲームのホスティングのもっとも簡単な方法を説明します。
最初に、あなたの開発しているファイルのあるブランチを作ります：
git checkout -b gh-pages
このブランチはmainあるいはほかの場所から作れます。このブランチを作ったらmainに戻ります。
そしてflutter-gh-pagesというアクションをあなたのリポジトリに加えます。gh-pages.yamlファイルを作って、.github/workflowsに置けばOKです
name: Gh-Pages

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v1
      - uses: bluefireteam/flutter-gh-pages@v7
        with:
          baseHref: /NAME_OF_YOUR_REPOSITORY/
          webRenderer: canvaskit
上記の「NAME_OF_YOUR_REPOSITORY」のところをあなたのGitHubリポジトリに変えます。
こうしておけば、mainブランチになにか手を加えたとき、このアクションがゲームをアップデートしてくれるようになります。以下のようなURLでゲームが利用可能になります：
https://YOUR_GITHUB_USERNAME.github.io/YOUR_REPO_NAME/
https://docs.flame-engine.org/1.0.0/platforms.html

ウェブサービスを開発するときにサーバを確保してサービスをホスティングしなければなりませんが、それがなかなか面倒だしお金が結構かかるので大変です。

GitHubのこの機能はお手軽でありがたいですね。

Webサポート

Flameをウェブ上で使う場合、いくつかの機能が使えなくなります。たとえばFlame.device.setOrientationあるいはFlame.device.fullScreenはウェブ上では使えません。
呼び出しに問題はありませんが、何も起こらなくなります。
もう一つの例としては、flame_audioパッケージによるオーディオの事前キャッシングがあります。これもAudioplayerがウェブをサポートしていないため、機能しません。ただし「http」パケージを使って音楽ファイルをGETすると、ブラウザキャッシュが働いて事前キャッシングと同様の効果をえられます。
もしウェブアプリにおいてui.Imageのインスタンスを生成したければ、Flame.images.decodeImageFromPixelsというメソッドを使います。これはuiライブラリのdecodeImageFromPixelsをラップしたもので、ウェブプラットフォームをサポートしています。パラメタのrunAsWebをtrueにしておけば、内部の画像関連メソッドで画像をデコードできます。runAsWebがfalseであればdecodeImageFromPixelsが使用されますが、これは現状ウェブをサポートしていません。
https://docs.flame-engine.org/1.0.0/platforms.html

これらは要するに、FlameはFlutter上で動くので基本的にモバイルでもウェブでも動作するが、一部ウェブをサポートしていないAPIがあるということを説明しています。このあたりの制限事項は徐々に緩和されていったり、代替策が用意されていったりします。ウェブを意識して開発されるかたはこのあたり要チェックですね。