iOS15にアップデートしたら、iOS14では動いていた自作ゲーム(Gブレイバーバースト)が動かなくなりました。↑がその時の様子です。Gブレイバーバーストの動作プラットフォームは、デスクトップPC、タブレット、モバイルと複数種類あるので、その中の一つが消えたとしてもさほど問題はありません。むしろモバイルは、デスクトップPCと比べて表現力が低いと言われているので、ios15からはモバイル対応を切り捨てる、という選択肢も十分にあり得ます。しかし、Gブレイバーバーストの開発動機のひとつは、モバイルで快適にプレイできる今風のゲームを作りたい、というものです。モバイル対応はGブレイバーバーストの魂であると言っても過言ではないので、何としてでもこの問題を解決しようと思いました。ここから先は私がやったことを時系列に沿って説明しますが、まずは状況説明をさせてください。

筆者の環境
iPhone11 Pro
iOS 15.0.0

クラッシュ発生手順
戦闘画面に遷移する

戦闘画面アーキテクチャ
WebGLで全画面描画している
モバイル、デスクトップPCで同じ画像、モデルを利用している

他デバイスでの動作状況
MacbookPro 13inch(2017)  Safari15.0
  -> 問題なく動く
iPadPro 12.9inch(2020) Safari15.0
  -> 問題なく動く


 上記より、iOSのWebGLで問題が起きている可能性が高いと考えました。WebGL関連でクラッシュする原因は高負荷であることが多いので、

(1)描画するオブジェクトを減らす
(2)ピクセルレートを減らす
(3)テクスチャ解像度を下げる

を試しました。(1)、(2)ともに効果はありませんでしたが、(3)は劇的な効果がありました。なお(3)では全テクスチャの解像度を一律で50%にしました。これで終わりならよかったのですが、稀に一部テクスチャが読み込まれないことがありました。
IMG_1325


上記事象が発生した際のログを取ることができました。
webgl-error


「WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost」と表示されています。これはWebGLがクラッシュした時に出るエラーのようです。


解決策には「まずはシーンの解像度を下げるべし」と書かれています。先程画像解像度を半分にしたのですが、まだ足りないようです。今度は一律で25%にしろようと思いましたが、これ以上キャラの解像度を下げると、さすがに見苦しくなります。読み込みできないのは背景モデルのテクスチャなので、そこだけ25%のサイズにしました。今度は読み通り、うまく行きました。

以上を踏まえて、以下の対応を行いました。
  • モバイル、それ以外で画像解像度を出し分けるようにした
  • モバイルの背景モデルテクスチャは25%に縮小
  • モバイルの↑以外の画像は50%に縮小 
こうやってまとめるとシンプルですが、ここに至るまでに今週の半分以上をつかいました。めちゃくちゃ疲れましたが、副次効果としてモバイル版のローディング時間が相当早くなったので、まあいいでしょう。また、ここでは書ききれなかったtipsも結構あるので、勉強会でのネタにしようと思います。