Art Asset

Week 7 Presentation

Member Efforts

Yong Xiao Tong (0368290)

Yap Zhi Vei (0338745)

Yong Xiao Tong (0368290)

Environnement (Backgrounds & Tileset & Decorates)

For our game, we designed four unique levels, each with its own distinct background to reflect the environment and mood of the stage.

Background design process in Adobe Illustrator

The backgrounds are as follows:

BG#1: City street scene, filled with urban elements and modern structures.

BG#2: Gritty back alley, giving a more mysterious and shadowy atmosphere.

BG#3: A tranquil park forest, rich with greenery and natural elements to offer a fresh change of pace.

BG#4: The open and breezy windy fields, with wide landscapes and a peaceful sky.

1st Draft

Background 1: City Street

Background 2: Back Alley

Background 3: Park Forest

Background 4: Windy Fields

2nd Draft

Background 1: City Street

Background 2: Back Alley

Background 3: Park Forest

Background 4: Windy Fields

3rd Draft

Background 1: City Street

Background 2: Back Alley

Background 3: Park Forest

Background 4: Windy Fields

To maintain consistency across all levels, we used a stone-textured tileset for the platforms and terrain. This texture provides a solid, slightly rugged look that works well with both urban and natural environments, giving our game a cohesive visual style.

Tileset

Decorates

Yap Zhi Vei (0338745)

Character Design (Protagonist & Enemy & NPC & UI)

In this game, we have one main protagonist, which is Aura, a black cat, and 3 kinds of enemies, which are human patrol, dog and owl in different levels.

Initial Sketches

At first, I tried to draw line art sketches for the character and asked ChatGPT to generate a photo based on them. I used it because the result came out similar to what I had prompted. However, I made some adjustments in Illustrator, as I want to tone down the character's details; otherwise, it would be a huge workload in the sprite sheet drawing process.

Cat

Human Patrol

Dog

Owl

ChatGPT Generates

Cat

Human Patrol

Dog

Owl

Character sprite sheet design process in Adobe Illustrator

1st draft (gif)

Cat Idle

Cat Walking

Cat Boosting

Cat Jumping

Cat Boosting Effect

Human Patrol 1st draft

Human Patrol 2nd draft

Human Patrol Idle

Dog Idle

Dog Attacking

Owl Flying

Owl Attacking

UI Boosting

NPC Fireflies

2nd draft (Idle)

After presenting the 1st draft of the art asset, we notice there is a problem in seeing the cat in the background, so we need to try to see if we need to change the eye colour or fur colour and see which looks better. In the end we have decided to remain as a black cat but change the eyes into yellow for better visibility.

Trial and error on the eye and fur colour

Cat

Human Patrol

Dog

Owl

3rd draft (Sprite Sheets)

While on the prototyping process, Ze Ming noticed that there is a need to add more animation to the sprite sheets, as it does not move too much, and the dog animation looks kind of weird. So more animations in my next draft is my goal.

Cat Walking

Cat Turning

Cat Boosting

Cat Jumping

Human Patrolling

Dog Walking

Dog Attacking

Owl Flying & Attacking

NPC Cat Idle

Environment 4th Draft

After our prototype presentation, we received feedback that the cat in our previous environment design was not very noticeable. In response, we adjusted the colour sequence to enhance its visibility and improve the overall design. As my groupmate was unwell, I assisted by handling the colour adjustments. Below is a draft preview of the environment and character design.

Logo & HUD & UI

For the logo, my first draft followed a minimalist style, but it didn’t quite suit the overall feel of our game. In the second draft, I opted for a bolder look while keeping the two "o"s in the logo as cat eyes. To make the logo stand out more, I also adjusted its colour and added shadows for a more striking effect.

For the HUD, I’ve designed elements such as the boost bar, life indicator, and settings icon.

For the UI, I incorporated the elements into my scene prototype for better reference and added a paw design as a decorative touch to make the scene feel more lively and playful. The first two drafts didn’t blend well with the scene, so I made adjustments to the colors for better integration.