A topic less boring than the title may suggest: pixel alignment in video games. I’m not quite sure what the proper terminology might be, if there even is any, but I’ll refer to this phenomenon as an align. In this post I’ll explain what they are, what issues they may cause when one is unaware of them, and how I used them in games.
What are these “aligns” you speak of?
Suppose we have some simple 2D platformer where the main character has no momentum when they start to walk. So every frame this character covers the same distance, let’s say 3 pixels. That also means that in a horizontal line, without other restrictions, the player can only move a multitude of 3 pixels from its starting position. For example, if a 1 pixel wide character moves a time period of 4 frames from starting position 36 along the x axis, then we will arrive at position 36 + 3*4 = 48 (see Figure 1). As you might have guessed, that means that moving a distance of for example 13 or 14 pixels is not possible without restrictions. In the current example, we cannot reach positions 47 or 46.
In almost every 2D platformer however, there is a way to break free from only reaching x positions that are a factor of your movespeed: horizontal collision. Suppose our game is tile based, and as such all blocks that form the physical terrain are of the same size; let’s say 5 pixels wide. For simplicity’s sake, let’s continue with the 1 pixel wide character. If our character is in the position of Figure 2, then moving 3 pixels to the right is impossible, since the wall is in the way. As a result our character will move only 2 pixels, after which it can go no further due to collision. This move means that horizontal pixel positions previously inaccessible are now reachable, at the cost of our formerly reachable positions.
Whereas the red spaces in Figure 2 were previously accessible, now we can only enter all the blue ones. To add some terminology: we have successfully switched aligns. Let’s call our align in the first example of Figure 1 the 0-align, since the formerly accessible positions were dividable by our movespeed, 3. If we would do the same as in Figure 2, our new align would then be the 2-align since our position modulo movespeed leaves 2.
Then how do we reach the 1-align, you might ask? By finding another collision that changes our align of course. Try figuring out how you could get to the 1-align in Figure 3, solution in the caption (assume there is gravity in this example).
SOLUTION: Move the player against the left side block B, or jump up block A and collide with the wall on the far left.
Now let’s take a look what happens when our character has an actual width, let’s say 4 pixels wide, and the movespeed is still 3. That would mean that in Figure 4, where the gap to the right of the player is exactly 4 pixels wide, we would not be able to get through it. At least not with our current align. If we would move to the right 4 frames (12 pixels) from our starting position, we would be 1 pixel too far to the right. Assuming you can jump around, try to figure out how to get the right align to fit through the gap.
Colliding against the right side of the part sticking out of the right block gives the player the correct align in Figure 4. In other words, aligns can actually make an impact on your game if you have such tight gaps. In most games, movement isn’t so precise that we have to worry about aligns, but there are examples where this is the case. In I Wanne Be the Guy fangames for example, where precise movement is pushed to the extreme, changing aligns might make certain jumps easier. For more information on THAT whole rabbit hole, I highly recommend reading this resource and/or watching these videos.
A practical problem in Amidst the Sky
To give a concrete related example of “aligns in the wild” from my own games, an issue I had while developing Amidst the Sky was thanks to our good pal the horizontal align. When playtesting Amidst the Sky I noticed that if I waited some time in the blue level, some of the horiontally moving platforms would gradually desync. At first I thought this was due to the quickly implemented collision I used for them, but not entirely. These platforms handled collision as follows: each frame they would check if there’s a wall a “movespeed distance” ahead of them. If so, they would flip their movespeed and move in the new direction. Take a look at Figure 5 where both platforms have the same movespeed of 3. After only 6 frames the blue platform is back at its original position. However, the red platform takes 8 frames to get back.
The fix was simple: move the blue platform 1 pixel to the left. Both platforms now maintain the same align and keep in sync. The above is an extreme example, keep in mind that this is usually less noticeable.
A whole game mechanic
Warper uses aligns as a game mechanic! Inspired by this concept, many puzzles are solved by changing your aligns. The main character warps 3 squares per move, so that fits with the first example. The mechanic is introduced in the level shown in Figure 6. The player has to change their align by moving against the crates to the right before they can go up the gap slightly to the left of the starting position. Actually, if my explanation of aligns was impossible to follow, playing Warper might clear things up.
Also, there’s a hidden sign somewhere in Lost in Firefly Forest. I haven’t heard of anyone finding it as of now, which is not surprising as it’s pretty well hidden. In fact, you even need proper aligns to get to the secret spot. I recommend not looking for it, just letting you know it’s there as another example of intentional aligns.
In conclusion
You might never encounter aligns again in your entire life. Or maybe you delve into the world of precision platformers and knowing specific aligns might become crucial. Or perhaps they might be helpful if you run into something similar to my Amidst the Sky example. OR, like me, they give you an idea that can be used in a new game. Anyway, I hope that if you weren’t familiar with aligns you learnt something in this post. If not then ¯\_(ツ)_/¯
Ferociter Games 