「さくらのINFRA WARS」を支える技術をご紹介！ さくらの勉強会 フロントエンドナイト レポート
目次
さくらのINFRA WARSとは
さくらインターネットでは毎年、エイプリルフール企画を実施しています。何をやるかは年によっていろいろですが、実際に動くものを作るだけでなく、プレスリリースまで打つなど、かなり力が入っています。
さくらのINFRA WARS提供開始のプレスリリース
そんなさくらのエイプリルフール企画、今年の出し物は「さくらのINFRA WARS」でした。触れ込みとしては「サイバー攻撃に対抗できる人材育成を目指す、インフラエンジニア育成型サーバー防衛シミュレーションプログラム」(プレスリリースより)という、何やら本格的な教育プログラムを感じさせるものですが、実際に制作し提供したのはブラウザで動作するゲームです。まずは実際にプレーしているところを動画でご覧ください。(サイトの公開は終了しました)
この「さくらのINFRA WARS」は、当社に在籍するフロントエンドエンジニアたちが制作しました。そこで、このゲームの制作過程や使っている技術をお話ししましょうということで、6月29日(金)にさくらインターネット東京支社にて「さくらの勉強会 フロントエンドナイト」を開催しました。以下、当日の発表内容をお伝えします。
作者はゲーム開発初心者だった！
イベントの前半は技術本部のダーシノ(@bc_rikko)による「ゲーム開発初心者が教えるブラウザゲームのつくり方」です。さくらのINFRA WARSにおいては、ゲームの企画・デザイン、プロトタイプ開発、サウンドデザインを担当しましたが、実はこれまでゲームを作ったことがなく、「javascript game」で検索して作り方を調べるところからのスタートでした。そこでCanvas APIの使い方を学んだり、phina.jsやenchant.jsといったゲームエンジンのコードを読んだりした後、さくらのINFRA WARSのプロトタイプを制作して社内slackに投稿したところ、他の社員たちによって見違えるほどブラッシュアップされ、公開に至ったとのことです。
プロトタイプの画面(資料より)
ブラウザゲームの基本的な仕組み
さくらのINFRA WARSの公開に至るいきさつに続いて、ブラウザゲームの基本的な仕組みの説明がありました。ゲームプログラムの動作を簡略化して示すと下図のようになります。ユーザからの入力を受け付け、それに応じてゲーム空間に存在するオブジェクト(キャラクタや物体など)の座標更新や衝突判定を行い、その結果をもとに画面にレンダリング(描画)します。そして、ゲームの終了条件判定を行い、条件を満たしていれば終了、満たしていなければループを繰り返します。
ループおよび内部処理の要点
さらに、ループおよびその内部で行われる処理についても解説がありました。その中からいくつかを紹介します。
ループ処理
ゲームプログラムにおいては、先ほど紹介したループ処理を1秒間に60回という速度で実行する必要があります。JavaScriptには一定間隔で処理を実行するメソッドがいくつかありますが、ゲームにおいてはrequestAnimationFrameがよく使われます。このメソッドはブラウザの負荷に応じて実行間隔を自動調整してくれるのですが、そのまま使うとブラウザの負荷が高くなったときにループ処理が遅延するので、それを調整する処理(フレームスキップ)を入れる必要があります。
レンダリング
レンダリングの基本的な処理の流れは、まず画面をクリアしてから、オブジェクトを1つずつ描画していきます。後から描画したオブジェクトが前面に表示されます。これを1秒間に60回繰り返しますが、背景など動かないものを毎回全部描くのは効率が悪いです。そこで、オフスクリーンと呼ばれる領域にあらかじめ背景を描いておき、それを呼び出すことで描画回数を減らしています。
オブジェクトの座標更新
オブジェクトの座標を1/60秒ごとに更新することで動きを表現できます。等速直線運動であればごく簡単なプログラムで記述できますが、時計回りのような円運動の表現には三角関数が必要です。また、キャラクタをジャンプさせるには、重力の働きをプログラムとして実装する必要があります。ただし、地球の重力加速度の数式をそのまま実装してもゲームの画面で見ると自然な動きにならないらしく、適宜調整が必要とのことです。
本当はサウンドデザインの話がしたかった
この他にも時間の関係で話せなかった話題がかなりあるとのことで、それを追加したディレクターズ・カット版の資料に加え、発表の文字起こしも公開されています。特に、資料の最後にサウンドデザインに関する記述がありますが、これは学生時代に音響効果やMA(映画やアニメに音をつける作業)を専攻した経験に裏打ちされたかなり本格的なものです。ぜひ資料の方もご覧ください。
さくらのINFRA WARSには技術が詰まっている！
イベントの後半は、同じく技術本部の古川健太郎(@townewgokgok)が「『さくらのINFRA WARS』で利用されている技術」と題して発表しました。古川は当社で数々の開発実績を持っており、例えばさくらのクラウドのマップ機能などを手がけてきました(マップ機能については、さくナレの記事「マップを使ってサーバをビジュアル的に管理しよう」をご覧ください)。ゲームの開発に関しては、ケータイゲームの開発経験はありましたが、ブラウザゲームは今回が初挑戦でした。担当した作業は、ゲーム全体のブラッシュアップ、ドット絵の作成、レベルデザインなどです。特にレベルデザインについては、「エイプリルフールのネタで作るゲームでもクソゲーとか言われるとくやしいのでちゃんとデザインした」そうです。
そして、さくらのINFRA WARSで使っている技術を下図のようにリストアップしました。
この中から、多くの時間を割いて解説した描画エンジンの話題を中心に紹介します。
PixiJSの利用
さくらのINFRA WARSでは、描画エンジンとしてPixiJSを使用しました。これを採用した理由は、本人に使用経験があったこともありますが、習得・導入が楽であることや、ゲーム開発用の補助的なライブラリが多く用意されていて開発しやすいこと、WebGLやCanvasといった描画環境の違いを気にすることなくプログラムが書けること、などが挙げられます。さくらのINFRA WARSにおいては、プロトタイプの時点ではCanvasを使っていたのをPixiJS仕様に書き換えました。
スプライトエディタを使う
ビデオゲームにおいてはスプライトと呼ばれる技術を用いてキャラクタの合成や表示を行いますが、キャラクタのいろいろな動きを作成するにはスプライトエディタを使うのが望ましいです。今回はAsepriteを使用しました。アニメーションが作りやすい、操作系統がAdobeのツールに近く親しみやすい、コマンドを利用してバッチ処理もできるなどの特長があります。Asepriteはオープンソースソフトウェアですが、ビルドがかなり面倒なので購入(1480円)した方が楽かもしれません。
また、スプライト画像の生成ツールとしてspritesheet-jsがあります。これを使うと複数の画像を1枚に結合するとともにJSON形式の管理データが出力されるので、目的の画像を呼び出すプログラムが簡単に書けます。また、複数の画像を1枚のスプライトシートにまとめることにより、読み込みファイル数の削減やGPU処理の速度最適化が図れます。
フォントはビットマップ風に
さくらのINFRA WARSはあえて昔のビデオゲーム風の画作りをしているので、フォントもそれらしいものを使いたいところです。そこで、PixiJSのTrueTypeフォント描画機能は使わず、英数字はPress Start 2Pというフォントを8x8のビットマップに変換したもの、かな(カタカナを含む)は美咲ゴシックという8x8ドットのフォントを使いました。また、フォントセットにない外字をいろいろ表示したかったので、文字とフォントを同じ順番で並べたものを用意した上で、描画したい文字を検索し、該当するフォントを座標で呼び出して使うという仕組みを実装しました(下図参照)。例えば文字列の末尾にある「珈」という字を呼び出すと、画像最下部にあるコーヒーカップが画面に表示されます。
ブラウン管のような画面作り
これも昔のビデオゲーム風の画作りの一環として、ブラウン管のような画面を描きたいという要望がありました。画面に表示する内容に対して、色の変更や画像の歪み・ぼかしなどの処理を行うことを一般にシェーダと呼びますが、さくらのINFRA WARSではPixiJSにてフィルタを記述することでこれを実現しています。特に、PixiJSを使うとWebGLなどの処理を気にせずにプログラミングできるというメリットはとても大きく、「主にこのためにPixiJSを導入した」と言ってもよいぐらいの効果がありました。なお、フィルタはGLSLという、GPU上で動くシェーディング言語で書かれています。(下図参照)
この他にもさまざまな技術が
誌面の関係で描画エンジン以外の話題は簡単な紹介になってしまいますが、サウンドはPixiJS Soundを使うと簡単に実装できることや、似ているようで異なる面を無限に生成するためにxorshift.jsを使用したことなどの話がありました。また、アニメーションの実装に関しては、これだけでかなり長い話になってしまうので以下のQiitaの記事を見てくださいとのことです。
それから、今回の開発に際して作成したライブラリが公開されています。そのうち1つは前述のブラウン管風フィルタです。ぜひお試しください。
さらに詳しく知りたい方は、公開されている資料をご覧ください。
さくらでフロントエンドの仕事をしませんか？
さくらのINFRA WARSで使われている技術の紹介、いかがでしたでしょうか。さくらインターネットといえばインフラの会社で、エンジニアもインフラ系の人材ばかりだと思われているかもしれませんが、実際にはフロントエンド系のエンジニアやWeb制作系のエンジニア・デザイナーも在籍しており、またそれらのメンバーが活躍できる場も十分に用意されています。
もし、さくらインターネットでフロントエンド開発の仕事をしてみたい！ という方がいらっしゃいましたら、ぜひご応募ください。詳しくは以下の採用情報のページをご覧ください。
それではまた、次回のイベントでお会いしましょう！