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 easy solutions for this. You can either round down and leave a little space for a HUD, or you can round up and just have a little more visual information than fits on the screen.

Loaded up with information and math it was time to figure out what to use for pixels in Fracterebus. I decided to go with 16×16 pixel tiles on a 640×360 pixel screen using 40×23 tiles per screen (that’s the round up version). I expect my HUD to float over the game content, so I’m not leaving any 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, but with more actual landscape on the screen around her at any given time. Sticking with rectangle screens has an advantage because it allows me to have rooms that are made up of screens (essentially any shape or size) and that simultaneously neatly allows a mapping system for the in-game map where rooms can be drawn nicely on a sort of rectangle graph paper.