cocos2dを使った
iPhoneゲーム開発の手法!
-2/5(火) GMO Yours アプリ開発勉強会-
ハイパーメディアクリエイター
西田寛輔

ゲームをつくってみたい！
でも、なんだか大変そう・・・

ここがたいへん！
• キャラクターを表示するのが大変
• アニメーションが大変
• 処理速度を早くするのが大変
• 画面遷移が大変
• 音楽流すのが大変
↓
• ゲームのアルゴリズムやデータ作成を作りた
いのに、裏側の仕組みを作るのがたいへんす
ぎる！

ゲームエンジンをつかおう！
• ゲームを作るのに必要な機能がそろってい
る！（しかも高速！）
• ゲームのアルゴリズムや演出など作りこみ
たい部分に集中して開発ができる！

cocos2d
• cocos2d-iphone-2.0
– http://www.cocos2d-iphone.org/

cocos2dについて
• オープンソース＋無料で商用利用可能
• ２Dに特化
• 物理エンジン搭載（box2d,chipmunk）
• 効果音やBGMの再生も可能
• OpenGL利用で高速描画
• Objective-Cで書かれている
• 採用実績が凄い！AppStoreに2500位上
のアプリがある！

デメリット
• iPhone標準のUIが使えない。（がんばれ
ば使えるかも？）
• Objective-Cで記述するため他機種への移
植がたいへん＞＜（移植前提の場合は、
クロスプラットフォームのcocos2d-Xが
使うといいかも！でも言語は違う）

こまったときは？
• こまったときは、プログラミングガイド
を見よう！
– http://www.cocos2d-iphone.org/wiki/
doku.php/prog_guide:index

cocos2dのいいところ①
キャラクター表示が素敵！

スプライト
• スプライト(sprite)：一般的には、キャラ
クターを表示する技術。
• スプライトエンジン：スプライトを簡単
に管理、表示できる仕組み
↓
• 大量のキャラクターを表示、管理するの
に適した仕組みが用意されている！

スプライトシート
• １枚の画像ファイルに１枚の画像を保存す
るのではなく、１枚の画像に複数画像を
保存する技術
• ファイルアクセスが減るので読み込み効率
がよくなる！
• 画像をまとめるので、メモリ上での無駄が
減る！
• １回の描画で複数のキャラクターを書け
るので描画速度が上がる！

関連する機能
• CCSprite
– 回転、拡大、縮小、傾斜、透過
• CCSpriteBatchNode
– スプライトシートを利用した表示
• CCAnimation
– ぱらぱら漫画のような、画像切り替え
• CCAction
– キャラクターに任意の動きを設定可能
– イベント処理
（CCSendMessage、CCCallFunc）

便利ツール紹介①
TexturePacker

TexturePacker
• スプライトシートが簡単に作れる！
• 対応フォーマットが多い
• 圧縮や原色、-hd画像の自動作成もしてく
れる！
– http://www.codeandweb.com/
texturepacker

ここが便利！
• キャラクターの画像が入っているフォルダを指
定すると、自動的にスプライトシートにまとめ
てくれる！
• 画像ファイルは、retainaサイズのものを用意
（ファイル名に-hdは付けない）

ファイルを書き出す
• スプライトシート（.pvr.ccz）と、情報の
はいったファイル（.plist）がすぐ作れ
る！（retaina用の-hdも一緒にでき
る！）

メモ
• cocos2dではretaina用の画像に-hdをつ
けます！（@2xじゃないので注意！）
※設定で変更可能です。

cocos2dのいいところ②
画面遷移が素敵！

Scene
• タイトル画面やゲーム中の画面など、
Sceneという単位で管理ができる！

エフェクト
• Sceneの切り替えの時に、エフェクトを
つけることが出来る！

関連する機能
• CCScene
– シーン
• CCTransition
– シーン切り替えのエフェクト

cocos2dのいいところ③
レイヤー構造が素敵！

Sceneの中にはLayerをおける
Layerは、任意の順番で
重ね合わせることができ
る！

Layerは重ね合わせが可能
引用：http://www.cocos2d-­‐iphone.org/wiki/doku.php/prog_guide:basic_concepts

Layerの中にはいろいろおける
CCSprite、CCMenu、CCLabelBMFont、
CCSpriteBatchNode
などを置くことができる

LayerとSpriteBatchNodeと
Sprite
• Layer
• BatchNode（手裏剣系）
• Sprite（手裏剣１）
• Sprite（手裏剣２）
• Sprite（手裏剣３）
• BatchNode（キャラクタ系）
• Sprite（忍者）
レイヤーの中に、バッチノードをおいて、そ
の中に、スプライトを置く
バッチノードの中には、その中に含まれてい
るスプライトしかおけない

関連する機能
• CCLayer
– レイヤー
• CCLabelBMFont
– ラベル
• CCMenu
– メニュー表示（ボタン表示）

便利ツール紹介②
CocosBuilder

CocosBuilder
• Sceneにパーツを配置して視覚的に画面が
作れる！
• 補助ツールと言うよりは、オーサリング
ツールという感じ。
http://cocosbuilder.com/

cocos2dのいいところ④
パーティクルが素敵！

パーティクルって？
• 小さい粒（パーティクル）を組み合わせて
色々な表現をするやつ！
• 炎、爆発、キラキラ、ワープなどの表現を
簡単にすることができる！

多彩な表現
• たくさんのパラメーターを設定することで、
多彩な表現が可能！
出現率、開始時の色、重力、
大きさ、速度などを組み合わせて
多彩な表現が可能！

くみこみれい
CCParticleSystem* system = [CCParticleSystemQuad
particleWithFile:@"star.plist"];
system.position = ccp(x, y);
[self addChild: system z:20];

関連する機能
• CCParticleSystem
– パーティクル

便利ツール紹介③
ParticleDesigner

ParticleDesigner
• パーティクルを簡単にデザインできる！
– http://particledesigner.71squared.com/

retaina対応
• save asの時に、以下の設定で書きだそ
う！
• -hd画像を別に用意しておこう！

cocos2dのいいところ⑤
マップ表示が素敵！

マップが簡単につかえる！
• 2dや擬似3dのマップが簡単に使える！
• レイヤーを重ねたり、オブジェクトの配置
もできる！

くみこみれい
CCTMXTiledMap *tileMap = [CCTMXTiledMap
tiledMapWithTMXFile:@"title.tmx"];
[self addChild:tileMap z:kTagBgNode];

関連する機能
• CCTMXTiledMap
– マップ

便利ツール紹介④
Tiled Map Editor

Tiled Map Editor
• マップエディタ！
• レイヤーを重ねたり、オブジェクトを配置
できるので便利！
– http://www.mapeditor.org/

retaina対応
• 普通に書きだそう！
• .tmxファイルをコピーして、-hd.tmxにリ
ネームしよう！
• -hd画像を別に用意しておこう！
• テキストエディタでひらいて、書き換えよ
う！
• http://www.cocos2d-iphone.org/wiki/
doku.php/prog_guide
%3ahow_to_develop_retinadisplay_game
s_in_cocos2d

かきかえれい
<map version="1.0" orientation="orthogonal" width="10" height="15"
tilewidth="32" tileheight="32">
<tileset firstgid="1" name="mapChips" tilewidth="32"
tileheight="32">
<image source="mapChips.png" width="1024" height="1024"/>
↓
<map version="1.0" orientation="orthogonal" width="10" height="15"
tilewidth="64" tileheight="64">
<tileset firstgid="1" name="mapChips" tilewidth="64"
tileheight="64">
<image source="mapChips-hd.png" width="2048" height="2048"/>

cocos2dのいいところ⑥
物理エンジン搭載が素敵！

物理エンジン！
• メジャーな物理エンジン、box2dと
chipmunkがつかえます。

テンプレートが選べる！

便利ツール紹介⑤
PhysicsEditor

PhysicsEditor
• 画像からbox2dなどで使う物理モデルを
つくってくれる！
• 凸を組み合わせて、凹な形のやつも作って
くれる！
– http://www.codeandweb.com/
physicseditor

キャラクターを追加
• AddSpritesで、キャラクターを指定
• 画像ファイルは、retainaサイズのものを
用意（ファイル名に-hdは付けない）

設定を変更①
• ExpoterをBox2D generic(PLIST)に変更
• PTM-Ratioを64に変更（retaina画像を元
に設定しているので、プログラムで設定し
たPTM-Ratioの２倍に設定する）

PTM-Ratioって？
• Box2Dの物理演算をするにあたって、何
pxを1mにするかの単位
• 例えば、PTM-Ratioが32だったら、
32pxが1mになる。

シェイプの指定
• Shape Tracerを使って、各キャラごとに
シェイプを設定しよう！

基準点の指定
• Relativeに0.5を設定して、基準点を真ん
中にしよう！

ファイルを書き出す
• Publishでファイルが書きだされます

キャラクターを表示しよう！
• ファイルを追加しよう

読み込み用クラスを追加
• PhysicsEditorに付属しているクラスを追
加しよう！
• サンプルもついてくるから真似しよう！

くみこみれい①
parent = [self getChildByTag:kTagCharsNode];
sprite = [PhysicsSprite
spriteWithSpriteFrameName:@ chr.png ];
[parent addChild:sprite];
sprite.position = ccp(100, 100);

くみこみれい②
// Define the dynamic body.
//Set up a 1m squared box in the physics world
bodyDef.type = b2_dynamicBody;
bodyDef.position.Set(100/PTM_RATIO, 100/PTM_RATIO);
body = world->CreateBody(&bodyDef);
// add the fixture definitions to the body
[[GB2ShapeCache sharedShapeCache] addFixturesToBody:body
forShapeName:name];
[sprite setAnchorPoint:[[GB2ShapeCache sharedShapeCache]
anchorPointForShape:name]];
[sprite setPhysicsBody:body];

関連する機能
• PhysicsSprite
– 物理演算用スプライト
• GB2ShapeCache
– キャラクターのシェイプ

cocos2dのいいところ⑦
音を鳴らすのが簡単で素敵！

簡単に音を鳴らせる！
• SimpleAudioEngineを使って簡単にBGM
のループ再生および、効果音の再生ができ
る！
• 細かいことは出来ないので、例えばイント
ロ→メロディループとかは難しい。

関連機能
• SimpleAudioEngine
– 効果音、BGMを簡単に再生

まとめ
• cocos2d便利！いろんな機能がある！
• 対応ツールがたくさんある！
↓
• cocos2d 1.0.の資料がおおいけど、参考
に！
– http://tonosamart.com/blog/

とのさまラボ！
• 勉強会に参加した人どうしのコミニュティがほしい！
勉強会の開催日時の告知がほしい！
という意見をみなさまからいただいたので、
コミニュティを作成しました！
• 毎週木曜日は、もくもく勉強会も
開催しています！
ぜひ「いいね！」をお願いします！
https://www.facebook.com/TonosamaLabo

「もくもく」勉強会
• 毎週木曜日に、「もくもく」勉強会やってます！
• 場所は新宿！facebookページからお申し込みください！
https://www.facebook.com/TonosamaLabo