Cocos2d-JSで音ゲーを作った話
投稿日：2015/04/08 18:31
こんにちは、ひろのぶ(@hironobu_s)です。
皆さま、4月1日にConoHaのサイトで行われたエイプリルフール企画「ミクモライブ byConoHa」はご覧いただけましたか？ ConoHaのサイトが突然変わってしまったので、驚かれた方も多かったと思います。Topページに美雲このはちゃんが登場したのは、昨年9月のサイトリニューアル以来でした。
ConoHaで大がかりなエイプリルフール企画を行うのは初めてです。そんなこともあり、某アニメをリスペクトしたり、VPSを「バーチャル・プレイ・サウンド」とこじつけたり、何故かプロ生ちゃんにも登場してもらったりと、企画サイドの悪ノリをできるだけ詰め込んだ形となりました:)
私の担当はと言うと、これまた何故か某人気ゲームをリスペクトした音ゲーを作ると言う話になり、クラウド担当のエバンジェリストとして、フロントエンドのゲーム開発をするという不思議な展開になりました。今回はそんなお話です。
なお、このエントリにVPSとしてのConoHaは全く出てきませんが、”技術”ブログですしたまには良いでしょう;)
Cocos2d-JS
開発には、JavaScriptで実装できるCocos2d-JSを採用しました。
今年の「オープンソースカンファレンス2015 Tokyo/Spring」に出展していたブースの方とお話しする機会があり、Webブラウザ上で動く60fpsのゲームに驚かされました。またJavaScriptで実装できるので、結果として手軽に、またある程度いい加減に書いても動いてくれたので、リリースまで時間のない中とても助かりました。
情報源
フレームワークは、まずはともかく使い方を知らないと手も足も出ません。ただ、Cocos2d-xはC++での実装例やサンプルが多く、JavaScriptであるCocos2d-JSのサンプルはあまりありません。そのため、基本的にはオフィシャルの英語ドキュメントを頑張って読むことになります。私が参考にしたのは以下のドキュメントです。
まず理解しないといけないのは、プロジェクトの作り方と開発のチュートリアルです。全部理解する必要はないですが、さすがにいきなりゲームを作るのは無謀です。やはり最初はHelloWorldをやっておくべきでしょう。
チュートリアル1で、とりあえずプロジェクトを作成してブラウザに出すところまでができます。WebStormを使っていますが、コマンドラインに慣れている方はCLIツールを使った方が良いです。私もこちらを使いました。
また、こちらの書籍はかなり参考になりました。500円ですが、日本語で書いてありkindleですぐ読めるので、初期の理解をかなり助けてくれました。
Cocos2d-JSは、現時点でバージョン2系と3系があるようです。今回は3系の最新版を使いましたが、上記の書籍は2系を元に書かれています。この違いはオフィシャルのドキュメントにあります。
また、日本語の情報として下記のQiitaのエントリを参考にさせていただきました。
ここまで進めると基本的なシーンとレイヤーの理解、スプライトの使い方、フレームの管理くらいはできるようなります。今回作ったゲームはこのくらいの理解で十分でした。あとはAPIリファレンスを見ながら実装していくことになります。
ミクモライブの実装
ソースコードはGitHubにあります。正直まだバグもありますしやっつけな実装が多いので、とりあえずは動くと言うレベルでご参考にしていただければと。
まず、ゲームのシーン構成は以下のようになっています。
音量警告のシーンを入れたのは理由があります。iOSのSafariで音声を再生する場合、最初の再生はユーザのタップ(クリック)イベントで開始する必要があるからです(いきなりBGMとしては再生できません)。これは仕様です。
ライブ画面以外は特にゲームの要素はありません。シーンの実装は、srcディレクトリ配下にJSファイルがあります。基本的にどの画面もスプライト(cc.Sprite)とラベル(cc.LabelTTF)を表示しているだけの単純なものです。たとえば、最初の音量警告の画面の実装は、たったこれだけです。
基本的には、オフィシャルのチュートリアルをほぼそのまま使うことで対応しています。
ライブ画面
音ゲーなのでゲーム要素としては、上から降ってくる赤い○がキャラクターのアイコンと重なったときにタップ(クリック)すると言うものになります。このとき、音楽のタイミングと合わせて精度が高い方が高得点となります。
キャラクターアイコンと赤い○は、どちらもスプライトです。プレイヤーがキャラクターアイコンをタップ(クリック)したとき、赤い○との距離でPerfect/Good/Missの判断をします。これはlive.jsのhit()に実装されています。
ただ、実際はタイマーの精度なのか、計算どおりに実装しても微妙に曲のタイミングとずれたように感じました(私の音感がないだけかもしれませんが)。なので、曲を聴きながら数値を微調整する、というアナログな作業も行いました。これでもまだ、クライアントPCの負荷がいきなり上がったりするとずれます。これはどうしようもありませんでした。
Firefoxで動かない！？
このゲームは、Firefoxで起動すると、以下のようなごめんなさい画面が表示されます。
Cocos2d-JSには再生しているBGMの再生位置を取得するAPIがありませんでした。なので、この部分はDOMから無理矢理拾っています。残念ながらFirefoxでこれを取得する方法がわからず、3月31日の22時まで悩みましたが時間切れであきらめました。もう少しうまい方法があるんですかね。
おわりに
エイプリルフール企画には、とても多くのアクセスがありました。TwitterやFacebookを盛り上げていただいた方も、ありがとうございました。楽しんでいただけたようでしたら何よりです。
また、ConoHaを初めて知ったと言う方や、そもそもサーバーやVPSとは無関係、という方も多かったと思います。もしサーバが必要なったとき、どこかでConoHaのことを思い出してくれたら幸いです;)
ConoHaチームはイベントが大好きな人たちの集まりなので、また来年も面白い企画ができれば良いなと思っております。
1,500円分の無料クーポン付いてくる ConoHa のご入会はこちらから
アカウント登録(無料)
ConoHa byGMO