20130912 macでcocos2d x...

29
cocos2dx 3.0 alpha0pre クロスプラットフォーム開発環境構築について

description

macでcocos2d-x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

Transcript of 20130912 macでcocos2d x...

Page 1: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

cocos2d-­‐x  3.0  alpha0-­‐pre クロスプラットフォーム開発環境構築について

Page 2: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

清水 友晶

•  株式会社TKS2  スマートフォンアプリ開発(iOS,  Android,  Windows  Phone  8)  Webコンテンツ開発

•  cocos2d-­‐xへの開発参加cocos2d-­‐xを利用したアプリ開発講演活動執筆活動

•  Twi;er:  tks2shimizu  •  Blog:  h;p://tks2.net/memo  •  SlideShare:  h;p://www.slideshare.net/doraemonsss  •  Facebook:  h;p://www.facebook.com/doraemonsss  

Page 3: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

•  6/25発売  •  2,800円 + 税  •  400ページ

•  6/18発売  •  2,980円 + 税  •  312ページ(オールカラー)  

Page 4: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

•  h;p://cocos2d-­‐x.jp  •  cocos2d-­‐x開発元Chukong  Technologies社公認  •  cocos2d-­‐xのための自由なコミュニティー  •  入門者から上級者まで誰でもOK!!ぜひご参加を!  •  cocos2d-­‐xに関することなら何でも投稿できます!!  •  h;ps://www.facebook.com/groups/152840204871454/  

Page 5: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

•  9/19  第12回 shinjuku.cocos2d-­‐x  •  10/11  第3回cocos2d-­‐x開発事例勉強会  •  10/17  shinjuku.cocos2d-­‐x初心者ハンズオン      〜CocosBuilderを利用した開発の進め方〜

•  10/24  第13回 shinjuku.cocos2d-­‐x  •  11/M  shinjuku.cocos2d-­‐x初心者ハンズオン      〜cocos2d-­‐xを利用したクロスプラットフォーム開発環境構築〜

•  11/M  第13回 shinjuku.cocos2d-­‐x  

Page 6: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

目次

•  cocos2d-­‐xの紹介  •  cocos2d-­‐xの開発環境を整える  •  iOS  •  Android  

•  テンプレートプロジェクトから学ぶ  •  今後の勉強方法について  

Page 7: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

cocos2d-­‐xの紹介 •  2Dゲームフレームワーク  •  オープンソース(MITライセンス)  •  マルチプラットフォーム開発  •  Android,  iOS,  …(7種類)  •  Win32,  Mac,  Linux  

•  開発言語  …  C++,  Lua,  Javascript  •  どんなことができるのか?  

 èTestCPPを見てみましょう

Page 8: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

cocos2d-­‐xで作るメリット •  オープンソース(MITライセンス)  •  無償  •  ソース公開  

•  クロスプラットフォーム開発  •  開発期間の短縮  •  資産の有効活用  

•  効率化  •  OpenGLを知らなくても、パフォーマンスの高い画像処理を行うことができる  

•  cocos2d  for  iPhoneからの移行が容易  •  cocos2d  for  iPhoneとクラス名が同じ

Page 9: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

cocos2d-­‐xで作るデメリット •  ネイティブ間の連携が面倒  •  Androidの場合、C++からAndroid  SDKへのアクセス  (JNIを使用する必要がある)  

•  iOSの場合、C++からObjec`ve-­‐Cへのアクセス  (Objec`ve-­‐C++があるため   比較的容易)  

Page 10: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

cocos2d-­‐xの開発環境を整える

•  cocos2d-­‐xインストール  •  Xcodeインストール  •  プロジェクト作成  •  iOS実機・シミュレータでの起動

Page 11: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

cocos2d-­‐xの開発環境を整える

•  cocos2d-­‐xダウンロード  h;p://www.cocos2d-­‐x.org/projects/cocos2d-­‐x/wiki/Download  

•  任意のディレクトリへ展開  /Users/Sumomo/cocos2d-­‐x-­‐3.0alpha0-­‐pre  

Page 12: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

cocos2d-­‐xの開発環境を整える

•  Mac  App  StoreよりXcodeダウンロード  

Page 13: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

cocos2d-­‐xの開発環境を整える

•  project-­‐creatorによるプロジェクト作成  cocos2d-­‐x-­‐3.0alpha0-­‐pre/tools/project_creator/create_project.py  •  ディレクトリ移動  

cd  cocos2d-­‐x-­‐3.0alpha0-­‐pre/tools/project_creator/  •  create_project.py実行  

./create_project.py  -­‐p  MyProject  -­‐k  net.tks2.myproject  -­‐l  cpp  •  オプション  •  -­‐p  …  プロジェクト名  •  -­‐k  …  パッケージ名  •  -­‐l  …  言語(cpp,  lua,  javascript)  

•  cocos2d-­‐x-­‐3.0alpha0-­‐pre/projectsにプロジェクトが作成される  

Page 14: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

cocos2d-­‐xの開発環境を整える •  プロジェクトをXcodeで起動  •  cocos2d-­‐x-­‐3.0alpha0-­‐pre/projects/MyProject/proj.ios/MyProject.xcodeproj  

•  iOS実機・シミュレータ起動  •  Run  

Page 15: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

cocos2d-­‐xの開発環境を整える

•  cocos2d-­‐xをインストールしたディレクトリ直下にプロジェクト作成のための実行ファイルが用意された。  •  create-­‐mul`-­‐plaform-­‐projects.py  

•  利用するには修正が必要  •  1行目 evn  è  env  •  改行コードを¥nに変更  

Page 16: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

Android向け開発環境の構築

•  cocos2d-­‐xインストール  •  Android  SDK  +  Eclipseインストール  •  Android  NDKインストール  •  ADT(Eclipse)の設定  •  プロジェクト作成  •  Android実機転送

Page 17: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

Android向け開発環境の構築

•  cocos2d-­‐xダウンロード  h;p://www.cocos2d-­‐x.org/projects/cocos2d-­‐x/wiki/Download  

•  任意のディレクトリへ展開  /Users/Sumomo/cocos2d-­‐x-­‐3.0alpha0-­‐pre  

Page 18: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

Android向け開発環境の構築

•  Android  SDK  +  Eclipseダウンロード  h;p://developer.android.com/sdk/  

•  任意のディレクトリへ展開  /Users/Sumomo/adt-­‐bundle-­‐mac  

Page 19: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

Android向け開発環境の構築

•  Android  NDK  r8e  (32bit)ダウンロード  h;p://developer.android.com/tools/sdk/ndk/  

•  任意のディレクトリへ展開  /Users/Sumomo/android-­‐ndk-­‐r8e  

Page 20: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

Android向け開発環境の構築

•  SDK  Manager起動  Window  >  Android  SDK  Manager  Android  2.3.3  (API  10)  >  SDK  Plaform  

Page 21: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

Android向け開発環境の構築

•  Eclipseの設定  •  Eclipse起動  •  ADT(Eclipse)  >  環境設定  

•  General  >  Workspace  >  Linked  Resources  •  COCOS2DX  è  cocos2dxのディレクトリ  

•  C/C++  >  Build  >  Environment  •  NDK_ROOT  è  Android  NDKのディレクトリ  

•  libcocos2dxプロジェクトのインポート  •  File  >  New  >  Project  

cocos2d-­‐x-­‐3.0alpha0-­‐pre/cocos2dx/plaform/android/java  

Page 22: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

プロジェクト作成

•  project-­‐creatorによるプロジェクト作成  cocos2d-­‐x-­‐3.0alpha0-­‐pre/tools/project_creator/create_project.py  •  ディレクトリ移動  

cd  cocos2d-­‐x-­‐3.0alpha0-­‐pre/tools/project_creator/  •  create_project.py実行  

./create_project.py  -­‐p  MyProject  -­‐k  net.tks2.myproject  -­‐l  javascript  •  オプション  •  -­‐p  …  プロジェクト名  •  -­‐k  …  パッケージ名  •  -­‐l  …  言語(cpp,  lua,  javascript)  

•  cocos2d-­‐x-­‐3.0alpha0-­‐pre/projectsにプロジェクトが作成される  

Page 23: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

プロジェクト作成

•  Eclipseでプロジェクトを読込む  •  File  >  New  >  Project  •  Android  >  Android  Project  from  Exis`ng  Code  

•  Android実機転送(シミュレータでも可)  •  Run  >  Run  

Page 24: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

テンプレートプロジェクトから学ぶ

•  プロジェクトには次のディレクトリがある •  Classes  

èソースファイルを格納  

•  Resources  è画像・音声などのリソースファイルを格納  

•  最初に用意されているクラスは次の2つ •  AppDelegateクラス  •  HelloWorldクラス

Page 25: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

テンプレートプロジェクトから学ぶ

•  AppDelegateには次のメソッドがある •  applica`onDidFinishLaunching()  

•  アプリ起動時に処理され、アプリのセッティングを行う •  最初のシーンを呼び出す

•  applica`onDidEnterBackground()  •  アプリがスリープする時に処理され、アプリの停止を行う

•  applica`onWillEnterForeground()  •  アプリ復帰時に処理され、アプリの再開を行う

Page 26: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

テンプレートプロジェクトから学ぶ •  HelloWorldScene.cppファイルのspriteをさわってみる •  位置変更

sprite-­‐>setPosi`on(  Point(0,  0)  );  

•  拡大・縮小 sprite-­‐>setScale(2.0f);  

•  回転 sprite-­‐>setRota`on(90.0f);  

•  アンカーポイント sprite-­‐>setAnchorPoint(  Point(0,  0)  );  

•  透過 sprite-­‐>setOpacity(127);  

Page 27: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

テンプレートプロジェクトから学ぶ

•  オブジェクトを移動させてみる 2秒で画面右端へ移動する

MoveTo*  move  =  MoveTo::create(2.0f,  Point(size.width,  size.height  /  2));  sprite-­‐>runAc`on(move);  

Page 28: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

テンプレートプロジェクトから学ぶ

•  Ac`on  h;p://www.cocos2d-­‐x.org/reference/na`ve-­‐cpp/d7/d32/classcocos2d_1_1_finite_`me_ac`on.html  •  移動  

MoveTo,  MoveBy  •  回転  

RotateTo,  RotateBy  

•  フェードイン・フェードアウト  FadeIn,  FadeOut

Page 29: 20130912 macでcocos2d x 3.0alphaを使用した、クロスプラットフォーム開発環境構築について

今後の勉強方法について

•  cocos2d-­‐x  Wikiを調べる  h;p://www.cocos2d-­‐x.org/projects/cocos2d-­‐x/wiki  

•  cocos2d-­‐x  Referenceを調べる  •  TestCppで調べる  •  ググってみる  •  cocos2d-­‐x  フォーラムで質問する  •  cocos2d-­‐x.jp  communityで質問する