A competition to create a game within the span of 5 days for the H2 x NYP Game Jam 2023. In a five man team affectionately dubbed '7Chads', comprising of myself, and team members Li Lian, Timothy, Carrie, and Himeshan, we began and completed Mystic Munchies from its concept art and development, to the creation of its final game published on itch.io!
​
In this project, I primarily contributed to the design of the main character, as well as handling the different UIUX designs and game screens!
​
Programs used (Art side):
- Clip Studio Paint (concept art, asset creation)
- Photoshop (concept art, asset creation)
- Spine 2D (rigging, animation)
​
Other programs:
- Unity 2D
In Mystic Munchies, you play as Toast, the cute wizard rabbit who opens a food truck, and uses his spell-casting prowess to serve up familiar dishes to customers in a fun and efficient frenzy!
​
Click the button below if you would like to try the game for yourself, or scroll further to learn more about the work we did for the project!
The Team
The 5-man team comprised of two programmers, Li Lian and Timothy, and three artists: myself, Himeshan, and Carrie. This page will largely focus on my experience in the art side of development, which involved conceptualization and creation of 2D assets and materials, with additional contribution alongside the other two artists.
​
These cards can also be found in-game!
Ideation - The Theme
The game jam's theme was simple: A hypercasual mobile game, to be developed in 5 days. ​Inspired by Google Doodle's wizard cat arcade game, we thought about creating a fun game centered on the use of a unique mechanic - drawing shapes on the phone screen as part of the gameplay. The idea, while simple, would make the game more unique and stand out in the field of hypercasual games. ​
​
When thinking of a setting that could accomodate this "drawing" mechanic, our minds went to the idea of cooking (with the act of drawing seeming synonymous with the motion of cooking), and so a food-themed story and setting was quickly agreed upon.
​
Just to spice things up, and make the game even more intriguing to a casual audience, we decided to put a twist on it with the idea of cooking with magic, and so Mystic Munchies' premise was born!
Research & Concept Art
Google Doodle's Wizard Cat, which inspired the main drawing mechanic of Mystic Munchies
With only 5 days of development, we had to work quickly, and so ideas saw a speedrun from conceptualization to asset creation. This largely meant that there wasn't much time allocated to indepth testing and research, and for the most part simple tests were done for the approval of the team, after which we quickly turned to finalized assets. References were shared to maintain consistency on the artstyle, and because our workflow had to be fast, we went with a look we knew we could all stick to.
That said, there was still some work done for concept art, even if ideas such as "What if our main character was a cute rabbit wizard?" stuck the landing almost immediately after one sketch.
Toast (left) by me, Food Truck sketches (right) by Carrie!
The idea of a food truck seemed to come naturally as the result of a combination of ideas and specifications: a hyper-casual mobile game led to us thinking of a portrait orientation (being natural to hold and play with one hand), and the limitations on that aspect ratio enabled a setting that could comfortably make use of the "compressed" space. While "food truck" mostly served the design of what would be the gameplay's main UI, it also worked really well for a little premise about a wizard rabbit driving around the country to serve his dishes. Ideas and limitations seemed to come together really well for a creative result!
A quick mockup with references to other games for the layout and artstyle. The game screens will be revisited again when it comes to UIUX design.
UIUX Design - Mockups
Majority of my contribution to Mystic Munchies were in the design and creation of UIUX elements!
​
Working with the programmers, I used Adobe XD to quickly put together animations and transitions for different areas of gameplay; such as dialouge pop-ups, display of results, and "fever time" pop-ups for their reference.
​
As they worked on prototyping the animations and layout, I went on to develop the proper assets for each screen, separating buttons and pieces as per the specifications. The prototype pieces in the game build were then able to be replaced with the final UIUX elements by me, as well as other 2D assets for the characters and food items by the other artists.
Dialouge
The dialouge primarily served tutorialization and a small quip to begin each stage; these sketches were not pretty (having scrawled them in ms paint), but the idea came through, thankfully.
​
Eventually I did do a proper mockup in XD to better represent the different ideas, and the simple popup with a box and Toast over it was chosen (left GIF).
Gameplay
More quick sketches for the programmers to reference. These ones showed how the main gameplay looks like: the customer in the window with a bubble for their food, and the symbols which are displayed on the tray and light up when drawn correctly (1st image). Additional elements such as timer, combo, settings, and coin are also accounted for.
The food is then served (2nd screen), and the results screen in the form of a "receipt" (to keep in line with the FnB theme) on the 3rd image.
​
​
Every arcadey, combo game tends to have a "fever time" of some sort, and the question was how to show it.
​
Having already accounted for the fever bar at the bottom of the screen, I threw together more quick prototypes in XD to show two simple possibilities for a fever time animation. With time constraints in mind, I tried to be resourceful and reuse assets - and so Toast's sprite makes another appearance, as he also did in the results screen.
​
Having become quite familiar from previous projects with Adobe XD (such as from here!), I've become quite appreciative of its ability to make quick prototypes to present an idea during games development, especially as an artist communicating with other people.
​
In the end, the 2nd option (right) was chosen for being simpler and easy to work with.
UIUX Design - Creation
With all the mockups and references sent to the programmers, I focused next on actually making the final version of all the required UIUX assets. This involved dissecting all the different layers of the gameplay screen, making individual buttons, and preparing templates and scalable elements.
​
When required per the programmer's request, some assets needed either tweaking or an alternate version in order to function as intended. This was either so it could be edited in-engine or for other reasons, such as scaling to fit different phone ratios.
Breakdown of the elements in the main gameplay screen, separated to be assembled in engine. Food icons done by Carrie!
Being a huge fan of digetic UI, I thought it would be cute to present all these gameplay elements in a way that fit the setting- and so the importance of having that food truck idea comes back to frame the gameplay. While the mockup served to show practicality, I took some creative liberty in translating that into an appealing UI design, with baskets for the food items and a wok as the main drawing area. Other elements like a bell for settings, the signboard for the score, and the clock as a timer comes together to complete the image while having their own practical purposes in a flavorful way (no pun intended!)
​
With Carrie also finishing up the food icons at the same time, I was able to design the layout with them included.
To complete the gameplay screens, I did some simple backgrounds for each of the three levels.
​
With the game set in a fantasy Singapore, iconic locations were reinterpreted with a whimsical twist, and a simpler artstyle was used such as to not distract from the actual gameplay elements.
Settings
Some simple buttons and UI elements for the pause/settings screen. I opted to handwrite the text to fit the cutesy style.
Home Screen
Designing the home screen primarily served to open the game, but was essentially the key visual to the game as well. My approach to this was to design it in a way that looks like a seamless illustration, with UI elements incoporated naturally into different areas of the design.
​
Refering back to the designs done for the gameplay screens, I opted to make use of the setting as a food truck for this, having all the right places to hide important information: the title as the stall's name, buttons as the signboards, stickers leading to credits and the voting site. Of course, the play button large and bolded on the tray.
Additional UI and Assets
Some additional assets that were created, for dialouge or other uses.
​
While we did our best to plan the project from the start, the rapid workflow meant quite a handful of elements were made as-needed, though we tried to be efficient and reuse assets as much as possible.
Final Game Screens
A spread of the different screens used in the game.
Final Results and Thoughts
With the final game completed, we headed to the final presentation to pitch Mystic Munchies to the judges, alongside a showcase with other contestants.
​
Regardless of the result, I was definitely proud of all the work the team had done, and for such a short working period I felt that we had created something of good quality and ideas come together.
​
Our efforts were fruitful, getting 3rd place in the Game Jam competition, and I'm incredibly glad to have been able to work with this team.
3rd place group picture, image courtesy of @nypsdm on instagram
It was hard to imagine exactly what we could do in 5 days - most of us had never worked together before, and while we were determined to do as well as we could, the fierce competition made getting even 3rd place seem unlikely. Managing that was definitely a pleasant surprise!
​
Being able to focus on actually putting together a game, as opposed to just visual projects, was also really enriching, and I got to focus on an area of art production that I hadn't had much experience with before (UIUX design and creation for games). Seeing the final product being playable by other people was a moment of sincere pride, and I'm grateful to the other members who put their all into it as well!
​
Even if it was quite a short sprint, I'm glad to have achieved all this and turn Toast and his little food truck into a reality. Perhaps next time the team might come together to add even more levels to the game!
​
​
Other Members
Mystic Munchies wouldn't have been possible with the rest of the Chads! Below are the links to their profiles and/or websites (click on the image!), if interested in the work that they're doing as well. If one isn't here yet, I'll update the website again when they do eventually get back to me with the right links. Everyone is incredibly talented and contributed much more work to Mystic Munchies that isn't shown here!
Ho Li Lian (Programmer)
Timothy Luk (Programmer)
S Himeshan (Artist)
Soh Wai Mun Carrie (Artist)