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 名古屋

16,447 views

Published on

Published in: Technology
  • Be the first to comment

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. おわり—  ありがとうございました

×