Your SlideShare is downloading. ×
  • Like
  • Save
㉞cocos2d-xの開発環境をインストールしてみよう
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

㉞cocos2d-xの開発環境をインストールしてみよう

  • 6,641 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,641
On SlideShare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
0
Comments
1
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. cocos2d-x勉強会 ㉞cocos2d-­‐xの開発環境を   インストールしてみよう
  • 2. はじめに •  cocos2d-xで一番面倒な初期設定を解説します。 •  macのみで、Windowsの解説はしません。Windowsは、 Cygwinとかも入れないとダメみたい。 •  既にXCODEインストール済みの人向けの資料です。 •  cocos2d-xは、色々な言語が使えますがcppを想定して います。
  • 3. mac版だけです・・・。Windowsの人は頑張ってください>< 開発環境のインストール
  • 4. cocos2d-xのインストール •  cocos2d-xのダウンロード –  http://www.cocos2d-x.org/download ※v2.2をダウンロードして下さい ※インストールソフトはついてないので、解凍して フォルダを任意の場所に置きます ※とりあえず、このドキュメントではユーザーフォル ダの下にcocosというフォルダを作ってその中にさら にフォルダを作って格納します。  
  • 5. Androidの開発環境構築① •  ADT(SDK)のダウンロード –  http://developer.android.com/sdk/index.html ※インストールソフトはついてないので、解凍して フォルダを任意の場所に置きます ※とりあえず、このドキュメントではユーザーフォル ダの下にcocosというフォルダを作ってその中にさら にフォルダを作って格納します。  
  • 6. Androidの開発環境構築② •  NDKのダウンロード –  http://developer.android.com/tools/sdk/ndk/ ※インストールソフトはついてないので、解凍して フォルダを任意の場所に置きます ※とりあえず、このドキュメントではユーザーフォル ダの下にcocosというフォルダを作ってその中にさら にフォルダを作って格納します。  
  • 7. Androidの開発環境構築③ •  展開したフォルダのEclipse.appを実行します。 •  javaがインストールされていない場合はダイアログが出るのでイン ストールして下さい。 •  その後、WorkSpaceの場所を聞いてくるので「OK」を押してくだ さい。
  • 8. Androidの開発環境構築④ •  画面上部のメニューから、「ADT」→「環境設定」を選択 •  ダイアログが開くので、「General」→「Workspace」 →「Linked Resources」を選択
  • 9. Androidの開発環境構築⑤ •  「New」を押すと、ダイアログが開くので、Nameに 「COCOS2DX」、Locationにcocos2d-xをインストー ルしたフォルダを指定してOKを押す ※Nameを間違えると転送しても動かないので注意
  • 10. Androidの開発環境構築⑥ •  「C/C++」→「Build」→「Environment」を選択 •  「Add」ボタンを押す •  ダイアログが出るので、Nameに「NDK_ROOT」、Valueに「/ Users/tonosamart/cocos/android-ndk-r9」などNDKを入れた フォルダを入力する(ボタンを押しても入力できないから手で打 つ)(Applyを最後におそう!) ※Nameを間違えると転送しても動かないので注意
  • 11. Androidの開発環境構築⑦ •  「C/C++」→「Code Analysis」を選択 •  「Syntax and Semantic Errors」のチェックを外す
  • 12. iPhoneの開発環境構築 •  XCODEがはいっていればOK(特別な設定は不要)
  • 13. GUIじゃないから面倒だよね>< プロジェクトの作成
  • 14. プロジェクトの作成① •  cocos2d-xでは、コマンドプロンプトからプロジェクト を作成します。iPhone/Android両方で利用できるプロ ジェクトが作成されるので便利です。 •  LaunchPadを開いて、「その他」→「ターミナル」を 起動します。 •  よくつかうので、Dockに追加しておくといいでしょう。
  • 15. プロジェクトの作成② •  「/Users/tonosamart/cocos/cocos2d-x-2.2/tools/ project-creator/create_project.py」を実行します。 •  まずは、フォルダを移動します。 –  cd cocos/cocos2d-x-2.2/tools/project-creator •  次に、プロジェクト名、パッケージ名、プログラム言語 をパラメータに指定してプログラムを実行します。 –  ./create_project.py -project Test -package com.tonosamart.test -language cpp •  上手く行けば、cocos2d-x-2.2の下のprojectsの下にプ ロジェクト名でフォルダが出来ます。
  • 16. プロジェクトの作成③ tonosamart-mac-2:project-creator tonosamart$ ./create_project.py project Test -package com.tonosamart.test -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/projects/Test Have Fun! tonosamart-mac-2:project-creator tonosamart$
  • 17. プロジェクトの作成④ •  プロジェクトの中身は右図の様な 構成になっています。 •  Classesフォルダにプログラムを おいて、Resourcesフォルダに画 像などのリソースを配置します。 •  proj.iosなどのフォルダがそれぞ れのOSごとにできます。この フォルダを用いてOS毎にビルド などを行います。
  • 18. まずはAndroidから Androidで動かす
  • 19. Androidで動かす① •  「File」→「New」→「Project」を選択 •  ダイアログが出るので「Android」→「Android Project from Existing Code」を選んで「Next」
  • 20. Androidで動かす② •  ダイアログが出るので、Root Directoryで「/Users/ tonosamart/cocos/cocos2d-x-2.2/cocos2dx/ platform/android/java」を選択 •  Projectsに表示されたら「Finish」を押す ※うまくいくと、 Package Explorerに、libcocos2dxが追加される
  • 21. Androidで動かす③ •  もう一回同じ手順で、「/Users/tonosamart/cocos/ cocos2d-x-2.2/projects/Test/proj.android」を追加 する ※あとは、通常のAndroid同様、実機などで 実行できます。 ※Eclipse外で変更を加えた場合は、「File」 →「Refresh」を忘れずに行って下さい。 ※ブレイクポイントは使えません。不便><
  • 22. Androidで動かす④ •  エミュレータで動かす場合は、 「Use Host GPU」にチェッ クを入れる必要があります。
  • 23. シュミレーターが速いのがうれしい iPhoneで動かす
  • 24. iPhoneで動かす① •  proj.iosに.xcodeprojがあるのでxcodeで開けばOK
  • 25. iPhoneで動かす② •  下記のwarningは、Perform Changesで設定を変更
  • 26. iPhoneで動かす③ •  あとは通常のプロジェクト同様、エミュレータや実機で 動かせます! ※Androidと違いブレイクポイントが使えます
  • 27. Androidがめんどくさい>< プロジェクトへのファイル追加
  • 28. プロジェクトへのファイル追加 •  プロジェクトにファイルを追加するには、手順を追う必 要があります。 •  プログラムは、Classesフォルダ、画像はResourcesに おく必要があるからです。 •  Xcodeで配置した後に、Androidで読み込ませる方法が 楽なのでそれを説明します!
  • 29. Classの追加(iPhone)① •  メニューからFile→New→Fileを選びます。 •  C and C++で、C++ Classを選んで 「Next」を押します。
  • 30. Classの追加(iPhone)② •  名前をTitleScene.cppにして、保存先をClassesにして Create
  • 31. Classの追加(Android) •  jniの中にあるAndroid.mkを開きます。 •  LOCAL_SRC_FILESに、TitleScene.cpp を追加します。
  • 32. Resourceの追加(iPhone)① •  画像や音楽などをXcodeのResourcesフォ ルダにドラック&ドロップします。 •  ダイアログが出るので、図のようになってい るのを確認してFinishを押します。
  • 33. Resourcesの追加(iPhone)② •  Resourcesに追加されていることを確認します。 •  フォルダを追加した場合青くなります。 •  念のため右クリックメニューの「Show in Finder」で、Resourcesフォルダの中に物理的に 格納されていることを確認して下さい。
  • 34. Resourceの追加(Android) •  Project→Cleanをすると、assetsの中に ファイルがコピーされます。(このとき、毎 回assetsフォルダの中身は削除されるので注 意して下さい。)
  • 35. とりあえず簡単なものを キャラクターを表示してみる
  • 36. キャラクターを表示してみる •  TitleSceneを改造していきましょう。とりあえず、単純 なひな形のようなものを作ります。 •  画像はとりあえず、images/iPhoneの中に入っているや つを使います。 •  もともとプロジェクトを作った時に入っている HelloWorldSceneを参考にしながら作りましょう!
  • 37. AppDelegate.cpp pDirector->setOpenGLView(pEGLView); // ファイルパスを設定 std::vector<std::string> searchPaths; searchPaths.push_back("images"); CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths); std::vector<std::string> resDirOrders; resDirOrders.push_back("iPhone"); CCFileUtils::sharedFileUtils()>setSearchResolutionsOrder(resDirOrders); // turn on display FPS
  • 38. TitleScene.h #ifndef __Test__TitleScene__ #define __Test__TitleScene__ #include "cocos2d.h" class TitleScene : public cocos2d::CCLayer{ public: virtual bool init(); static cocos2d::CCScene* scene(); CREATE_FUNC(TitleScene); }; #endif /* defined(__Test__TitleScene__) */
  • 39. TitleScene.cpp① #include "TitleScene.h" USING_NS_CC; CCScene* TitleScene::scene(){ CCScene *scene = CCScene::create(); TitleScene *layer = TitleScene::create(); scene->addChild(layer); return scene; } bool TitleScene::init(){ if(!CCLayer::init()){ return false; } CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize(); CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
  • 40. TitleScene.cpp② CCSprite* pBgSprite = CCSprite::create("bg.png"); pBgSprite->setPosition(ccp(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y)); this->addChild(pBgSprite, 0); CCSprite* pChrSprite1 = CCSprite::create("chr.png"); pChrSprite1->setPosition(ccp(0 + origin.x, 0 + origin.y)); this->addChild(pChrSprite1, 1); CCSprite* pChrSprite2 = CCSprite::create("chr.png"); pChrSprite2->setPosition(ccp(480 + origin.x, 320 + origin.y)); this->addChild(pChrSprite2, 2); return true; }
  • 41. TitleSceneを呼び出す •  AppDelegate.cppのHelloWorldSceneを TitleSceneに置き換えます。 •  これで、TitleSceneが起動時に呼ばれる ようになります。
  • 42. できた! •  こんなかんじ
  • 43. かいせつ •  CCDirector::sharedDirector()->getVisibleSize()で画 面のサイズが取得できます。 •  CCPoint origin = CCDirector::sharedDirector()>getVisibleOrigin()は、あとで説明するけど、 kResolutionNoBorderを使った時の補正用の差分が取 得できます。
  • 44. とりあえず楽な方法で実装 複数画面サイズへの対応
  • 45. 複数画面サイズへの対応① •  cocos2d-xで作成したアプリは、 iPhone,Android,iPadなど複数の端末で動作で きます。 •  端末ごとに画面サイズがちがうため、対応が必 要です。cocos2d-xではそのための方法が用意 されています。
  • 46. 複数画面サイズへの対応② •  複数画面サイズへの対応を簡単にするために、 setDesignResolutionSizeという命令が用意されて います。 •  実際の画面サイズとは別に、cocos2d-x上で基準と なる画面サイズを決めることが出来ます。 •  CCEGLViewProtocol::setDesignResolutionSize( float width, float height, ResolutionPolicy resolutionPolicy) •  width,heightには基準となる画面サイズを、 resolutionPolicyには、拡大縮小のアルゴリズムを 指定します。
  • 47. 複数画面サイズへの対応③ •  画面サイズごとに、リソースを読み込むフォルダを 変更します。 •  変更の基準ですが、端末判定(iPhone/iPad)や、 画像のサイズ(WidthまたはHeight)で判定すると いいでしょう。 •  また、その時に基本となる解像度とのスケールの違 いを計算して設定します。これにより、retaina画像 を利用できます。 •  今回のサンプルでは、簡単にするために3種類の解 像度にしましたが、AndroidやiPadの実機に合わせ て画像を用意しるといいでしょう。
  • 48. AppDelegate.ccp① bool AppDelegate::applicationDidFinishLaunching() { // initialize director CCDirector* pDirector = CCDirector::sharedDirector(); CCEGLView* pEGLView = CCEGLView::sharedOpenGLView(); pDirector->setOpenGLView(pEGLView); // ResolutionSize(visibleSize)の設定 // CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionExactFit); // CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionNoBorder); CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionShowAll); // CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionFixedHeight); // CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionFixedWidth); // CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionUnKnown);
  • 49. AppDelegate.ccp② // ファイルパスと scale を設定 TargetPlatform platform = CCApplication::sharedApplication()->getTargetPlatform(); CCSize frameSize = CCEGLView::sharedOpenGLView()->getFrameSize(); std::vector<std::string> searchPaths; searchPaths.push_back("images"); CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths); std::vector<std::string> resDirOrders; if (platform == kTargetIphone ¦¦ platform == kTargetIpad){ if (frameSize.height >= 1280){ resDirOrders.push_back("iPad_hd"); pDirector->setContentScaleFactor(4.0f); }else if (frameSize.height >= 640){ resDirOrders.push_back("iPhone_hd"); pDirector->setContentScaleFactor(2.0f); }else{ resDirOrders.push_back("iPhone"); }
  • 50. AppDelegate.ccp③ }else{ if (frameSize.height >= 1280){ resDirOrders.push_back("Android_L"); pDirector->setContentScaleFactor(4.0f); }else if (frameSize.height >= 640){ resDirOrders.push_back("Android_M"); pDirector->setContentScaleFactor(2.0f); }else{ resDirOrders.push_back("Android_S"); } } CCFileUtils::sharedFileUtils()>setSearchResolutionsOrder(resDirOrders);
  • 51. AppDelegate.ccp④ // turn on display FPS pDirector->setDisplayStats(true); // set FPS. the default value is 1.0/60 if you don't call this pDirector->setAnimationInterval(1.0 / 60); // create a scene. it's an autorelease object CCScene *pScene = TitleScene::scene(); // run pDirector->runWithScene(pScene); return true; }
  • 52. TitleScene.cpp① bool TitleScene::init(){ if(!CCLayer::init()){ return false; } CCSize frameSize = CCEGLView::sharedOpenGLView()>getFrameSize(); CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize(); CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
  • 53. TitleScene.cpp② CCString *pLabelTxt = CCString::createWithFormat( "F(%d,%d) V(%d,%d) O(%d,%d)", (int)frameSize.width, (int)frameSize.height, (int)visibleSize.width, (int)visibleSize.height, (int)origin.x, (int)origin.y ); CCLabelTTF* pLabel = CCLabelTTF::create(pLabelTxt->getCString() , "Arial", 24); pLabel->setPosition(ccp(origin.x + visibleSize.width/2, origin.y + pLabel->getContentSize().height)); this->addChild(pLabel, 1);
  • 54. TitleScene.cpp③ CCSprite* pBgSprite = CCSprite::create("bg.png"); pBgSprite->setPosition(ccp(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y)); this->addChild(pBgSprite, 0); CCSprite* pChrSprite1 = CCSprite::create("chr.png"); pChrSprite1->setPosition(ccp(0 + origin.x, 0 + origin.y)); this->addChild(pChrSprite1, 1); CCSprite* pChrSprite2 = CCSprite::create("chr.png"); pChrSprite2->setPosition(ccp(480 + origin.x, 320 + origin.y)); this->addChild(pChrSprite2, 2); return true; }
  • 55. できた! •  こんなかんじ •  比率をまもって拡大する ため、余分な部分は黒く なる(クリッピングされ るので、はみ出したりは しない)
  • 56. やってみよう •  resolutionPolicyを色々変更してみよう! •  使いやすいのは、kResolutionShowAllで、画面全 体を描画します。基本的に、縦横比が変わらない系 の方がやりやすいと思います。ただ、黒い部分がで きるのでゲームによってはストレスになるかも •  kResolutionNoBorderは、縦横比を変えずに画面 全体に収まるように描画するため上下または左右が はみ出します。 •  このときに、はみ出た分を補正するのにorigin.x、 origin.yを使います。
  • 57. まとめ •  インストールとiPhone/Android/iPad対 応を何となく理解した!
  • 58. とのさまラボ! •  勉強会に参加した人どうしのコミニュティがほしい! 勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! •  毎週木曜日は、もくもく勉強会も 開催しています! ぜひ「いいね!」をお願いします! h4ps://www.facebook.com/TonosamaLabo  
  • 59. 「もくもく」勉強会 •  毎週木曜日に、「もくもく」勉強会やってます! •  場所は新宿!facebookページからお申し込みください! h4ps://www.facebook.com/TonosamaLabo  
  • 60. おわり 主催(共同開催): 株式会社 gooya
 http://www.gooya.co.jp/ メドレー株式会社
 http://www.medley.co.jp/ 講師:西田 寛輔 (Tonosamart)
 http://www.facebook.com/tonosamart