Game Development/Task 2: Art Asset Development

23/10/2024 - 14/11/2024 / Week 5 - Week 8
Janice Marie Eng Chia Hui /0361521
Games Development/Bachelor of Design in Creative Media / Taylor's University 
Games Development: Taks 2 Art Asset Development

Table of Contents:

  1. Instructions
  2. Task
  3. Feedback
  4. Reflection

Instructions



Task

Please read the GAME ASSET DOCUMENT FOR A MORE COMPREHENSIVE EXPLANATION.

All assets are hand-drawn by me unless stated otherwise.

The ones in green are assets that have been created. Blues are the ones done after submission.

To-do list:
  1. Character
    • Floss (MC)
      • Floss Idle Animation
      • Floss Walk Animation
      • Floss Die Animation
      • Floss Jumping Animation
      • Floss Hurt Animation (WIP)
      • Floss Attack Animation (Long & Short ranged)
      • Floss gun design
      • Floss attack (bullet)
    • Bristle (Antagonist)
      • Bristle Boss fight design
      • Bristle Hurt Animation (Still is done)
      • Bristle Die Animation 
      • Bristle Still (for talking to Floss)
      • Bristle Final Boss HP bar
    • Mob (Mom & Dad)
      • Mobs Walking Animation
      • Mobs Hurt Animation
      • Mobs Die Animation
      • Mobs Attack animation
  2. Environment
    • Background Design Level 1 (House)
    • Background Design Level 2 (House)
    • Background Design Level 3 (Fairy headquarters/Final Boss)
    • Tileset design Levels 1 & 2
    • Tileset Design Level 3
  3. Items/Collectables 
    • Collectables 
      • Heart Replenish 
      • Tooth
      • Dart (Design to be changed)
      • Photo (collected by Floss at the end of Level 1)
      • Checkpoints
  4. Game UI
    • Health Bar
    • Dart Bar
    • Menu Screen
    • Button States
    • Menu Button
    • ‘Try Again’ Screen
    • Tutorial/Key Bindings Screen
    • Tooth Counter
  5. Game Artwork
    • Dialogue Screen
    • Introduction Screen Art
    • Ending Screen Art
    • Game Start Screen Art
  6. Design Direction
    • Colour Palate
    • Font Used
    • Logo
  7. Traps/Obstacles
    • Spikes
    • Projectiles
    • Springboards
  8. Additional Animations
    • Collectible Heart Animation
    • Collectible Tooth Animation
    • Collectible Darts Animation
    • Collectible Photo Animation
    • Checkpoint Animation
  9. SFX
    • Long-range atk SFX (found online)
    • Short range atk SFX (found online)

Character

I made a character sheet before animating anything to first see the height I would want for the characters. The unit of measurement I used was Floss. So everyone would be 1 or 2 Floss tall.

Figure 1.1 Character Sheet (16/11/24)

Floss (MC)

Floss is a tooth fairy with a mint green body. The mint green colour is based on the colour of dental floss. I drew her design in Photoshop. I initially used a splatter brush to shade her but decided that that would be too hard to animate. So I changed all to cell shading

I also did the Idle and Walk animation for Floss.

Figure 1.2 Initial Floss Design and Splatter Shading (15/11/24)

Figure 1.3 (from left) Floss hurt animation, Floss Idle animation and Floss walking animation  all with normal cell shading (15/11/24)

Figure 1.4 Sprite sheet for Floss Idle (top 2 frames) and Floss walk frames (bottom 4 frames) (15/11/24)



Figure 1.4.1 (from top left) Flos Dies and Floss Hurt animation(updated) and Floss Jump Animation (19/11/24)

Bristle (Antagonist)

Floss's childhood best friend. The long-time winner of the 'Fairy of the Year' Award. Bristle has a pink, oval-shaped body. I made her design to contrast as much as possible with Floss's design to show that they are enemies. 

Initially, I wanted Bristle boss fight scene to be something where Bristle chases Floss and Floss must not get touched by her. Along the way, I decided to change it to Bristle growing into a giant boss and spawning projectiles that will attack Floss. Floss can defeat Bristle by destroying some objects while evading the projectiles.   

So far for Bristle, I have only created the stills for her final boss scene.

Figure 1.5 Bristle Final Boss Stils (16/11/24)

Figure 1.5.1 Bristle Normal Stills (19/11/24)

Figure 1.5.2 (from left) Bristle Dies, Bristle Hurt and Bristle Idle Animation (19/11/24)

Mobs (Mom & Dad)

For the mom and dad, their initial sketches had them in more complicated attire. I decided to take those details away to make the design simpler so that its easier for me to animate. 

Additionally, for the mob's body design, I traced a body reference image I found online. I based the height of the mobs on Floss's height. Initially, I made them be 3 Floss tall but changed it to 2 Floss tal as I felt that 3 was too tall.

I also used an animation I found online as a reference for their walking animation.

Figure 1.6 Reference Image I traced over for the mob's body shape (16/11/24)

Figure 1.7 Reference Animation for mobs walk cycle(16/11/24)

Figure 1.8 Dad and Mom walk animation (16/11/24)

Figure 1.9 Mom and Dad walk animation sprite sheet (16/11/24)

Backgrounds

For the backgrounds, I already knew how I wanted it to look as I had some visual references prepared already. 

When creating the background, I made sure I could put the background side by side to make one long seamless background.

Additionally, I decided to make Level 1 and 2 share the same background as their location was in the same area, the interior of a house. For level 3 as the design was the Fairy Headquarters, I designed it to look magical.

Figure 1.10 (from top) Level 1, Level 2 and Level 3 background (16/11/12)

Figure 1.11 (from top) Level 1, Level 2 and Level 3 background looped (16/11/12)

I also made some tilesets for the levels. I split them up into blocks first and plan on assembling them in Unity later on. 

Figure 1.12 Tileset design for Levels 1 & 2 (16/11/24)

Figure 1.12 Tile set design for level 3 (16/11/24)

Items/Collectables

Here I just designed the collectables and items for my game. This included:
  • Hearts:
    • Used to replenish Floss health bar. Collecting one heart will replenish one of Floss's lost health.
  • Tooth:
    • The item that Floss needs to collect to advance to the next level. There will be 3 teeth per level. Floss will have to collect all 3 to proceed to the next level.
  • Darts
    • Collecting these darts will provide Floss with long-range attacks. Collecting one dart will provide Floss with 5 charges of long-range attacks. There will be one dart per level (except the final boss level)
  • Photo
    • An image of Floss and Bristle when they were kids. This image will be placed at the end of Level 1. Floss will be able to collect and interact with it. Once she interacts with it, she will learn that Bristle has been to the house. This will motivate her to work harder. This item is mainly for the story progression and not for the gameplay mechanics.
  • Checkpoints:
    • Located before any challenging obstacle path. Once a player runs past it, it will save the player's location. If the player dies, they will respawn at this location.
Figure 1.13 (from top left) hearts, photo, checkpoint, dart and tooth (16/11/24)

Game UI

The game UI I have created so far includes:
  • The menu screen with the resume, help and quit buttons
  • The menu button
  • The Try Again screen that shows after you die, with buttons that say restart or quit
  • The tutorial screen with information on the key bindings
  • Floss health bar
  • A tooth counter. As Floss needs to collect 3 tooth per level, this counter will keep track of how many tooth she currently has,
  • A dart bar. This is to keep track of how many long range shots Floss currently has.
  • Button states
Figure 1.14 Button states (pink is unpressed and yellow is pressed)(16/11/24)

Figure 1.15 (from left) Health and dart bar; Tooth counter UI (16/11/24)
Figure 1.16 Menu buttons, with the pink one being the unpressed version and the yellow one the pressed version (16/11/24)

Figure 1.17 (from left) Menu screen and try again screen (16/11/24)


Figure 1.18 Tutorial Screen (16/11/24)

SFX and Traps

Sfx will only be given to Floss long-range and short-range attacks. They will be taken from the free asset store on itch io.

Figure 1.19 Short-ranged attacks SFX (16/11/24)

Figure 1.20 Long-range attacks SFX (16/11/24)

The current trap design includes the spikes.

Figure 1.21 Spike asset (16/11/24)

 Logo

I made a logo for the game. 

Figure 1.22 Logo Design (16/11/24)

Game Scene Mockups

Figure 1.23 Level 1 mock up

Figure 1.24 Level 2 mock up

Figure 1.25 Level 3 mock up

Figure 1.26 Menu screen mock up

Figure 1.27 Help screen mock up

Figure 1.28 Try again screen mock up

Final Submission

Updated: 15/11/24 (Added in Game Asset Doc)
Last Update: 16/11/24 (Added in Blog Content) Completed

Game Assets Document

Presentation Slides

Video Presentation (Timestamps in video description)



Feedback

Week 6:
Fairy of the Year game idea:
  • For the game mechanics, I suggest you implement the shooting and attacking mechanism so that you can showcase the animation.
  • However, if you really want to do the hiding game mechanics, you can add it on along with the shooting/killing mechanics.
Week 9
  • For the attack key bindings, you can stick to using mouse clicks
  • The tile sets, its better to export it in block as it gives you more flexibility
  • For you buttons, you can export it into unity as an empty btn and put in the text later on
  • The logo maybe you can consider adding the characters behind them


Reflection

Visual Representation of me during this entire task

I severely underestimated how much time was needed to make all the game assets. Even now, I'm still not done making all the assets (its week 10). Honestly, at first I was lost on what I needed to do. But I found out that making a list of all the assets that was needed really helped me actually get the work done. I could make they bits by bits and slowly tick them off.

I learned a lot about game art while doing this assignment, such as the tile sets and sprite sheets. There are a lot of technical things that go into making a game. It's interesting to learn about. Additionally, is seems that a lot of platform game out there are pixel art as there seems to be a lack of non-pixel game assets (crying my ass off).

Finally, I find having a clear reference or art direction of what you wan your game to look like really helps when making the game assets.

Comments