Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cocos2d-x(JS) ハンズオン #10「3D機能とVR機能」

809 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cocos2d-x(JS) ハンズオン #10「3D機能とVR機能」

  1. 1. Cocos2d-x(JS) ハンズオン #10 3D機能とVR機能 株式会社TKS2 清水友晶
  2. 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
  3. 3. http://line.me/S/sticker/1085672
  4. 4. 3D機能とVR機能  3D機能の紹介  js-tests  VR機能の紹介  Cocos Studioを利用した3D機能  シーン作成  アニメーション
  5. 5. 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
  6. 6. 3D機能  js-tests  BillBoard  Camera3D  Light  Particle3D  Physics3D  Sprite3D  Terrain
  7. 7. VR  Cocos2d-x v3.12より試験的にVR機能を追加  Oculus SDK  GearVR SDK  Deepon SDK  Cardboard SDK  予定されている追加機能  3Dオーディオ  DayDream SDK  2Dゲームに対するVRモジュール
  8. 8. Cocos Studioの利用
  9. 9. 3Dモデルについて  サポートしているファイル形式  objフォーマット  一般的な3Dモデルの形式  Sprite3Dクラスではアニメーション不可  c3bフォーマット(Cocos 3D Binary)  fbxフォーマット(Autodesk)を、Cocos2d-x向けに変換した 形式  Sprite3Dクラスでアニメーション可  fbxフォーマット ↓ (fbx-convツールにより変換) c3bフォーマット  c3tフォーマット(Cocos 3D Text)  JSONフォーマット
  10. 10. Cocos Studio
  11. 11. 前準備  resource.js var res = { HelloWorld_png : "res/HelloWorld.png", MainScene_json : "res/MainScene.json", Scene3D_json : "res/Scene3D.json", };
  12. 12. 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; } });
  13. 13. Cocos Studio
  14. 14. Sprite3Dクラス  setPosition3D(setPositionはZ値を変更しない)  setRotation3D(setRotationはZ値に相当する)  setScale  setColor, setOpacity  setVisible  setTexture etc...
  15. 15. アニメーション  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; }
  16. 16. アニメーション  ScaleTo, ScaleBy  RotateTo, RotateBy  Blink  TintTo, TintBy  FadeIn, FadeOut  Sequence, Spawn, Repeat, RepeatForever
  17. 17. アニメーション  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; }
  18. 18. アニメーション  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;
  19. 19. アニメーション  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;
  20. 20. 作業はここまで
  21. 21. 参考になるサイト  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
  22. 22. おわり  ありがとうございました

×