PSCゲーム本部制作:

加藤隆一郎

Cocos2d-JSと物理演算で作る

横スクロールアクションゲーム

公開中

http://games.yahoo.co.jp/play/casual/detail?gid=70004

経緯

• 「編隊少女」の技術支援担当になった

• バズらせたいと相談を受けた

• 「ミニゲーム作ったら？」

• →何故か作ることになってた

ストーリー

バズらせたい短納期で（5日って言われた）PCでもスマホでも

Cocos2d-JSならイケそう

Cocos2d-JS とは

旧cocos2d-HTML5• 3.7でcocos2d-xと統合

APIが大体cocos2dと一緒• CCNode => cc.Node• CCSprite => cc.Sprite

canvasがあればどのブラウザでも動く→3デバイス対応

中国本土で商用導入実績多数•日本では釣りスタとか•あとDMMゲームに色々ある様子（ブラゲー多いから）

Cocos2d-x とは

オープンソースのゲーム開発用フレームワーク

クロスプラットフォーム• PC,Android,iOS

c++、Lua、JavaScript（jsb）

導入実績• モンスターストライク• ディズニー ツムツム• 剣と魔法のログレス• ブレイブフロンティア• etc

コンセプトメイキング

• ある程度ゲームの世界を反映• キャラゲー• かんたんプレイ• 高難易度• 初見殺し

• 飛行訓練という体のアクションゲームにしよう

飛行＋アクション

• タップで上昇、なにもしないと下降• →重さ、重力、力の方向が要る

• 様々な障害物が登場

• ぶつかったらゲームオーバー

• 落ちてもゲームオーバー• →衝突判定が要る

よし、物理演算だ

物理演算

物体の運動を物理法則に基づき数値計算（シミュレーション）すること

物理演算でアクションゲーム

良い所

• なんだかんだと重力世界は想像しやすい

• 衝突判定が取れる

• アクションの基本の「落ちる、当たる、飛ぶ」は全部基本機能でできる

悪い所

• 重い

• 学習コストそれなりに高い

Cocos2d-JSで使えるライブラリ

• Box2d• 昔はこっちのほうが標準ぽかった• JSBでコンパイル出来ない

• Chipmunk• 今はこっちが標準• JSBでコンパイルできる• →ネイティブで出せる

コードサンプル

var space = new cp.Space();

space.gravity = cp.v(0, -980);

var ps = new PlayerSprite(res.player_png);

ps.body.setPos(cp.v(x, y));

this.space.addBody(ps.body);

this.space.addShape(ps.shape);

this.addChild(ps,40);

動きの付け方

// 衝撃波を与える場合

var body:cp.Body;

var forceX = 0,forceY = 100;

body.applyImpulse(cp.v(forceX, forceY), cc.p(0, 0)); //

//直接ベクトルを指定する場合

var body2:cp.Body;

body2.setVel(cp.v(forceX, forceY));

動きの違い

衝撃波を与える場合•力の向きが合成される•上昇中に上向きの力を与えると加速する•下降中に上向きの力を与えると相殺される

直接ベクトルを指定する場合•力の向きは合成されない•急制動がかかる感じ

3機種を用意

ノーマル• 衝撃波を与える• 機体重量標準• スピード標準• 上昇力標準

軽戦闘機• ベクトルを与える• 機体重量0.9倍• スピード1.1倍• 上昇力0.9倍

重戦闘機• 衝撃波を与える• 機体重量1.5倍• スピード1.25倍• 上昇力1.5倍

デモ

http://games.yahoo.co.jp/play/casual/detail?gid=70004

バズ施策

ゲーム内バズ施策

• キャラゲーにする

• 初見殺し

• 6キャラを用意

• 特典画像

• 煽りテキストの種類を増やす

ゲーム外バズ施策

• キャラ同士で競い合う要素• 合計点の最も高いキャラを☆5にするキャンペーン

• 初全クリ者に特典

• Twitterにゲーム画像を投稿

Twitterにゲーム画像を投稿

• Twitterアプリを作成• RAW画像かbase64エンコードした画像を送りつければ良い

• Cocos2d-JSはCANVASに画面を書き出しているため、canvas.toDataURL()でbase64エンコードした画像が得られる

墜落時のスナップショットが欲しい// 画面全体をキャプチャ

var ss = cc.RenderTexture.create(640, 960);

ss.begin();

if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) {

this.setScale(1, -1);

}

this.visit();

if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) {

this.setScale(1, 1);

}

ss.end();

// キャプチャの一部を取り出し

var ss_s = new cc.Sprite(ss.sprite.texture, cc.rect(100, 100, 320, 240));

画面を書き出し

var canvas = <HTMLCanvasElement> document.getElementById('gameCanvas');

canvas.toDataURL('image/jpeg',0.8); // JPEG書き出しを試みる

まとめ

ミニゲームキャンペーン効果

• 公開からミニゲームキャンペーン終了までの3週間で42,000PV

• 話題なうに一瞬載った

• それまで事前登録が一日二桁だったのが三桁に

• 製作期間5日からすればまぁまぁ？

ミニゲームを作ってみての所感

• 時間がない中ちゃちゃっと作るにはCocos2d-JSは良い

• Flappy BirdとかRETRYのようなゲームを作るなら物理演算は考えなくていいから楽

• 物理演算は衝突判定を自分でやらなくて良いのでこれも楽

• バズはこれでもかというくらい練らないとバズらない

• これからはCocos Creatorで作るのが良いと思う