Mais conteúdo relacionado Beginning gl.enchant2. 自己紹介
高橋 諒
@rtsan
株式会社ユビキタスエンターテインメント
秋葉原リサーチセンター
gl.enchant.jsの開発
12年4月23日月曜日
4. 例
シューティングゲーム
12年4月23日月曜日
7. Z軸が増えた
X
Y
Y
(x, y, z)
(x, y) X
Z
12年4月23日月曜日
12. gl.enchant.jsとは
•enchant.jsのプラグイン
•WebGLを使ったゲームを作れる
•インターフェースは2Dとほぼ同じ
12年4月23日月曜日
13. glMatrix.js
•行列・ベクトル演算のライブラリ
•内部で演算に使用している
12年4月23日月曜日
18. シェーディングができる
ambient + diffuse + specular = result
[0.3, 0.3, 0.3, 1.0] [0.5, 0.5, 0.5, 1.0] [0.5, 0.5, 0.5, 1.0]
0.3 0.5 0.5
12年4月23日月曜日
24. Hello, Cube
1 enchant();
2 window.onload = function() {
3 var game = new Game(640, 640);
4 game.onload = function() {
5 var scene = new Scene3D();
6 var box = new Cube();
7 scene.addChild(box);
8 };
9 game.start();
10 };
12年4月23日月曜日
27. の場合
プリミティブ
12年4月23日月曜日
31. プリミティブ
game.onload = function() {
......
var box = new Cube(1);
......
scene.addChild(box);
......
12年4月23日月曜日
32. テクスチャをはる
......
var box = new Cube(1);
box.mesh.texture =
new Texture('enchant.png');
box.mesh.texture.ambient =
[ 0.8, 0.8, 0.8, 1.0 ];
scene.addChild(box);
......
12年4月23日月曜日
33. マテリアル
各パラメータで陰影、反射の具合を設定する
ambient + diffuse + specular = result
[0.3, 0.3, 0.3, 1.0] [0.5, 0.5, 0.5, 1.0] [0.5, 0.5, 0.5, 1.0]
0.3 0.5 0.5
12年4月23日月曜日
36. モデルの読み込み
var game = new Game(640, 640);
game.preload('droid.dae');
game.onload = function() {
......
var droid =
game.assets['droid.dae'].clone();
scene.addChild(droid);
......
12年4月23日月曜日
37. note
•プリロードされたデータはSprite3D
のインスタンスとして格納されている
•clone()かset()で複製して使う
12年4月23日月曜日
39. 表示オブジェクトの移動
•translate(x, y, z);
•x, y, zプロパティの変更
Y
•どちらも平行移動
X
Z
12年4月23日月曜日
40. 平行移動だと
Z
translate(2, 0, 1)
X
12年4月23日月曜日
41. 直感的でない
Z
translate(2, 0, 1)
X
12年4月23日月曜日
42. 表示オブジェクトの移動
•forward(s)
→ オブジェクトのZ軸方向移動
•sidestep(s)
→ オブジェクトのX軸方向移動 Y
•altitude(s)
→ オブジェクトのY軸方向移動 X
Z
12年4月23日月曜日
43. 向きにあった移動
Z
forward(1.5)
X
12年4月23日月曜日
44. 表示オブジェクトの回転
•rotateRoll(rad)
→ オブジェクトのZ軸回転
•rotatePitch(rad)
→ オブジェクトのX軸回転 Yaw
•rotateYaw(rad)
→ オブジェクトのY軸回転 Pitch
Roll
12年4月23日月曜日
45. 表示オブジェクトの拡大縮小
•scaleX, scaleY, scaleZ
→ 拡大率の指定
Y
•scale(sx, sy, sz)
→ 拡大率をかける
X
Z
12年4月23日月曜日
46. Z軸で縮小すると
droid.scaleZ = 0.0125;
12年4月23日月曜日
47. 視点を操作する
を使います
(Camera3D)
12年4月23日月曜日
51. 上ベクトルで
カメラの傾きが決まる
12年4月23日月曜日
53. カメラの移動
•forward(s)
→ カメラのZ軸方向移動
•sidestep(s)
→ カメラのX軸方向移動
Z
•altitude(s)
→ カメラのY軸方向移動
X Y
12年4月23日月曜日
54. カメラの回転
•rotateRoll(rad)
→ カメラの視線ベクトル回転
•rotatePitch(rad)
→ カメラのX軸回転
Z
•rotateYaw(rad)
→ カメラの上ベクトル回転
X Y
12年4月23日月曜日
60. 変わるところ
•Scene3D() → PhyScene3D()
•Sprite3D() → PhySprite3D(rigid)
→ 剛体オブジェクトを渡す
12年4月23日月曜日
61. 剛体
0.5
var rigid = new RigidCube(0.5, 5)
12年4月23日月曜日
62. 変わるところ
•RigidBox(sx, sy, sz, mass)
→ 大きさ、質量を設定する
12年4月23日月曜日
63. Primitive
•Cube(s) → PhyCube(s, mass)
→ 剛体オブジェクトは内部で作られる
12年4月23日月曜日
64. 力を加える
•applyCentralImpulse(px, py, pz)
→ 物体の中心に力を加える
•applyImpulse(px, py, pz, x, y, z)
→ 指定した位置に力を加える
•clearForces()
→ 物体にかかっている力をリセットする
12年4月23日月曜日
65. 力を加える
(0, 25, -100)
12年4月23日月曜日
67. シミュレートの再生・停止
•PhyScene3D.play()
→ 物理世界の時間をうごかす
•PhyScene3D.stop()
→ 物理世界の時間をとめる
12年4月23日月曜日
68. 当たり判定
•PhySprite3D.contactTest()
→ 物理オブジェクト同士の厳密な当たり
判定
12年4月23日月曜日
71. とんとんずもう
•飛行機の中で作った(40分くらい)
•ドロイドくん(.dae)を物理化
•クリックすることで力を与える(だけ)
12年4月23日月曜日
72. ドロイドくんの物理化
var rigid =
new RigidCylinder(0.3, 1, 5);
var player = new PhySprite3D(rigid);
player.addChild(
game.assets['droid.dae'].clone())
player.childNodes[0].y = -1;
12年4月23日月曜日
73. 剛体を定義
r
h
var rigid = new PhyCylinder(0.3, 1, 5)
12年4月23日月曜日
74. 合わせる
rigid
var player =
player.addChild(...);
new PhySprite(rigid);
12年4月23日月曜日
76. ざくざくコイン
•コイン落としゲーム
•ハッカソンで作った(3∼5時間)
•ほとんどの処理を物理エンジンに任せる
12年4月23日月曜日
77. 初期化
•コインを空中にランダムに設置
•play()すると勝手にセットされる
12年4月23日月曜日
78. 処理
•押し出しバーを周期的に動かす
→ コインの挙動は物理エンジン任せ
•落ちたコインは当たり判定で回収
12年4月23日月曜日
83. 空
var sky = new Sphere(50);
sky.mesh.reverse();
sky.mesh.texture
= new Texture('sky.png');
sky.mesh.texture.ambient
= [ 1.0, 1.0, 1.0, 1.0 ];
sky.mesh.texture.diffuse
= [ 0.0, 0.0, 0.0, 1.0 ];
sky.mesh.texture.specular
= [ 0.0, 0.0, 0.0, 1.0 ];
scene.addChild(box);
12年4月23日月曜日