Pixel Grid Resolution
In the collaborative creation of the team, a unified pixel style is very important. When unifying pixel styles, there is an important concept called "pixel resolution" or "pixel grid resolution". Works created at inconsistent or different resolutions are mostly unsatisfactory. For example, as shown in the following picture:
We can obviously find that if the same element in the background has a completely different resolution, it will give people a very bad experience.This situation is more obvious when combining items, suppose we need a piece of grass but the resolution is different, then the effect shown to the player is as follows:
So the pixel resolution of the painting needs to be consistent.
In general, if two images of the same area/size contain the same number of pixel grids, then the two images have the same pixel grid resolution.
So under what situation is the pixel grid resolution different? Suppose we have two stars, when they are placed on a 480 * 270 grid canvas, they both need to occupy a 24 * 24 grid size canvas area. But in the actual design as shown below, the left side is designed strictly according to the size of the 24 * 24 grid, while the right side occupies a 240 * 240 grid. But in order to make the stars on the right meet the expected size after being put into the game, it can only be scaled to the same area as the left. So we can clearly see that the pixel grid resolutions of the two images are not consistent.
Hint：If you determine the appropriate number of grids but find that you really need more grids than expected, you can scale them appropriately (same ratio) before placing them in the game, but there should not be too much difference in resolution (But better not :))). For example, your item occupies a 100 * 100 pixel grid, but only uses a 50 * 50 pixel grid when you put it into the game, which will lead to inconsistent pixel resolutions. Therefore, it is recommended to scale up to 1:0.75, beyond this ratio may result in significantly different pixel grid resolutions!
When designing the player eviction menu, our team consulted with the rest of the studio and set the canvas aspect ratio to 16:9. Therefore, the resolution of the game screen is determined as a 480 * 270 grid, as shown in the following figure, there will be a pixel grid of 480 columns and 270 rows:
Pixel resolution is not related to the size of each pixel grid (eg px/pt), it is only related to scaling and grid ratio ！！！
This is a suggested design flow, if you have already completed a part of the design, in order to meet the 480 * 270 resolution, you can multiply the resolution by the size of each small pixel grid in the existing design to determine your canvas size. For example, if the size of each small pixel grid is 5 * 5 (it was determined in previous discussions with other group members that each small pixel grid is a square), then according to the specified resolution, the size of the canvas is 2400 * 1350 pt.
If you don't have a finished design, you can set the canvas size to 1600 * 900pt, the following is the scale for drawing a resolution grid in Adobe Illustrator:
！！！Note that since a 480 * 270 resolution grid is required, there should be (number of grids - 1) dividers in length and height(2400 * 1350 pt canvas is also applicable)
The purpose of resizing the canvas is to allow your design to fit the set resolution while visually showing the area of the canvas it needs to occupy. This will only adjust the total canvas size, not the size of individual design elements. Please remember that the 480*270 grid is the number of pixels grids occupied by the entire game. Please refer to the following process to adjust the size of a single design element if you want.
Step 1：Create an initial sketch or vector, you can use a normal brush to draw a rough image:
Step 2：Place it on the canvas and resize it until you think it looks what you expect:
step 3：Figure out what area the image might occupy, how many pixel grids it will occupy (determine the ratio of rows and columns, there can be some margin):
Step 4：Redesign its image using pixel brushes:
(This is different from the image shown in the first step, we resized the image according to the uniform resolution:)) )
For example, when designing the player eviction menu, our team finally decided that the menu occupies a 320*180 grid in the canvas, which also conforms to the 16:9 ratio and will make the whole picture look more harmonious. You can find our design in sprint1 here
| Name | Type | Platform |
|---|---|---|
| Adobe Illustrator | Vector | Windows/MacOS |
If you feel something is unclear or unreasonable, please feel free to contact the Team 7