はじめに
ゲーム制作者が自由な記事を作るアドベントカレンダー 12/8の記事です！
https://adventar.org/calendars/6783
RPGツクールMV/MZでは誰でも簡単に作ったゲームをWEBブラウザ上で動かすことができますが、快適に動作するゲームをつくるためには、知っておくべき最適化テクニックがいくつかあります。
今回はとくに画像データに関して、プログラミングの知識がなくても実践可能なテクニックをまとめてみました。ひとつひとつは既によく知られたものだと思いますが、みなさんにとって有益な記事になれば幸いです。
ブラウザ環境における諸問題について
最適化の話に移るまえに、そもそもパソコン環境と比べて、ブラウザ環境ではどのような難しさがあるのかについて確認していきましょう。
ゲーム全体の容量の問題
正確には、これはブラウザ環境というより、プラットフォームによる制限なのですが、投稿場所によってはゲームデータの容量に制限がある場合があります。たとえば、多くのツクールMZ/MV製のゲームが投稿されている、RPGアツマールでは１つの作品につき、300MBまでに抑える必要があります。
ダウンロード量の問題
ブラウザ環境では外部のサーバーからゲームデータを逐次ダウンロードします。ダウンロードするファイルが大きかったり、数が多いと、データが必要になってから実際に表示されるまでに、タイムラグが発生する場合があります。
使用可能なメモリ量の問題
これも正確にはブラウザ環境というより、スマートフォン環境による問題ですが、一般にパソコン環境に比べてスマートフォン環境では使えるメモリの量が少ないため、多くの画像を一度に読み込むと、ゲームがクラッシュしてしまったりする原因になったりします。
その他、システム的な制約の問題
ブラウザ環境ではWebGLというシステムを介して、ゲームの画面描画を行っているのですが、ここにもパソコン環境にはない制約が存在したりします。
たとえば、多くのスマートフォン環境では4096×4096ピクセルを超える大きさの画像を読み込むことができません。遠景マップなどで巨大な画像を読み込む際には注意が必要です。
画像ファイルの容量を最適化する
画像ファイルの容量を減らすためのテクニックについて紹介します。これらのテクニックを実践することにより、ゲーム全体の容量の問題や、ダウンロード量の問題の解決につながります。
不要なファイルを取り除く
まずは基本中の基本ですね。ゲームに必要ないファイルを予め取り除いておけば、ゲームの容量は減らせます。ツクールMV/MZには、デプロイ時に不要なファイルを自動的に取り除いてくれる機能があるので、基本的にはこちらを利用するとよいでしょう。
ただし、注意しなければならない点があります。それは画像を読み込んだりするプラグインの場合、必要なファイルかどうかの判断がツクールが正しく行えない場合があることです。これが発生すると、いざゲームを公開したはいいものの、画像が読み込めず、エラーになってしまったりします。
そのようなプラグインを利用している場合、もっともお手軽な方法は、テスト用のマップをつくり、そこで必要な画像を「ピクチャの表示」などのコマンドで表示するイベントをつくっておくことです。実際にプレイヤーがそのマップに行くことはできませんが、ツクールはこれでもその画像を必要だとちゃんと認識してくれます。
画像圧縮ツールを使用する
次にお勧めしたいのが、圧縮ツールを使ってPNG画像を軽くする方法です。似たようなツクールはいくつかあるようですが、自分の場合はPNGoooというツールを利用しています。
PNGoooの使い方については、たとえば、こちらのサイトに詳しく書かれています。
見た目の画質や不透明度はそのまま、PNG画像のファイルサイズを70％削減する「PNGoo」
画像の不要な領域を削る
それなりに手間がかかってしまいますが、タイル画像やキャラクターの顔画像のように、実際に必要なのは一部分だけの画像がある場合、画像編集ソフトを利用して、不要な部分を透明にしてしまうことでも画像のファイルサイズを小さくすることができます。
JPGファイル形式にしてみる
実は、ツクールMV/MZはPNG画像だけでなく、JPG画像を読み込むことができます。とくに戦闘背景や遠景用の画像などは、JPG形式にしたほうがファイルサイズを小さくできる場合が多いでしょう。
具体的なやり方は、
・PNGファイルを画像編集ソフトを用いてJPGファイルに変換する
・ファイルサイズが減ったことを確認して、ファイルの名前を〇〇.jpgから〇〇.pngに書き換える
・いつもどおりツクールから画像を指定する（プレビュー機能が使えなくなるので注意）
です。
画像のメモリ消費を最適化する
ファイルサイズとメモリサイズの違い
これまで主に画像ファイルを軽量化する方法について紹介してきましたが、実はこれらを実践してもゲーム中のメモリ消費を軽くすることにはつながりません。というのも、PNGやJPGなどの画像ファイルは圧縮されていますが、ゲーム内で読み込んだ時には展開後のサイズの分が、メモリとして消費されているからです（厳密にはブラウザがファイルを内部でキャッシュしていたりするので、その分には影響はありますが）
よって、メモリ消費を最適化するには、画像のピクセル数を小さくするか、そもそも読み込む画像の数を減らすしかありません。
その画像、小さくできるかも？
たとえば、下記のような画像がゲーム中にあれば、画像を小さくすることでメモリ消費を削減することができるかもしれません
・画面と同じサイズの真っ黒な画像
・光演出、グラデーション、フォグなど、ぼやぼやした画像
前者は暗転やワイプ表現などに使う画像を想定しています。このような画像をピクチャとして表示する際には、元の画像は小さく縮小しておき、ピクチャコマンド側で拡大して画面いっぱいに広げるようにするのがいいでしょう。本当は1×1ピクセルにできればいいのですが、ピクチャコマンドでは20倍までしか拡大できないので、64×64ピクセルくらいの画像を用意しましょう。
後者はたとえば下記のような画像です。一般に、縮小した画像をツクール側で拡大して表示すると、ディティールがつぶれてぼやけたような見た目になってしまいますが、元々、ぼやけたような画像なら、相対的に影響を少なくできます。つまり、そのような画像があればメモリ消費最適化のチャンスです。
おわりに
以上です。他にもこんな方法があるよ！などあれば、ぜひコメント欄にお願いします。