I’ve been working quietly on a match-3 game in my spare time in Unity. I’ve been following a very thorough Udemy tutorial for this and have created the UI entirely myself and implemented it in Unity. I’m going to share my process today. Note – background image was sourced online.
Firstly I decided upon a theme I wanted to go with. Inspired by Bubble Witch Saga and Outplay Entertainment’s Crafty Candy, I decided to take the popular magic/wizard theme but give it a more spooky, Disney’s ‘Haunted Mansion’ twist. To form an understanding of the theme in my mind I created a mood board, a collection of reference images to remind myself of the vibe I want for this game. The working title I ran with was ‘Ectoplasmatch’.
Next I began creating flow charts to illustrate the UX of starting the game and proceeding from the splash screen through the menu, the map, a pre-play screen and the playable levels themselves. There is alot more to be considered in a game like this, but I’ll restrain the scope of the user flow as I can only accomplish so much on my own in creating this Unity match 3 prototype.
Next up it’s time to begin creating wireframes. With my research into similar games done I could lay out all the necessary information and interactive options in a logical and hierarchical way, with the most important sections within easy thumb-reach, such as the boosts and game board and keep the less important pause in the upper right.
Now I could begin working on the UI elements. I began with sourcing some good backdrop art, as this will establish help me establish the tone and colour palette.
I found a great piece of artwork to serve as a backdrop, unfortunately I couldn’t find any information on the artist responsible for it. If I do in future, I’ll update this post to credit them.
With backdrop art chosen, I began on UI art asset creation. Building everything from bottom to top, as they are layered in a Unity scene, I began with the upper and lower panels which will contain all the buttons, text and icons.
Following a ‘haunted house’ aesthetic, I created a diamond wallpaper pattern, overlaid with a spooky blue. Dark panels contain the counters and objectives. Titles are Grobold font, with a blue stroke and darker underlay.
Star icons were created to be visible at a small size but also too look appealing and rewarding at larger sizes for rewards screens.
For navigational buttons I needed them to stand apart from the other elements, to make sure players can intuitively move through the game. I decided to use a thick white frame with some warm reflection tones to establish them, with a tactile, bubble-like quality to the coloured area, encouraging taps.
With the gameplay UI settled on and the backdrop chosen from an online source, I moved onto the board pieces. In a studio the UI artist would probably not be expected to created these but in this instance I did.
As the working title of the game was ‘Ectoplasmatch’ I knew they would be jelly/goo pieces. You can see the results below. I hope you’ve found this post helpful.