AC m's profile

Puzzle Brawler

Role: 2D Game Artist, Animator, UI designer
What I did: Wireframe & UI Layouts, High-Fidelity Prototyping, Character Designs, Animations
Project Type: Mobile App
Software: Figma, Adobe Photoshop, Spine
About Puzzle Brawler:

A modern twists of a
competitive puzzle game in which players fight against each other to be the champion of this land! You also have the choice to explore the land and recruit more heroes to support you in your adventure.

In this project I specifically wanted to learn and pick up spine animation program whilst trying out a few pipelines I can utilize at work.

Starting on a new project is always such an exciting endeavour for me. I started by exploring some of the existing projects that share similar visions or genre as the one I have in my mind.

After putting them on to a research board and I then did a quick photobashing to come up with a few visual prototypes and
ideas.
After picking the one that reflected the closest to the one I have in mind, I then started doing a few concept art variations and the different theme it could have.
After consulting with some friends, I picked the third concept art and tried giving the look a few tweaks based on the feedback I have received which is mostly on the gameplay aspect or the readability.
I also did some quick sketches variations for the gems to see whether there are designs that could fit the game more. Though I ended up going with the original design but this time with more emphasis on the elements. For the symbols, I tried to make them familiar whilst keeping them abstract if possible.
One aspect of the gems that took a really long time was actually deciding on the physical gem. I tried a couple variations including a different shield design but ended up sticking with a lighter colored one to keep it simple and readable as the playing area is quite dark.
After settling on the UI directions, I started touching up the character and backgrounds.
I decided not to switch it up too much and keep it simple as the characters are meant to be animated.
The first one is our protagonist!
Albert is an aggressive halberd wielding knight with not much regards to defense.
Our protagonist's friends!
I wanted to ensure that each faction has a clear design direction.

So for most of our protagonist their design were inspired more from western outfits except for Ayame who was defected from the opposing faction.
First boss enemy!
Grawl is the general of the opposing force.

His design was the only one that I tweaked as some friends told me that him having one eye make them uncomfortable.
Second factions's forces were mostly inspired from Japanese pop culture.
I wanted to make the background as if our protagonist just left the forest area and is now entering into the grasslands. Also in the far distance, you can see the towers that we are heading towards.



These are all done using spine essentials.

When animating the characters I tried putting special emphasis on the squash and stretches! Let me know what do you think about it.
Here are some of the vfx done for the project.
I ended up using a mix of sprites and bone rig in spine to do the vfx animation.
After refining all of the assets, I brought all of them into figma and exported them. 

You can view the animated screens below!
Puzzle Brawler
Published:

Puzzle Brawler

Published: