Hello!

This is the second post in a series that is meant to go over the development of Bitboy and how certain effects were pulled off. As a result, this post does contain spoilers. If you haven't checked out Bitboy yet, I'd appreciate it if you would. I've been going and reviewing the games of those who've reviewed mine. If you want to read anyways, go ahead!

This specific post will cover two moments in the game that used certain rendering tricks commonly found in other video games as graphical errors in order to make the game feel like it was being corrupted and deleted.

The Hall of Mirrors

This first moment is commonly known in other games as the "Hall of Mirrors" effect, and Bitboy makes use of it during the initial stages of corruption. Important to note is that this effect only would appear on Chrome as far as I know, as Firefox appears to render things in a way that prevents the effect.

The best way to describe how this effect works is to first describe how video game engines typically render spaces where there is nothing. In engines such as Unity or Unreal, when rendering a frame to be displayed, they will typically start with rendering something as a background, whether it'd be a skybox, a solid color, or just black. Then they will render everything else after that, in terms of sorting. Once the frame is complete, it will be shown on the screen (Note that this is a massive simplication.). After that, the engine moves onto the next frame. However, the engine still has all the information from the previous frame-which pixels are colored what-on the new frame. This is where normally the rendering of a background of some sort would come in, as it would clear out all the information from the previous frame.

The effect above is what happens when the rendering of a background on a new frame is skipped, and there is no object rendered over the pixels to replace the information from the previous frame. It is basically the engine desperately trying to use whatever information it has retained to create some sort of cohesive frame.

Breaking A Splash Screen

The second effect I wanted to cover was the splash screen that occurs when the player refreshes the page after getting the initial 'WebGL error'. This is used as the first indication to the player that the game has remembered the current progress, and that the game is not going to return back to normal with a page refresh.

Some may notice that the 'Hall of Mirrors' effect is used in this screen to help make the splash screen feel corrupted, but there is more going on here than just that. The logo is actively degrading. In order to for this to happen, the logo had to get turned into a mesh, so it had vertices that could be manipulated. This was simple enough, as programs such as Illustrator and Inkscape can export to a file format known as .svg, or 'Scalable Vector Graphics.' From there, Blender allows the importing of .svg files, which then get converted into a bunch of curves within the engine. Convert it to a mesh, and optimize the model properly, and then I suddenly had a 3D version of my logo to play around with.

After this, all that was needed was to move the model far away from the world origin point in Unity and animate its position. The way this works is by actively taking advantage of floating point precision errors. When game engines store vertex positions for models, they only have a finite number of bits to store the information for the position in. Since larger numbers have more information attached to them, models put out far from the world origin in game engines have the precision of their vertex positions reduced so they can be stored within the finite number of bits. As a result, if you move the objects far enough from the world origin, you get an effect such as the one in the GIF above, as the vertex positions of the vertices in the model get clamped to values with a large enough separation between them to make the imprecision of the vertex positions obvious.

For a better idea on how floating point imprecision effects models in a 3D space, this Reddit post contains a GIF of the effect on a car model shows it off a lot better than the 2D mesh I had used.

Next time, for the final post, I will doing more a postmortem on developing Bitboy and what I learned from it, as the overall response to the game resulted in some great lessons on pacing, subverting expectations, and the consequences of making such a game for a game jam.

Until then, stay curious.