v0.29.2 introduces Graphics (Polygon / Circle) glitch in combination with Animations

[djdenuyl]

Hi All,

I've been playing around with Excalibur (v0.29.2) and I came across the following bug when rendering Polygons and Circles in combination with Animation. It seems that whenever the animation flips to the next sprite, there is something happening in the rendering of the Polygon and Circle graphics (Rectangle seems to be fine). In my example code, the moving Actor flips through the sprites in its spritesheet when vel.y > 0 (i.e. moving down). when moving up, it just uses the first sprite from the spritesheet. When moving up - when the animation is static - there is no issue, but when it starts moving down, the actors that have Polygon or Circle Graphics start to glitch. I cannot really pinpoint what exactly is happening, since I'm new to excalibur (and ts in general, I come from a python background). I've made a screen recording of the issue. I found out that falling back to v0.29.1 resolves the problem. I've made a screen recording of that as well, as comparison.

This is v0.29.2 that has the bug

excalibur_bug.mp4

And this is v0.29.1 that does not have the bug

excalibur_nobug.mp4

Steps to Reproduce

import { Actor, Color, Engine, ImageSource, Loader, Polygon, SpriteSheet, vec, Animation, Rectangle, Circle } from "excalibur";

const engine = new Engine({
    width: 500,
    height: 400,
});

const image = new ImageSource('test.png');
const spriteSheet = SpriteSheet.fromImageSource(
    {
        image: image,
        grid: {
            rows: 1,
            columns: 4,
            spriteWidth: 100,
            spriteHeight: 100
        },
    }
);

// Set up the moving object
const mover = new Actor({x: 100, y: 0})
mover.anchor = vec(0, 0);
mover.actions.repeatForever(
    (ctx) => ctx.moveTo(vec(100, 300), 50).moveTo(vec(100, 0), 50)
);
mover.graphics.add('up', spriteSheet.sprites[0]);

const down = 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
const static1 = new Actor({x: 350, y: 100});
const polygon = new Polygon({
    points: [
        vec(50, 0),
        vec(150, 0),
        vec(200, 86),
        vec(150, 172),
        vec(50, 172),
        vec(0, 86)
    ],
    color: Color.fromRGB(0, 255, 0)
});
static1.graphics.use(polygon);

// set up the rectangle object
const static2 = new Actor({x: 300, y: 300});
const rect = new Rectangle(
    {width: 100, height: 100, color: Color.fromRGB(255, 0, 0)}
)
static2.graphics.use(rect);

// set up the circle object
const static3 = new Actor({x: 400, y: 300});
const circle = new Circle(
    {radius: 50, color: Color.fromRGB(0, 0, 255)}
)
static3.graphics.use(circle);


const loader = new Loader([image]);

engine.add(mover);
engine.add(static1);
engine.add(static2);
engine.add(static3);
engine.start(loader);

test.png is just a simple 4 100x100px rect spritesheet with the rects having different colors.

Environment

I've reproduced the bug in both firefox and chrome on both my windows 11 and ubuntu 22 machines.
It seems the bug is introduced in v0.29.2 as v0.29.1 is not affected.
I've also tried 0.29.0 and 0.28.0 and they are also unaffected.

[eonarheim]

@djdenuyl Thanks for the very detailed issue! I'll dig into this today!

[eonarheim]

I've located the source of the bug to some change in the image-renderer.ts, reverting that file to v0.29.1 seems to fix the bug!

It appears something is not handling rasters properly after a performance update, I'll dig into the exact cause and likely cut a point version with the fix asap.

[eonarheim]

@djdenuyl Fixed! Released a new version of excalibur v0.29.3!

https://github.com/excaliburjs/Excalibur/releases/tag/v0.29.3

[djdenuyl]

Hi Erik,

Thanks for the quick response and fix, nice job!

I will upgrade to v0.29.3