Games Development - Task 2: Art Asset Development


Week 05 - Week 07
Wong Khye Qing / 0361000
Games Development/ Bachelor of Design (Hons) in Creative Media
Task 2: Art Asset Development

 
Instructions
 

 
Before Further Progress...

I have tried to watch some YouTube videos on the creation of the pixel art that I have mentioned in my proposal, as I am still not familiar with it. The videos that I have watched are the ones that might be able let me avoid some of the basic mistakes as well as having a smoother working path, instead of a bumpy ride.


Fig 1.0  Self Learning, YouTube
Takeaways of this video:
  • Careful on the canvas size, it is important to keep a 1:1 ratio for the canvas
  • Blockingout the characters is a good start, as it is able to build a silhouette of the character. 
  • Use Pencil Tool to create the pixels in Adobe Photoshop, so that it will not smudge like the Brush Tool
  • Shade with different Hue from a color, try having a light direction reference to set the lighter and darker color for shading. 

Fig 1.1  Self Learning 2, YouTube
Takeaways of this video:
  • Avoid Pillow shading, as it will look half baked and like an unfinished design, should have a light reference for better shading
  • Have outlines that are uniform, stick with 1 line thickness or 2 lines thickness
  • Note on the size continuation, it is important so that all the assets will look alike from the same design style instead of looking foreign with each other.


Task 1 Recap...

In the previous Task 1, there are a few things that have been accomplished a few things, below a few things that were pointed out in Task 1 and what has been listed in the proposal: 

  • Game Concept:

    • Theme: Black and white platformer with color-changing mechanics.
    • Objective: Character's environment influences gameplay, promoting exploration and growth.
    • Mechanics: Movement, jumping, object interaction, solving puzzles, avoiding traps/enemies.

  • Game Aim:

    • Character Growth: Show character's development influenced by surroundings.
    • Exploration: Encourage stepping out of comfort zones.
    • Bravery: Promote taking first steps and learning through exploration.

  • Characters and Stats:

    • The Boy: Main character with 3 health bars, starts in grayscale.
    • Dangerous Cupboard: Enemy with unlimited health, shoots projectiles.
    • Metronome: Heals player and grants 3 seconds of invincibility.
    • Spikes: Deal damage upon contact.

  • Levels:

    • Tutorial 1: Basic movements and obstacle maneuvering.
    • Tutorial 2: Object interaction and health concept.
    • Level 1: Introduction to the world, minor obstacles, and puzzles.
    • Level 2: Increased difficulty with new enemies.
    • Level 3: Time-based challenges leading to final goal.

  • Visual and Audio Elements:

    • Color Change: Based on player's health and level progression.
    • Soundtrack: 8-bit music with varying pace according to difficulty.
    • Sound Effects: Footsteps, jumps, interactions, attacks, item collections, and environmental sounds. 


Task 2: Art Asset Development

 
Fig 1.0  Sprite Creation in Piskel and Aseprite

I started out using an online tool called Piskel, it was fine at first but I had some issues in a lot of ways, which led me to use Aseprite that is more convenient and had more tools to aid me in creating my sprites easier and faster.  

Main Character (Mark)
Fig 1.1  Mark Idle

Attempts have been made in order to create the main character, Mark, which is a shut-in that rarely goes out. Which is why I have designed it to wear a hoodie that tries to protect himself from the outside world or to avoid contact. The hoodie colors have changed from Dark Red, to shades of Orange. A few considerations have been taken while choosing the colors: 
  • Colors must be different from the background to pop out 
  • The colors must not harmonize with the background or there will be no contrast 
Earlier considerations for using Orange was to make sure that the character truly pops out. Upon a few designs, I felt that Orange was too pop and also might harmonize with the green background that I might be using, which was why red was reused again. The Hoodie has also been modified to be more fluffy to facilitate later animation, in order to display a better idle animation. Besides, curves and corners have been refined in order to modify it away from the square style that might look too stagnant and common. Curves around the corners of the hoodie allow the design to look more refined and well made.
 

Fig 1.2  Mark Idle


Fig 1.3  Mark Idle


Fig 1.4  Mark Jump


Fig 1.4  Mark Duck


Fig 1.6  Mark Fall


Fig 1.7  Mark Hurt


Fig 1.8  Mark Die

 
 
 
 
 
 

Fig 1.9  Mark's Sprite Sheets

With that, a new character design has been finalized that featured Mark in a Bright Red hoodie with Blue jeans. Details of the changes have been listed below: 
  • The edges were also refined for the hoodie to smoothen out the curves 
  • The hoodie curves at the waist allow refined the illusion of the character tugging into the hoodie 
  • Shades of Red and Blue has also been added to the hoodie and jeans simulating light shades and shadow in order to show depths 
  • The Shoes are rounded in to add details to the design instead of having squared shoes.


Enemy (Dangerous Locker)


Fig 2.0  Dangerous Locker Idle

The Dangerous Locker is in Gray color due to its nature as a locker and weathered texture to show that it has been abandoned for a long time. There was also a minor detail showing the angry expression during the animations. 


Fig 2.1  Dangerous Locker Attack

By attacking, the locker will be opening its “mouth” to shoot out the sword projectiles. The animation was also featured with the locker moving downwards while shooting out the projecting. 


Fig 2.2  Dangerous Locker Hurt

The locker will be hurt and highlighted with a faint red to show that it has been hurt, accompanied with a downward movement to show retraction. 


Fig 2.3  Dangerous Locker Die

Sadly, when the locker is dead it will curl down and rust away. The top of the door will also be worn the same goes to the door handle that has been more downward to show that it is lifeless. 






Fig 2.4  Dangerous Locker's Sprite Sheets


Collectables and Others
 

Fig 3.0  Metronome

This will be a collectible to be invincible for 2 seconds time once collected, allowing players to be invulnerable towards spikes or projectiles. The Sprite has a 16x16 dimension. 


Fig 3.1  The Portal

As mentioned previously, the portal will only be activated once the Paper note is collected. If not, the portal will not appear and players can’t progress to the next level. 


Fig 3.2  Flag O' Reset

This acts as a checkpoint upon collection, meaning players will be spawned at the checkpoint once killed instead of starting the whole level again which wastes time. The Sprite has a 16x16 dimension. 


Fig 3.3  Paper Notes

This is an important collectible as users need to collect this in order to open the portal for each level. The Sprite has a 16x16 dimension. It will be floating around.





Fig 3.4  Collectables and Others' Sprite Sheets


Background


Fig 4.0  Forest Background Variants

This will be the far background that the Parallax background will be using. There were two variants prepared in order to be used for different levels. This is a modified asset that has featured some tweaked elements in the sprite.


Fig 4.1  Middle Background

This is the middle background that the Parallax background will be using. It featured trees with spikes that showed a wicked side of the forest. This is a modified asset that has featured some tweaked elements in the sprite.


Fig 4.2  Combination of Background

With the combination of both backgrounds, it will form this background that will be animated using parallax in order to add depth to the game


Fig 4.3  Brick & Pillars Background

This featured a brick background that has cracked walls to show that the castle has been abandoned. This will be used in the Final boss level to differentiate from other level’s visuals with the addition of parallax effects. 

This featured a few old pillars as the middle background for the parallax background. The pillars also have cracked in some parts just like the background. 


Fig 4.4  Combination of Backgrounds

With the combination of both days, a castle background has been made, parallax background effects will be used in order to add depth to the game experience as well. 


Platform Assets


Fig 5.0  Dirt & Stone Platform with Spike

These dirt platforms will be used as floorings for normal levels that will enable players to move along the platform and progress through the levels. Multiple angles have also been considered for the sprite sheet to enable high compatibility. 

This is almost similar to the Dirt Platform but it will just be used in the boss level as it is compatible with the castle environment. Multiple angles have also been considered for the sprite sheet to enable high compatibility. Besides stones spikes will be used in general levels and boss levels that will kill the players once stepped. 


Summarized Task 2

Character Design (Mark)

  • Early iterations: Mark in a hoodie, color changes from Dark Red to Orange, then back to Red for contrast.
  • Final design: Bright Red hoodie, Blue jeans, refined edges, and shading for depth.
  • Animation states: Idle, Walking, Jumping, Ducking, Falling, Hurt, and Dying.

Enemy Design (Dangerous Locker)

  • Concept: A locker that shoots swords, originally thought to be a cupboard.
  • Final design: Gray, weathered texture, angry expression, and detailed animations for Idle, Attack, Hurt, and Dying.

Collectibles

  • Metronome: Grants invincibility for 2 seconds.
  • Paper Notes: Essential for activating portals to progress levels.
  • Flag O’ Reset: Checkpoint for respawning after death.

Portal Design

  • Activated by collecting Paper Notes, allows progression to the next level.

Background Assets

  • Forest: Far and middle background variants for different levels with a parallax effect.
  • Abandoned Castle: Brick background with cracked walls and old pillars for the final boss level, with parallax effects.

Level Assets

  • Dirt Platforms: Used as flooring in normal levels, multiple angles for high compatibility.
  • Stone Platforms: Used in the boss level, compatible with the castle environment, including stone spikes that kill players on contact.


Task 2 Final Submission