2016/7/26 イベント＆コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #10 「3D機能とVR機能」の資料です。Cocos2d-xでも3D機能を利用できること、またさらにVRの機能も搭載されていることを紹介しました。

1. Cocos2d-x(JS) ハンズオン #10
3D機能とVR機能
株式会社TKS2 清水友晶

2. 清水 友晶
 株式会社TKS2
アプリ開発コンサル
Cocos2d-xサポート
スマホアプリ開発
TECH.C.非常勤講師
 プライベートでも
Cocos2d-xに関するゲーム開発
講演活動
執筆活動
 マイブーム: Ingress
 チラ裏開発メモ: http://tks2.net/memo
 SlideShare: http://www.slideshare.net/doraemonsss
 Facebook: http://www.facebook.com/doraemonsss

4. http://line.me/S/sticker/1085672

5. 3D機能とVR機能
 3D機能の紹介
 js-tests
 VR機能の紹介
 Cocos Studioを利用した3D機能
 シーン作成
 アニメーション

6. 3D機能
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
Navigation Mesh
3D Path finding
3D Physics
3D Shadow
3D Light Map
3D Effect
Water & Sea
Next

7. 3D機能
 js-tests
 BillBoard
 Camera3D
 Light
 Particle3D
 Physics3D
 Sprite3D
 Terrain

8. VR
 Cocos2d-x v3.12より試験的にVR機能を追加
 Oculus SDK
 GearVR SDK
 Deepon SDK
 Cardboard SDK
 予定されている追加機能
 3Dオーディオ
 DayDream SDK
 2Dゲームに対するVRモジュール

9. Cocos Studioの利用

10. 3Dモデルについて
 サポートしているファイル形式
 objフォーマット
 一般的な3Dモデルの形式
 Sprite3Dクラスではアニメーション不可
 c3bフォーマット（Cocos 3D Binary）
 fbxフォーマット(Autodesk)を、Cocos2d-x向けに変換した
形式
 Sprite3Dクラスでアニメーション可
 fbxフォーマット
↓ （fbx-convツールにより変換）
c3bフォーマット
 c3tフォーマット（Cocos 3D Text）
 JSONフォーマット

11. Cocos Studio

12. 前準備
 resource.js
var res = {
HelloWorld_png : "res/HelloWorld.png",
MainScene_json : "res/MainScene.json",
Scene3D_json : "res/Scene3D.json",
};

13. 3Dシーンの呼び出し
 app.js
var HelloWorldLayer = cc.Layer.extend({
ctor:function () {
this._super();
var size = cc.winSize;
var mainscene = ccs.load(res.Scene3D_json);
this.addChild(mainscene.node);
return true;
}
});

14. Cocos Studio

15. Sprite3Dクラス
 setPosition3D（setPositionはZ値を変更しない）
 setRotation3D（setRotationはZ値に相当する）
 setScale
 setColor, setOpacity
 setVisible
 setTexture
etc...

16. アニメーション
 app.js
ctor:function () {
this._super();
var size = cc.winSize;
var mainscene = ccs.load(res.Scene3D_json);
this.addChild(mainscene.node);
var tortoise = mainscene.node.getChildByName("Tortoise");
tortoise.setPosition3D(cc.math.vec3(0, 0, 0));
return true;
}

17. アニメーション
 ScaleTo, ScaleBy
 RotateTo, RotateBy
 Blink
 TintTo, TintBy
 FadeIn, FadeOut
 Sequence, Spawn, Repeat, RepeatForever

18. アニメーション
 app.js
ctor:function () {
this._super();
var size = cc.winSize;
var mainscene = ccs.load(res.Scene3D_json);
this.addChild(mainscene.node);
var tortoise = mainscene.node.getChildByName("Tortoise");
tortoise.setPosition3D(cc.math.vec3(0, 0, 0));
//アニメーション
var move = cc.moveTo(10.0, cc.math.vec3(-20, 0, 0));
tortoise.runAction(move);
return true;
}

19. アニメーション
 app.js
//アニメーション
var move = cc.moveTo(10.0, cc.math.vec3(-20, 0, 0));
tortoise.runAction(move);
var animation = new jsb.Animation3D("res/tortoise.c3b");
if(animation){
var animate = new jsb.Animate3D(animation);
tortoise.runAction(new cc.RepeatForever(animate));
}
return true;

20. アニメーション
 app.js
//アニメーション
var move1 = cc.moveTo(10.0, cc.math.vec3(-20, 0, 0));
var rotate1 = cc.rotateBy(5.0, {x : 0, y : 180, z : 0});
var move2 = cc.moveTo(20.0, cc.math.vec3(20, 0, 0));
var rotate2 = cc.rotateBy(5.0, {x : 0, y : 180, z : 0});
var move3 = cc.moveTo(10.0, cc.math.vec3(0, 0, 0));
var seq = cc.sequence(move1, rotate1, move2, rotate2, move3);
var rep = cc.repeatForever(seq);
tortoise.runAction(rep);
var animation = new jsb.Animation3D("res/tortoise.c3b");
if(animation){
var animate = new jsb.Animate3D(animation);
tortoise.runAction(new cc.RepeatForever(animate));
}
return true;

21. 作業はここまで

22. 参考になるサイト
 Cocos公式Wiki
http://www.cocos2d-
x.org/wiki/Cocos2d-JS
 Cocos2d-JS APIリファレンス
http://cocos2d-x.org/wiki/Reference
 Qiita
（tag: cocos2d-js）
https://qiita.com

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