2015/7/29開催Cocos2d-xハンズオンセミナーの資料

1. Cocos2d-xハンズオンセミナー
Chukong Technologies Japan
清水

2. 清水 友晶
 Chukong Technologies
Japan株式会社
 Cocos2d-x広報活動
 イベントへの参加
 イベント開催
 Cocos2d-x関連サービスの開発
 マイブーム

3.  http://en.chukong-inc.com/
 開発ツール
 ゲーム開発
Chukong Technologies
 パブリッシング
 開発者コミュニティ

4. Chukong Technologies

5. Cocos2d-x
 http://cocos2d-x.org
 ゲームエンジン
 主に2Dゲーム向け
 Cocos2d-x v3.xより3Dにも対応
 オープンソース
 クロスプラットフォーム開発
 モバイル …iOS, Android, Windows Phone 8, Tizen
 デスクトップ …Windows, Mac OS X, Linux
 軽量・快速
 コアエンジンはC++で書かれている
 利用可能な開発言語
 C++, Lua, (JavaScript)

6. Cocos2d-xにおけるオープンソースのメリット
 全ての機能を無料で利用できる
 全てに対して制限なし
 レベニューシェアなし
 ロゴ表示の強制なし
 カスタマイズ可能
 自分に合ったエンジンに修正す
ることができる
 Cocos2d-xの開発に参加できる
 Github(プルリクエスト方式)
 多くの開発者により常に監視さ
れている

7. Cocos2d-x
 最新版: Cocos2d-x v3.7
 開発版: Github
 https://github.com/cocos2d/cocos2d-x
 開発者総数 300人以上
 開発の主体
 Chukong Technologies社
 開発リーダー
 〜v2.x 王哲 氏(Cocos2d-xの生みの親)
 v3.x〜 Ricardo Quesada 氏 (Cocos2dの生みの親)

8. v3.0
3D Objects
3D Action
v3.3
3D Animation
3D Lights
Camera
Bill Board
3D Collision
v3.5
3D Particles
Frustum Culling
Render Queue
v3.6
Skybox
Terrain
Cocos2d-xの3Dロードマップ
Navigation Mesh
3D Path finding
3D Physics
v3.7

9. パッケージサイズ縮小 in Cocos2d-x
v3.4
iOS ipa: 5.6M -> 4.3M
Android apk: 2.9M -> 2.0M
-1.3M
Sprite: vertex: 30010, draw 3, FPS 21
SpritePolygon: vertex: 330010, draw 5, FPS
30
+9 FPS
Android端末の互換性
2013，Cocos2d-x v2.2 - 85.71%
2014，Cocos2d-x v3.0 - 90.48%
2015，Cocos2d-x v3.5 - 99.37%
99.37%

10. 40%
TAIWAN
14%
JAPAN
32%
CHINA
55%
KOREA
28%
Cocos2d-xマーケットシェア
US

11. Cocos2d-xが利用されているアプリ
 大手ゲーム会社に利用されている
 Zynga, Wooga, Glu, IGG, Big Fish Games,
Fingersoft, Gamevil, GREE, DeNA, Konami,
CJ E&M, NHN, LINE, Square Enix, Disney Mobile, …

12. Cocos2d-xのシェア(7/5)

13.  Cocos Store
 ツール・フレームワークのダウンロード
 Cocos Studio
 アニメーションエディタ
 UIエディタ
Cocos
公式サイト
http://jp.cocos.com

14. 開発環境を
構築しよう！

15. Cocosのインストール for Mac

16. Cocosのインストール for Windows

17. Cocos Frameworkのインストール (1)

18. Cocos Frameworkのインストール (2)

19. Cocos Frameworkのインストール (3)

20. Cocos Frameworkのインストール (4)
 Mac
 Windows

21. プロジェクトを
作成しよう！

22. プロジェクト作成 (1)

23. プロジェクト作成 (2)

24. プロジェクト実行
 Mac
 Windows
Mac
Android
Windows

25. Xcode起動 for Mac

26. Visual Studio起動 for Windows

27. Visual Studio上での問題 (1)
 警告「warning C4819: ファイルは、現在のコー
ド ページ (932) で表示できない文字を含んでいま
す。データの損失を防ぐために、ファイルを
Unicode 形式で保存してください。」

28. Visual Studio上での問題 (2)
 該当ファイルの詳細設定より「Unicode(UTF8 シグネチャ
付き) – コードページ 65001」に設定を変更

29. ソースコードを
編集しよう！

30. ソースコードの編集 (1)
 HelloWorldScene.cppの36行目に下記を追加しよう
auto rootNode = CSLoader::createNode("MainScene.csb");
//背景画像を90度回転する
auto background = rootNode->getChildByName("Default");
background->setRotation(90);
addChild(rootNode);

31. ソースコードの編集 (2)
 背景画像が90度回転しています

32. シーングラフ

33. 新しい画像を
追加しよう！
http://goo.gl/yIlGt9

34. 画像の追加 (1)
 Cocos Studioを利用する場合、「cocosstudio」フォ
ルダに画像を配置します
 Import Resources...より、追加
した画像を選択します

35. 画像の追加 (2)
 画像が追加され、サムネイルが見れるようになります

36. 画像の追加 (3)
 追加した画像を、中央ペインに表示します
 Nameを「Trump」とします

37. 画像の追加 (4)
 既にエディタが立ち上がっている状態の場合、
「Publish Resource」を選択し、実行するだけで
エディタにも反映されます

38. 画像の追加 (5)
 Cocos Studioの変更が、Xcodeでも反映されています。

39. ソースコードを
編集しよう！

40. ソースコードの編集 (1)
 HelloWorldScene.cppの36行目に下記を追加しよう
auto rootNode = CSLoader::createNode("MainScene.csb");
//トランプを270度回転する
auto trump = rootNode->getChildByName("Trump");
trump->setRotation(270);
addChild(rootNode);

41. ソースコードの編集 (2)
 トランプが270度回転しています

42. ソースコードの編集 (3)
 状態を変化する命令
 位置 … setPosition
 回転 … setRotation
 伸縮 … setScale
 傾き … setSkew
 表示 … setVisible
 見えない値を設定
 タグ … setTag
 名前 … setName
 ユーザデータ … setUserData

43. ソースコードの編集 (4)
 HelloWorldScene.cppの36行目に下記を追加しよう
auto rootNode = CSLoader::createNode("MainScene.csb");
//トランプを移動する
auto trump = rootNode->getChildByName("Trump");
trump->runAction(MoveTo::create(3, Vec2(0, 0)));
addChild(rootNode);

44. ソースコードの編集 (5)
 トランプが左下に移動します

45. ソースコードの編集 (6)
 時間とともに変化するアクション
 移動 … MoveTo, MoveBy
 回転 … RotateTo, RotateBy
 伸縮 … ScaleTo, ScaleBy
 ジャンプ … JumpTo, JumpBy
 曲線 … BezierTo, BezierBy
 点滅 … Blink
 フェード … FadeTo, FadeBy

46. Cocos Studioによるアニメーション編集 (1)
 Cocos Studioのタイムラインを利用
 キーフレームを追加し、状態を変更する

47. Cocos Studioによるアニメーション編集 (2)
 HelloWorldScene.cppの36行目に下記を追加しよう
auto rootNode = CSLoader::createNode("MainScene.csb");
auto background = rootNode->getChildByName("Default");
//Cocos Studioのアニメーションを実行する
auto action = CSLoader::createTimeline("MainScene.csb");
background->runAction(action);
action->gotoFrameAndPlay(0, 30, true);
addChild(rootNode);

48. Cocos Studioによるアニメーション編集 (3)
 トランプが左下に移動します

49. 作業はここまで

50. AnySDK
 3rd SDK導入ツール
 http://anysdk.jp/
 開発: Chukong Technologies社
 最新版 Win, Mac … v1.5.1 β
 無料
 中国版…サービス展開中
 日本版…開発中
 3rd SDKを用意に導入
 広告・ペイメント・SNS
 ユーザ・解析・PUSH
 複数マーケット対応
 GooglePlay・Amazonストア
 AppStore・楽天ストア

51. Cocos2d-x, Cocos2d-JSの情報
 Cocos2d-x日本語サイト
http://jp.cocos.com
 Facebook
Cocos2d-x（日本語）
https://www.facebook.com/cocos2dxjapanese
 Twitter
@cocos2dx_jp
 Instagram
@cocos2dx_jp

52. ありがとうございました