公開日：20時間前最終更新日：20時間前

【開発日記】ライフシムをスマホで動かしたら10fps。実機で測りながら30fps超にした

Xでシェア facebookでシェア LINEでシェア

とむ

今日やったこと
詰まったところと、どう解いたか
気づき
次にやること

Godot 4 で作っているライフシムを、スマホで遊べるようにしました。Web 版を書き出すと世界が映らず、直すと色が明るすぎ、タッチ操作を付けて実機で測ると 10fps。ひとつずつ測って直して、手元の Android で 30fps を超えるところまで来ました。

今日やったこと

Web 版の書き出しと、PC 版との見た目の差の修正
スティックとボタンとメニューのタッチ操作の追加
手元の Android(GPU は Adreno 610)で fps を測りながらの軽量化
「WASD で歩く」のようなキーボード前提の文言を、タッチのときだけボタンの名前に置き換え
テストは全部で 2,433 件が成功。実機で触って問題なし

詰まったところと、どう解いたか

最初は、書き出した Web 版に世界が映らず、一面空色でした。輪郭線のシェーダーが、Web の描画方式(Compatibility)では使えない法線テクスチャを読んでいて、コンパイルに失敗していました。描画方式で分岐させると、世界が出ました。

次は色です。地面が PC 版よりかなり明るい。材質と光を同じにした小さな検証シーンを 2 つの描画方式で描いて比べると、差はほとんどありません。そこへ影、かすみ、テクスチャを 1 つずつ足すと、影を有効にしたときだけ明るくなりました。

影つきの光が、環境光に sRGB のまま足されていると考えて計算すると、結果は線形値で (0.40, 0.555, 0.129)。実測は (0.397, 0.558, 0.133) で、ほぼ一致しました。色調整を有効にしても変わらなかったので、足す光を計算で弱めました。35 通りの時間帯と色で PC 版と比べて、差は平均 8.5/255 です。

地面の平均色	R	G	B
PC 版	166	162	98
Web 版(修正前)	228	233	138
Web 版(修正後)	171	165	95

通貨の ₽ も文字化けしていました。Web には代わりのフォントがないので、Noto Sans から 1 文字だけ切り出して同梱しました。5.5KB です。ところが左上のパネルが 137px から 172px に広がったので、切り出したフォントの縦の寸法を元のフォントの比率にそろえて、137px に戻しました。

タッチ操作を付けたあと、いちばん差が大きかったのが実機の数字です。GTX 1060 でスマホの解像度を再現したときは 45fps だったのに、実機は 10.4fps。同じ Chrome で 3D のないページは 59.6fps なので、ブラウザの間引きではありません。

そこで URL の指定で設定を切り替えられる一時コードを入れて、実機で 1 つずつ測りました。効いたのは太陽の影で、分割をやめて 1 枚にすると 10.5fps が 20.9fps に。一方で草を全部消しても 12.4fps でした。3D の解像度は高さ 480 を上限にしました。

Android の実機で、変更を足すごとに fps が 10.5、20.9、25.2、29.1、32.0 と上がっていった棒グラフ。

途中で 2 回、間違えました。1 回目は、回転が効く前の縦向きの案内画面を 4 件分も測っていたこと。キャンバスが縦長なのに気づいて捨て、横向きになるまで待つようにしました。2 回目は「画面の出力が重いはず」という読みです。キャンバスを 912x325 まで小さくしても 25.8fps で、外れでした。

手がかりになったのは、平均よりフレーム時間の分布でした。全スクリプトと UI の再描画を止めると、遅いほうの 95% 値が 50ms から 33.6ms に減りました。そこで左上の文字とボタンの更新を毎フレームから減らしました。最後に輪郭線を切ると、平均は 29.1fps から 32.0fps に。低い解像度で草の周りに出ていた黒い点も消えました。最終版は 90 秒続けて 32.9fps、95% 値は 33.6ms です。

スマホへの繋ぎ方でも少し回り道をしました。同じネットワークのつもりで IP アドレスを開くと ERR_ADDRESS_UNREACHABLE。一時的な外部公開のトンネルは Claude Code の権限判定で止まったので、USB デバッグをオンにして adb reverse で繋ぎました。