• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Cocos2d xをさわってみよう!
 

Cocos2d xをさわってみよう!

on

  • 23,146 views

 

Statistics

Views

Total Views
23,146
Views on SlideShare
12,720
Embed Views
10,426

Actions

Likes
20
Downloads
73
Comments
1

15 Embeds 10,426

http://static.wix.com 5745
http://www.cocos2d-x.jp.usrfiles.com 3525
http://www.socialtoprunners.jp 472
http://www.socialtoprunners.com 357
http://blog.primeswit.ch 254
http://cashew.hatenablog.com 48
http://bundlr.com 7
https://twitter.com 5
http://www57.jimdo.com 4
http://static.usrfiles.com 2
http://htmlcomponentservice.appspot.com 2
https://si0.twimg.com 2
http://socialtoprunners.jimdo.com 1
http://webcache.googleusercontent.com 1
http://s.deeeki.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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をさわってみよう! Cocos2d xをさわってみよう! Presentation Transcript

  • Cocos2d-xをさわってみよう! (株)TKS2 清水 友晶
  • 資料のダウンロード SlideShare http://www.slideshare.net/ doraemonsss/cocos2d- x-14842614 TKS2ホームページ http://tks2.net
  • 目次Hello Worldへの道 Eclipse(for Windows) Xcode(for Mac)CCSpriteをさわってみよう!Cocos2d-xの仕組みCCActionでオブジェクトを変化させてみよう!新しいシーンを表示しよう!CCTransitionSceneで格好いい画面遷移を!
  • 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)
  • Hello Worldへの道 (Eclipse) Android NDKをダウンロード http://dl.google.com/android/ndk/android-ndk-r6b- windows.zip ダウンロードしたファイルを任意のフォルダへ展開する (今回はCドライブ直下 C:¥android-ndk-r6b)
  • Hello Worldへの道 (Eclipse) Cygwinをインストール オプションでmakeもインストール (今回はCドライブ直下へインストール c:¥cygwin)
  • 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
  • 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
  • Hello Worldへの道 (Eclipse) ビルドが正常に終わらない。。。 ファイル・ディレクトリの権限は大丈夫?
  • Hello Worldへの道 (Eclipse) Eclipse上に取り込む File > New > Project... > Android Project from Existing Code もしエラーがあれば適宜コードを修正 Androidアプリケーションとして実行
  • 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/
  • Hello Worldへの道 (Xcode) Xcodeのインストール手順は省略 Cocos2d-xのダウンロード cocos2d-2.0-x-2.0.3.zip ダウンロードしたファイルを任意のフォルダへ展開する (今回はユーザディレクトリ直下 /Users/xxxx/cocos2d-2.0-x-2.0.3)
  • 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)
  • Hello Worldへの道 (Xcode)• テンプレートのインストールに成功した場合
  • Hello Worldへの道 (Xcode) テンプレートのインストールに失敗する。。。 テンプレートの権限のチェック cd /Users/tomoaki/Library/Developer/Xcode/Templates ls -al 所有者が別の人になっている場合は、所有者を変更する chown -R tomoaki cocos2d-x
  • Hello Worldへの道 (Xcode) Xcode起動 新規プロジェクトの作成 cocos2dxを選択
  • Hello Worldへの道 (Xcode)作成されたプロジェクトをRun iPhone 6.0 Simulator iPhone 5.0 Simulator • RootViewController.mm 46行目を修正 return UIInterfaceOrientationMaskLandscape;
  • 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);
  • CCSpriteをさわってみよう!• pSpriteに別の画像を使ってみる Resourcesディレクトリに画像を配置する HelloWorld/Resources/cat.png; プロジェクトに画像を適用する http://tks2.net/cat.png Xcode上に読み込む Cygwinによるビルド時に、android/assetsにコ ピーされるので設定不要 ソースの修正 CCSprite* pSprite = CCSprite::create("cat.png");
  • Cocos2d-xの仕組み基本的なクラス CCDirector ... アプリの中心(シングルトン) CCScene ... シーン(画面) CCLayer ... シーン中のレイヤー CCSprite ... シーン中の画像など
  • Cocos2d-xの仕組みプロジェクトには次のディレクトリがある Classes Resources最初に用意されているクラスは次の2つ AppDelegate HelloWorldScene
  • Cocos2d-xの仕組みAppDelegateには次のメソッドがある applicationDidFinishLaunching() アプリ起動時に処理され、アプリのセッティングを 行う 最初のシーンを呼び出す applicationDidEnterBackground() アプリがスリープする時に処理され、アプリの停止 を行う applicationWillEnterForeground() アプリ復帰時に処理され、アプリの再開を行う
  • CCActionでオブジェクトを変化させてみよう!オブジェクトを移動させてみる2秒で画面右端へ移動するCCMoveTo* move = CCMoveTo::create(2.0f, ccp(size.width, size.height/2) );pSprite->runAction(move);
  • 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
  • CCActionでオブジェクトを変化させてみよう! 連続アクションを実行(同じアクション) CCRepeat, CCRepeatForever 連続アクションを実行(異なるアクション) CCSequence アクションを同時に実行 CCSpawn
  • CCActionでオブジェクトを変化させてみよう! 指定時間待つ CCDelayTime メソッドを呼ぶ CCCallFunc, CCCallFuncN, CCCallFuncND, CCCallFuncO イージングを利用する CCEase
  • 新しいシーンを表示しよう!シーンの表示は、CCDirectorクラスが担当する replaceSceneメソッド pushSceneメソッド popSceneメソッド画面遷移してみよう!CCScene* pScene = HelloWorld::scene();CCDirector::sharedDirector()->replaceScene(pScene);
  • CCTransitionSceneで格好いい画面遷移を! CCTransitionScene クロスフェード CCTransitionCrossFade フリップ CCTransitionFlipX, CCTransitionFlipY ページめくり CCTransitionPageTurn http://www.cocos2d-x.org/reference/native-cpp/ d1/dc8/classcocos2d_1_1_c_c_transition_scene.html
  • 今後の予定Cocos2d-xを更にさわってみるCocos2d-xの拡張外部ツールの利用Box2Dの利用クロスプラットフォーム開発OSとの連携