Pixels

In any pixel art game, you need to do a bit of planning to make sure your pixels make sense. First, I spent a fair amount of time researching how other games did it. It’s probably not a huge surprise to anyone reading this that there are a ton of ways to do pixels in a game, but this information helped me come up with how I would be doing it. Sorry in advance, but this post is going to have a ton of numbers.

Some examples:

• Metroid uses 256×240 pixel screens and 16×16 pixel tiles.
• Super Metroid uses 256×224 pixel screens and 16×16 pixel tiles.
• Castlevania: Symphony of the Night uses 256×240 screens and 16×16 pixel tiles.
• Axiom Verge uses 480×270 pixel screens and 16×16 pixel tiles.
• Animal Well uses 320×180 pixel screens and 8×8 pixel tiles.
• Celeste uses 320×180 pixels screens and 8×8 pixel tiles.
• Dead Cells uses 640×360 pixel screens and a 3D to 2D rendering technique without tiles.
• Stardew Valley uses 640×360 pixel screens and 16×16 pixel tiles.
• Hollow Knight uses 1920×1080 pixel screens and flexible tile sizes (usually considered “hand drawn” not “pixel art”).

Next, I did a bit of digging into why some of those resolutions come up. The resolutions with 256 in them (or numbers near that) are generally because of old hardware using 8-bit values for screen resolution and generating a composite video signal, which is pretty straightforward. A lot of 640×360 and 320×180 resolutions show up too, and that took a little more thinking. As it turns out, those resolutions are extremely convenient for integer pixel scaling on 16:9 aspect ratio modern displays and the resolutions they typically operate at. To my knowledge, there aren’t any modern screens that natively support 320×180, but the math works out great when mapping to real screen resolutions.

320×180 game pixels will integer scale at:

• 2×2 pixels on 640×360 (nHD)
• 4×4 pixels on 1280×720 (HD)
• 6×6 pixels on 1920×1080 (FHD)
• 8×8 pixels on 2560×1440 (QHD)
• 12×12 pixels on 3840×2160 (4K/UHD)

640×360 game pixels will integer scale at:

• 1×1 pixels on 640×360 (nHD)
• 2×2 pixels on 1280×720 (HD)
• 3×3 pixels on 1920×1080 (FHD)
• 4×4 pixels on 2560×1440 (QHD)
• 6×6 pixels on 3840×2160 (4K/UHD)

The next thing to consider is how big the graphics tiles are. 16×16 pixel tiles come up a lot because tiles at that size contain enough visual information to be useful. 8×8 pixel tiles also work well on lower game resolutions for a fun low fidelity look. The number of tiles you can fit on the screen is a just a function of how big they are and what resolution your game operates at. However, there are some minor math issues because most of the resolutions mentioned above don’t evenly divide by 16×16. There are a few possible solutions for this.

• You can round down how many tiles you use and leave a little space for a HUD.
• You can round up and just have the concept of a screen that has a little more visual information than actually fits on the screen.
• You can pick a different size for your tiles that does divide evenly.

Loaded up with information and math it was time to figure out what to use for pixels in Fracterebus. I decided to go with 20×20 pixel tiles on a 640×360 pixel screen. That fits exactly 32×18 tiles per screen. I expect my HUD to float over the game content instead of being in some sort of box so I’m not leaving any permanent space for it on the screen.

Eris will range between 1 and 3 tiles tall depending on movement mode, current stance, and where she is pointing her weapon, but she stands 2.5 tiles tall when idle. This will give her a size that feels similar to Samus from Super Metroid when compared to the world structure. There will be more actual landscape on the screen around her at any given time than in Super Metroid. Sticking with rectangle screens has an advantage because it allows me to have rooms that essentially any shape or size but that are still made up of screens. Being screen based gives me a neat rectangle grid based structure for the map and places to hook concepts like doors.