Pixel Grid Resolution

This page introduces a standard that helps all designers unify their pixel design.

Introduction

For pixel style, the number of pixel grids and aspect ratio (hereinafter these two factors referred to as a single concept "Pixel Grid Resolution") used in the picture are important standards. A game screen with inconsistent Pixel Grid Resolution may look like this:

As you can see, the pixel grid resolutions of the character, the star and the environment are inconsistent. Which will cause a horrible experience for players.

Therefore, for the convenience and consistency of collaborative design, here suggests a standard for all designers.

Resolution

The pixel grid resolution of the game screen is 570x320, e.g. there will be 570 columns and 320 rows of pixel grids in a game screen as shown below.

Remember, the pixel grid resolution is not related to any absolute values such as "px". It's all about the scale and ratio.

Recommended Practice Process

This section promotes a recommended process of how you create artwork according to the Pixel Grid Resolution standard.

In general, vector graphics are recommended, because then we can easily adjust the length and width of each pixel grid when exporting. But if you prefer to use bitmaps to create your artwork, please set the length and width of each pixel grid to 9px in advance. Since resizing of bitmaps causes blur.

1. Create a sketch of an element

2. Put the sketch on the screen grids and resize the sketch until it looks suitable on the screen

4. Count the area occupied by this sketch, e.g. how many pixel grids are used in columns and rows. You should get an X by Y rectangle (or square) in this step.

5. Pixelise the sketch according to the area you get from step 4.

Recommended Tools

Name	Type	Platform
Adobe Illustrator	Vector	Windows/MacOS
Inkscape	Vector	Linux
Vectornator	Vector	iPadOS
Pixilart	Bitmap	Web
Procreate	Bitmap	iPadOS

Tail

This standard is just an initial proposal. Feel free to bring up any suggestions!