Design Process of Pixel Art - UQdeco2800/2022-studio-1 GitHub Wiki

Design Process of Pixel Art

• Sprint 1.
• Initial Research and conclusions.
• Initial design concepts.

Questionnaire

The design process for the art consists of a few questions that the team came up with to incorporate a common man’s(user/gamer) perspective. The questions are

Have you played pixelated games?

close your eyes, think as if you are in the Atlantis- What do you see?

Is Atlantis under the water or above the water?

Now, remove all the objects on land(rocks, buildings etc.), imagine you are on a plain surface on Atlantis, what do you see? (Depends what interviewee sees)

(Cont.)What colors are those? Could you describe them?

How far is the <answer from Q3> away from you?

What are you standing on?

Do you see plants or grass or even something? Use your imagination.

Then what do you see on the dirt/soil?

User Response

The ground would have grass depending how long the land was above sea level.

The people imagined themselves standing on light colored sand.

Seaweed around with less trees and a lot of shrubs.

Could see creatures in the sea. Dolphins jumping in and out of the water.

Could see some crabs crawling into their shells.

Huge waves crashing into the rocks .

Feeling the breeze hitting their face.

A large number of responses had beachy and rocky cliffs.

Team Thoughts

All the designers were learning to use the software and create pixel art, hence all the responses haven’t been

The seaweed was designed and granules of sand in the cliff tiles were added.

The small creatures on land and in the sea will be implemented in the future sprints where animations would be utilized.

The waves, rocky cliffs will be added in the next sprint which will have more details in the game (graphically).

We have definitely not perfected our design for the pixel. We will ask for user feedback on the design, check for shading mistakes and look to improve on these aspects in the second sprint. Hopefully work on some new designs which are fitting for the theme.

Design and Colour palette

Dirt

Water

pixel art for water is created by making waves or shapes in the blue color of water. This is done on a small pixel square - I used 16 x 16 for the first try.

Added shadows to the water. Used highlights in the water (Lighter colours).

Made sure if the pattern was put side by side the patterns would connect and match.

Went through 2 iterations with it.

Duplicated the tile and filled it into a diamond shape for the game. (500pi x 269pi)

Cleaned the version and designed a darker/faded version the same way for the night.

Grass

Stage 1: Initially, have thought that the grid used in the code was right angled grid size. Therefore, I have created as a square and designed grass on the tile together with some bright green to give a texture. The canvas size was 199x199 by pixels.

Stage 2: The team have found out that the grid is actually angled differently to allow users to think it is isometric and 3D when it is actually a 2D. Also, canvas size stays same.

Stage 3: Through the feedback given from teams, I have re-sized the canvas size to 500x269 pixels. It is empty because it was just a trial version to fit in the grid.

Stage 4: At this stage canvas size been changed to 1000x700 pixels because it looks insufficient to fill up the map. The design stayed the same.

Stage 5: Finally, the team found golden ratio of 700x378 pixels. Also, there were new design implemented on grass tile as user feedback was retrieved. Seaweed was added and the colour been dimmed.