Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cocos2d-x公開講座 in 鹿児島

18,574 views

Published on

2013/1/18 Cocos2d-x公開講座 in 鹿児島

Published in: Technology
  • Be the first to comment

Cocos2d-x公開講座 in 鹿児島

  1. 1. in 鹿児島Cocos2d-x公開講座 ~基本講義&お試しハンズオン~ 株式会社TKS2 清水友晶
  2. 2. 清水 友晶• 株式会社TKS2 スマートフォンアプリ開発 (iOS, Android, Windows Phone 8)  Webコンテンツ開発• Cocos2d-xへの開発参加 Cocos2d-xを利用したアプリ開発 講演活動 執筆活動• Twitter: tks2shimizu• Blog: http://tks2.net/memo• SlideShare: http://www.slideshare.net/doraemonsss• Facebook: http://www.facebook.com/doraemonsss
  3. 3. 販売台数比較http://www.businessinsider.com/future-of-digital-slides-2012-11?op=1
  4. 4. プラットフォームのシェアhttp://www.businessinsider.com/future-of-digital-slides-2012-11?op=1
  5. 5. 時間別トラフィックhttp://www.businessinsider.com/future-of-digital-slides-2012-11?op=1
  6. 6. Angry Birds vs Nintendo DShttp://www.businessinsider.com/future-of-digital-slides-2012-11?op=1
  7. 7. フリーミアムモデルhttp://www.businessinsider.com/future-of-digital-slides-2012-11?op=1
  8. 8. 収益Top200アプリ中ゲームが70%http://www.businessinsider.com/future-of-digital-slides-2012-11?op=1
  9. 9. これらから判ること• スマートフォン・タブレットは今後もしばらくは伸 び続ける• PCは仕事で利用、一般的にはスマートフォン・タ ブレットが利用される• 無料アプリでアプリ内課金を行うフリーミアムモデ ルが主流• ゲームアプリの課金率が高い
  10. 10. と言うことは・・・• まだしばらくは、スマートフォン・タブレット向け ゲームで稼ぐことができる
  11. 11. もう少し詳細に• スマートフォン・タブレット向けOSに対して、日 本ではAndroid, iOSが主流• できれば両OSに対応したゲームアプリを開発でき ることが望ましい• AndroidとiOSのアプリをそれぞれ開発するには、 実装に2倍の工数が掛かってしまう・・・• 1ソースでAndroidとiOSの開発ができれば効率が良 い• クロスプラットフォーム開発が可能なゲームプラッ トフォームがあれば良いけど、そんなのあるの?
  12. 12. クロスプラットフォーム開発可能な ツール・フレームワーク• Cocos2d-x Cocos2d-x• Unity •2Dゲームフレームワーク• Corona SDK •オープンソース(MIT)• Moai •高速処理• Gilderos •メモリ周りの処理は不要• Game Salad •ゲームエンジンを修正可能 •入門者から熟練者まで• JS / HTML5 framework• Titanium Mobile• Phone Gap
  13. 13. Cocos2d-xでどんなアプリが作れるの? • Cocos2d-xに使用例が紹介されている http://www.cocos2d-x.org/projects/cocos2d-x/apps
  14. 14. Cocos2d-xでどんなアプリが作れるの? • スマートエデュケーション おやこでスマほん(Android, iOS) AWS「スタートアップチャレンジ」優勝 IVS 2012 Fall Kyoto 「Launch Pad」優勝
  15. 15. Cocos2d• オープンソース• MITライセンス• 2Dゲームフレームワーク• Python• Windows, Mac, Linuxhttp://en.wikipedia.org/wiki/Cocos2d
  16. 16. Cocos2d for iPhone • オープンソース • MITライセンス • 2Dゲームフレームワーク • Objective-C • iOS, Mac OS X http://en.wikipedia.org/wiki/Cocos2d
  17. 17. Cocos2d-x• オープンソース• MITライセンス• 2Dゲームフレームワーク• C++, Lua, Javascript• マルチプラットフォームhttp://en.wikipedia.org/wiki/Cocos2d
  18. 18. Cocos2d-x対応プラットフォーム http://www.cocos2d-x.org/projects/cocos2d-x/wiki
  19. 19. 開発環境• Android, iOS対応のアプリを開発する際の開発環境例 • Mac OS X  • Xcode (iOS向けアプリ開発) • Eclipse (Android向けアプリ開発)
  20. 20. Cocos2d-xをさわってみよう
  21. 21. Xcodeのインストール• Mac App StoreからXcodeをダウンロード&インスト ール
  22. 22. Cocos2d-xのダウンロード• Cocos2d-xの最新バージョンをダウンロード (ハンズオンは基本的に最新バージョンを用いて行います)http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download
  23. 23. Cocos2d-xを解凍する• ダウンロードしたzipファイルを任意のディレクト リに解凍します• ハンズオンではユーザのホームディレクトリへの解 凍をオススメします(解凍した場所を忘れなければどこでもいいんです)• ユーザ名がsumomoの場合、  /Users/sumomo へ解凍し  /Users/sumomo/cocos2d-2.1beta3-x-2.1.0 となります
  24. 24. テンプレートのインストール• ターミナル.app起動 アプリケーション > ユーティリティ > ターミナル• cocos2d-2.1beta3-x-2.1.0のディレクトリへ移動 cd cocos2d-2.1beta3-x-2.1.0• install-templates-xcode.shの実行   ./install-templates-xcode.sh -u     強制インストールの場合 ./install-templates-xcode.sh -u -f
  25. 25. テンプレートのインストールに成功! • テンプレートのインストールに成功した場合は、次 のようなログが見られます
  26. 26. テンプレートのインストールに失敗する... • テンプレートのインストールに失敗する場合は、テン プレートの権限をチェックしてみましょう cd /Users/tomoaki/Library/Developer/Xcode/Templates ls -al • 所有者が別の人になっている場合は、所有者を変更し ましょう(変更しても問題ないか管理者に確認して下さい) chown -R tomoaki cocos2d-x
  27. 27. 新規プロジェクトの作成• Xcode起動• 新規プロジェクトの作成 cocos2dxを選択• Product Name:HelloWorld • 保存先: ホームディレクトリ(/Users/Sumomo)
  28. 28. Hello World• 作成されたプロジェクトをRun
  29. 29. ソースをいじってみよう
  30. 30. 表示する文字を変更する• HelloWorldScene.cppを選択• 54行目の”Hello World”を好きな文字に変更しよう
  31. 31. 背景を動かしてみよう• 背景は66行目のpSpriteにて表示している• pSpriteに対して命令することで背景を動かすことが できる
  32. 32. 背景を動かしてみよう• 位置変更 pSprite->setPosition( ccp(0, 0) );• 拡大・縮小 pSprite->setScale(2.0f);• 回転 pSprite->setRotation(90.0f);• アンカーポイント pSprite->setAnchorPoint( ccp(0, 0) );• 透過 pSprite->setOpacity(127);
  33. 33. 別の画像に変更してみよう http://tks2.net/cat.png• Resourcesディレクトリに画像を配置する HelloWorld/Resources/cat.png• Xcode上に読み込む• ソースの修正 CCSprite* pSprite = CCSprite::create("cat.png");
  34. 34. Cocos2d-xの仕組み• 基本的なクラス • CCDirector ... アプリの中心 • CCScene ... シーン(画面) • CCLayer ... シーン中のレイヤー • CCSprite ... シーン中の画像など
  35. 35. Cocos2d-xの仕組み• プロジェクトには次のディレクトリがある • Classes • Resources• 最初に用意されているクラスは次の2つ • AppDelegate • HelloWorldScene
  36. 36. Cocos2d-xの仕組み• AppDelegateには次の関数がある • applicationDidFinishLaunching() • アプリ起動時に処理され、 アプリのセッティングを行う • 最初のシーンを呼び出す • applicationDidEnterBackground() • アプリがスリープする時に処理され、 アプリの停止を行う • applicationWillEnterForeground() • アプリ復帰時に処理され、 アプリの再開を行う
  37. 37. CCActionを使ってみよう! • オブジェクトを移動させてみる 2秒で画面右端へ移動するCCMoveTo* move = CCMoveTo::create(2.0f, ccp(size.width, size.height/2));pSprite->runAction(move);
  38. 38. 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
  39. 39. CCActionを使ってみよう!• 連続アクションを実行(同じアクション) CCRepeat, CCRepeatForever• 連続アクションを実行(異なるアクション) CCSequence• アクションを同時に実行 CCSpawn
  40. 40. CCActionを使ってみよう! • 指定時間待つ CCDelayTime • メソッドを呼ぶ CCCallFunc, CCCallFuncN, CCCallFuncND, CCCallFuncO • イージングを利用する CCEase~
  41. 41. 新しいシーンを表示しよう!• シーンの表示は、CCDirectorクラスが担当する • replaceSceneメソッド • pushSceneメソッド • popSceneメソッド• 画面遷移してみよう! CCScene* pScene = HelloWorld::scene(); CCDirector::sharedDirector()->replaceScene(pScene);
  42. 42. 格好いい画面遷移を!• CCTransitionScene • クロスフェード CCTransitionCrossFade • フリップ CCTransitionFlipX, CCTransitionFlipY • ページめくり CCTransitionPageTurn http://www.cocos2d-x.org/reference/native-cpp/d1/dc8/ classcocos2d_1_1_c_c_transition_scene.html
  43. 43. Cocos2d-xについてもっと知りたい! • Cocos2d-x実践講座 in 鹿児島 ∼少人数で実際にアプリ作りを体験してみよう!∼ • 1/19(土) 13:00~17:00 • http://atnd.org/events/35243

×