ADVゲームをCreateJSで作って見た
仕事で「ADV(アドベンチャー)」ゲームのフロント開発を担当させて頂いた。
開発前に「何を使って作ろうかな？」と考えてはいたが、先の意向でCreateJS一択で行く事になった。
個人的には「CreateJS使うの？？」とは思ったが、そんな事は言えず、開発に勤しんだ。
そこで大変だった箇所を書く。
①レンダリング速度の問題。
昨今のゲームライブラリはWebGLなどが主流で描画処理が別スレッド物が多いのだが、先方の指定CreateJSバージョンでは、描画処理もスクリプト処理も同じスレッド内で行うので、片方が重いともう片方に影響が出る。
これの解決策として、描画部分は「cache」を使い、スクリプトの方は、なるべく複雑にせず(分岐を減らしたり、小数点計算をなくしたり)、極力簡易にする事を意識して作った。
②テキスト問題。
ADVは基本的に会話のやり取りを元に進んでいく。その為、文字サイズが部分的に大きくなったり、色が一部分だけ変わってたり。。という感じで、テキストの見た目をコロコロ変更する必要性がある。
残念ながらCreateJSのCanvasテキストはそういった機能は持っていない。。
仕方がないので、テキスト部分はCnavasでは無くDOMとCSSの方で対応する事でカバーした。
③サウンド部分。
CreateJSにはSound.jsというのが含まれていて通常はそちらで対応するのだが、今回はADVという事で、色々とカスタムした方法が必要になる。Sound.jsでは対応しきれない為、仕方なくWebAudioApiを元にしたサウンド専用のクラスを作った。
しかも、WebAudioApiが対応していない機種でも鳴らしたいという意向があり、条件付きにはなるが、そういう端末はAudioタグで再生する様にした。 これってSound.jsを自分で作ってるじゃん。。と思いながらも開発した。
ここでも問題発生。iOSのある機種ではサンプリングレートがズレてしまう物がある様で、そこの対策を入れたりと、、ここでもかなり頭を悩ませた。。
④SPA(シングルページアプリケーション)のコンテンツ内で動かす用にカスタムする必要性があった。
ここが一番大変だった。。。
SPAはページ全体を切り替えるのでは、必要になった一部分だけ表示を変えて行く手法になる訳だが、つまり、、ブラウザの肝である「ページ切り替え時のメモリ解放」が出来ない為、普通に何も考えないで開発していると、直ぐにメモリオーバーになってしまう。。
上に書いた「cache」も仇になり得る訳である。。
また、CreateJSのライブラリ側でも問題が起こった。。
ADVの部分を消しても、CreateJSの処理が隠れて裏でゾンビの様にずーっと動いている訳である。。
当初、この事実に気付かず「毎回メモリリークが発生」状態になり、しかもSPAなので、「ひょっとしたらCreateJSじゃない部分が原因なんじゃない？？」っていう「どこが原因なのか解らない問題」になってしまい、暫く頭を悩まされた。
最終的には、ADVが消されるタイミングで、CreateJS側の「全システム処理」を止めるなり削除するなりしたら、収まった。まさかライブラリ側までに手を付ける事になるとは思わなかった。。
という感じで、とりあえず一旦は開発は終わり安堵したが、更にここから「追加仕様」がある様で、、もうこれ以上何かを追加するのであれば、おとなしく「TyranoScript」とか「吉里吉里」とか使った方が良いんじゃないか？。。。と先方に提案した。。
ただ、本件を通して、CreateJSやWebAudioApiの詳細も解って来たので、自分としては得た物はかなり大きかった。
日々成長を忘れずに頑張りますわ。