Cocos2d xをさわってみよう!

26,538
-1

Published on

Published in: Technology
1 Comment
19 Likes
Statistics
Notes
No Downloads
Views
Total Views
26,538
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
77
Comments
1
Likes
19
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Cocos2d xをさわってみよう!

    1. 1. Cocos2d-xをさわってみよう! (株)TKS2 清水 友晶
    2. 2. 資料のダウンロード SlideShare http://www.slideshare.net/ doraemonsss/cocos2d- x-14842614 TKS2ホームページ http://tks2.net
    3. 3. 目次Hello Worldへの道 Eclipse(for Windows) Xcode(for Mac)CCSpriteをさわってみよう!Cocos2d-xの仕組みCCActionでオブジェクトを変化させてみよう!新しいシーンを表示しよう!CCTransitionSceneで格好いい画面遷移を!
    4. 4. Hello Worldへの道 (Eclipse) EclipseおよびAndroid SDKのインストール手順は省略 Cocos2d-xのダウンロード cocos2d-1.0.1-x-0.12.0.zip ダウンロードしたファイルを任意のフォルダへ展開する (日本語やスペースを含むディレクトリは不可 今回はユーザディレクトリ直下 C:¥Users¥xxxx¥cocos2d-1.0.1-x-0.12.0)
    5. 5. Hello Worldへの道 (Eclipse) Android NDKをダウンロード http://dl.google.com/android/ndk/android-ndk-r6b- windows.zip ダウンロードしたファイルを任意のフォルダへ展開する (今回はCドライブ直下 C:¥android-ndk-r6b)
    6. 6. Hello Worldへの道 (Eclipse) Cygwinをインストール オプションでmakeもインストール (今回はCドライブ直下へインストール c:¥cygwin)
    7. 7. Hello Worldへの道 (Eclipse) 今回は既存のHelloWorldを使用 cocos2d-1.0.1-x-0.12.0/HelloWorld build_native.shの編集 HelloWorld/android/build_native.sh 2行目 NDK_ROOT_LOCAL 3行目 COCOS2DX_ROOT_LOCAL
    8. 8. Hello Worldへの道 (Eclipse) Cygwinによりビルドを行う build_native.shのディレクトリへ移動 cd /cygdrive/c/Users/XXXX/cocos2d-1.0.1-x-0.12.0/ HelloWorld/android ビルド実行 ./build_native.sh
    9. 9. Hello Worldへの道 (Eclipse) ビルドが正常に終わらない。。。 ファイル・ディレクトリの権限は大丈夫?
    10. 10. Hello Worldへの道 (Eclipse) Eclipse上に取り込む File > New > Project... > Android Project from Existing Code もしエラーがあれば適宜コードを修正 Androidアプリケーションとして実行
    11. 11. Hello Worldへの道 (Eclipse) 開発手順 1. HelloWorld/Classesディレクトリのソースをエ ディタにて修正 2. Cygwinにて、ビルド 3. Eclipseにて、リフレッシュ・実行• CDT Plugin・MinGWを用いEclipse上で全て完結する 開発環境も構築可能 http://www.multigesture.net/articles/how-to- setup-cocos2d-x-windows-and-android/
    12. 12. Hello Worldへの道 (Xcode) Xcodeのインストール手順は省略 Cocos2d-xのダウンロード cocos2d-2.0-x-2.0.3.zip ダウンロードしたファイルを任意のフォルダへ展開する (今回はユーザディレクトリ直下 /Users/xxxx/cocos2d-2.0-x-2.0.3)
    13. 13. Hello Worldへの道 (Xcode)テンプレートのインストール(cocos2d-2.0-x-2.0.3/install-templates-xcode.sh) ターミナル.app起動 (アプリケーション/ユーティリティ/ターミナル.app) cocos2d-2.0-x-2.0.3のディレクトリへ移動 cd cocos2d-2.0-x-2.0.3 install-templates-xcode.shの実行 install-templates-xcode.sh -u (install-templates-xcode.sh -u -f)
    14. 14. Hello Worldへの道 (Xcode)• テンプレートのインストールに成功した場合
    15. 15. Hello Worldへの道 (Xcode) テンプレートのインストールに失敗する。。。 テンプレートの権限のチェック cd /Users/tomoaki/Library/Developer/Xcode/Templates ls -al 所有者が別の人になっている場合は、所有者を変更する chown -R tomoaki cocos2d-x
    16. 16. Hello Worldへの道 (Xcode) Xcode起動 新規プロジェクトの作成 cocos2dxを選択
    17. 17. Hello Worldへの道 (Xcode)作成されたプロジェクトをRun iPhone 6.0 Simulator iPhone 5.0 Simulator • RootViewController.mm 46行目を修正 return UIInterfaceOrientationMaskLandscape;
    18. 18. CCSpriteをさわってみよう!• HelloWorldScene.cppファイルのpSpriteをさわってみる 位置変更 pSprite->setPosition( ccp(0, 0) ); 拡大・縮小 pSprite->setScale(2.0f); 回転 pSprite->setRotation(90.0f); アンカーポイント pSprite->setAnchorPoint( ccp(0, 0) ); 透過 pSprite->setOpacity(127);
    19. 19. CCSpriteをさわってみよう!• pSpriteに別の画像を使ってみる Resourcesディレクトリに画像を配置する HelloWorld/Resources/cat.png; プロジェクトに画像を適用する http://tks2.net/cat.png Xcode上に読み込む Cygwinによるビルド時に、android/assetsにコ ピーされるので設定不要 ソースの修正 CCSprite* pSprite = CCSprite::create("cat.png");
    20. 20. Cocos2d-xの仕組み基本的なクラス CCDirector ... アプリの中心(シングルトン) CCScene ... シーン(画面) CCLayer ... シーン中のレイヤー CCSprite ... シーン中の画像など
    21. 21. Cocos2d-xの仕組みプロジェクトには次のディレクトリがある Classes Resources最初に用意されているクラスは次の2つ AppDelegate HelloWorldScene
    22. 22. Cocos2d-xの仕組みAppDelegateには次のメソッドがある applicationDidFinishLaunching() アプリ起動時に処理され、アプリのセッティングを 行う 最初のシーンを呼び出す applicationDidEnterBackground() アプリがスリープする時に処理され、アプリの停止 を行う applicationWillEnterForeground() アプリ復帰時に処理され、アプリの再開を行う
    23. 23. CCActionでオブジェクトを変化させてみよう!オブジェクトを移動させてみる2秒で画面右端へ移動するCCMoveTo* move = CCMoveTo::create(2.0f, ccp(size.width, size.height/2) );pSprite->runAction(move);
    24. 24. CCActionでオブジェクトを変化させてみよう! CCAction 移動 CCMoveTo, CCMoveBy 回転 CCRotateTo, CCRotateBy フェードイン・フェードアウト CCFadeIn, CCFadeOut http://www.cocos2d-x.org/reference/native-cpp/ d7/d12/classcocos2d_1_1_c_c_action.html
    25. 25. CCActionでオブジェクトを変化させてみよう! 連続アクションを実行(同じアクション) CCRepeat, CCRepeatForever 連続アクションを実行(異なるアクション) CCSequence アクションを同時に実行 CCSpawn
    26. 26. CCActionでオブジェクトを変化させてみよう! 指定時間待つ CCDelayTime メソッドを呼ぶ CCCallFunc, CCCallFuncN, CCCallFuncND, CCCallFuncO イージングを利用する CCEase
    27. 27. 新しいシーンを表示しよう!シーンの表示は、CCDirectorクラスが担当する replaceSceneメソッド pushSceneメソッド popSceneメソッド画面遷移してみよう!CCScene* pScene = HelloWorld::scene();CCDirector::sharedDirector()->replaceScene(pScene);
    28. 28. CCTransitionSceneで格好いい画面遷移を! CCTransitionScene クロスフェード CCTransitionCrossFade フリップ CCTransitionFlipX, CCTransitionFlipY ページめくり CCTransitionPageTurn http://www.cocos2d-x.org/reference/native-cpp/ d1/dc8/classcocos2d_1_1_c_c_transition_scene.html
    29. 29. 今後の予定Cocos2d-xを更にさわってみるCocos2d-xの拡張外部ツールの利用Box2Dの利用クロスプラットフォーム開発OSとの連携
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×