Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a ㊱タイルマップに挑戦
Similar a ㊱タイルマップに挑戦 (20)
Más de Nishida Kansuke
Más de Nishida Kansuke (20)
Último
Último (11)
㊱タイルマップに挑戦
- 2. はじめに • macのみで、Windowsの解説はしません。Windowsは、 Cygwinとかも入れないとダメみたい。 • cocos2d-xは、色々な言語が使えますがcppを想定して います。
- 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毎にビルド などを行います。
- 9. Tiledとは？ • マップチップ(タイル）を配置していく マップエディター • Mac,Windowsなどで実行が可能 • 日本語対応！ • Tiledで出来てもcocos2d-Xが対応してい ない機能もあるので注意！（１レイヤー １タイルセット等の制限がある） • 公式ホームページから無料でダウンロード – http://www.mapeditor.org/
- 15. つかってみよう③
- 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);
- 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(); }
- 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が付け られる。１から始まって、０は空白用 • マップチップ画像の左上から１，２，３， ４・・・と順番に値がふられる
- 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;
- 43. その他TIPS • BGレイヤーのGIDを判定してもいいけど、 collisionレイヤーのGIDなら０かそれ以外で 判定できるので簡単になる • 何もタイルを置いてない空のレイヤーをTiled で作ると、最初の表示の時にエラーになる • pBgLayer->setTileGID(5,ccp(cx, cy));で、 MAPの中身を変更できる。 • pBgLayer->removeTileAt( ccp(cx, cy) ); で、MAPの中身を削除できる。
- 47. おわり 主催（共同開催）： 株式会社 gooya http://www.gooya.co.jp/ メドレー株式会社 http://www.medley.co.jp/ 講師：西田 寛輔 (Tonosamart) http://www.facebook.com/tonosamart