こんにちは、ナレコム前川です。
今回は、Amazon Sumerian の公式チュートリアルのPhysics Part 2を進めていきたいと思います。
ここで学ぶのは、
・Rigid Body component
・Collider component
・State Machine
・Scripting
の4つです。
それでは、進めていきましょう。
1. 2つの Bumper を追加
まずはじめに、Table の傾きを 0 に変更してください。
まずはじめに、Table の傾きを 0 に変更してください。
① Bumper1 を選択し、複製。 Bumper4, Bumper5 を追加。
※ここは好きなように配置して良いです。
2. Slant の追加
① Create Entity から Box を 2つ 追加。
① Create Entity から Box を 2つ 追加。
② 名前を 「LeftSlant」と「RightSlant」に変更。
① Create Entity から Box を 2つ 追加。
② 名前を 「LeftSlant」と「RightSlant」に変更。
③ Transform を以下のように設定。
④ それぞれ Collider コンポーネントを追加し、以下のように設定。
– Friction : 0
– Restitution : 0.5
設定が完了したら、キャンバス内では以下のように配置されていると思います。
3. Flipper の追加
Flipper Pivot
① Create Entity から Empty Entity を 2つ 追加。
② 名前を「LeftFlipperPivot」と「RightFlipperPivot」に変更。
③ Transform をそれぞれ以下のように設定。
④ それぞれ Rigit Body コンポーネントを追加して、Kinematic にチェックを入れる。
Flipper
① Create Entity から Box を 2 つ追加。
② 名前を「LeftFlipper」と「RightFlipper」に変更。
① Create Entity から Box を 2 つ追加。
② 名前を「LeftFlipper」と「RightFlipper」に変更。
③ それぞれの Flipper を FlipperPivot の子要素にする。
④ それぞれの Flipper の Transform を以下のようにする
⑤ 両方に Collider コンポーネントを追加し、以下のように設定。
4. Script の追加
① Table を選択して、Script コンポーネントを追加。
① Table を選択して、Script コンポーネントを追加。
② + ボタンをクリックし、Customを選択。
③ 編集ボタンをクリックして、エディタを開く。
1var setup = function(args, ctx, sumerian) {2 ctx.speed = 8;34 ctx.cw = new sumerian.Vector3(0, ctx.speed, 0); // clockwise rotation5 ctx.ccw = new sumerian.Vector3(0, -ctx.speed, 0); // counterclockwise rotation6 ctx.tempVec = new sumerian.Vector3(0,0,0);7 ctx.tempQuat = new sumerian.Quaternion();89 ctx.roundit = function(v) { return Math.round(v * 100) / 100; };1011 function initFlipper(name, dir, vec) {12 var f = ctx.world.by.name(name).first();13 f.on = false;14 f.lr = f.transformComponent.transform.rotation; // local rotation shortcut15 f.wr = f.transformComponent.worldTransform.rotation; // world rotation shortcut16 f.lr.toAngles(ctx.tempVec);17 f.start = ctx.roundit(ctx.tempVec.y); // flipper start rotation18 f.goal = ctx.roundit(ctx.tempVec.y + dir); // flipper end rotation19 f.wr.applyPost(vec); // tilt the cw or ccw rotation vector along the table slope20 return f;21 }2223 ctx.LeftFlipper = initFlipper('LeftFlipperPivot', Math.PI * 0.25, ctx.cw);24 ctx.RightFlipper = initFlipper('RightFlipperPivot', -Math.PI * 0.25, ctx.ccw);2526 ctx.ball = ctx.world.by.name('Ball').first();2728 function react(e, flag, dirLeft, dirRight) {29 switch(e.keyCode){30 case sumerian.ScriptUtils._keys.Leftarrow:31 case sumerian.ScriptUtils._keys.A:32 if(flag === ctx.LeftFlipper.on){33 ctx.LeftFlipper.on = !flag;34 ctx.LeftFlipper.rigidBodyComponent.setAngularVelocity(dirLeft);35 }36 break;37 case sumerian.ScriptUtils._keys.Rightarrow:38 case sumerian.ScriptUtils._keys.D:39 if(flag === ctx.RightFlipper.on){40 ctx.RightFlipper.on = !flag;41 ctx.RightFlipper.rigidBodyComponent.setAngularVelocity(dirRight);42 }43 break;44 }45 }4647 ctx.keydown = function(e) {48 react( e,false,ctx.cw,ctx.ccw);49 };50 ctx.keyup = function(e) {51 react( e,true,ctx.ccw,ctx.cw);52 };53 document.body.addEventListener('keydown', ctx.keydown, false);54 document.body.addEventListener('keyup', ctx.keyup, false);55 document.body.addEventListener('touchstart', ctx.keydown, false);56 document.body.addEventListener('touchend', ctx.keyup, false);5758 ctx.checkTarget = function(flipper, target, speed, comparator) {59 var tc = flipper.transformComponent;60 flipper.lr.toAngles(ctx.tempVec);61 var rot = ctx.roundit(ctx.tempVec.y);62 if(rot !== flipper.goal){63 var angle = ctx.tempVec.y + speed * ctx.world.tpf;64 if( (comparator === '>=' && angle >= target) || (comparator === '=');65 } else {66 ctx.checkTarget( ctx.LeftFlipper, ctx.LeftFlipper.start, -ctx.speed, '=');67 }68};保存して、エディタを閉じたら実行してみてください。
実行の様子は以下からご覧ください。
キーボードの ← → ボタンをクリックすると、追加したFlipperを動かすことができます。
これで、落ちてきたボールを跳ね返して遊ぶことができるようになっています。
今回のチュートリアルは以上です。
お疲れ様でした。
