on jitter
and other things
Friday, March 4th, 2022
by tyler
In my game isle, there's an issue where during some of the rhythm battles with the fish the notes jitter back and forth. The issue here is that the notes are tied to the songs position for note accuracy, which proves a problem for low-res pixel-perfect games. The game is updated 60 times a second, or every 16.6 milliseconds. With browser games, it may not be consistently 16.6 milliseconds between each frame. Sometimes it may be 10 milliseconds and sometimes it may be 20. The notes are supposed move 120 pixels per second, or two pixels per frame. But with a varied rate of the update, skips in the song, and other unpredictable factors that come into play with making a game that runs in Javascript inside a browser, the notes will bounce around a lot. It is an ugly effect when every frame the notes are moving anywhere between one and three pixels. I counter this by just setting each note sprite to have a static velocity of 120 pixels per second. Then I check those sprites' positions with where the note should be according to the song. If the note sprite is within four pixels of where the note should be, I'll leave it alone. If it's more than four pixels away from where it should be, its position is updated. This results in the notes rarely jumping around, I just need to make sure the leniency in "note accuracy" is accounted for by extending the "Perfect" note window by 4 pixels, or ~33ms (two frames).
final noteTime = note.time - songPosition;
final notePos = getItemPosition(noteTime);
// don't re-position unless we're too far, prevents jitter
if (Math.abs(notePos.x - note.sprite.x) > 4.0 || Math.abs(notePos.y - note.sprite.y) > 4.0) {
note.sprite.setPosition(notePos.x, notePos.y);
}
This gif's low FPS won't display if there is jitter or not lol...
This could be solved by not using a pixel-perfect approach. But I don't like mixels in my games, I'm not always a fan of pixel art when it's rotated, scaled or twisted and goes out of grid alignment of the other pixels. This is not to say I don't like this kind of art in other games, Stardew Valley and Undertale, two of the best pixel art games ever made, do this.
I also implemented a palette posterization shader, where no color outside of my predefined color palette will appear on the canvas. This coincides with my obsession to have things neat and orderly. In the game “isle” there are six fish per weather pattern; one each night and day per each water environment; pond, river, and the ocean (there's also a boss fish). This need for organization makes me a better engineer but sometimes inhibits my creative abilities. But I can't help it. This stupid fucking hobby of making little pixel art games has held my attention for the past four years. The four year anniversary of my first game dev commit is in a few days. I forked a Phaser platformer boilerplate repo based on the first super Mario brothers level, and spent a couple weeks making it so that Mario could now shoot star projectiles at other enemies, double jump and have parralax scrolling in his background.
(The best way to start making games, in my opinion, is to start with a finished (or protoyped) game and make one change you would like to see in it.)
I was hooked. During this time I've gotten much better, and looking at all the games, ones that have been the front page on Newgrounds, Itch and otherwise (there's some amazing games on these sites that never make it to their respective front pages) I still have a long way to go.
It's weird. I've been somewhat successful in my professional software engineering career, but it hasn't really mattered to me. I was offered a job at a decent tech company about a year ago. Great position, pay, benefits, and for about five minutes after receiving the offer I felt really good. Taking it has let me live a comfortable life, but in living that comfortable life I've found out it really doesn't mean shit. Put me in a shack somewhere, let me bring my old MacBook Pro and give me an Internet connection. Maybe let me have an extra monitor and a mouse. That's all I need.
P.S. if you ever get stuck on a fish in “isle”, I left in the dev cheat. Press the "O" and "P" buttons together during a battle and you automatically catch the fish.