fix: typo in animation 'end' event signature (#2807)

Fixes typo in animation event signature, causing the type hint to be for the wrong event! `ended` should have been `end`
excaliburjs · Nov 26, 2023 · 15fc6ac · 15fc6ac
1 parent a347dd2
commit 15fc6ac
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed typo in animation event signature `ended` should have been `end`
 - Fixed issue where some excalibur `clear()`` implementations modified the collection they were iterating over
 - Fixed async issue where sound could not be stopped if stop()/start() were called in rapid succession
 - Fixed issue with input mapper where `keyboard.wasPressed(...)` did not fire

diff --git a/sandbox/tests/animation-events/explosion.png b/sandbox/tests/animation-events/explosion.png
diff --git a/sandbox/tests/animation-events/index.html b/sandbox/tests/animation-events/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Animation Events</title>
+</head>
+<body>
+  Should see all the different animation events in the console.
+  <ul>
+    <li>Frame for each frame</li>
+    <li>End after the first end, then it is reset to loop</li>
+    <li>Loop every animation afterwards</li>
+  </ul>
+  <script src="../../lib/excalibur.js"></script>
+  <script src="./index.js"></script>
+</body>
+</html>
diff --git a/sandbox/tests/animation-events/index.ts b/sandbox/tests/animation-events/index.ts
@@ -0,0 +1,57 @@
+
+var game = new ex.Engine({
+  width: 400,
+  height: 400
+});
+
+var animationImage = new ex.ImageSource('./explosion.png');
+
+var explosionSpriteSheet = ex.SpriteSheet.fromImageSource({
+  image: animationImage,
+  grid: {
+      rows: 2,
+      columns: 5,
+      spriteHeight: 32,
+      spriteWidth: 32
+  }
+});
+
+var animation = ex.Animation.fromSpriteSheetCoordinates({
+  spriteSheet: explosionSpriteSheet,
+  frameCoordinates: [
+      {x: 0, y: 0, duration: 100 },
+      {x: 1, y: 0, duration: 100 },
+      {x: 2, y: 0, duration: 100 },
+      {x: 3, y: 0, duration: 100 },
+      {x: 4, y: 0, duration: 100 },
+      {x: 0, y: 1, duration: 100 },
+      {x: 1, y: 1, duration: 100 },
+      {x: 2, y: 1, duration: 100 },
+  ],
+  strategy: ex.AnimationStrategy.End
+});
+
+animation.scale = ex.vec(10, 10);
+
+animation.events.on('frame', (evt) => {
+  console.log('frame', evt)
+});
+animation.events.on('end', (anim) => {
+  console.log('end', anim)
+  anim.strategy = ex.AnimationStrategy.Loop;
+  anim.reset();
+});
+animation.events.on('loop', (anim) => {
+  console.log('loop', anim)
+});
+
+var loader = new ex.Loader([animationImage]);
+
+var actor = new ex.Actor({
+  pos: ex.vec(200, 200),
+});
+actor.graphics.use(animation);
+game.add(actor);
+
+game.start(loader);
+
diff --git a/src/engine/Graphics/Animation.ts b/src/engine/Graphics/Animation.ts
@@ -91,13 +91,13 @@ export interface AnimationOptions {
 export type AnimationEvents = {
   frame: FrameEvent;
   loop: Animation;
-  ended: Animation;
+  end: Animation;
 };
 
 export const AnimationEvents = {
   Frame: 'frame',
   Loop: 'loop',
-  Ended: 'ended'
+  End: 'end'
 };
 
 export interface FromSpriteSheetOptions {