Cocos2d-JSと物理演算で作る横スクロールアクションゲーム #scripty06

Cocos2d-JSと物理演算で作る 横スクロールアクションゲーム PSCゲーム本部制作: 加藤 隆一郎

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

• 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

• 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('gameCa nvas'); canvas.toDataURL('image/jpeg',0.8); // JPEG書き出しを試みる

まとめ

ミニゲームキャンペーン効果 • 公開からミニゲームキャンペーン終 了までの3週間で42,000PV • 話題なうに一瞬載った • それまで事前登録が一日二桁だった のが三桁に • 製作期間5日からすればまぁまぁ？

ミニゲームを作ってみての所感 • • • • • 時間がない中ちゃちゃっと作るにはCocos2d-JS は良い Flappy BirdとかRETRYのようなゲームを作るな ら物理演算は考えなくていいから楽 物理演算は衝突判定を自分でやらなくて良いの でこれも楽 バズはこれでもかというくらい練らないとバズら ない これからはCocos Creatorで作るのが良いと思う