I Create my own Match 3 prototype in Unity

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’.

Screen Shot 2017-12-08 at 12.56.04 PM.png
Fig 1. Creating a mood board of references for the feel I want to achieve.

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.

Match 3 research.png
Fig 2. Match 3 research examples, from King and Outplay Entertainment.

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.

Match 3 wireframes 1
Fig 3. Wireframe for gameplay screen.

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.

52ff91a0c20e5a8c445d3cf78c6d84f3
Fig 4. Backdrop art by an unknown artist.

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.

Screen Shot 2018-04-15 at 01.28.41.png
Fig 5. Header.

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.

Screen Shot 2018-04-15 at 10.37.18.png
Fig 6. Star Icon and Exit Button.

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.

Screen Shot 2017-12-01 at 3.54.29 PM.png
Fig 3. My final match 3 game prototype, playing in Unity.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

A WordPress.com Website.

Up ↑

%d bloggers like this: