Game Development / Art Asset Development
23.10.24 - 14.11.24 / Week 5 - Week 8
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Game Development (DST61104)
Bachelor of Design (Hons) in Creative Media
Game Development (DST61104)
INSTRUCTIONS
TASK 2
Art Asset Development
For the second task of game development, we have to produce/collect art assets for our games. This includes characters, environment, items, props, obstacles, power ups, and HUD design.
To create my custom assets, I used an application called Aseprite which is a
pixel art editor and animator as I wanted to make the game a pixel-based game.
Characters
Lucia
I first began with the main design of the
playable character; Lucia, who serves as the "lightbringer" in the game's narrative. I wanted her design to visually convey the role she plays in the game, which is in restoring hope and illuminating the darkened land, as if she had an almost preordained mission. She also needed visible, as the game itself is dark. The contrast itself is also integral to the game's themes. With this in mind, I opted for features and colours that symbolized light and purity.
Lucia's eyes are a vibrant yellow-amber, resembling the glow of a lantern, hinting at her connection to light and her role in dispelling the darkness. Her hair is also a silverish blonde and she wears a pale beige dress to contrast with the dark surroundings/environment of the game and to further her "pure" design. She wears a cape and boots for practicality for her mission, but I also chose to design her with a cape since they have long been associated with heroism. It also adds an element of mysteriousness with the hood and dynamism to her character, since it flows gently in the wind. I tried to make the design reflect the time period/world I imagine the game to be set it, which is closer to the medieval period.
Fig 0.1 Designing Lucia
Hostile Soul
Then, I moved onto the design of the hostile souls. I wanted to make them resemble ghostly figures, but instead of making them white like most ghosts are depicted, to make it fit with the narrative, I have made them dark since according to the story, they have been corrupted by darkness- which is what made them turn into a hostile soul in the first place. I have also made their eyes sad looking but light and slightly glowing to depict the fact that there is still a human soul within them that is still suffering due to what they have had to endure, and what they became. I wanted to design them this way since I don't actually view them as "enemies" in the game, but victims of the darkness, so there is technically no "evil" in the hostile souls themselves. I imagine them to be unconscious of being hostile, almost like an animal attacking on instinct and "trapped" inside a body they can't fully control.
Fig 0.2 Designing Hostile Soul
The Darkness (Boss)
Next, I did the design for the boss. He is the source of the darkness that overtook the village and captured the souls of Lucia’s friends and family. Using some knowledge I learned about design theory for characters, I tried to make the boss obviously appear like an enemy and threat to the player.
To do this, I created the boss to be tall, and have a towering, shadowy form- this is symbolising it as an unstoppable and invasive force, since in the game story, it managed to corrupt the entire land with darkness, effectively leaving nothing behind except for Lucia, who escaped. Of course, since it is the darkness itself, I used a dark colour for their design, but also the same dark colour I used for the souls to have that common link between them, representing in a way that the boss was the one who turned them into what they are now, and to have consistency and cohesion for game visuals.
I also made him proportionally bizarre, with elongated limbs, claw-like hands, and a horned silhouette, to give it a nightmarish and alien appearance, which distances it from any semblance of humanity unlike the hostile soul design. This is to reinforce its identity as a primal, otherworldly force rather than a mere mortal antagonist. The upward, twisting horns are also to evoke a sense of malevolence and power, since they are often associated with demonic or predatory figures, symbolising dominance and intimidation. I also have made its body warped, and there is a flow at the base to make it appear like it is spreading or growing to further emphasise its invasive nature. The sharp, oversized claws also imply its capability to harm and destroy as it serves as a physical manifestation of its hostility and its ability to corrupt anything it touches. The single glowing red orb at the center of its head is the "eye/core" of the boss, and it is meant to draw immediate attention, acting as a focal point. I chose red since red represents danger, which ties into the boss’s theme of destruction. It also is supposed to represent a source of power, since I wanted the boss to attack the player through projectiles, so this eye is where the projectiles will come out and shoot from.
Fig 0.3 Designing The Darkness Boss
NPCs (Purified Souls)
Lastly, I created the designs of the NPCs in the game which are the purified souls that will show up in the last cutscene of the game. This is to remind the player of the narrative, that the "enemies" they were fighting weren't really enemies, but real people who needed to be saved and purified so that they can move on to the after life. I created diversity in the design, making both boys and girls, children and adults, and sticking with clothing from the time period I imagine the game to be in which is medieval, but also added in some unique non-realistic colours for some characters hair/eyes to emphasise that this is a fantasy world. I've also given each of them names since they will talk through dialogue boxes for the cutscenes at the end.
Fig 0.4 Thomas
Fig 0.5 Sophie
Fig 0.6 Mom
Fig 0.7 Henry
Fig 0.8 Evelyn
Animations
Once I finished all the designs, I could then move onto animating. To animate, I created several frames for each animation, and exported them as sprite sheets. Each animation (not counting the boss projectile orbs) are 96x96
Lucia Animations
First, I started off with Lucia's animations. She has 7 animations:
- Idle
- Walk
- Attack
- Walk Attack
- Hurt
- Jump
- Death (Corruption)
Idle
Fig 0.9 Lucia Idle
For Lucia’s idle animation, she is slowly bobbing up and down to indicate her breathing. Her hair and her cape both slightly sway with her movements and to suggest a gentle breeze in her environment. She also blinks as her head and torso sink. I designed this animation with enough detail to give her liveliness and immerse the player even when she isn’t moving, but not so much as to use too much time on one animation or to be too distracting.
Walk
Fig 1.0 Lucia Walk
Lucia’s walk animation is straightforward and simple; her legs move forward one after the other as her hair, cape, and dress all sway slightly just like the idle animation. She swings her arms back and forth as does the lantern in her hands.
Attack
Fig 1.1 Lucia Attack
In her attack animation, she pulls out her lantern from her side and extends her arm forward as it shines. It gradually increases in light intensity until the end of the animation, and in the game, it stays on the last frame with her arm extended for as long as the player holds down left click. As the light of the lantern gradually increases, the light shining on Lucia slightly increases as well as does the contrast with some of the shadows on her. She bobs down slightly to indicate a weightiness to the lantern, and to breathe more life and dynamism into her movements. The actual luminous radius of the lantern is separate from the animation and utilizes light mechanics from Unity which will be implemented later on when creating the game. This animation is also played when she shoots out her lantern beam ranged attack.
Walk Attack
Fig 1.2 Lucia Walk Attack
It combines the attack + walking animation I created, but with her arm extended and brightened colour as in the last frame of the attack animation.
Jump
Fig 1.3 Lucia Jump
Lucia’s jump animation is one of her simplest; her feet are raised, her legs are extended, and her cape flows in the draft of wind created by her jump. The strands of her hair on her shoulders flow in a similar manner as well. She raises her head and her eyes as she increases in height, and they sink as she loses height at the end of her jumping animation. This is meant to give a visual analogy matching her increasing and decreasing in height to the player and bring more liveliness in contrast to a dark and hollow environment.
Hurt
Fig 1.4 Lucia Hurt
Her hurt animation has multiple visual suggestions of pain. Her eyes are closed tightly, forming a “><” shape as commonly seen in animations and games to suggest a wincing expression as she is hurt by the darkness. Her entire character is briefly surrounded in a dark, dull purple to match the colour of her sanity meter. This gives a visual indication that this damage and pain is directly linked to the decrease in her sanity meter. The purple squiggle lines over her head are a symbol taken from anime, meant to indicate feelings of stress, exhaustion, gloominess, and/or discomfort and show a loss in sanity, which is why its emitting from her head. I chose this colour since in the game, she doesn't lose health but "sanity", and also because in Japanese culture, it’s tied to the sorrow and gloom associated with the colour purple as well as their chaotic shape symbolizing instability and disorder.
Fig 1.5 Inspiration for Lucia Hurt + Death Animation
Death (Corruption)
Fig 1.6 Lucia Death
In her death animation, Lucia has the same pained expression in her eyes as she falls to the knees and drops her lantern to the floor. She holds her head, as is a common metaphor with mental instability and neuroticism to hold one’s head in their hands. The same squiggle lines from the hurt animation appear. Slowly, she turns grey and loses colour to visualise her corruption from the darkness.
Lantern Beam
Fig 1.7 Light Beam
Lucia's secondary long ranged attack is a beam of light that shoots out her lantern, which i used from this free asset online.
Hostile Soul Animations
Next is the hostile soul animations, which consists of 4 animations:
- Idle
- Attack
- Hurt
- Death (Purified)
Idle
Fig 1.8 Hostile Soul Idle
The soul idle animation is created with the soul slightly bobbing up and down, just like Lucia’s idle animation, to give more life to the characters and not just have them remain still like a static image when they’re not attacking or moving. Their eyes are rounded and slanted upward to show sadness and communicate the despair of the darkness to the player. There are also particles that emit from their body to show the unstable yet powerful dark energy that has consumed the souls of those who Lucia knew. Like a liquid or bubbles, it shows to the player that this darkness is spilling out like a corruption or disease.
Attack
Fig 1.9 Hostile Soul Attack
When the soul is attacking, it is just like the idle animation except for the change in the eyes. The rounded and upward slanted nature of the idle animation eyes gave them the look of someone who is despairing and a victim of the darkness, and this is contrasted in the attack animation. The soul’s eyes are now slanted downward, red, and sharp; it gives the image of an aggressor where the idle animation is more victim-like. It is clearly communicated to the player that the soul, although tortured and suffering, is a threat and should not be trusted when it approaches.
Hurt
Fig 2.0 Hostile Soul Hurt
The soul’s hurt animation is much like the idle animation as well with a few differences. From their eyes are tears to show they are suffering and that the light hurts, even if they want to be freed. They are also inverted in colour to a brief flash of white, just like how the player flashes purple when being hurt. The whiteness is intended to show the affliction of the light damaging the shell of darkness. The colour of the tears is inverted as well to show contrast and allow them to appear against the lightness of the soul, and to show that the pain of light comes from darkness; it is only painful to be healed because of the curse of darkness afflicting their souls. The dark tears against the light soul show a healing soul, that its pain and sadness is the darkness itself which traps them and not their soul.
Death (Purified)
Fig 2.1 Hostile Soul Death
As the soul is being freed in its death animation, their eyes no longer exhibit pain or sadness. They are become round and white to show their innocence, but their eyes are no longer tilted. Finally, there is light; their colour fades, and the dark soul begins to fade away and divide into smaller and smaller particles and be free of the darkness to show successful purification.
The Darkness (Boss) Animations
Then I created the animations for "The Darkness" aka the boss, who consists of 3 animations:
- Idle
- Attack
- Death
Idle
Fig 2.2 Boss Idle
The boss in his idle animation has particles of darkness emitting from his body and drips with the same sinister and corrupted fluid darkness as the soul in its idle animation. He bobs up and down just like them, and here he has the redness of his eye to show that he is a clear threat as the souls are in their attacking animation. His long frame and arms, claws, sharp horns, and single eye resembling a cyclops show that this form of darkness is inhuman and otherworldly, it is a lifeless darkness and void which feeds on the life of others.
Attack
Fig 2.3 Boss Attack
His attack animation features him lifting his arms and claws to be the same height as his head, and he flashes his eye. The moving of his arms is a signal to the player that he is about to attack, and they must get ready, and his eye flashes to signal that the energy projectile will be shot from his eye. The projectile itself resembles his eye.
Death
Fig 2.4 Boss Death
For the final animation, we see the boss’s death. He closes his evil red eye to symbolize that the threat is defeated and gone, and his darkness fades and divides into smaller particles increasing in whiteness just like the death of the corrupted soul. But unlike the corrupted soul, the boss’s essence is of darkness itself. The darkness is disappearing, but he is darkness himself, and so he disappears entirely since theres no pure soul within him. We see in the end cutscenes that it is only the darkness trapping the souls that dies, and their souls live on.
Orb Projectiles
Fig 2.5 Boss Big Orb Projectile
Fig 2.6 Boss Small Orb Projectile
HUDs
Meters
I have a 3 meters for the game which I have created:
- Sanity Meter (pseudo-health for player)
- Darkness Meter (pseudo-health for hostile souls + boss)
- Lantern Fuel Meter
The fills of each meter are separate from their frames, so that only the fill disappears in game and not the frame border.
Sanity
Fig 2.7 Sanity Meter
First is the sanity meter, which is connected to the player as a pseudo-health bar. Instead of having health and using a heart, I chose the concept of sanity due to the theming of my game, as I thought conceptually it fit better and was more interesting. The meter uses the same colour as lucia's hurt animation, with a brain on the side to show that it affects player sanity.
Lantern Fuel
Fig 2.8 Lantern Fuel
Then I created the lantern fuel meter of the game, which is represented through a vertical meter with a yellow fill, and a yellow liquid droplet on the side. The yellow droplet is supposed to represent oil for the fuel of the lantern, as it is an old-style lantern that runs on oil fuel, and the colour yellow is supposed to act as a visual link to the lantern light, as well as represent oil fuel itself which is yellow coloured. I chose a vertical meter as I did not want to stack two horizontal meters after one another since I thought it could be too confusing or difficult to pay attention to, and it visually aligns with the natural concept of depletion, where players can intuitively associate a descending fill with the diminishing fuel supply. The vertical design makes it easy to read at a glance, especially during high-intensity gameplay, ensuring that players can quickly gauge how much fuel remains.
Darkness
Next is the darkness meters, which are utilised for the hostile souls and boss. They also act as a pseudo health-bar for them, and I chose to have them be "darkness" meters instead of health due to the theming of my game, where the player (Lucia) is trying to purify and save the land from darkness, so by draining souls and the boss of their darkness through light purification, the souls can be freed, and the land can be saved. The fill of the meter is dark since it represents the darkness, and so the player can track the amount of darkness left to be purified. The boss darkness meter is elongated as he has more health.
Fig 2.9 Hostile Soul Darkness Meter
Fig 3.0 Boss Darkness Meter
Lamp Post
Fig 3.1 Lamp Post Meter
There is also the lamp post meter which will be the meter the player sees when they interact with a lamp post, they will have to hold down e which i have used this free online asset for.
Fig 3.2 Lucia Dialogue Box
Fig 3.3 Sophie Dialogue Box
Fig 3.4 Thomas Dialogue Box
Fig 3.5 Mom Dialogue Box
Fig 3.6 Evelyn Dialogue Box
Fig 3.7 Henry Dialogue Box
How To Play
I also created a control and game mechanics pop-up screen guide as an easy way for players to figure out how to play the game. This will appear before the beginning of the first level. The background is tinted black to allow for clearer visibility of the white text in game.
Fig 3.8 How To Play Screen
Menu
I've also created the design of the menu screen for my game. It features a simple outline drawing of Lucia holding her glowing lantern up, the title of the game "Lightbringer", with the options start (to enter the game), options (to adjust the volume of music and sfx in game), and exit to exit out the game. The actual asset that will be exported into the game is the artwork background, as I could create The boxes and text in unity.
Fig 3.9 Lightbringer Menu Design
Power-Ups
Fig 4.0 Oil Fuel Canister
Utility Structures
For structures that have utility, I have used these free assets that I found online. There are two structures, the lamp post, and the checkpoint.
Lamp
Fig 4.1 Lamp Post
Checkpoint
Fig 4.2 Checkpoint
Environment + Props
For the environment, tiling, and props of each level, I used free assets I found online.
Level 1: The Forest
Level 2: The Village
Level 3: The Caves
Final Outcome
REFLECTION
This task was quite challenging, since I had to create a lot of designs and animations for my game, some of which took up to 8 frames like with characters for example, however, I am satisfied with the result, since the animations are smooth, and the designs match my artistic visions. It was my first time working with pixel art and animating it, and I found out that it is so much more difficult that I had previously anticipated, you really have to ensure each pixel is pixel-perfect, and the ratio isn't off in any place, so it requires a good attention to detail. There were many times where for some reason when designing in Aseprite the colour fill suddenly changed for a part of my sprites, and I had to keep replacing the colour which was frustrating. It took a lot of time to complete the animations, partially because of this, but overall I am glad I managed to fix this issue eventually and finish them. Collecting the other assets took a while too, since I had to find ones that match my game's concept/design/story, so I ended up with a variety.
Comments
Post a Comment