1. Cocos2d-x ハンズオン勉強会
株式会社TKS2 清水友晶

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. もうすぐ出版されます！
入�門編 応用編
CCOOMMIINNGG CCOOMMIINNGG
SSOOOONN SSOOOONN

4. おやこでスマほん
— 株式会社スマートエデュケーション

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

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. 目次
— cocos2d-xの紹介
— iOS向け開発環境の構築方法
— かんたんな利用方法の説明
— Android向け開発環境の構築方法
— ゲームを作ってみよう！
— 画像表示
— 画面タップ処理
— ボタン配置
— 永続データ
— 開発を簡単にするツール

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

9. cocos2d-xで作るメリット
— オープンソース(MITライセンス)
— 無償
— ソース公開
— クロスプラットフォーム開発
— 開発期間の短縮
— 資産の有効活用
— 効率化
— 画像処理のパフォーマンスアップ
— 各OSのフレームワークを詳しく知らなくてもア
プリを作成することができる

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. iOS向け開発環境を整える
— cocos2d-xダウンロード
http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download
— 任意のディレクトリへ展開
/Users/Sumomo/cocos2d-2.1rc0-x-2.1.2

12. iOS向け開発環境を整える
— Mac App StoreよりXcodeダウンロード

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. iOSの開発環境を整える
— Xcodeでプロジェクトを読込む
— cocos2d-2.1rc0-x-2.1.2/projects/MyProject/
proj.ios/MyProject.xcodeproj
— アプリ起動
— Product > Run

15. テンプレートプロジェクトから学ぶ
— プロジェクトには次のディレクトリがある
— Classes
èソースファイルを格納
— Resources
è画像・音声などのリソースファイルを格納
— 最初に用意されているクラスは次の2つ
— AppDelegateクラス
— HelloWorldクラス

16. テンプレートプロジェクトから学ぶ
— AppDelegateには次のメソッドがある
— applicationDidFinishLaunching()
— アプリ起動時に処理され、アプリのセッティングを行う
— 最初のシーンを呼び出す
— applicationDidEnterBackground()
— アプリがスリープする時に処理され、アプリの停止を行う
— applicationWillEnterForeground()
— アプリ復帰時に処理され、アプリの再開を行う

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. テンプレートプロジェクトから学ぶ
— オブジェクトを移動させてみる
2秒で画面右端へ移動する
CCMoveTo* move = CCMoveTo::create(2.0f, ccp(size.width, size.height/2) );
pSprite->runAction(move);

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. 今後の勉強方法について
— cocos2d-x Wikiを調べる
http://www.cocos2d-x.org/projects/cocos2d-x/
wiki
— cocos2d-x Referenceを調べる
— TestCppで調べる
— ググってみる
— cocos2d-x フォーラムで質問する
— cocos2d-x.jp communityで質問する

21. Android向け開発環境を整える
— cocos2d-xインストール
— Android SDK + Eclipseインストール
— Android NDKインストール
— ADT(Eclipse)の設定
— プロジェクト作成
— Android実機転送

22. Android向け開発環境を整える
— cocos2d-xダウンロード
http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download
— 任意のディレクトリへ展開
/Users/Sumomo/cocos2d-2.1rc0-x-2.1.2

23. Android向け開発環境を整える
— Android SDK + Eclipseダウンロード
http://developer.android.com/sdk/
— 任意のディレクトリへ展開
/Users/Sumomo/adt-bundle-mac

24. Android向け開発環境を整える
— SDK Manager起動
Window > Android SDK Manager
Android 2.2 (API 8) > SDK Platform

25. Android向け開発環境を整える
— Android NDKダウンロード
http://developer.android.com/tools/sdk/ndk/
— 任意のディレクトリへ展開
/Users/Sumomo/android-ndk-r8e

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. 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. 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. ゲームを作ってみよう！
— 1から25まで順番にタップするカードゲーム

30. ゲームを作ってみよう！
— カードのダウンロードは
http://tks2.net/other/cards.zip
— iOSシミュレータ (Retina 3.5-inch)

31. ゲームを作ってみよう！
— まずはカードの配置
https://gist.github.com/4239354

32. ゲームを作ってみよう！
— カードのタップ
https://gist.github.com/4239351

33. ゲームを作ってみよう！
— 時間表示
https://gist.github.com/4239350

34. ゲームを作ってみよう！
— ハイスコア表示
https://gist.github.com/4239338

35. ゲームを作ってみよう！
— ゲームリトライ
https://gist.github.com/4238817
— 完成！！

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. CocosBuilder
— オープンソース
(MIT)
— レイヤー作成
— 複数アニメーション
の作成
— デザイナーがレイア
ウトを調整できる
— マルチレゾリュー
ション対応が可能
http://cocosbuilder.com

38. LevelHelper
— レイヤー作成
— 物理エンジンの適用
が可能
— パラレックス作成
— 画像をパスに沿って
移動することが可能
— シミュレータ上で直
ぐに確認

39. spine
— アニメーション作成
— Boneを複数連結させ
ることでスムーズな
アニメーションを作
成する
— ランタイムはオープ
ンソース(BSD)
http://esotericsoftware.com

40. Super Animation Converter
— Adobe Flashで作成さ
れたswfファイルを、
cocos2d-xで読込める
形式(sam)に変換する
— 複数アニメーションの
作成
https://github.com/raymondlu/super-animation-samples

41. TexturePacker
— テクスチャアトラス
作成
— 条件によっては無料
で利用可能
http://www.codeandweb.com/texturepacker

42. zwoptex
— テクスチャアトラス
作成
http://www.zwopple.com/zwoptex/

43. SpriteHelper
— テクスチャアトラ
ス作成
— 物理エンジンで利
用可能なシェイプ
を作成
— フレームアニメー
ション作成
— LevelHelperと連
携可能
http://www.gamedevhelper.com/spritehelper/

44. PhysicsEditor
— 物理エンジンで利
用可能なシェイプ
を作成
— 条件によっては無
料で利用可能
http://www.codeandweb.com/physicseditor

45. GlyphDesigner
— ビットマップフォ
ント作成
— グラデーション
— アウトライン
— シャドウ
— 日本語可
http://www.71squared.com/glyphdesigner

46. ParticleDesigner
— パーティクル作成
— 30以上のパラメー
タをGUIで編集
— 公開されているパー
ティクルを利用可能
— ビューアで確認
http://www.71squared.com/particledesigner

47. Tiled Map Editor
— タイルマップ作成
— 正面から見た四角
— 斜めから見たひし
形
http://www.mapeditor.org

48. おわり
— ありがとうございました