Successfully reported this slideshow.
Your SlideShare is downloading. ×

㊱タイルマップに挑戦

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 47 Ad
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Advertisement

Similar to ㊱タイルマップに挑戦 (20)

More from Nishida Kansuke (20)

Advertisement

Recently uploaded (20)

㊱タイルマップに挑戦

  1. 1. cocos2d-x勉強会 ㊱タイルマップに挑戦
  2. 2. はじめに •  macのみで、Windowsの解説はしません。Windowsは、 Cygwinとかも入れないとダメみたい。 •  cocos2d-xは、色々な言語が使えますがcppを想定して います。
  3. 3. GUIじゃないから面倒だよね>< プロジェクトの作成
  4. 4. プロジェクトの作成① •  cocos2d-xでは、コマンドプロンプトからプロジェクト を作成します。iPhone/Android両方で利用できるプロ ジェクトが作成されるので便利です。 •  LaunchPadを開いて、「その他」→「ターミナル」を 起動します。 •  よくつかうので、Dockに追加しておくといいでしょう。
  5. 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. 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. 7. プロジェクトの作成④ •  プロジェクトの中身は右図の様な 構成になっています。 •  Classesフォルダにプログラムを おいて、Resourcesフォルダに画 像などのリソースを配置します。 •  proj.iosなどのフォルダがそれぞ れのOSごとにできます。この フォルダを用いてOS毎にビルド などを行います。
  8. 8. まずはエディタ Tiledをつかってみる
  9. 9. Tiledとは? •  マップチップ(タイル)を配置していく マップエディター •  Mac,Windowsなどで実行が可能 •  日本語対応! •  Tiledで出来てもcocos2d-Xが対応してい ない機能もあるので注意!(1レイヤー 1タイルセット等の制限がある) •  公式ホームページから無料でダウンロード –  http://www.mapeditor.org/
  10. 10. インストール •  ダウンロードしてきたファイルを展開して Tiled.appをApplicationsに移動する。
  11. 11. 用意するもの •  マップチップと呼ばれる画像を用意する。 正方形のマップチップを並べた画像を用意 する必要がある。 •  透過PNGが使えるので、PNGでつくれば OK
  12. 12. つかってみよう① •  ファイル→新しいファイル
  13. 13. 保存 •  とりあえずファイル名をつけて保存します。 タイルマップも同じフォルダに入れておき ます。
  14. 14. つかってみよう② •  マップ→新しいタイルセット
  15. 15. つかってみよう③
  16. 16. つかってみよう④ •  レイヤー名はプログラムで使うので半角英 数字に変更しよう
  17. 17. マップを書いてみよう① •  BGレイヤー にマップを書 いてみよう!
  18. 18. 新しいレイヤーをつくろう •  Collisionレイヤーを作ってみよう
  19. 19. マップを書いてみよう② •  Collisionマッ プに当たり判 定を書いてみ よう(通れる ところに赤を 置こう)
  20. 20. レイヤーを非表示にしよう •  当たり判定のレイヤーは表示されていると 嫌なのでチェックを外して非表示にします。
  21. 21. 作ったマップを表示してみよう Cocos2d-xで表示してみる
  22. 22. 参考 •  TileMap –  http://www.cocos2d-x.org/wiki/TileMap
  23. 23. 画面サイズを指定 •  320x480、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. 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. 25. できた •  MAPがひょうじされた!
  26. 26. こまったことがおきることも •  ちらついたり、縦線がはいったりなんか 変な時がある(たまたまうまく行くとき もある)
  27. 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. 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. 29. できた •  MAPがきれいにひょうじされた!
  30. 30. スクロールに挑戦 Mapを動かしてみる
  31. 31. タッチイベントをひろう •  タッチイベントを拾って、タッチ位置を取 得する •  指の移動に合わせてMAPのpositionを移 動させる
  32. 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. 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. 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. 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. 36. タッチイベント⑤ HelloWorld.cpp    //  アンチエイリアスをOFFにする   :     //  タッチイベント有効 this-­‐>setTouchMode(kCCTouchesOneByOne);          this-­‐>setTouchEnabled(true);  
  37. 37. できた •  MAPを移動できる!
  38. 38. Tiledの値 •  表示座標などは、CCSpriteと同じ •  内部のMAPチップの座標は、左上が(0, 0) •  MAPチップにはGIDとよばれるIDが付け られる。1から始まって、0は空白用 •  マップチップ画像の左上から1,2,3, 4・・・と順番に値がふられる
  39. 39. タッチ位置の表示 •  タッチした位置のマップ上の座標をもとめ てGIDをログに出力する
  40. 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. 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. 42. できた •  あたいがひょうじされる!
  43. 43. その他TIPS •  BGレイヤーのGIDを判定してもいいけど、 collisionレイヤーのGIDなら0かそれ以外で 判定できるので簡単になる •  何もタイルを置いてない空のレイヤーをTiled で作ると、最初の表示の時にエラーになる •  pBgLayer->setTileGID(5,ccp(cx, cy));で、 MAPの中身を変更できる。 •  pBgLayer->removeTileAt( ccp(cx, cy) ); で、MAPの中身を削除できる。
  44. 44. まとめ •  簡単なTiledの作り方がわかった!
  45. 45. とのさまラボ! •  勉強会に参加した人どうしのコミニュティがほしい! 勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! •  毎週木曜日は、もくもく勉強会も 開催しています! ぜひ「いいね!」をお願いします! hnps://www.facebook.com/TonosamaLabo  
  46. 46. 「もくもく」勉強会 •  毎週木曜日に、「もくもく」勉強会やってます! •  場所は新宿!facebookページからお申し込みください! hnps://www.facebook.com/TonosamaLabo  
  47. 47. おわり 主催(共同開催): 株式会社 gooya
 http://www.gooya.co.jp/ メドレー株式会社
 http://www.medley.co.jp/ 講師:西田 寛輔 (Tonosamart)
 http://www.facebook.com/tonosamart

×