What are pixels and mixels?

Pixels are the smallest visible units on a screen, forming the building blocks of digital images. In pixel art games, each pixel is intentionally designed to be a uniform square of a fixed size to maintain a retro, crisp aesthetic. Problems like mixels (mixed pixel sizes) happen when scaling systems don't align the artwork correctly with the screen, breaking the uniformity.

<aside> 🧠

ELI5: When your screen renders the game, imagine you have 1080 × 1920 pixels in your screen resolution (or higher for 4K+).

The game will try to draw a pixel art square using a 1×1 pixel on your screen — or it can draw it using 2×2, 3×3, or 4×4.

However, if the zoom value is off, the game could try to fit a pixel art pixel using a fractional value like 2.5 or 1.5. This means some of your pixel art will show squares bigger or smaller than others, creating mixels. We don't like mixels.

</aside>

Why does it happen?

1. Non-integer scaling — If the game scales the screen by a factor that isn't an integer (e.g. 1.5× instead of 2×), some pixels get stretched unevenly, making some pixels larger or smaller than others.
2. Subpixel rendering — When objects like the GUI or the game world are positioned or scaled at non-integer coordinates (e.g. x = 3.25 instead of x = 3), the rendering engine tries to "blend" the pixel positions, creating blurry or uneven pixels.
3. Different scaling for layers — If the zoom system doesn't treat all layers (game world and GUI) the same way, some parts scale differently, causing mixels.

Mixels are a mix of pixels of different sizes on the same image or display. This happens when scaling isn't consistent — like when screenshots or videos of pixel art games are taken.

In the image above:

• Blue boxes represent smaller pixels, consistent with the intended pixel size of the artwork.
• Red boxes show larger pixels, which appear due to improper scaling or compression, where the pixels stretch unevenly.

This mix creates a jarring look, breaking the clean, uniform pixel aesthetic. To avoid mixels, maintain consistent scaling (e.g. scaling images by whole numbers like 2× or 3×).

How to prevent it

<aside> 🧠

Go to Settings > Graphics and turn on these two options.

</aside>

1. Pixel-perfect scaling
   • Lock your scaling system to integer values (e.g. 2×, 3×, 4×) when zooming or resizing the game.
   • Ensure that GUI and game-world elements respect these scaling values.
2. Pixel snapping
   • Ensure all objects are placed on whole-number coordinates (e.g. x = 5, y = 10).
3. Zoom lock
   • Implement a "zoom lock" system where the camera can only zoom to integer levels (e.g. 1×, 2×, 3×). Avoid fractional zoom values like 1.5×.
   • Add constraints so players cannot manually zoom to values that disrupt pixel alignment.