pixel grid resolution - UQdeco2800/2021-ext-studio-2 GitHub Wiki

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:

Inconsistent Pixel Grid Resolution

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.

Pixel Grid Resolution Standard

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

Star Sketch

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

Resize

  1. 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.

Count pixel grids

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

Pixelises star

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!

⚠️ **GitHub.com Fallback** ⚠️