狠狠撸

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

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

経緯
? 「編隊少女」の技術支援担当に
なった
? バズらせたいと相談を受けた
? 「ミニゲーム作ったら？」
? →何故か作ることになってた

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

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

颁辞肠辞蝉2诲-闯厂ならイケそう

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('gameCa
nvas');
canvas.toDataURL('image/jpeg',0.8);
// 闯笔贰骋书き出しを试みる

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

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

狠狠撸

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

Recommended

More Related Content

What's hot (20)

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

More from 驰补丑辞辞!デベロッパーネットワーク (20)

Recently uploaded (11)

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