Games Development - Task 2: Art Asset Development

on

27/10/2024 - 13/11/2024 / Week 5 - Week 8
Joey Lok Wai San / 0350857
Games Development / Bachelor of Design (Hons) in Creative Media 
Task 2: Art Asset Development


TABLE OF CONTENTS


LECTURES
All lectures and exercises completed in Games Development - Lectures & Exercises


INSTRUCTIONS

https://drive.google.com/file/d/1Gtkh4m9BvehlC5o1Vlk3Ja0el36iSHBI/preview


TASK 2: ART ASSET DEVELOPMENT

Based on the previous Task 1: Game Design Document, we are tasked with producing the art assets for our game. This includes characters, environments, items, props, obstacles, power-ups, and HUD design.

Art Style
The game’s visual style is playful, and cartoonish to keep the tone light. Bright, vibrant colours with a flat-style illustration. These are some art and visuals that I took as inspiration for how my game will look and to use as reference to get the overall vibe of the game.

Moodboard
This is the overall moodboard of the game in general. A brightly colored school vibe with simple, fun elements

Fig. 1.1 Moodboard of Game, Week 5 (20/10/2024)

Character Art Style
A cute and simple illustration style, with a flat illustration style


Fig. 1.2 Character Art Style Reference, Week 5 (20/10/2024)


Design Sketches
Based on the visual references I collected, I started making some rough sketches of the character and the environment as well. These are just a brief idea of how the game would look.

Main Character & Main Enemy
The character sketches for the main character and enemy first started off looking very different to one another in terms of style. I made a second sketch following the character art style as reference above and it looks more coherent now.

 
Fig. 1.3 Main Character & Main Enemy Sketches, Week 5 (20/10/2024)

Enemy (Hall Monitors)
These are different types of hall monitors with different levels, powers, speeds, etc which can be distinguished by their uniforms and different colours. However, there may be too many variations which can cause players to become overwhelmed.

Fig. 1.4 Enemy Sketches, Week 5 (20/10/2024)

Environment Design
These are the environment sketches I did for the three different scenes locations and I also incorporated some drawings of how the actions would look like in the game.

  
Fig. 1.5 Environment Sketches, Week 5 (20/10/2024)


Fig. 1.7 Movement Sketches - Crouch, Hide, Jump, Week 5 (20/10/2024)


Character Progress
To make the characters, I referred to the sketches I made beforehand and started creating the characters using simple shapes in Adobe Illustrator. The characters on the far left are my initial attempts, which I then reworked (bright pink) to make them look more coherent.


Fig. 2.1 Character Development - Shape, Week 7 (10/11/2024)

Once the character shapes were finalized, I added colour to the characters and tried out different outfit combinations.
  • For example, the lecturer changed from a grey tie to a red tie so there is more contrast. I didn’t want him to match with the main character though, so I changed the tie to a bowtie. 
  • Another example is that the student had long pants initially, but they looked too similar to the monitor's outfit, so I gave him short pants. This also made him look younger and less put together, as if he was rushing into school and didn’t wear the right uniform.
Fig. 2.2 Character Development - Color and Outfit, Week 7 (10/11/2024)


Characters
There is one main character and different types of enemy characters which have varying difficulties. This gives the players different challenges to overcome during each section of the game.

Main Character - Student
An average high school student who is running late to class. He somehow manages to avoid detention by the skin of his teeth. Whether by hiding to avoid being caught or throwing paper planes and his leftover banana lunch to distract hall enemies. He wakes up late to class one day, and quickly puts on his uniform, looking barely presentable for school. 

Character Design Explanation
  • Warm colour palette: Shows friendly warm nature
  • White shirt: Innocence or a lower rank
  • Lack of jacket: Emphasises that he’s unprepared for school and has a lower status compared to the prefect’s uniform
  • Messy hair: Suggests he is running late for school and did not have time to comb it
  • Worried expression: The wide eyes and open mouth make him look flustered.

Fig. 2.3 Main Character Design, Week 8 (11/11/2024)

Main Enemy - Mr. Grumpy
A strict, no-nonsense lecturer, Mr. Grumpy is known for his dedication to rules and order. He’s always on the lookout for any student stepping out of line. He’s determined to keep order in the school, making him a person students would rather avoid or not bump into. He seems to be around every corner and is always ready to catch anyone breaking the rules.

Character Design Explanation
  • Green colour palette: Green gives a serious feel which shows that the character is rooted in strict rules 
  • Angry frown: Emphasizes short temper and strictness
  • Grey hair and wrinkles: Show his age and authority in the school

Fig. 2.4 Main Enemy Design, Week 8 (11/11/2024)


Fig. 2.5 Main Enemy - Different States, Week 8 (11/11/2024)

Enemy - Prefects (Head Hall Monitors)
The prefect is a senior student chosen to uphold the school's rules. They take their role seriously, waiting to catch late students. Sometimes they may seem a little stern, but there’s always an air of fairness in how they interact with others. They were once a younger student themselves, so they understand the struggles and occasional slips of their peers, but they’re committed to guiding others to do better. 

Character Design Explanation
  • Blue colour palette: Classic choice for uniforms, inspired by blue ‘pengawas’ (prefect) uniform 
  • Neat hair: Shows they are prepared for school
  • Pale skin: Suggests how they mostly spend their time indoors studying and don’t go out as much
  • Stern expression: Gives the impression that they take their responsibilities seriously, aligning with their status as prefects.

Fig. 2.6 Enemy Design - Prefect, Week 8 (11/11/2024)

Enemy - Monitors (Rookie Hall Monitors)
The monitor is new to the role and still figuring things out. They’re eager but not yet used to the responsibilities that come with enforcing rules. They’re often a bit too forgiving, letting late students slip by with just a gentle reminder or letting them have their way sometimes. 

Character Design Explanation
  • Light blue colour palette: Less formal version compared to the prefect attire. Their colours are softer, with pastel tones suggesting kindness
  • Lack of tie: Suggests the lower status compared to the prefects
  • Unsure expression: Reflects their forgiving nature - they aren’t quick to punish late students, making them a bit of a “friendly face” in the school.

Fig. 2.7 Enemy Design - Rookie Monitor, Week 8 (11/11/2024)


Sizes and Scales
For the scales and comparison of the characters, I made sure that they all varied in size and height compared to each other. This made sure the characters were able to be differentiated enough and that the silhouttes look different from one another so the characters won't get mixed up.

Lecturer (Biggest):
The larger size makes him appear intimidating and reinforces his role as the primary figure of authority.

Prefect (Second Largest):
Prefects are positioned between the lecturer and regular students in the school’s hierarchy, so slightly smaller suggests they hold a level of authority.

Student (Smallest):
The student character is the smallest to reflect youth and a lack of authority. The smaller size emphasizes that they’re at the lowest level in the hierarchy.


Fig. 2.8 Character Sizes and Scale, Week 8 (11/11/2024)


Character Sprites
These are the character animations I made, the rookie hall monitor is not yet complete. I honestly suck at animating and drawing, so I did simple movements with what I could.

Main Character
Animations (in order):
  • Idle
  • Walking
  • Running
  • Jumping
  • Crouch
  • Attack
  • Hit/ Injury
  • Defeat
Fig. 3.1 Main Character Idle, Week 8 (12/11/2024)


Fig. 3.2 Main Character Walk, Week 8 (12/11/2024)


Fig. 3.3 Main Character Run, Week 8 (12/11/2024)


Fig. 3.4 Main Character Jump, Week 8 (12/11/2024)


Fig. 3.5 Main Character Crouch, Week 8 (12/11/2024)


Fig. 3.6 Main Character Attack, Week 8 (12/11/2024)


Fig. 3.7 Main Character Hit, Week 8 (12/11/2024)


Fig. 3.8 Main Character Death, Week 8 (12/11/2024)


Fig. 3.9 Main Character Summary of Sprites and Animation, Week 8 (12/11/2024)

Main Enemy
Animations (in order):
  • Idle
  • Walking
  • Running (Chase)
  • Alert
  • Attack 1 
  • Attack 2 (Rage)
  • Hit/ Injury
  • Defeat

Fig. 4.1 Main Enemy Idle, Week 8 (12/11/2024)


Fig. 4.2 Main Enemy Walk, Week 8 (12/11/2024)


Fig. 4.3 Main Enemy Run, Week 8 (12/11/2024)

Fig. 4.5 Main Enemy Alert, Week 8 (12/11/2024)

Fig. 4.6 Main Enemy Attack 1, Week 8 (12/11/2024)


Fig. 4.7 Main Enemy Attack 2 - Rage, Week 8 (12/11/2024)


Fig. 4.8 Main Enemy Hit, Week 8 (12/11/2024)

Fig. 4.9 Main Enemy Defeat, Week 8 (12/11/2024)


Fig. 4.10 Main Enemy Summary of Sprites and Animation, Week 8 (12/11/2024)

Enemy - Prefects
Animations (in order):
  • Idle
  • Walking
  • Hit/ Injury
  • Knock Out

Fig. 5.1 Enemy Prefect Idle, Week 8 (12/11/2024)


Fig. 5.2 Enemy Prefect Walk, Week 8 (12/11/2024)


Fig. 5.3 Enemy Prefect Hit, Week 8 (12/11/2024)


Fig. 5.4 Enemy Prefect Knock Out, Week 8 (12/11/2024)


Fig. 5.5 Enemy Summary of Sprites and Animation, Week 8 (12/11/2024)


Fig. 5.6 Converting to GIF in Adobe Photoshop, Week 8 (12/11/2024)


Environment
The environment creation did not take that long to create since I already had sketches and a moodboard planned on what I wanted it to look like. I still maintained a flat style illustration while adding more details to some aspects.

School Yard
The player starts outside the school gates, needing to sneak through by hiding behind bushes and trees without getting caught by Mr. Grumpy. The goal is to reach the school doors without getting sent home and to detention. The first environment is set in the early morning when the sun has nearly risen, showing that the student is late for school. The bright greens and yellows with a clear blue sky create an inviting, cheerful atmosphere to welcome the players into the first scene. 


Fig. 6.1 School Yard Environment, Week 8 (11/11/2024)

School Hallway
The player must navigate through the school while avoiding detection by the hall monitors who alert Mr. Grumpy. The goal is to avoid detection by hiding or ‘knocking out’ the hall monitors. If the player is caught sneaking, the game switches to a fast-paced chase sequence where they must outrun Mr. Grumpy. The pink and orange lockers add a pop of colour to the hallway, as well as make it stand out to show players they can interact and jump on those objects. The contrast against the blue walls and floors makes the whole scene neutral and balanced. 


Fig. 6.2 School Hallway Environment, Week 8 (11/11/2024)

Classroom
Upon reaching the classroom, the player finds themselves in a showdown with Mr. Grumpy. The teacher throws a rotan (ruler), while the player must throw silly things like paper planes to lower the teacher’s mood. The green chalkboard, wooden desk, and muted wall colours give the classroom a serious feel. 


Fig. 6.3 Classroom Environment, Week 8 (11/11/2024)


Items (Props, Obstacles, etc.)
I based the items, obstacles, hiding places, weapons that I would need to create down and the game mechanics for each. From this list, I started creating the assets one by one, which was quite a long process. I used some reference images online to help get the shape right since I'm not the best at drawing.

Obstacles
Players must jump over desks and trash bins that block their path and can slow them down. A suggestion is that they can jump on top of trash bins, desks and chairs to run on top of lockers and avoid the monitors, since platforms can't be used and won't look part of the world as Mr. Razif said.


Fig. 7.1 Obstacle Assets - Desks and Chairs, Week 8 (12/11/2024)


Fig. 7.2 Obstacle Assets - Trash Bin, Week 8 (12/11/2024)

The vision cone is a visible area indicating where the teacher or hall monitor is looking. If the player enters this cone, it triggers a chase sequence. The player has to avoid getting spotted by this cone. This cone can be created in Unity like the torchlight tutorial.



Fig. 7.3 Vision Cone Asset, Week 8 (12/11/2024)

Hazards/ Obstacles
Wet floors or trash on the floor from the rubbish bin (e.g. banana peels) will disrupt movement and give Mr. Grumpy a chance to close in. My idea is that it might make players slip or slow down if they step on them


Fig. 7.4 Hazards/ Obstacles Assets, Week 8 (12/11/2024)

Hiding Spots
My idea is to have players either hide from enemies, or use their limited ammo (paper planes). Lockers offer hiding places in the hallway and the trees in the yard. These spots allow players to evade enemies by remaining out of sight until the threat passes.

Fig. 7.5 Hiding Spots Assets, Week 8 (12/11/2024)

Weapon Combat
Players can throw paper planes at hall monitors, temporarily knocking them out to avoid capture. These paper planes regenerate as players collect more scattered throughout the level, adding a sense of resource management to gameplay.

Mr. Grumpy can throw a rotan (ruler) at the player. Players can defend themselves by throwing paper planes back at Mr. Grumpy.


Fig. 7.6 Weapon Combat Assets, Week 8 (12/11/2024)


Game Interface & UI Wireframe Sketch
I'm not really sure if we needed to make the game interface or sketch it out, but a friend mentioned it and I got scared to death so here are some UI designs.

Button Design 
The button designs are minimal to match the flat style illustration of the game, as well as to make it easy for users to recognize. The colours match the game designs of bright colours which helps create a cohesive look and draw the player's attention to it.


Fig. 8.1 Button Design, Week 8 (12/11/2024)

Health Bar & Paper Planes Bar
These are the health bar and item combat (paper planes) bar for the player to keep track. This shows that the number of lives and item combat they have is limited and they must manage their resources well. I will probably add an element of chance, for example, players can collect additional heart(s) around the map.

Fig. 8.2 Bar Designs, Week 8 (12/11/2024)

Tutorial Introduction
For informing the players on what to do, I plan to use these school notebook paper sheets. The instructions can look handwritten on the paper, which matches the school theme. in my opinion.  


Fig. 8.3 Introduction Designs, Week 8 (12/11/2024)

Rough UI Design Sketches
I just made some really rough sketches of a few game scenes, just as an outline of how they could all look like. Instead of a traditional game menu screen, the start screen shows you the way into the game as fast as possible, making it seem urgent since the student is late


Fig. 8.4 Opening Scene, Week 8 (12/11/2024)

The HUD and placement of UI elements are put in the corners so that the player can focus on the gameplay more instead of the buttons. The health bar of the hall monitors is placed on the top of their head following them, while in the final showdown with the teacher it is on the top of the screen. The health bar is much larger to show how strong Mr. Grumpy is compared to the other enemies and main character


Fig. 8.5 Hall Monitors, Week 8 (12/11/2024)


Fig. 8.6 Lecturer Face-Off, Week 8 (12/11/2024)

If the player is caught by the prefects or defeated by Mr. Grumpy, a text will appear saying they got detention and show a background of the student in detention.    


Fig. 8.7 Defeat Scene, Week 8 (12/11/2024)

Summary
What has been done:
  • Main character sprites and animations
  • Main enemy sprites and animations
  • Enemy 1 sprites and animations 
  • Button design
What has yet to be done:
  • Enemy 2 sprites and animations 
  • Item sprites and animations
  • UI sprites 
  • Asset and character placement in environment
  • Adjust the colors of the environment (hallway) so objects stand out

Final Task 2: Art Asset Development


Fig. 9.1 Final Art Asset Development Document, Week 8 (13/11/2024)


Fig. 9.2 Final Art Asset Development - Slides, Week 8 (13/11/2024)

Fig. 9.3 Final Art Asset Development - Presentation Video, Week 8 (13/11/2024)

FEEDBACK
WEEK 8
  • Make an outline for the lecturer's character so that the arms don't blend in with the body
  • The vision cone can be created in Unity just like the torchlight tutorial
  • Increase the height of the scene and the width as well, so when players jump or go to the corner there won't be empty space
  • Put the characters in the scene to visualize how everything looks 
  • Putting a platform in the middle of the scene would look weird, it is not part of the world/ scene. Maybe let the character jump on trash cans and on top of lockers to avoid the hall monitors.
  • For collectables, maybe the character can collect paper from the floor to use as his ammo for the paper planes
  • Is it possible for one monitor to trigger all the monitors?

REFLECTION

Experience
Honestly, this project was quite heavy in terms of the workload. Not only did we have to create our own assets, but we also had to animate their movements and create the rest of the items we needed. I feel pretty drained doing all of that but in the end, I'm quite surprised with how it turned out considering I have no skills in illustrating or animating. 

Observations
From this task, I observed the importance of time management and prioritizing certain tasks. For example, the most important thing we should complete is the main character and enemy with their animations. Without those key assets, our game would be pretty much useless. I also observed that since the workload is quite heavy, we really have to manage our time well. Even with an extension, it felt like there was still not enough time.

Findings
I found that planning the gameplay in our proposal is the most important aspect. We should have what we want to happen written in detail or else it would be hard to know what assets we would need to create. I also found that simple movements in the animation make such a difference and it is important to make all the art design styles consistent. This makes the game more unified and cohesive to tell the users they all belong in the same world.

Comments

Post a Comment