1. cocos2d-x勉強会
㊱タイルマップに挑戦

2. はじめに
• macのみで、Windowsの解説はしません。Windowsは、
Cygwinとかも入れないとダメみたい。
• cocos2d-xは、色々な言語が使えますがcppを想定して
います。

3. GUIじゃないから面倒だよね＞＜
プロジェクトの作成

4. プロジェクトの作成①
• cocos2d-xでは、コマンドプロンプトからプロジェクト
を作成します。iPhone/Android両方で利用できるプロ
ジェクトが作成されるので便利です。
• LaunchPadを開いて、「その他」→「ターミナル」を
起動します。
• よくつかうので、Dockに追加しておくといいでしょう。

5. プロジェクトの作成②
• 「/Users/tonosamart/cocos/cocos2d-x-2.2.2/
tools/project-creator/create_project.py」を実行し
ます。
• まずは、フォルダを移動します。
– cd cocos/cocos2d-x-2.2.2/tools/project-creator
• 次に、プロジェクト名、パッケージ名、プログラム言語
をパラメータに指定してプログラムを実行します。
– ./create_project.py -project TileMap -package
com.tonosamart.tiled -language cpp
– 上手く行けば、cocos2d-x-2.2.2の下のprojectsの
下にプロジェクト名でフォルダが出来ます。

6. プロジェクトの作成③
tonosamart-mac-2: tonosamart$ cd cocos/cocos2d-x-2.2.2/tools/
project-creator
tonosamart-mac-2:project-creator tonosamart$ ./create_project.py project TileMap -package com.tonosamart.tiled -language cpp
proj.ios
: Done!
proj.android
: Done!
proj.win32
: Done!
proj.winrt
: Done!
proj.wp8
: Done!
proj.mac
: Done!
proj.blackberry
: Done!
proj.linux
: Done!
proj.marmalade
: Done!
New project has been created in this path: /Users/tonosamart/
cocos/cocos2d-x-2.2.2/projects/TileMap
Have Fun!

7. プロジェクトの作成④
• プロジェクトの中身は右図の様な
構成になっています。
• Classesフォルダにプログラムを
おいて、Resourcesフォルダに画
像などのリソースを配置します。
• proj.iosなどのフォルダがそれぞ
れのOSごとにできます。この
フォルダを用いてOS毎にビルド
などを行います。

8. まずはエディタ
Tiledをつかってみる

9. Tiledとは？
• マップチップ(タイル）を配置していく
マップエディター
• Mac,Windowsなどで実行が可能
• 日本語対応！
• Tiledで出来てもcocos2d-Xが対応してい
ない機能もあるので注意！（１レイヤー
１タイルセット等の制限がある）
• 公式ホームページから無料でダウンロード
– http://www.mapeditor.org/

10. インストール
• ダウンロードしてきたファイルを展開して
Tiled.appをApplicationsに移動する。

11. 用意するもの
• マップチップと呼ばれる画像を用意する。
正方形のマップチップを並べた画像を用意
する必要がある。
• 透過PNGが使えるので、PNGでつくれば
OK

12. つかってみよう①
• ファイル→新しいファイル

13. 保存
• とりあえずファイル名をつけて保存します。
タイルマップも同じフォルダに入れておき
ます。

14. つかってみよう②
• マップ→新しいタイルセット

15. つかってみよう③

16. つかってみよう④
• レイヤー名はプログラムで使うので半角英
数字に変更しよう

17. マップを書いてみよう①
• BGレイヤー
にマップを書
いてみよう！

18. 新しいレイヤーをつくろう
• Collisionレイヤーを作ってみよう

19. マップを書いてみよう②
• Collisionマッ
プに当たり判
定を書いてみ
よう（通れる
ところに赤を
置こう）

20. レイヤーを非表示にしよう
• 当たり判定のレイヤーは表示されていると
嫌なのでチェックを外して非表示にします。

21. 作ったマップを表示してみよう
Cocos2d-xで表示してみる

22. 参考
• TileMap
– http://www.cocos2d-x.org/wiki/TileMap

23. 画面サイズを指定
• ３２０ｘ４８０、retinaにする
AppDelegate.cpp
pDirector-­‐>setOpenGLView(pEGLView);
//
Resolu;onSize（visibleSize）の設定
CCEGLView::sharedOpenGLView()-­‐>setDesignResolu;onSize(480,
320,
kResolu;onShowAll);
//
スケール設定（re;na）
pDirector-­‐>setContentScaleFactor(2.0f);
//
turn
on
display
FPS
pDirector-­‐>setDisplayStats(true);

24. MAPを表示してみる
• 画面の左下にMAPの左下を合わせて描画
HelloWorldScene.cpp
// add the sprite as a child to this layer
this->addChild(pSprite, 0);
// マップ表示
cocos2d::CCTMXTiledMap* pBgMap =
CCTMXTiledMap::create("stage1.tmx");
pBgMap->setAnchorPoint(ccp(0, 0));
pBgMap->setPosition(ccp(0, 0));
this->addChild(pBgMap, 100, 100);

25. できた
• MAPがひょうじされた！

26. こまったことがおきることも
• ちらついたり、縦線がはいったりなんか
変な時がある（たまたまうまく行くとき
もある）

27. 表示を綺麗にする①
ccConfig.h
#ifndef
CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
#define
CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
1
#endif
AppDelegate.cpp
//
スケール設定（re;na）
pDirector-­‐>setContentScaleFactor(2.0f);
//
ちらつき防止
CCDirector::sharedDirector()-­‐>setProjec;on(kCCDirectorProjec;on2D);
CCDirector::sharedDirector()-­‐>setDepthTest(false);

28. 表示を綺麗にする②
HelloWorldScene.cpp
//
マップ表示
cocos2d::CCTMXTiledMap*
pBgMap
=
CCTMXTiledMap::create("stage1.tmx");
pBgMap-­‐>setAnchorPoint(ccp(0,
0));
pBgMap-­‐>setPosi;on(ccp(0,
0));
this-­‐>addChild(pBgMap,
0);
//
アンチエイリアスをOFFにする
CCArray*
pChildrenArray
=
pBgMap-­‐>getChildren();
CCSpriteBatchNode*
pChild
=
NULL;
CCObject*
pObject
=
NULL;
CCARRAY_FOREACH(pChildrenArray,
pObject){
pChild
=
(CCSpriteBatchNode*)pObject;
if(!pChild){
break;
}
pChild-­‐>getTexture()-­‐>setAn;AliasTexParameters();
}

29. できた
• MAPがきれいにひょうじされた！

30. スクロールに挑戦
Mapを動かしてみる

31. タッチイベントをひろう
• タッチイベントを拾って、タッチ位置を取
得する
• 指の移動に合わせてMAPのpositionを移
動させる

32. タッチイベント①
HelloWorld.h
//
implement
the
"sta;c
node()"
method
manually
CREATE_FUNC(HelloWorld);
//
スクロール用座標
cocos2d::CCPoint
mapPos;
cocos2d::CCPoint
startPos;
//
タッチイベント
bool
ccTouchBegan(cocos2d::CCTouch
*pTouch,
cocos2d::CCEvent
*pEvent);
void
ccTouchEnded(cocos2d::CCTouch
*pTouch,
cocos2d::CCEvent
*pEvent);
void
ccTouchMoved(cocos2d::CCTouch
*pTouch,
cocos2d::CCEvent
*pEvent);
void
ccTouchCancelled(cocos2d::CCTouch
*pTouch,
cocos2d::CCEvent
*pEvent);

33. タッチイベント②
HelloWorld.cpp
//
-­‐-­‐-­‐-­‐
タッチイベント
bool
HelloWorld::ccTouchBegan(CCTouch
*pTouch,
CCEvent
*pEvent){
cocos2d::CCTMXTiledMap*
pBgMap
=
dynamic_cast<CCTMXTiledMap*>(this-­‐
>getChildByTag(100));
this-­‐>mapPos
=
ccp(pBgMap-­‐>getPosi;onX(),
pBgMap-­‐>getPosi;onY());
CCPoint
pos
=
pTouch-­‐>getLoca;on();
this-­‐>startPos
=
ccp(pos.x,
pos.y);
return
true;
}

34. タッチイベント③
HelloWorld.cpp
void
HelloWorld::ccTouchEnded(CCTouch
*pTouch,
CCEvent
*pEvent){
cocos2d::CCTMXTiledMap*
pBgMap
=
dynamic_cast<CCTMXTiledMap*>(this-­‐
>getChildByTag(100));
CCPoint
pos
=
pTouch-­‐>getLoca;on();
pBgMap-­‐>setPosi;on(this-­‐>mapPos.x
+
pos.x
-­‐
this-­‐>startPos.x,
this-­‐>mapPos.y
+
pos.y
-­‐
this-­‐>startPos.y);
}

35. タッチイベント④
HelloWorld.cpp
void
HelloWorld::ccTouchMoved(CCTouch
*pTouch,
cocos2d::CCEvent
*pEvent){
cocos2d::CCTMXTiledMap*
pBgMap
=
dynamic_cast<CCTMXTiledMap*>(this-­‐
>getChildByTag(100));
CCPoint
pos
=
pTouch-­‐>getLoca;on();
pBgMap-­‐>setPosi;on(this-­‐>mapPos.x
+
pos.x
-­‐
this-­‐>startPos.x,
this-­‐>mapPos.y
+
pos.y
-­‐
this-­‐>startPos.y);
}
void
HelloWorld::ccTouchCancelled(CCTouch
*pTouch,
CCEvent
*pEvent){
}

36. タッチイベント⑤
HelloWorld.cpp
//
アンチエイリアスをOFFにする
:
//
タッチイベント有効
this-­‐>setTouchMode(kCCTouchesOneByOne);
this-­‐>setTouchEnabled(true);

37. できた
• MAPを移動できる！

38. Tiledの値
• 表示座標などは、CCSpriteと同じ
• 内部のMAPチップの座標は、左上が（０，
０）
• MAPチップにはGIDとよばれるIDが付け
られる。１から始まって、０は空白用
• マップチップ画像の左上から１，２，３，
４・・・と順番に値がふられる

39. タッチ位置の表示
• タッチした位置のマップ上の座標をもとめ
てGIDをログに出力する

40. GID取得①
HelloWorld.cpp
this-­‐>startPos
=
ccp(pos.x,
pos.y);
//
タッチした地点のMAP座標を計算
CCDirector*
pDirector
=
CCDirector::sharedDirector();
CCSize
;leSize
=
ccp(
pBgMap-­‐>getTileSize().width
/
pDirector-­‐>getContentScaleFactor(),
pBgMap-­‐>getTileSize().height
/
pDirector-­‐>getContentScaleFactor()
);
CCSize
mapSize
=
pBgMap-­‐>getMapSize();

41. GID取得②
HelloWorld.cpp
int
cx
=
(pos.x
-­‐
this-­‐>mapPos.x)
/
;leSize.width;
int
cy
=
((mapSize.height
*
;leSize.height)
-­‐
(pos.y
-­‐
this-­‐>mapPos.y))
/
;leSize.height;
if(cx
>=
0
&&
cx
<
mapSize.width
&&
cy
>=
0
&&
cy
<
mapSize.height){
CCTMXLayer*
pBgLayer
=
pBgMap-­‐>layerNamed("BG");
int
bgGID
=
pBgLayer-­‐>;leGIDAt(ccp(cx,
cy));
CCLog("MAP(%d,%d)=%d",
cx,
cy,
bgGID);
}
return
true;

42. できた
• あたいがひょうじされる！

43. その他TIPS
• BGレイヤーのGIDを判定してもいいけど、
collisionレイヤーのGIDなら０かそれ以外で
判定できるので簡単になる
• 何もタイルを置いてない空のレイヤーをTiled
で作ると、最初の表示の時にエラーになる
• pBgLayer->setTileGID(5,ccp(cx, cy));で、
MAPの中身を変更できる。
• pBgLayer->removeTileAt( ccp(cx, cy) );
で、MAPの中身を削除できる。

44. まとめ
• 簡単なTiledの作り方がわかった！

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

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

47. おわり
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/
講師：西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart