Successfully reported this slideshow.

More Related Content

More from Tomoaki Shimizu

Related Books

Free with a 14 day trial from Scribd

See all

cocos2d-xハンズオン勉強会 in 名古屋

  1. 1. Cocos2d-x ハンズオン勉強会 株式会社TKS2 清水友晶
  2. 2. 清水 友晶 —  株式会社TKS2 http://tks2.net —  スマートフォンアプリ開発 (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. もうすぐ出版されます! 入�門編 応用編 CCOOMMIINNGG CCOOMMIINNGG SSOOOONN SSOOOONN
  4. 4. おやこでスマほん —  株式会社スマートエデュケーション
  5. 5. —  http://cocos2d-x.jp —  cocos2d-x開発元Chukong Technologies社公認 —  cocos2d-xのための自由なコミュニティー —  入門者から上級者まで誰でもOK!!ぜひご参加を! —  cocos2d-xに関することなら何でも投稿できます!! —  https://www.facebook.com/groups/152840204871454/
  6. 6. —  4/20 cocos2d-xハンズオン勉強会 —  5/15 shinjuku.cocos2d-x初心者ハンズオン     ∼MacでiOSアプリを作る開発環境を整えよう!∼ —  5/17 cocos2d-x公開講座 in 鹿児島 —  5/18 cocos2d-x実践講座 in 鹿児島 —  5/22 第8回 shinjuku.cocos2d-x —  6/M shinjuku.cocos2d-x初心者ハンズオン     ∼MacでAndroidアプリを作る開発環境を整えよう!∼ —  6/M 第9回 shinjuku.cocos2d-x —  7/M shinjuku.cocos2d-x初心者ハンズオン     ∼WindowsでAndroidアプリを作る開発環境を整えよう!∼
  7. 7. 目次 —  cocos2d-xの紹介 —  iOS向け開発環境の構築方法 —  かんたんな利用方法の説明 —  Android向け開発環境の構築方法 —  ゲームを作ってみよう! —  画像表示 —  画面タップ処理 —  ボタン配置 —  永続データ —  開発を簡単にするツール
  8. 8. cocos2d-xの紹介 —  2Dゲームフレームワーク —  オープンソース(MITライセンス) —  マルチプラットフォーム開発 —  Android, iOS, …(7種類) —  Win32, Mac, Linux —  開発言語 … C++, Lua, Javascript —  どんなことができるのか? èTestCPPを見てみましょう
  9. 9. cocos2d-xで作るメリット —  オープンソース(MITライセンス) —  無償 —  ソース公開 —  クロスプラットフォーム開発 —  開発期間の短縮 —  資産の有効活用 —  効率化 —  画像処理のパフォーマンスアップ —  各OSのフレームワークを詳しく知らなくてもア プリを作成することができる
  10. 10. cocos2d-xに関する情報収集 —  Google検索 —  2012年10月 —  "cocos2d-x" … 851,000件 —  "cocos2d-x 日本語" … 9,960件 —  2013年4月 —  "cocos2d-x" … 1,170,000件 —  "cocos2d-x 日本語" … 26,000件 —  cocos2d-x Wikiが充実 http://www.cocos2d-x.org/projects/cocos2d-x/wiki —  cocos2d-x.jp community https://www.facebook.com/groups/152840204871454/ —  cocos2d-xに関する書籍出版
  11. 11. iOS向け開発環境を整える —  cocos2d-xダウンロード http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download —  任意のディレクトリへ展開 /Users/Sumomo/cocos2d-2.1rc0-x-2.1.2
  12. 12. iOS向け開発環境を整える —  Mac App StoreよりXcodeダウンロード
  13. 13. iOSの開発環境を整える —  project-creatorによるプロジェクト作成 cocos2d-2.1rc0-x-2.1.2/tools/project-creator/ create_project.py —  ディレクトリ移動 cd cocos2d-2.1rc0-x-2.1.2/tools/project-creator/ —  create_project.py実行 ./create_project.py -project MyProject -package net.tks2.myproject -language cpp —  オプション —  -project … プロジェクト名 —  -packege … パッケージ名 —  -language … 言語(cpp, lua, javascript) —  cocos2d-2.1rc0-x-2.1.2/projectsにプロジェクト が作成される
  14. 14. iOSの開発環境を整える —  Xcodeでプロジェクトを読込む —  cocos2d-2.1rc0-x-2.1.2/projects/MyProject/ proj.ios/MyProject.xcodeproj —  アプリ起動 —  Product > Run
  15. 15. テンプレートプロジェクトから学ぶ —  プロジェクトには次のディレクトリがある —  Classes èソースファイルを格納 —  Resources è画像・音声などのリソースファイルを格納 —  最初に用意されているクラスは次の2つ —  AppDelegateクラス —  HelloWorldクラス
  16. 16. テンプレートプロジェクトから学ぶ —  AppDelegateには次のメソッドがある —  applicationDidFinishLaunching() —  アプリ起動時に処理され、アプリのセッティングを行う —  最初のシーンを呼び出す —  applicationDidEnterBackground() —  アプリがスリープする時に処理され、アプリの停止を行う —  applicationWillEnterForeground() —  アプリ復帰時に処理され、アプリの再開を行う
  17. 17. テンプレートプロジェクトから学ぶ —  HelloWorldScene.cppファイルのpSpriteをさわって みる —  位置変更 pSprite->setPosition( ccp(0, 0) ); —  拡大・縮小 pSprite->setScale(2.0f); —  回転 pSprite->setRotation(90.0f); —  アンカーポイント pSprite->setAnchorPoint( ccp(0, 0) ); —  透過 pSprite->setOpacity(127);
  18. 18. テンプレートプロジェクトから学ぶ —  オブジェクトを移動させてみる 2秒で画面右端へ移動する CCMoveTo* move = CCMoveTo::create(2.0f, ccp(size.width, size.height/2) ); pSprite->runAction(move);
  19. 19. テンプレートプロジェクトから学ぶ —  CCAction http://www.cocos2d-x.org/reference/native-cpp/dd/ d89/classcocos2d_1_1_c_c_finite_time_action.html —  移動 CCMoveTo, CCMoveBy —  回転 CCRotateTo, CCRotateBy —  フェードイン・フェードアウト CCFadeIn, CCFadeOut
  20. 20. 今後の勉強方法について —  cocos2d-x Wikiを調べる http://www.cocos2d-x.org/projects/cocos2d-x/ wiki —  cocos2d-x Referenceを調べる —  TestCppで調べる —  ググってみる —  cocos2d-x フォーラムで質問する —  cocos2d-x.jp communityで質問する
  21. 21. Android向け開発環境を整える —  cocos2d-xインストール —  Android SDK + Eclipseインストール —  Android NDKインストール —  ADT(Eclipse)の設定 —  プロジェクト作成 —  Android実機転送
  22. 22. Android向け開発環境を整える —  cocos2d-xダウンロード http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download —  任意のディレクトリへ展開 /Users/Sumomo/cocos2d-2.1rc0-x-2.1.2
  23. 23. Android向け開発環境を整える —  Android SDK + Eclipseダウンロード http://developer.android.com/sdk/ —  任意のディレクトリへ展開 /Users/Sumomo/adt-bundle-mac
  24. 24. Android向け開発環境を整える —  SDK Manager起動 Window > Android SDK Manager Android 2.2 (API 8) > SDK Platform
  25. 25. Android向け開発環境を整える —  Android NDKダウンロード http://developer.android.com/tools/sdk/ndk/ —  任意のディレクトリへ展開 /Users/Sumomo/android-ndk-r8e
  26. 26. Android向け開発環境を整える —  Eclipseの設定 —  Eclipse起動 —  ADT(Eclipse) > 環境設定 —  General > Workspace > Linked Resources —  COCOS2DX è cocos2dxのディレクトリ —  C/C++ > Build > Environment —  NDK_ROOT è Android NDKのディレクトリ —  libcocos2dxプロジェクトのインポート —  File > New > Project cocos2d-2.1rc0-x-2.1.2/cocos2dx/platform/ android/java
  27. 27. Android向け開発環境を整える —  project-creatorによるプロジェクト作成 cocos2d-2.1rc0-x-2.1.2/tools/project-creator/ create_project.py —  ディレクトリ移動 cd cocos2d-2.1rc0-x-2.1.2/tools/project-creator/ —  create_project.py実行 ./create_project.py -project MyProject -package net.tks2.myproject -language cpp —  オプション —  -project … プロジェクト名 —  -packege … パッケージ名 —  -language … 言語(cpp, lua, javascript) —  cocos2d-2.1rc0-x-2.1.2/projectsにプロジェクト が作成される
  28. 28. Android向け開発環境を整える —  Eclipseでプロジェクトを読込む —  File > New > Project —  Android > Android Project from Existing Code —  cocos2d-2.1rc0-x-2.1.2/projects/MyProject/proj.android —  Android実機転送 —  Run > Run
  29. 29. ゲームを作ってみよう! —  1から25まで順番にタップするカードゲーム
  30. 30. ゲームを作ってみよう! —  カードのダウンロードは http://tks2.net/other/cards.zip —  iOSシミュレータ (Retina 3.5-inch)
  31. 31. ゲームを作ってみよう! —  まずはカードの配置 https://gist.github.com/4239354
  32. 32. ゲームを作ってみよう! —  カードのタップ https://gist.github.com/4239351
  33. 33. ゲームを作ってみよう! —  時間表示 https://gist.github.com/4239350
  34. 34. ゲームを作ってみよう! —  ハイスコア表示 https://gist.github.com/4239338
  35. 35. ゲームを作ってみよう! —  ゲームリトライ https://gist.github.com/4238817 —  完成!!
  36. 36. 開発をかんたんにするツール ツール名 Win Mac   CocosBuilder OSS - ○   LevelHelper $24.99 - ○   spine $55.00 ○ ○   Super Animation Converter Free - ○   TexturePacker ¥3,019 ○ ○   zwoptex $15.00 - ○   SpriteHelper $19.99 - ○   PhysicsEditor ¥2,011 ○ ○   GlyphDesigner ¥3,600 - ○   ParticleDesigner ¥1,340 - ○   Tiled Map Editor Donate ○ ○
  37. 37. CocosBuilder —  オープンソース (MIT) —  レイヤー作成 —  複数アニメーション の作成 —  デザイナーがレイア ウトを調整できる —  マルチレゾリュー ション対応が可能 http://cocosbuilder.com
  38. 38. LevelHelper —  レイヤー作成 —  物理エンジンの適用 が可能 —  パラレックス作成 —  画像をパスに沿って 移動することが可能 —  シミュレータ上で直 ぐに確認
  39. 39. spine —  アニメーション作成 —  Boneを複数連結させ ることでスムーズな アニメーションを作 成する —  ランタイムはオープ ンソース(BSD) http://esotericsoftware.com
  40. 40. Super Animation Converter —  Adobe Flashで作成さ れたswfファイルを、 cocos2d-xで読込める 形式(sam)に変換する —  複数アニメーションの 作成 https://github.com/raymondlu/super-animation-samples
  41. 41. TexturePacker —  テクスチャアトラス 作成 —  条件によっては無料 で利用可能 http://www.codeandweb.com/texturepacker
  42. 42. zwoptex —  テクスチャアトラス 作成 http://www.zwopple.com/zwoptex/
  43. 43. SpriteHelper —  テクスチャアトラ ス作成 —  物理エンジンで利 用可能なシェイプ を作成 —  フレームアニメー ション作成 —  LevelHelperと連 携可能 http://www.gamedevhelper.com/spritehelper/
  44. 44. PhysicsEditor —  物理エンジンで利 用可能なシェイプ を作成 —  条件によっては無 料で利用可能 http://www.codeandweb.com/physicseditor
  45. 45. GlyphDesigner —  ビットマップフォ ント作成 —  グラデーション —  アウトライン —  シャドウ —  日本語可 http://www.71squared.com/glyphdesigner
  46. 46. ParticleDesigner —  パーティクル作成 —  30以上のパラメー タをGUIで編集 —  公開されているパー ティクルを利用可能 —  ビューアで確認 http://www.71squared.com/particledesigner
  47. 47. Tiled Map Editor —  タイルマップ作成 —  正面から見た四角 —  斜めから見たひし 形 http://www.mapeditor.org
  48. 48. おわり —  ありがとうございました

×