Cocos2d-x ハンズオンセミナー

Chukong Technologies Japan清水

清水 友晶

Chukong Technologies　　　　 Japan 株式会社 Cocos2d-x 広報活動

イベントへの参加 イベント開催

Cocos2d-x 関連サービスの開発

マイブーム

http://en.chukong-inc.com/

開発ツール

ゲーム開発

Chukong Technologies

パブリッシング

開発者コミュニティ

Chukong Technologies

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)

Cocos2d-x におけるオープンソースのメリット

全ての機能を無料で利用できる 全てに対して制限なし レベニューシェアなし ロゴ表示の強制なし

カスタマイズ可能 自分に合ったエンジンに修正す

ることができる Cocos2d-x の開発に参加できる

Github( プルリクエスト方式 ) 多くの開発者により常に監視さ

れている

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 の生みの親 )

v3.0

3D Objects3D Action

v3.3

3D Animation3D LightsCameraBill Board3D Collision

v3.5

3D ParticlesFrustum CullingRender Queue

v3.6

SkyboxTerrain

Cocos2d-x の 3D ロードマップ

Navigation Mesh3D Path finding3D Physics

v3.7

パッケージサイズ縮小 in Cocos2d-x v3.4iOS ipa: 5.6M -> 4.3MAndroid apk: 2.9M -> 2.0M

-1.3M

Sprite: vertex: 30010, draw 3, FPS 21SpritePolygon: 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%

40%TAIWAN

14%

JAPAN

32%

CHINA

55%

KOREA

28%

Cocos2d-xマーケットシェア

US

Cocos2d-x が利用されているアプリ

大手ゲーム会社に利用されている Zynga, Wooga, Glu, IGG, Big Fish Games,

Fingersoft, Gamevil, GREE, DeNA, Konami,CJ E&M, NHN, LINE, Square Enix, Disney Mobile, …

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

Cocos Store ツール・フレームワークのダウンロード

Cocos Studio アニメーションエディタ UI エディタ

Cocos

公式サイトhttp://jp.cocos.com

開発環境を構築しよう！

Cocos のインストール for Mac

Cocos のインストール for Windows

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

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

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

Cocos Framework のインストール (4)

Mac

Windows

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

プロジェクト作成 (1)

プロジェクト作成 (2)

プロジェクト実行

Mac

Windows

Mac

Android

Windows

Xcode 起動 for Mac

Visual Studio 起動 for Windows

Visual Studio 上での問題 (1)

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

Visual Studio 上での問題 (2)

該当ファイルの詳細設定より「 Unicode(UTF8 シグネチャ付き ) – コードページ 65001 」に設定を変更

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

ソースコードの編集 (1)

HelloWorldScene.cpp の 36 行目に下記を追加しよう

auto rootNode = CSLoader::createNode("MainScene.csb");

// 背景画像を 90 度回転するauto background = rootNode->getChildByName("Default");background->setRotation(90);

addChild(rootNode);

ソースコードの編集 (2)

背景画像が 90 度回転しています

シーングラフ

新しい画像を追加しよう！

http://goo.gl/yIlGt9

画像の追加 (1)

Cocos Studio を利用する場合、「 cocosstudio 」フォルダに画像を配置します

Import Resources... より、追加した画像を選択します

画像の追加 (2)

画像が追加され、サムネイルが見れるようになります

画像の追加 (3)

追加した画像を、中央ペインに表示します Name を「 Trump 」とします

画像の追加 (4)

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

画像の追加 (5)

Cocos Studio の変更が、 Xcode でも反映されています。

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

ソースコードの編集 (1)

HelloWorldScene.cpp の 36 行目に下記を追加しよう

auto rootNode = CSLoader::createNode("MainScene.csb");

// トランプを 270 度回転するauto trump = rootNode->getChildByName("Trump");trump->setRotation(270);

addChild(rootNode);

ソースコードの編集 (2)

トランプが 270 度回転しています

ソースコードの編集 (3)

状態を変化する命令 位置 … setPosition

回転 … setRotation

伸縮 … setScale

傾き … setSkew

表示 … setVisible

見えない値を設定 タグ … setTag

名前 … setName

ユーザデータ … setUserData

ソースコードの編集 (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);

ソースコードの編集 (5)

トランプが左下に移動します

ソースコードの編集 (6)

時間とともに変化するアクション 移動 … MoveTo, MoveBy

回転 … RotateTo, RotateBy

伸縮 … ScaleTo, ScaleBy

ジャンプ … JumpTo, JumpBy

曲線 … BezierTo, BezierBy

点滅 … Blink

フェード … FadeTo, FadeBy

Cocos Studio によるアニメーション編集 (1)

Cocos Studio のタイムラインを利用 キーフレームを追加し、状態を変更する

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);

Cocos Studio によるアニメーション編集 (3)

トランプが左下に移動します

作業はここまで

AnySDK 3rd SDK 導入ツール

http://anysdk.jp/

開発 : Chukong Technologies 社 最新版 Win, Mac … v1.5.1 β

無料 中国版…サービス展開中 日本版…開発中

3rd SDK を用意に導入 広告・ペイメント・ SNS

ユーザ・解析・ PUSH

複数マーケット対応 GooglePlay ・ Amazon ストア AppStore ・楽天ストア

Cocos2d-x, Cocos2d-JS の情報

Cocos2d-x 日本語サイトhttp://jp.cocos.com

FacebookCocos2d-x （日本語）https://www.facebook.com/cocos2dxjapanese

Twitter@cocos2dx_jp

Instagram@cocos2dx_jp

ありがとうございました