Keyboard poll functions tutorial update (#451)

* Updated legacy animation tutorial * Updated anim graph tutorial Co-authored-by: Steven Yau <[email protected]>
playcanvas · Nov 18, 2022 · e1f8f87 · e1f8f87
1 parent e330923
commit e1f8f87
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 20 deletions.
diff --git a/content/en/tutorials/anim-blending.md b/content/en/tutorials/anim-blending.md
@@ -79,15 +79,12 @@ KeyboardControls.prototype.initialize = function() {
     this.app.keyboard.on(pc.EVENT_KEYUP, this.keyUp, this);
 };
 
-
-KeyboardControls.prototype.keyDown = function (e) {
-    if ((e.key === pc.KEY_P) && (this.entity.anim.baseLayer.activeState !== 'Punch')) {
+KeyboardControls.prototype.update = function(dt) {
+    if (this.app.keyboard.wasPressed(pc.KEY_P) && (this.entity.anim.baseLayer.activeState !== 'Punch')) {
         this.entity.anim.setBoolean('punch', true);
     }
-};
 
-KeyboardControls.prototype.keyUp = function (e) {
-    if ((e.key === pc.KEY_P) && (this.entity.anim.baseLayer.activeState === 'Punch')) {
+    if (this.app.keyboard.wasReleased(pc.KEY_P) && (this.entity.anim.baseLayer.activeState === 'Punch')) {
         this.entity.anim.setBoolean('punch', false);
     }
 };

diff --git a/content/en/tutorials/animation-blending.md b/content/en/tutorials/animation-blending.md
@@ -48,9 +48,16 @@ AnimationBlending.prototype.initialize = function() {
     this.blendTime = 0.2;
 
     this.setState('idle');
+};
+
+AnimationBlending.prototype.update = function(dt) {
+    if (this.app.keyboard.wasPressed(pc.KEY_P)) {
+        this.setState('punch');
+    }
 
-    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.keyDown, this);
-    this.app.keyboard.on(pc.EVENT_KEYUP, this.keyUp, this);
+    if (this.app.keyboard.wasReleased(pc.KEY_P)) {
+        this.setState('idle');
+    }
 };
 
 AnimationBlending.prototype.setState = function (state) {
@@ -61,18 +68,6 @@ AnimationBlending.prototype.setState = function (state) {
     // the current animation state to the start of the target animation.
     this.entity.animation.play(states[state].animation, this.blendTime);
 };
-
-AnimationBlending.prototype.keyDown = function (e) {
-    if ((e.key === pc.KEY_P) && (this.state !== 'punch')) {
-        this.setState('punch');
-    }
-};
-
-AnimationBlending.prototype.keyUp = function (e) {
-    if ((e.key === pc.KEY_P) && (this.state === 'punch')) {
-        this.setState('idle');
-    }
-};
 ```
 
 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.