top of page
poster.png

VIVID: VALOR is a 2.5D top-down rogue-like action game where the core mechanic is transform between each elements to handle different situations.

About This Project

Team Size: 4 members.

My Position: Artist (character), Animator, Technical Artist, System Programer.

VIVID: VALOR is my final project I completed with my team in four months. For this project, I handled character design, environment design ,art direction, UIpolishing feedback, and also some coding.

My team was one of four teams selected by my teacher to practice pitching games to guests from the game industry at the Chiang Mai Global Game Jam 2025 event hosted at my college.

poster.png

playtesting poster

Used Tools

Creating Assets

- Photoshop/ Clip Studio

- Spine

Polishing Feedback

- FEEL (Unity asset)

Version Control

- GitLab

- Fork

Work Planning & Task Managing

- Figma

- Trello

Game Engine

- Unity

Concept Art, Sketch

Since we have just four months to develop this game, I decided to use a less detailed and strong shape art style because it's faster to do assets in a short time.

This game is set in the Elemental World, where our main character can transform to each elemental. I designed the character to have a different shape language for each elemental. Such as I used a sharp shape for the Fire and Thunder with an offensive role, and a round-curve shape for the Water and Nature with a defensive role.

charDesign_02.png
charDesign.png
charDesign_03.png
treesDesign.png

first concept art using shape language

uiSketch.png
Screenshot 2025-04-01 095942.png
image123.png

first UI sketch

Character Assets

I create assets with separate parts to animate using Spine. I planned to animate with mix frame-by-frame on hair and bone-base on other body parts.

charDesign_02.png
enemy_slime.png
char_player.png

player's atlast texture

Screenshot 2025-04-01 030607.png
Screenshot 2025-04-01 030517.png

layer naming

Animation (Spine & Unity)

Use the Skins in Spine to swap player's elemental in Unity.

spine animation with diffence skin

For the attack animation, I used Unity Timeline to animate the sword and manage the animation from script.

attack animation using Unity timeline

Use mask on canvas to make scene transition

scene transition animation

Scene Manager

I created a script that generates a level icon, allowing me to add or remove scenes directly from the inspector. This feature makes it flexible and easy to manage the level icon in my scenes.

Screenshot 2025-04-03 081606.png
Screenshot 2025-04-03 081623.png
Screenshot 2025-04-03 081658.png
flowChart.png

scene manager flowchart

Card data (Scriptable Object)

I'm creating a card prefab that automatically generates the card data by using scripts to pull the data from scriptable objects. This makes it easy to manage and easy to change the card data without going back to modify the card sprite.

Untitled2.png

card data script flow chart

UI

I'm creating a user interface to display important information that players need while playing the game, as requested by the team designer.

It also changes the skill icon to match the player's elemental.

UI change relate with elemental

VFX

I had already created VFX using Flipbook and Spine before, so this time I chose to use the VFX graph to try something new.

here's some of VFX graph I've made

Polishing Feedback

As my game is almost done, I feel my game is not juicy enough. So I'm adding more feedback to make the player know more clearer understanding of what is happening in the game and make the player feel more satisfied when they eliminating the enemies.

Ultimate Skill Gauge

This is the ultimate skill gauge that increases as the player attacks the enemy. Once the gauge is full, the player can use this skill by swapping elements. I have added a blast particle effect and a color gradient on the screen to indicate when the ultimate gauge is full, signaling to the player that the skill is ready to cast.

Screenshot 2025-04-03 072051.png
Screenshot 2025-04-03 071938.png

the ultimate gauge

HP (UI)

For the player's HP , I added the heartbeat animation to the HP that will beat faster and dim the screen down when the HP is low. 

player low health feedback

Hit-Stop

I've created a hit-stop function to make player feel more powerful when hitting enemies.

hit-stop on using skill is longer than normal attack

Task Managment
Screenshot 2025-04-13 084307.png
Conclusion

It's a very good opportunity to do this project. I felt a bit pressured at first when my game was selected to pitch to the guests from the game industry (although it's just a practice). But it turned out very well. And I got a lot of suggestions about my strong and weak sides.

For the game development side, this is the most multitasking project I've ever done. In this game. I want to focus on polishing feedback because in all the previous projects, I felt like I was just creating assets, making it playable and then running out of time and had no time to polish the game feedback. So this time, I scaled down my work on assets and tried to do the game feedback

char_red.gif
bottom of page