fix: [#3047] Animation glitch cause by uninitialized state

excaliburjs · May 5, 2024 · edfd331 · edfd331
1 parent 9439441
commit edfd331
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed animation glitch caused by uninitialized state in `ImageRenderer`
 - Fixed issue where `ex.Loader.suppressPlayButton = true` did not work. Only using the `ex.Engine({suppressPlayButton: true})` worked
 
 ### Updates

diff --git a/sandbox/tests/polygon-rendering/index.html b/sandbox/tests/polygon-rendering/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Polygon Animation Rendering</title>
+  </head>
+  <body>
+    <script src="../../lib/excalibur.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/sandbox/tests/polygon-rendering/index.ts b/sandbox/tests/polygon-rendering/index.ts
@@ -0,0 +1,59 @@
+var engine = new ex.Engine({
+  width: 500,
+  height: 400
+});
+
+var image = new ex.ImageSource('test.png');
+var spriteSheet = ex.SpriteSheet.fromImageSource({
+  image: image,
+  grid: {
+    rows: 1,
+    columns: 4,
+    spriteWidth: 100,
+    spriteHeight: 100
+  }
+});
+
+// Set up the moving object
+var mover = new ex.Actor({ x: 100, y: 0 });
+mover.anchor = ex.vec(0, 0);
+mover.actions.repeatForever((ctx) => ctx.moveTo(ex.vec(100, 300), 50).moveTo(ex.vec(100, 0), 50));
+mover.graphics.add('up', spriteSheet.sprites[0]);
+
+var down = ex.Animation.fromSpriteSheet(spriteSheet, [0, 1, 2, 3], 500);
+
+mover.graphics.add('down', down);
+mover.onPreUpdate = () => {
+  if (mover.vel.y < 0) {
+    mover.graphics.use('up');
+  }
+  if (mover.vel.y > 0) {
+    mover.graphics.use('down');
+  }
+};
+
+// set up the hexagon object
+var static1 = new ex.Actor({ x: 350, y: 100 });
+var polygon1 = new ex.Polygon({
+  points: [ex.vec(50, 0), ex.vec(150, 0), ex.vec(200, 86), ex.vec(150, 172), ex.vec(50, 172), ex.vec(0, 86)],
+  color: ex.Color.fromRGB(0, 255, 0)
+});
+static1.graphics.use(polygon1);
+
+// set up the rectangle object
+var static2 = new ex.Actor({ x: 300, y: 300 });
+var rect = new ex.Rectangle({ width: 100, height: 100, color: ex.Color.fromRGB(255, 0, 0) });
+static2.graphics.use(rect);
+
+// set up the circle object
+var static3 = new ex.Actor({ x: 400, y: 300 });
+var circle = new ex.Circle({ radius: 50, color: ex.Color.fromRGB(0, 0, 255) });
+static3.graphics.use(circle);
+
+var loader = new ex.Loader([image]);
+
+engine.add(mover);
+engine.add(static1);
+engine.add(static2);
+engine.add(static3);
+engine.start(loader);
diff --git a/sandbox/tests/polygon-rendering/test.png b/sandbox/tests/polygon-rendering/test.png
diff --git a/src/engine/Graphics/Context/image-renderer/image-renderer.ts b/src/engine/Graphics/Context/image-renderer/image-renderer.ts
@@ -222,6 +222,8 @@ export class ImageRenderer implements RendererPlugin {
 
     let width = maybeImageWidth || swidth || 0;
     let height = maybeImageHeight || sheight || 0;
+    this._view[0] = 0;
+    this._view[1] = 0;
     this._view[2] = swidth ?? maybeImageWidth ?? 0;
     this._view[3] = sheight ?? maybeImageHeight ?? 0;
     this._dest[0] = sx ?? 1;