ティラノスクリプトでブラウザゲーム化する時に気を付けたいところ

詰まったところ改め、気を付けたいところです。


やたらとラグが発生する

ver.4.55からシナリオのキャッシュが有効になりました。 一回通ったシナリオはキャッシュから読み込まれるので、マクロなどがスムーズとなり、ブラウザゲーム上のラグも以前より発生しにくくなったと思います。シナリオのキャッシュを有効としているコードはkag.jsのloadScenarioの部分です。テストプレイで即反映させたい場合はここでのキャッシュ確認の分岐をコメントアウトすると以前のようになります。多分。戻すのは忘れずに。

以下は4.54以前の話ですが、ゲームを起動し直した際にもキャッシュを有効にしたい場合には良いかと思います。

ブラウザゲームにおけるラグに関しては、ティラノゲームフェス2016で優秀賞を獲得されたBuddy Collectionの作者さんの、

ティラノスクリプトで作成したゲームをWEBで公開したら重すぎる件についての対策 その3

こちらの記事の方法がとても参考になる上に、対処策として簡単です。

ver.4.54以前のデフォルトの、キャッシュが無効の状態とはどういうことか、というと、WebStorage領域に保存している場合、セーブデータのシナリオファイルでも自動で最新のものが読み込まれます。また例えばテストプレイ中に、その時読んでるシナリオで誤字を発見→即修正すると、即反映されるため、その後の表示がおかしくなることがあります(修正ポイントが現在に影響を与える)。ただこれによってクイックセーブとクイックロードなどでゲーム自体をリロードせずに修正もできるので、制作中は無効のままで、ブラウザゲーム版を公開という時にバージョン管理をしつつ有効にするのが良いかと思います。PC版なら無効のままの方が扱いやすいですね。


画像や効果音がすぐに表示されない

preloadタグを使っていないと素材をその都度新たに読み込むことになるので、ローカル上だと問題ないのですが、ブラウザゲーム版だとどうしても通信速度分のラグは発生します。そのためこの場合はpreloadタグを使うのが一番だと思います。ただスマホの場合は一気にpreloadするとメモリ的に挙動が重くなるようなので、シナリオ間の度に必要な分だけ先読みするのがよさそうです。

ティラノビルダーから出力されたシナリオは、シナリオごとに使用素材が先読みされる仕組みなので、上記のキャッシュを有効にしつつ新バージョン時には取得する手段を取ると、ブラウザ版でもより挙動が安定すると思います。

私は分割ロードが面倒で最終的にfirst.ksに素材やプラグインなどの読み込みに時間のかかるものをほぼ全部書いてしまい、一定数を読み込むと1/3とか適当な数値を表示するようにしました。この時ローディングアニメを表示していると、ロード中だと分かりやすいかもしれません。方法としては下記の製作wikiさんの説明がとても分かりやすかったです。

画像の表示を早くする為のイメージプリロードをつくる。Nowloading

また、ファイルサイズが大きいほど読み込みには時間がかかるので、ブラウザゲーム版ではなるべく容量を減らした方が表示がスムーズになります。jpgなら画質を落とす、pngなら減色する、効果音はビットレートを下げる、BGMもビットレートを少し下げる、既存の素材を流用して表示できる部分はなるべくスクリプトやCSSで済ませる。これらを徹底するだけでも結構な違いが出ますね。jpgやBGMはあまり画質・音質を下げすぎるとゲームのプレイ感覚が悪くなるのである程度の品質は確保しておいた方がいいですが、容量が大きくなりやすいものでもあるので、減らせるギリギリの値を探っていくのがいいかと思います。

以下参考までに画像ファイルの減量系ツール。

サウンド系ではこちらの記事がfoobar2000で完結できて超便利でした。m4aファイルまで作れる!