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

1. cocos2d-x公開講座(3/22)
cocos2d-x実践講座(3/23)
in 鹿児島
株式会社TKS2 清水友晶

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. — http://cocos2d-x.jp
— cocos2d-x開発元Chukong Technologies社公認
— cocos2d-xのための自由なコミュニティー
— 入門者から上級者まで誰でもOK!!ぜひご参加を!
— cocos2d-xに関することなら何でも投稿できます!!
— https://www.facebook.com/groups/152840204871454/

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. 目次
— 3/22(金)
— cocos2d-xの紹介
— WindowsでAndroidアプリを作成する
方法の紹介
— CocosBuilderの紹介
— CocosBuilderをさわってみよう！
— 3/23(土)
— CocosBuilderでアプリをつくろう！

6. cocos2d-xの紹介

7. cocos2d-xの紹介
— 2Dゲームフレームワーク
— オープンソース（MITライセンス）
— マルチプラットフォーム開発
— Android, iOS, …（7種類）
— Win32, Mac, Linux
— 開発言語 … C++, Lua, Javascript
— どんなことができるのか？
èTestCPPを見てみましょう

8. WindowsでAndroidアプリを
作成する方法の紹介

9. cocos2d-xの開発環境を整える
— cocos2d-xインストール
— Android SDK + Eclipseインストール
— Android NDKインストール
— Cygwinインストール
— Javaインストール
— pythonインストール
— Eclipseの設定
— プロジェクト作成
— Android実機転送

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. cocos2d-xの開発環境を整える
— Android SDK + Eclipseダウンロード
http://developer.android.com/sdk/
— 任意のディレクトリへ展開
C:¥adt-bundle-windows

12. cocos2d-xの開発環境を整える
— Android NDKダウンロード
http://developer.android.com/tools/sdk/ndk/
— 任意のディレクトリへ展開
C:¥android-ndk-r8d

13. cocos2d-xの開発環境を整える
— Cygwinダウンロード
http://cygwin.com/install.html
setup.exeのリンクをクリックするとダウンロード可

14. cocos2d-xの開発環境を整える
— Cygwinインストール
— 基本的には手順通り
— パッケージに「make」を選択する

15. cocos2d-xの開発環境を整える
— Javaダウンロード
http://www.oracle.com/technetwork/java/javase/
downloads/index.html
— Javaインストール

16. cocos2d-xの開発環境を整える
— Pythonダウンロード
http://www.python.org/download/
— Pythonインストール

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. 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. cocos2d-xの開発環境を整える
— SDK Manager起動
C:¥adt-bundle-windows/SDK Manager.exe
— オススメ è Android 2.2 (API 8) ‒ SDK Platform

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. cocos2d-xの開発環境を整える
— Eclipseでプロジェクトを読込む
— File > New > Project
— Android > Android Project from Existing Code
— Android実機転送
— Run > Run

22. CocosBuilderの紹介

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. 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. CocosBuilderをさわってみよう

26. CocosBuilderの使い方1
— 基本設定
— プロジェクトの作成
— デフォルトではJSB向けの設定になっている
ècocos2d-x向けの設定に変更
— 出力設定
— 解像度追加・変更
— 表示設定
— 解像度変更
— 見た目の変更
cocos2d-2.1beta3-x-2.1.1/samples/Cpp/TestCpp/Resources/
CocosBuilderExample.ccbproj

27. CocosBuilderの使い方2
— リソース追加
— 画像・テクスチャアトラス
— パーティクル
— クラス追加
— 画像の調整
— アニメーション編集
— タイムラインの追加
— スティッキーノート追加

28. CocosBuilderのアニメーションを
さわってみよう
— 次のネコ画像を使って、アニメーションを楽しもう！
http://tks2.net/nyanrun/images.zip

29. CocosBuilderでアプリを作ろう！

30. 簡単なゲームを作ってみる

31. 簡単なゲームを作ってみる
— タップしてネコを走らせるゲームを作ります
— 単純すぎてゴメンなさい。。。
— でも基本的な機能は全部盛り込んでいます
— CocosBuilderファイルの作成
— ボタンタップイベントの取得
— 他のオブジェクトの取得
— 複数アニメーションの設定
— 時間の都合上、解像度480 x 320のみの説明とします
— CocosBuilderとcocos2d-xのマルチレゾリューションサポー
トを利用して簡単に対応できますが、いろいろと罠が潜んでい
ます。詳細については執筆中の本にて書く予定です。
— http://tks2.net/nyanrun/images.zip

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