From e1f8f87385c06c9d3504e24864822b4b458a619c Mon Sep 17 00:00:00 2001
From: Steven <yaustar@users.noreply.github.com>
Date: Fri, 18 Nov 2022 15:35:50 +0000
Subject: [PATCH] Keyboard poll functions tutorial update (#451)

* Updated legacy animation tutorial

* Updated anim graph tutorial

Co-authored-by: Steven Yau <syau@snapchat.com>
---
 content/en/tutorials/anim-blending.md      |  9 +++------
 content/en/tutorials/animation-blending.md | 23 +++++++++-------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/content/en/tutorials/anim-blending.md b/content/en/tutorials/anim-blending.md
index d8e99b81b3..1074042d4b 100644
--- 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
index 66bc664f20..5bdd32c266 100644
--- 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.