Games Development - Task 2 / Art Asset Development

23.10.2024 - 9.11.2023 (Week 5 - Week 7)

Chong Hui Yi / 0363195

Games Development / BDCM

Task 2 / Art Asset Development

TABLE OF CONTENT

1. Lectures

2. Instructions

3. Task 2

4. Feedback

5. Reflection

LECTURES

Click HERE to view lectures & exercises

INSTRUCTIONS

Task 2: Art Asset Development

Requirement

"Students will be given the task to produce the art asset for their games. This includes characters, environment, items, props, obstacles, power ups and HUD design."

Things to Do

(✓ is the things I've done)

- Character

Sirius Animation:

Character Design ✓
Idle ✓
Run ✓
Jump ✓
Hurt ✓
Attack ✓
Dying
Interact

3 Spirits

3 Character Design (Aeros, Lophia & Ocear) ✓
3 Idle Jump ✓
3 Give Light Crystal Animation

Enemy Animation:

Boss

Character Design ✓
Idle

Attack
Hurt
Dying

Normal Enemy
- Character Design
- Idle
- Attack
- Hurt
- Dying

- Environment

Level 1 ✓
Level 2
Level 3

- Items

Light crystal (red, green and blue)
Health Potion
Energy Star ✓
Level 1: Feather
Level 2: Light Seed
Level 3: Ancient Light Rune

- UI Design

Health Points Bar
Light Energy Bar
Collectibles Bar
Gameplay Controls:

Pause Menu
Resume
Restart
Quit

Tutorial

- Props

- Obstacles

Progression

I first made changes to the storyline of the game "Quest for Light" because I wasn't entirely satisfied with the previous version. After the changes, the story line and design direction became clearer to me, but the gameplay and objectives remain unchanged.

Storyline (Previous version):

In Quest for Light, players take on the role of Nova, a little star who has lost her shine in a dark world. Nova's mission is to rescue souls that have been captured by shadows. Each soul holds a special Light Crystal, and Nova needs to collect three colours of Light Crystals (red, green, and blue). In the end, she will combine these three crystals into white light to help bring brightness back to her dark world. Through her journey, Nova will discover that the power of light can not only brighten the darkness but also unite and heal each soul.

Storyline (Revised version):

Sirius was once the brightest star in the sky. His light helped his planet stay alive and full of life. But one day, dark forces came and started to consume parts of the planet, causing Sirius to lose his shine. As his light faded, the creatures that depended on it began to die, and the planet started to fall apart.

Sirius wants to save his world. He must find three spirits that guard powerful Light Crystals—red, green, and blue. By collecting these crystals, Sirius can restore his light and defeat the darkness.

Fig. 1.0 Game Flow Chart

Research

Once the storyline was finalized, I started looking for a moodboard. My art direction dreamy, gradient, peaceful, minimalist 2D design with a space theme (since I really enjoy stargazing, haha).

Fig. 2,0 Moodboard for Player Character

Fig. 2.1 Moodboard for Enemies

Fig. 2.2 Moodboard for Spirits

Sirius Design

I sketched some drafts to try out different types of character designs for the Sirius and the enemies. In the end, I chose the design of Sirius in the top-left corner (Fig. 3.0).

Fig. 3.0 Sirius Sketch

In Task 1, I mentioned that the protagonist is a star, but I hadn’t decided which one. I eventually chose Sirius because every time I look up at the sky, I always see this brightest star. It is part of the Canis Major constellation (Fig. 3.1), so I incorporated dog ears and the symbol of Sirius into the character design.

I wanted Sirius to feel mysterious and divine, so I designed a blue cloak with golden accents. The cloak features his symbol and is the source of his light energy for attacks. Sirius has sharp, wolf-like eyes, and a star-shaped mark on his forehead signifies his identity.

Fig. 3.1 Character (Sirius) inspired by Canis Major constellation

Background Story:

Sirius is the god of his planet, the creator of life. The creatures on his planet rely on his light to survive, and it is the most powerful star in the universe. However, as the dark forces began to invade, the planet fell into crisis. Sirius has now taken a physical form, represented by the player, to save his planet.

Abilities:

Light Attack: Shoots light beams from the symbol on his cloak to damage enemies.
Illumination: Creates a temporary light radius to reveal hidden paths or weaken dark creatures.

Fig. 3.2 Character design - Sirius

I created Sirius's idle animation by designing different frames in Adobe Illustrator and then importing them into Photoshop to make a frame animation.

Fig. 3.3 Character Idle Animation

Fig. 3.4 Character Idle Sprite Set (3 frames)

When working on the animation, I realised that the cape was really difficult to animate, especially with the blowing effect. Initially, I made it directly in Illustrator, but later I found that the cape’s movement didn’t make sense. So, I referred to some animation references (Fig. 3.5), where I used lines to create a wave-like movement, which made the animation more logical. This time, I directly drew it in Procreate, which was more convenient as I could see the previous frame. Additionally, I also referenced the stickman animation in Fig. 3.6 to create the running animation for the character’s legs.

Fig. 3.5 Cloak Animation Reference

Fig. 3.6 Running Animation Reference

I’m using Procreate to draw the golden wave lines frame by frame and then adjust the shape of the blue cloak. This makes the animation look smoother and more natural.

Fig. 3.7 Golden line waving animation create in Procreate

For the legs, I first drew a simple stick figure running animation in Procreate. I kept the leg layer on top of the character so I could clearly see the running motion. Even though the cloak will cover part of the legs later, this helps make the movement look right. Once I finished the stick figure legs, I moved the frames to Adobe Illustrator and used the Pen Tool to redraw them, adjusting the thickness and curves. This way, the animations feel more polished and realistic.

Fig. 3.8 Leg running animation create in Procreate

Fig. 3.9 Final Character Running Animation

Fig. 3.10 Character Running Sprite Set (10 frames)

For the jump animation, I referred to the movement in Fig. 3.11. I used the website https://ezgif.com/split to convert the gif into jpg frames so I could study each frame individually. Since I’m not very familiar with animation, having references is really important.

Fig. 3.11 Jumping Animation Reference

Fig. 3.12 looks strange because the character only has stationary movements and doesn’t include jumping. The actual effect should look like Fig. 3.14.

Fig. 3.12 Character Jumping Animation

Fig. 3.13 Character Jumping Sprite Set (8 frames)

Fig. 3.14 Jumping + Running Animation

Fig. 3.15 Character Hurt Animation

Fig. 3.16 Character Hurt Sprite Set (5 frames)

Fig. 3.17 Character Star Attack Animation (14 frames)

Spirit Design

In this game, each level has a spirit guardian with a light crystal. I’ve designed three spirits: Aeros, the Flame Spirit (Level 1), Lophia, the Life Spirit (Level 2), and Ocear, the Wave Spirit (Level 3). They give the player tasks to find items, and once the player gets the right item, they will receive the light crystal. I’ve made sketches of the spirits to be cute, consistent, and easy to draw. I chose oval-shaped bodies and added details that match each spirit’s nature.

Fig. 4.0 Sketch for Spirit

I created the animations for all three spirits in Adobe Illustrator. I also referred to the animation in Fig. 4.1. After repeating three similar idle jumping animations, I gradually started to understand how it works.

Fig. 4.1 Animation Reference

Aeros, the Flame Spirit (Level 1)

Aeros is a brave and passionate spirit, predominantly in red. His design is inspired by a firebird, so he has a pair of wings and a tuft of flames on his head.

Fig. 4.2 Aeros - The Flame Spirit Idle Jump Animation

Fig. 4.3 Aeros - The Flame Spirit Idle Jump Sprite Set (8 frames)

Lophia, the Life Spirit (Level 2)

Lophia is a gentle and shy life spirit, whose body is partly wrapped in lily of the valley flowers and is afraid of seeing people. She governs the earth and is related to plants, so I designed her with a leaf on her head.

Fig. 4.4 Lophia - The Life Spirit Idle Jump Animation

Fig. 4.5 Lophia - The Life Spirit Idle Jump Sprite Set (8 frames)

Ocear - The Wave Spirit (Level 3)

Ocear is a calm spirit who lives in the ocean and looks after the sea creatures. His design comes from a jellyfish, so I gave him a jellyfish-like crown on his head.

Fig. 4.6 Ocear - The Wave Spirit Idle Jump Animation

Fig. 4.7 Ocear - The Wave Spirit Idle Jump Sprite Set (8 frames)

I’m thinking of making the three spirits semi-transparent since their original designs don’t quite fit the overall art style when added to the scene. But I won’t be changing the animations for now because I’m short on time. ( TT ^ TT )

Fig. 4.8 Spirits semi-transparent

Boss Design

I’ve sketched some ideas for the final boss, and I want it to have a scary appearance.

Fig. 5.0 Enemies and Attack Sketches

In this game, the enemies come from a black hole and are dark forces that feed on souls. The boss has a ghost-like body with a gradient colour. Since its body is semi-transparent, you can see round orbs inside, which are the souls it has eaten. The boss is mostly black, with a skull face to show it is a dark and scary creature. Besides that, It wears a bright red crown to show that it is the king of the dark forces.

Abilities:

Temporarily dims the environment within a small radius, making it harder for the player to see nearby obstacles or enemies.
The boss releases souls trapped inside, firing soul shards directly at the player, dealing damage on impact.

Fig. 5.1 Boss Design

Fig. 5.2 Character Height Chart

Items

Energy Star can restores Light Energy for Sirius (used for light-based attacks or revealing hidden paths). I designed it as a glowing yellow four-pointed star. In Fig. 6.0, I added a dark background to make the glowing effect stand out more.

Fig. 6.0 Energy Star

Level Design

Level 1 - The Shadow Forest (Red Crystal)

Story: The player enters a dark forest where Aeros, the flame spirit, is trapped by shadows.
Objective: Help Aeros by finding a missing feather to free him.
Reward: Red crystal (representing passion & vitality)

Level 2 - The Withered Grove (Green Crystal)

Story: The player moves to an old grove where Lophia, the life spirit, is trapped by dark forces.
Objective: Help Lophia by planting a light seed to bring the forest back to life.
Reward: Green crystal (representing life & hope)

Level 3 - The Silent Ocean (Blue Crystal)

Story: The player goes to the ocean where Ocear, the wave spirit, has lost control of the sea.
Objective: Help Ocear by unlocking an ancient light rune hidden under the water.
Reward: Blue crystal (representing peace & healing)

The game has a dreamy, gradient, peaceful, minimalist art style. I’ve finished the background for Level 1, the Shadow Forest, using a repeating pattern I found on Freepik. I still need to finish the designs for Levels 2 and 3, but I’ll make sure they are consistent in visual design.

Fig. 7.0 Level 1 Background (designed by Freepik)

Fig. 7.1 Level 1 Concept (not include UI design)

Presentation

Canva Presentation Slide Link: https://www.canva.com/design/DAGXSczNOuA/-3dErenG_g4mDm0dONm5Bw/edit?utm_content=DAGXSczNOuA&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Fig. 8.0 Presentation Slide - Canva

YouTube Presentation Video Link: https://www.youtube.com/watch?v=Nqol3cbyPvc

Fig. 8.1 Presentation Video

FEEDBACK

WEEK 6:

The enemy is scary.
The last idea has more potential; the game can become progressively brighter.
In Unity, the game can start with a very bright scene and use Unity's lighting features to create a dark atmosphere.
In the example game, the player has a torchlight that can be used as a projectile to shoot light.
Alternatively, you can implement two levels: one in light mode and another in dark mode.

REFLECTION

I think this task is really fun, but there’s so much to complete, and I’m running out of time. During the design process, I found that I have some interest in animation. Seeing the final animation results makes all the time spent feel worthwhile, especially for Sirius’s cape animation and the three spirits. I also learned a lot more about animation and used Procreate for the first time to create animations. Even though drawing frame by frame is very time-consuming, it’s definitely more convenient than using Adobe Illustrator because you can see the previous frame.

As for character design, I found it a bit challenging, so I looked at a lot of reference images for inspiration. Sometimes, when I try to design directly in Illustrator, I feel frustrated since adjusting paths can be difficult for me. Therefore, sketching drafts or finding references is very important because it helps me have a clearer design direction.

Search This Blog

Chong Hui Yi (0363195)