Kachofugetsu
Share  

Kachofugetsu

Valerie Wang
by valeriewang628 on 1 Jun 2020 for Rookie Awards 2020

Kachofugetsu, meaning flower, bird, wind, and moon in Japanese, is a role-playing memory-match turn-based card strategy game, created in a neo ukiyo-e style. This game is my solo project where I created the art and VFX, designed the mechanics, wrote the code, and remixed the background music.

1 168 1
Round of applause for our sponsors

Kachofugetsu is a role-playing memory-match turn-based strategy game made in a neo ukiyo-e art style. The name of the game, Kachofugetsu, means 🌺flower, 🦜bird, πŸŒͺwind, and πŸŒ™moon in Japanese, which is a poetic symbolization of beautiful nature scenery in Japanese culture.

This game is my solo project where I created every tiny bit of the game -- I drew the art and VFX, designed the mechanics, wrote the code, and mixed the background music. I would also like to share how I made it, and I hope you will like it.

πŸ‘€ If you are looking for the link to my GitHub repository and a complete playable build, please scroll to the bottom of this entry. ThxπŸ₯°.

πŸ‘‡ Below is a 5-min video of the title screen.

πŸ‘‡ A brief video of the story intro. 

πŸ‘‡ An 1-minute game tutorial.

πŸ‘‡ Main Game Layout.

πŸ‘‡ A video demo of the main game phase.

πŸ“ Brief Intro to the Game:

In this game, you will play as the protagonist Ishikawa Goemon (the samurai) who challenges the computer AI enemy Fujiko (the lady in kimono). 

The goal of the game: Flip the cards, and match as many pairs as possible to damage Fujiko's hitpoints.

Win condition: Drop Fujiko's hp below zero or have higher hp than hers when all cards have been paired.

Punishment: the player who manages to match a pair can give the opponent a makeover as humiliation. The makeover can be a funny wig, or an entire head cosplay.

πŸ“ Card Types:

There are 18 cards coming in 9 pairs, with 4 special pairs, and 5 normal pairs.

Normal Pairs: each time a normal pair is matched, it deals 3 hp damage to the opponent.

Special Pairs: does something extra beyond a 3 hp damage.

                πŸŒΊFlower: deals double damage to the opponent.

                🦜Bird: allows the current player to have one more turn.

                πŸŒͺWind: shuffles all the unclipped cards.

                πŸŒ™Moon: heals the current player hp by 3 hp.

πŸ“ Card Design:

Below are the special card patterns: flower, bird, wind, and moon.

The card patterns are designed to have a relatively intricate depiction compared with normal patterns, with a gradient single-colored background, and to have a Japanese/Chinese character written in calligraphy style.

Below are the normal card patterns: πŸ™onigiri (rice balls), 🍡matcha, 🍢sake, 🍑dango (sticky rice ball skewer), and 🌰mochi (sticky rice cake stuffed with sweet paste).

These food and drinks are a good companion when enjoying beautiful nature sceneries.

The cards are designed to have single-colored backgrounds, with a round color patch in either a contrasting or a supplementary color. They have a relatively simpler design than the special cards.

πŸ“ Arena Design:

Before I started to make this game in Unity, I had a concept game board in my head that resembles Hearthstone. However, the decorative part in the concept design outweighs the characters. 

As I would like to emphasize more on the player interactions, I shrank the static graphics, added UI/HUD boxes, and allowed more space for characters.

πŸ‘‡ Please slide the process view to see the changes.

πŸ“ Humiliation Makeovers:

The makeover is the fun part of this game. Characters have to put on quirky makeups/costumes when their opponent has matched a pair. 

I chose 18 references from popular games/films/animations , and implanted them to the characters in an ukiyo-e style as a tribute.

πŸ‘‡ Below are the entire transformations of the characters.

πŸ“ Modular Cosmetics Assembly:

To add dynamics to the characters, I decided to make them blink. Thus, the characters have to be assembled in layers to be as modular as LEGO blocks.

In my way of assembly, a character is put together in 4 layers: naked face & body, hair, eyes, and wig/makeups.

πŸ‘‡ Quickly drag the slider below to see her blinking!

πŸ“ Particles:

As the surrounding of the arena is placed with static graphics, I love to add more motion to it. Thus, I created particle textures that will be spread over the screen.

To make the particles look natural, I have adjusted the parameters of the particle components, mainly including start lifetime, start size, start speed & rotation, emission: rate over time, and rotation/velocity over lifetime.

πŸ‘‡ Slowly drag the slider to see sakura petals floating in the air.

πŸ“ Player Path:

As a turn-based game, a flow chart can be presented to describe the gameplay loop of the player.

πŸ‘‡  Flow chart of the player path:

πŸ“ AI Enemy design:

πŸ”ΉEnemy's memory:

        * When the player flips 2 cards, the enemy memorizes them.

        * When the enemy flips 2 cards by itself, it memorizes them.

        * But the enemy's memory can only contain 2 cards. Previous ones in memory will be overwritten by new ones.

        * So, when the enemy's turn starts, it will always have 2 cards in its mind, as the player always starts before the enemy.

πŸ”ΉEnemy's action:

        * Enemy will first flip a random card.

        * If it matches one of the memorized cards in its mind, and the matched one is flippable, then it will flip that particular card to make a match.

       * If the first flipped one fails to make a match, it will flip another random card to complete this turn.

πŸ‘‡ Flow chart of enemy actions:

πŸ“ Programming Construction:

I love Unity for its component-based fashion. Thus, before I started to program, I have planned out several empty game objects that make up the overall structure. These important components include:

        * Game Manager: a third-person general manager that controls game states, and give commands to delegates. 

        * Card Server: deals with affairs related to cards. It serves cards at the start, shuffles cards when the wind is paired, collects the status of all the cards, and sends card data to other managers.

        * Player Agent: receives player input, updates player stats, and distributes player data to other managers.

        * Enemy Agent: receives enemy input, updates enemy stats, and distributes enemy data to other managers.

        * UI Manager: receives player and enemy state data, changes the UI accordingly, updates Hotpoint display, VFX, and humiliation looks.

        * Cosmetics Manager: is a delegate of the UI Manager. It receives commands from the UI Manager, and implements the humiliation looks by changing the sprites accordingly.

        * Dialog Manager: is a delegate of the UI Manager. It receives commands from the UI Manager, and displays the dialog when necessary.

Other than the empty objects above, I also have sprite entities with scripts attached, to fulfill the visuals.

        *Card: each card has a uniform card script which stores whether this particular card can be flipped, controls the glow emission when the card is hovered on, implements the flip animation coroutine, and moves the card when shuffling happens.

        * Slash: is a game object duo used to create a slash visual effect on the hitpoint box when the player is hurt. When a slash effect happens, the slash object along with the trail effect will move to a certain point to create that slash visual. This is implemented by coroutines.

        * Swirl: is a sprite object that rotates and shrinks to create a shuffling swirl effect when a wind pair is matched. Also implemented by coroutines.

        * There are also other miscellaneous VFX objs.

πŸ‘‡ Below is the relationship between objects:

πŸ“Flow Implementation:

Both the player and the enemy have 6 different states:

#0: Awaken, #1: Zero Card Selected, #2: One Card Selected, #3 Two Cards Selected, #4 Waiting during Shuffling, and #5: Idle.

As the player agent script and the enemy agent script is rather similar, I would like to attach the main code for the enemy's state machine here, as the enemy's part is a bit more sophisticated than the player's.

(I think the code snippet insertion plugin isn't working quite right, so I attached the gist link here.)

πŸ‘‡  Code snippet of how enemy states are looped:

https://gist.github.com/ValerieWang628/891d434f966c01866f8eb2a786ad1a83

πŸ‘‡ Code snippet of how selected cards are checked:

https://gist.github.com/ValerieWang628/b3d74f51713291919fa56469a74326b8

πŸ“ Coding VFX:

πŸ‘‡ Below is how the slash effect is made.

πŸ‘‡ How the shuffling effect is made.

πŸ‘‡ How the glow-on-hover effect is made.

πŸ‘€ To see my full scripts, please refer to my GitHub repository:

πŸ‘‰https://github.com/ValerieWang628/Kachofugetsu

🎈 To download the complete playable version, please go this link:

πŸ‘‰https://drive.google.com/file/d/1E2iB67DeOngiHFDHlbdvA6PQixwxQeiC/view?usp=sharing

Unfortunately, this build is an exe application that works on Windows.  If you are interested, please reach out to me at [email protected]πŸ’ƒπŸ»

And I hope you enjoy my entry! Yay!!!


Comments (1)