Add ESM Script Documentation

docs/tutorials/Using-forces-on-rigid-bodies.md

@@ -113,6 +113,90 @@ We include a reset function that brings the cube to its original position and, a
 
 ## Full code listing
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem  value="esm" label="ESM">
+
+```javascript
+import { ScriptType, Vec3, EVENT_KEYDOWN } from 'playcanvas';
+import { KEY_LEFT, KEY_RIGHT, KEY_UP, KEY_A, KEY_D, KEY_W, KEY_S, KEY_F, KEY_R } from 'playcanvas';
+
+export class Movement extends ScriptType {
+
+    // initialize code called once per entity
+    initialize() {
+        this.torque = 7;
+        this.app.keyboard.on(EVENT_KEYDOWN, this.onKeyDown, this);
+
+        this.on('destroy', function() {
+            this.app.keyboard.off(EVENT_KEYDOWN, this.onKeyDown, this);
+        }, this);
+    }
+
+    onKeyDown(event) {
+        event.event.preventDefault();
+    }
+
+    // update code called every frame
+    update(dt) {
+        //update player's position
+        this.playerPos = this.entity.getLocalPosition();
+
+        const app = this.app;
+
+        //keyboard controls and applying forces and moments.
+        if (app.keyboard.isPressed(KEY_LEFT) ) {
+            this.entity.rigidbody.applyImpulse(-1, 0, 0);
+        }
+        if (app.keyboard.isPressed(KEY_RIGHT) ) {
+            this.entity.rigidbody.applyImpulse(1, 0, 0);
+        }
+        if (app.keyboard.isPressed(KEY_UP) ) {
+            this.entity.rigidbody.applyImpulse(0, 1, 0);
+        }
+        if (app.keyboard.isPressed(KEY_A) ) {
+            this.entity.rigidbody.applyTorque(0, this.torque, 0);
+        }
+        if (app.keyboard.isPressed(KEY_D) ) {
+            this.entity.rigidbody.applyTorque(0, -this.torque, 0);
+        }
+        if (app.keyboard.isPressed(KEY_W) ) {
+            this.entity.rigidbody.applyTorque(-this.torque, 0, 0);
+        }
+        if (app.keyboard.isPressed(KEY_S) ) {
+            this.entity.rigidbody.applyTorque(this.torque, 0, 0);
+        }
+        if (app.keyboard.isPressed(KEY_F) ) {
+            this.entity.rigidbody.applyForce(0, 9.8, 0);
+        }
+
+        // Keeping the cube on screen - cube moves off of one screen edge then appears from the opposite edge.
+        if (this.playerPos.x < -9.0) {
+            this.entity.rigidbody.teleport(8.8, this.playerPos.y, this.playerPos.z);
+        }
+        if (this.playerPos.x > 9.0) {
+            this.entity.rigidbody.teleport(-8.8, this.playerPos.y, this.playerPos.z);
+        }
+
+        // cube reset control
+        if (app.keyboard.wasPressed(KEY_R) ) {
+            this.reset();
+        }
+    }
+
+    reset() {
+        this.entity.rigidbody.teleport(0, 2, 0);
+        this.entity.rigidbody.linearVelocity = Vec3.ZERO;
+        this.entity.rigidbody.angularVelocity = Vec3.ZERO;
+    }
+}
+```
+
+</TabItem>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 var DynamicBody = pc.createScript('dynamicBody');
 
@@ -184,6 +268,9 @@ DynamicBody.prototype.reset = function () {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 [1]: https://api.playcanvas.com/classes/Engine.RigidBodyComponent.html#applyForce
 [2]: https://api.playcanvas.com/classes/Engine.RigidBodyComponent.html#applyImpulse
 [3]: https://api.playcanvas.com/classes/Engine.RigidBodyComponent.html#applyTorque

docs/tutorials/anim-blending.md

@@ -75,6 +75,38 @@ With the animations fully set up, we now need to make it possible for users to i
 
 Remember that parameter `punch` that we set up before? This script will simply toggle that parameter on and off depending on whether the ‘P’ key is currently pressed and whether the character is currently punching:
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem  value="esm" label="ESM">
+
+```javascript
+import { ScriptType, EVENT_KEYDOWN, EVENT_KEYUP, KEY_P } from 'playcanvas';
+
+export class KeyboardControls extends ScriptType {
+
+    // initialize code called once per entity
+    initialize() {
+        this.app.keyboard.on(EVENT_KEYDOWN, this.keyDown, this);
+        this.app.keyboard.on(EVENT_KEYUP, this.keyUp, this);
+    }
+
+    update(dt) {
+        if (this.app.keyboard.wasPressed(KEY_P) && (this.entity.anim.baseLayer.activeState !== 'Punch')) {
+            this.entity.anim.setBoolean('punch', true);
+        }
+
+        if (this.app.keyboard.wasReleased(KEY_P) && (this.entity.anim.baseLayer.activeState === 'Punch')) {
+            this.entity.anim.setBoolean('punch', false);
+        }
+    }
+}
+```
+
+</TabItem>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 var KeyboardControls = pc.createScript('keyboardControls');
 
@@ -95,6 +127,9 @@ KeyboardControls.prototype.update = function(dt) {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 From this point, you are able to add more and more animations to the animstategraph asset and start building much more complex animation state graphs!
 
 See the full Scene [here](https://playcanvas.com/editor/scene/1065029)

docs/tutorials/animation-blending.md

@@ -40,6 +40,56 @@ In the image you can see the animation component in the Inspector. There are 2 a
 
 So this kind of functionality goes beyond the abilities of the humble animation component. A script component is required to cook up this additional behavior. You can see the script component in the above screenshot of the skinned character entity in Editor and it refers to a JS file called animation_blending.js. The contents of this file is:
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem  value="esm" label="ESM">
+
+```javascript
+import { ScriptType, KEY_P } from 'playcanvas';
+
+export class AnimationBlending extends ScriptType {
+    static states = {
+        idle: {
+            animation: 'male.json'
+        },
+        punch: {
+            animation: 'male_uppercut_jab.json'
+        }
+    }
+
+    // initialize code called once per entity
+    initialize() {
+        this.blendTime = 0.2;
+
+        this.setState('idle');
+    };
+
+    update(dt) {
+        if (this.app.keyboard.wasPressed(KEY_P)) {
+            this.setState('punch');
+        }
+
+        if (this.app.keyboard.wasReleased(KEY_P)) {
+            this.setState('idle');
+        }
+    };
+
+    setState(state) {
+        const states = AnimationBlending.states;
+
+        this.state = state;
+        // Set the current animation, taking 0.2 seconds to blend from
+        // the current animation state to the start of the target animation.
+        this.entity.animation.play(states[state].animation, this.blendTime);
+    };
+}
+```
+
+</TabItem>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 var AnimationBlending = pc.createScript('animationBlending');
 
@@ -79,6 +129,9 @@ AnimationBlending.prototype.setState = function (state) {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 From this point, you are able to add more and more animations to the animation component and start scripting much more complex animation state charts.
 
 See [the full Scene here][2]

docs/tutorials/collision-and-triggers.md

@@ -63,6 +63,34 @@ The next Entity we'll need is the trigger.
 
 With this Entity we have a *collision* component but no *rigidbody* so it acts as a trigger. The trigger Entity also has a *script* component with some code attached. Triggers are only useful if something happens when they are triggered, so we need to add some code to fire and listen for events when the trigger is activated.
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem  value="esm" label="ESM">
+
+```javascript
+import { ScriptType } from 'playcanvas';
+
+export class Trigger extends ScriptType {
+    // initialize code called once per entity
+    initialize() {
+        this.entity.collision.on('triggerenter', this.onTriggerEnter, this);
+    };
+
+    onTriggerEnter(entity) {
+        this.entity.rigidbody.linearVelocity = pc.Vec3.ZERO;
+        this.entity.rigidbody.angularVelocity = pc.Vec3.ZERO;
+        // Reset back to roughly the position the entity started in.
+        const position = entity.getPosition();
+        this/entity.rigidbody.teleport(position.x, 10, 0);
+    };
+}
+```
+
+</TabItem>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 var Trigger = pc.createScript('trigger');
 
@@ -80,6 +108,9 @@ Trigger.prototype.onTriggerEnter = function(entity) {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 There two significant parts to the code above.
 
 First in the ```initialize``` method we start listening to the **triggerenter** event. This event fires once when a rigid body enters a trigger volume (where a trigger volume is an entity that has a collision component but no rigidbody component). The companion event is **triggerleave** which is fired once the penetrating rigid body leaves the trigger.
@@ -114,6 +145,29 @@ The difference between **contact** and **collisionstart** is subtle but importan
 
 Both events are useful, but in this demo we'll use the **collisionstart** event to trigger a sound effect that plays when the objects hit the ground. Here's the code:
 
+<Tabs defaultValue="classic" groupId='script-code'>
+<TabItem  value="esm" label="ESM">
+
+```javascript
+import { ScriptType } from 'playcanvas';
+
+export class Collider extends ScriptType {
+    // initialize code called once per entity
+    initialize() {
+        this.entity.collision.on('collisionstart', this.onCollisionStart, this);
+    }
+
+    onCollisionStart(result) {
+        if (result.other.rigidbody) {
+            this.entity.sound.play("hit");
+        }
+    }
+}
+```
+
+</TabItem>
+<TabItem value="classic" label="Classic">
+
 ```javascript
 var Collider = pc.createScript('collider');
 
@@ -129,6 +183,9 @@ Collider.prototype.onCollisionStart = function (result) {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 In the ```initialize``` method we set up the event listener, and then in the event handler we check to see if the other entity has a **rigidbody** component (this is to avoid playing a sound when we enter a trigger volume) and then we play the "hit" sound effect. So now, every time an Entity with the collider script attached collides with another rigid body, it will play the hit sound.
 
 And that's all there is to handling Collisions and Triggers in PlayCanvas.