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 鹿児島

15,462 views

Published on

cocos2d-x公開講座・ in 鹿児島

  • Be the first to comment

cocos2d-x公開講座 in 鹿児島

  1. 1. cocos2d-x公開講座(3/22)cocos2d-x実践講座(3/23) in 鹿児島 株式会社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://cocos2d-x.jp—  cocos2d-x開発元Chukong Technologies社公認—  cocos2d-xのための自由なコミュニティー—  入門者から上級者まで誰でもOK!!ぜひご参加を!—  cocos2d-xに関することなら何でも投稿できます!!—  https://www.facebook.com/groups/152840204871454/
  4. 4. —  3/22 cocos2d-x公開講座 in 鹿児島—  3/23 cocos2d-x実践講座 in 鹿児島—  4/10 shinjuku.cocos2d-x初心者ハンズオン     ∼WindowsでAndroidアプリを作ろう!∼—  4/17 第7回 shinjuku.cocos2d-x—  5/M shinjuku.cocos2d-x初心者ハンズオン     ∼MacでiOSアプリを作ろう!∼—  5/M 第8回 shinjuku.cocos2d-x—  6/M shinjuku.cocos2d-x初心者ハンズオン     ∼MacでAndroidアプリを作ろう!∼—  6/M 第9回 shinjuku.cocos2d-x
  5. 5. 目次—  3/22(金) —  cocos2d-xの紹介 —  WindowsでAndroidアプリを作成する 方法の紹介 —  CocosBuilderの紹介 —  CocosBuilderをさわってみよう!—  3/23(土) —  CocosBuilderでアプリをつくろう!
  6. 6. cocos2d-xの紹介
  7. 7. cocos2d-xの紹介—  2Dゲームフレームワーク—  オープンソース(MITライセンス)—  マルチプラットフォーム開発 —  Android, iOS, …(7種類) —  Win32, Mac, Linux—  開発言語 … C++, Lua, Javascript—  どんなことができるのか? èTestCPPを見てみましょう
  8. 8. WindowsでAndroidアプリを 作成する方法の紹介
  9. 9. cocos2d-xの開発環境を整える —  cocos2d-xインストール —  Android SDK + Eclipseインストール —  Android NDKインストール —  Cygwinインストール —  Javaインストール —  pythonインストール —  Eclipseの設定 —  プロジェクト作成 —  Android実機転送
  10. 10. cocos2d-xの開発環境を整える—  cocos2d-xダウンロード http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download—  任意のディレクトリへ展開 /Users/Sumomo/cocos2d-2.1rc0-x-2.1.2
  11. 11. cocos2d-xの開発環境を整える—  Android SDK + Eclipseダウンロード http://developer.android.com/sdk/—  任意のディレクトリへ展開 C:¥adt-bundle-windows
  12. 12. cocos2d-xの開発環境を整える—  Android NDKダウンロード http://developer.android.com/tools/sdk/ndk/—  任意のディレクトリへ展開 C:¥android-ndk-r8d
  13. 13. cocos2d-xの開発環境を整える—  Cygwinダウンロード http://cygwin.com/install.html setup.exeのリンクをクリックするとダウンロード可
  14. 14. cocos2d-xの開発環境を整える —  Cygwinインストール —  基本的には手順通り —  パッケージに「make」を選択する
  15. 15. cocos2d-xの開発環境を整える—  Javaダウンロード http://www.oracle.com/technetwork/java/javase/ downloads/index.html—  Javaインストール
  16. 16. cocos2d-xの開発環境を整える—  Pythonダウンロード http://www.python.org/download/—  Pythonインストール
  17. 17. cocos2d-xの開発環境を整える—  環境変数の設定 —  「PATH」の追加 —  Cygwinのパス /cygdrive/c/cygwin/bin —  Javaのパス C:¥Program Files¥Java¥jre7¥bin —  pythonのパス C:¥Python27—  Cygwinの設定 —  C:¥cygwin¥etc¥fstabに次の1行を追加 none /cygdrive cygdrive binary,noacl,posix=0,user 0 0
  18. 18. cocos2d-xの開発環境を整える—  Eclipseの設定 —  Eclipse起動 —  ADT(Eclipse) > 環境設定 —  General > Workspace > Linked Resources —  COCOS2DX è cocos2dxのディレクトリ —  C/C++ > Build > Environment —  NDK_ROOT è Android NDKのディレクトリ —  CYGWIN è nodosfilewarning —  libcocos2dxプロジェクトのインポート —  File > New > Project cocos2d-2.1rc0-x-2.1.2/cocos2dx/platform/ android/java
  19. 19. cocos2d-xの開発環境を整える—  SDK Manager起動 C:¥adt-bundle-windows/SDK Manager.exe —  オススメ è Android 2.2 (API 8) ‒ SDK Platform
  20. 20. cocos2d-xの開発環境を整える—  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にプロジェクト が作成される
  21. 21. cocos2d-xの開発環境を整える—  Eclipseでプロジェクトを読込む —  File > New > Project —  Android > Android Project from Existing Code—  Android実機転送 —  Run > Run
  22. 22. CocosBuilderの紹介
  23. 23. CocosBuilderとは—  http://cocosbuilder.com—  cocos2dのレイアウトやアニメーションをGUIで調整可能—  オープンソース(MITライセンス)—  最新版CocosBuilder 3.0 Alpha —  JSB(Javascript bindings)の機能が大幅に追加 —  CocosPlayer (for JSB) —  cocos2d-xやcocos2d-iphoneでも利用可能—  cocos2d-xではCCBReaderクラスを利用して連携可能—  初心者向けの主な情報源 —  CocosBuilder User Guide —  cocos2d-xサンプル「TestCpp」
  24. 24. CocosBuilderのデモ—  TestCppにCocosBuilderのデモがあります。—  CocosBuilderプロジェクト —  cocos2d-2.1beta3-x-2.1.1/samples/Cpp/TestCpp/ Resources/CocosBuilderExample.ccbproj—  iOS用プロジェクト —  cocos2d-2.1beta3-x-2.1.1/samples/Cpp/TestCpp/ proj.ios/TestCpp.xcodeproj
  25. 25. CocosBuilderをさわってみよう
  26. 26. CocosBuilderの使い方1—  基本設定 —  プロジェクトの作成 —  デフォルトではJSB向けの設定になっている ècocos2d-x向けの設定に変更 —  出力設定 —  解像度追加・変更—  表示設定 —  解像度変更 —  見た目の変更cocos2d-2.1beta3-x-2.1.1/samples/Cpp/TestCpp/Resources/CocosBuilderExample.ccbproj
  27. 27. CocosBuilderの使い方2—  リソース追加 —  画像・テクスチャアトラス —  パーティクル—  クラス追加 —  画像の調整—  アニメーション編集 —  タイムラインの追加—  スティッキーノート追加
  28. 28. CocosBuilderのアニメーションを さわってみよう—  次のネコ画像を使って、アニメーションを楽しもう! http://tks2.net/nyanrun/images.zip
  29. 29. CocosBuilderでアプリを作ろう!
  30. 30. 簡単なゲームを作ってみる
  31. 31. 簡単なゲームを作ってみる—  タップしてネコを走らせるゲームを作ります —  単純すぎてゴメンなさい。。。—  でも基本的な機能は全部盛り込んでいます —  CocosBuilderファイルの作成 —  ボタンタップイベントの取得 —  他のオブジェクトの取得 —  複数アニメーションの設定—  時間の都合上、解像度480 x 320のみの説明とします —  CocosBuilderとcocos2d-xのマルチレゾリューションサポー トを利用して簡単に対応できますが、いろいろと罠が潜んでい ます。詳細については執筆中の本にて書く予定です。—  http://tks2.net/nyanrun/images.zip
  32. 32. (1) CocosBuilderで画面を作成—  CocosBuilderプロジェクトの作成 —  cocos2d-x向けの設定 —  リソースの追加 —  画像の配置 —  bg1.png … Pos(%)x=0:y=100, Anc x=0.0:y=1.0 —  bg2.png … Pos(%)x=0:y= 25, Anc x=0.0:y=0.5 —  bg3.png … Pos(%)x=0:y= 0, Anc x=0.0:y=0.0 —  cat_normal.png … Pos(%)x=25:y=35, Anc x=0.5:y=0.5—  Xcodeプロジェクトの作成 —  リソースの追加(含ccbiファイル) —  AppDelegate.cpp
  33. 33. (2) タップイベントを取得—  CocosBuilderプロジェクトの編集 —  ボタンの配置 —  CCMenu … Pos x=0:y=0, Size(%)x=100.0:y=100.0 —  CCMenuItemImage … Pos(%) x=40:y=15 Selector:tappedLeftFoot Target:Document root Normal —  CCMenuItemImage … Pos(%) x=60:y=15 Selector:tappedRightFoot Target:Document root —  レイヤー編集 —  CCLayer … Custom Class:GameLayer Selected Disabled—  Xcodeプロジェクトの編集 —  GameLayerLoader.h —  GameLayer.h —  GameLayer.cpp —  AppDelegate.cpp
  34. 34. (3) 他オブジェクトを取得—  CocosBuilderプロジェクトの編集 —  背景編集 —  bg1.png … Doc root var: mBg1 —  bg2.png … Doc root var: mBg2 —  bg3.png … Doc root var: mBg3 —  cat_normal.png … Tag: 1—  Xcodeプロジェクトの編集 —  GameLayer.h —  GameLayer.cpp
  35. 35. (4) 基本アニメーション—  CocosBuilderプロジェクトの編集 —  ネコ編集(後で必要なので、今のうちに編集) —  CCNode … Pos(%) x=25:y=35, Size W=72:H=123, Anc x=0.50:y=0.50, Tag:1 —  cat … Pos(%) x=50:y=25, Anc x=0.50:y=0.25 —  タイムライン編集 —  cat … Default Timeline (duration 00:00:20) —  00:00:00 … Rotation = 3 —  00:00:10 … Rotation = -3 —  00:00:20 … Rotation = 3 —  Chained Timeline … Default Timeline
  36. 36. (5) 複数アニメーション—  CocosBuilderプロジェクトの編集 —  タイムライン編集 (詳細は後述) —  Leftfoot (duration 00:00:10) —  Rightfoot (duration 00:00:10) —  Tumble —  Normal —  Goal (duration 00:00:15)—  Xcodeプロジェクトの編集 —  GameLayer.h —  GameLayer.cpp —  AppDelegate.cpp
  37. 37. (5) 複数アニメーション—  Leftfoot —  00:00:00 … Sprite frame: cat_leftfoot.png —  00:00:00 … Position: (%) x=50:y=25 —  00:00:05 … Position: (%) x=50:y=27 —  00:00:10 … Position: (%) x=50:y=25—  Rightfoot —  00:00:00 … Sprite frame: cat_rightfoot.png —  00:00:00 … Position: (%) x=50:y=25 —  00:00:05 … Position: (%) x=50:y=27 —  00:00:10 … Position: (%) x=50:y=25
  38. 38. (5) 複数アニメーション—  Tumble —  00:00:00 … Sprite frame: cat_tumble.png —  00:00:00 … Rotation: 90.0—  Goal —  00:00:00 … Sprite frame: cat_goal.png —  00:00:00 … Position: (%) x=50:y=25 —  00:00:05 … Position: (%) x=50:y=33 —  00:00:10 … Sprite frame: cat_goal.png —  00:00:10 … Position: (%) x=50:y=25 —  00:00:11 … Sprite frame: cat_normal.png —  Chained Timeline … Goal
  39. 39. (6) 時間・距離・リロード—  CocosBuilderプロジェクトの編集 —  ラベル追加 —  時間 … Doc root var: mTime —  距離 … Doc root var: mDistance —  ボタン追加 —  リロードボタン … Selector:tappedReset Normal Target:Document root —  左足ボタン … Doc root var: mLeftButton —  右足ボタン … Doc root var: mRightButton Selected—  Xcodeプロジェクトの編集 Disabled —  GameLayer.h —  GameLayer.cpp
  40. 40. おわり—  ありがとうございました。

×