Smooth diagonal movement with 2:1 isometric sprites?

Michael Puskas · 2024-12-05T20:08:04

Heyo, I'm making a custom engine that uses 2:1 isometric sprite graphics with a 3D world simulation. Each render tick, I convert each entity's world position into a screen position, and render their sprite appropriately: While moving diagonally across the screen, the naive rendering approach (using the raw world -> screen pixel coordinates) caused some jitter. I resolved this by making sure that during diagonal movement, the sprite always gets rendered on the same pixel in the 2:1 pattern. For example, below is a diagonal line with a repeated 2:1 pattern. The first pixel in each step of the pattern is colored blue. If the sprite happened to start its diagonal movement on the first pixel in the pattern, I would continue to round its origin each frame to the closest blue pixel. This gives me a sprite that looks like its traveling in a straight line, with no up/down jitter. It introduces a new issue though: if the entity's runspeed doesn't happen to perfectly line up with the pattern, it will sometimes move by 1 step, and sometimes move by 2: This gives a slight jitter to the graphic, as it moves irregularly across the screen. This jitter isn't present if I choose a runspeed that moves the graphic a consistent number of steps each frame. My question is: is there any fix for this? Perhaps a different movement algorithm that'll select pixels more optimally? Or a different approach altogether?

Graphics and GPU Programming Programming

Started by Net_ December 03, 2024 05:52 AM

10 comments, last by JoeJ 2 weeks, 5 days ago

JoeJ

4,361

December 05, 2024 08:08 PM

Net_ said:
Ah, I see. I tried continuing the color for 2 pixels on each side and unfortunately it didn't affect the line artifact.

That's unexpected. Maybe because your tiling is different than what i think it is.
So far i think you render your world only from using this image of a cube:

Net_ said:

But if this is true, then i am sure that duplicating pixels will completely solve the issue.
Here's what i mean with duplicating, just to be sure we get each other right:

Duplicating colors but not changing the alpha channel.
It should work then. If it does not, i guess it's the ‘premultiplied alpha’ part which breaks the proper fix.
(I'm always confused by this term and did not refresh my memory, but the color should not be affected by alpha i guess.)

Smooth diagonal movement with 2:1 isometric sprites?

Popular Topics

Recommended Tutorials

Smooth diagonal movement with 2:1 isometric sprites?

Popular Topics

Recommended Tutorials

Reticulating splines