ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社のコーポレートサイトはこちらです。
当ページに記載されている情報は、2023年9月30日時点の情報です。

2016.11.14

Yahoo!ゲーム「編隊少女 みんなで訓練飛行!」をCocos2d-JSと物理演算を使って5日間で制作した話

9月14日に開催されたマークアップ~フロントエンドの勉強会「SCRIPTY#6 ~フロントエンド紳士・淑女のための勉強会~」

3番目にご紹介するのは、PSCゲーム本部制作の加藤隆一郎による、「Cocos2d-JSと物理演算で作る横スクロールアクションゲーム」というタイトルで行われた発表の概要です。

ミニゲーム「編隊少女 みんなで訓練飛行!」を作った背景

私はPCSゲーム本部のフロントエンジニアを務めています。
好きな言語はTypeScript、好きなフレームワークはVue.jsです。

現在、Yahoo!ゲームで「編隊少女 みんなで訓練飛行!」というミニゲーム公開しています。

見てもらえばわかるとおり、訓練飛行のキャラクターをクリックもしくはタップで操作し、障害物を避けて飛行距離を伸ばす横スクロールアクションミニゲームです。
なぜ、このようなミニゲームを制作するに至ったのか。そのきっかけはゲーム「編隊少女」のプロモーション企画にて、「どうしたらバズらせられるのか」を検討する場にデザイナーとして参加したことです。
「ミニゲームを作ったら?」と答えたとところ、言い出しっぺの法則で私が主体となってゲームを作ることになりました。

編隊少女とは、女の子×3D戦闘機バトルで、史実でも登場した戦闘機に女の子が乗るというもの。日常パートでは操縦士と交流して信頼を得ていくという面白さもあります。このゲームをバズらせるための方策としてのゲームの制作です。
しかも同ゲームのリリースまで2カ月もない頃に決定したので、とにかく短納期(なんと5日!)で、タイトルとタイアップ的にやる必要がありました。その上、認知度向上が目的ですからユーザベースを稼ぐべくPCでもスマートフォン(スマホ)、タブレットでもプレイ可能であることが求められました。

この難題に取り組むために採用したのが、Cocos2d-JSというゲームエンジンです。Cocos2d-JSのAPIはCocos2d-xとほぼ同じで、Canvasが有効であればどのブラウザでも動きます。中国本土では商用導入実績が多数あり、日本でも釣りスタやユニゾンリーグ、Big Fish Casino等のタイトルをはじめ、DMMゲームなどでもよく使われています。
Cocos2d-JSの基になっているCocos2d-xは、オープンソースのゲーム開発用フレームワークで、クロスプラットフォームを実現しており、モンスターストライクやディズニーツムツムなど、導入実績も多数あります。Cocos2d-xが3.7となったときに、Cocos2d-JSはCocos2d-xに統合されました。

▲ PSCゲーム本部制作 加藤 隆一郎

ミニゲーム制作のために採用した技術

ミニゲーム制作において、まず行ったのがコンセプトメイキングです。ある程度ゲームの世界を反映したもので、バズらせることが目的のため、キャラゲーに決定。そのほか、かんたんプレイで高難易度、初見殺しというコンセプトを立案し、飛行訓練という体のアクションゲームにすることにしました。

ゲームは飛行+アクション。タップで上昇、なにもしないと下降するため、重さ、重力、力の方向の設定が必要です。また様々な障害物が登場し、それにぶつかればゲームオーバー、また落ちてもゲームオーバーとなります。つまり衝突判定も必要です。
これが意外と面倒くさいので、物理演算を使うことにしました。物理演算とは、物体の運動を物理法則に基づき数値計算(シミュレーション)すること。

物理演算を用いてアクションゲームを作ることには、メリットとデメリットがあります。メリットは、重力世界は想像しやすいこと、衝突判定が簡単に取れること、アクションの基本の「落ちる。当たる、飛ぶ」は全部基本機能でできることです。一方デメリットとしては、世界を広くすれば広くするほど計算が大きくなり、重くなることと、それなりに学習コストがかかることです。

Cocos2d-JSで使えるライブラリとしては、Box2dとChipmunkの2つがありましたが、今回はChipmunkを採用しました。かつてはBox2dの方が標準っぽかったのですが、JSBでコンパイルできないのが難点でした。
現在はChipmunkの方が標準となっています。JSBでコンパイルできるため、ネイティブアプリとして出力することも可能です。扱いやすくシンプルであるため、こちらを採用しました。

コードサンプルは次の通りです。

また、動きの付け方は2種。衝撃波を与える場合と直接ベクトルを指定する場合にわけ、動きを付けました。

衝撃波を与える場合は、力の向きが合成されます。上昇中に上向きの力を与えると加速し、下降中に上向きの力を与えると相殺されます。直接ベクトルを指定する場合は、力の向きは合成されないため、急制動がかかる感じにできます。
つまり直接ベクトルを指定する場合は、思ったとおりの動きをさせるときで、思わぬ動きをするのが衝撃波を与える場合という違いです。

バズらせるための様々な工夫

バズらせるためのゲーム内施策については、次の5点。キャラゲーにすること、初見殺し、6キャラを用意、特典画像、煽りテキストの種類を増やす(結果画面が出たときに、『ここまではチュートリアルです』『ここで死んでいたら近所の猫の方が腕がいいかもしれませんね』などの煽るテキストを複数用意)ことなどを行いました。

ゲーム外におけるバズ施策も行いました。まずはキャラ同士で競い合う要素をもうけ、合計点で最も高いキャラを☆5つにするキャンペーンを行ったり、初全クリアした人に特典をつけたりすることに加え、Twitterにゲーム画像を投稿できるようにしたりしました。
Coco2d-JSではCanvasに画像を書き出しているため、canvas.toDataURL()でbase64エンコードした画像を得ることができます。

墜落時のスナップショットも撮れるようにしているのも、バズらせるための要素の1つです。撃墜時の画像を出せるようにしており、Cocos2d-JSの機能を使って、画面全体がキャプチャから、キャラの周辺だけを切り出して書き出せるようにしています。

ミニゲームキャンペーン効果により、公開からミニゲームキャンペーン終了までの3週間で42000PVを達成。それまで事前登録が1日2桁だったのが3桁に。またヤフーの「話題なう」にも一瞬ですが載りました。制作期間5日にすれば、まあまあの成果だったと思います。

最後にミニゲームを作ってみての所感について。時間がない中で作るには、Cocos2d-JSは良いと思います。特に物理演算と組み合わせると良好な操作性と適度な難易度を備えたアクションゲームが比較的簡単に作れます。
また今回のような衝突判定が必要なゲームでも、物理演算であればそれを自分でやらなくてよいので楽に作れます。

ただ、バズはこれでもかというくらい練らないとバズらないということも学びました。
なお、これからこのようなマルチデバイス向けのミニゲームを短期間で制作するときは、Cocos Creatorを活用することをお勧めします。

* 当日資料「Cocos2d-JSと物理演算で作る横スクロールアクションゲーム」はこちら

関連記事

このページの先頭へ