Behind the Scene of Math Fuel
Overview
Here is the behind the scenes of making Math Fuel. This idea was pitched by my father who wanted me to try out something new and fun for the kids to play. He gave me ideas such as educational-type games where it's not only good for the kids to be educated on school subjects, but also fun to play as well. It was a very interesting pitch that I decided to take on the challenge. I remember as a child that I was struggling with doing quick math. I would have boring methods to memorizing or developing fast math-skills. These would make me dislike math. By using my struggles of developing fast math-skills since there are people who also going through the same as my base, I decided to create a mobile game where anyone can either develop their math skills or improve the math skills in a fun, entertaining way. So here is my run-down...or sneak peak/"behind-the-scenes" of my journey into the educational game and my first ever game officially on the Google Play store (available for free here).
Table of Contents
Concept Design
Like all my games I made, the concept designs for the game are all hand draw. Sketched out with a pencil and ruler to use for measurements and dimensions. For this game, the designs are for inanimate/non-humanoid designs. First, I did the base for the objects that will be used for the sprites. Then, I add in the details of the base to form whatever object I want to design. Finally, I finish it off with extra details that come in mind. Below is an example of a concept design of a car, the game object the player will take control of this game.
After being satisfied with my design, it's off to create the sprites. For this project, I create the sprites using an online sprite pixel editor, Piskel. I really enjoy the features of this sprite editor as you can adjust to fit with the pixel size you want when importing it to the Unity Editor. You can also export out as a sprite sheet. Here is an example of the sprite made from the car concept design.
.png)
The Finished Product
Car
Gas Pump
Prototype
Creating a prototype is one of the best method when it comes to creating any sort of product. It lets me see how the main components would function and properly test out the game before adding all the juicy stuff in as the final product. Using a guide on creating a math-based educational game, I have a base that I can work on making my prototype as I followed the guide to creating them. Once I have design the base for the game, I can work some stuff around for my prototype. While the guide is creating a space-like math game, I'm designing my game to be sort of a platformer-type where player will control the "car" (a rectangle/square for the prototype) and the "car" will come into contact with the "gas pump" (an oval/ellipse shape for the prototype). This is the part where the player will interact with the answers to determine if it's the correct answer or not. The UI will be a basic heading with the math equations on top. With the scripts to show the numbers and equation when playing, it will show up in the UI as text form. As for the controller, some mobile games will have a virtual joystick to move around the game character or object. For this game, I created button controller. A simple left and right button in the lower left hand side for the player to move their "car" and a jump button in the lower right hand side for the player to let the "car" jump.
​
Of course, there should be a menu where the player can choose the difficulty mode of their desire and the type of problem they want to play with. Each difficulty corresponds to the given type of math problem(Add, Subtract, and Multiplication). The harder the gameplay is, the harder the equation get. Below is a video example of the prototype game.
Math Fuel Prototype
Making Math Fuel
With a completed prototype, it's finally time to get my hands "dirty" by adding the sprites made from the concept design(stated earlier in Concept Design). More importantly, I would make sure to check on my checklist of task I have already or recently finished. I imported the sprites I have saved in the project folder into the Unity Editor. Once imported, I set each of the sprites to its proper settings. This including splicing the sprite sheets into single frames of sprites. All the sprites are properly set and I can start doing the animations for the sprites that needs animations. Next, I added the proper scripts to each of the game object in each scene of the game. The main menu scene will have scripts pertaining to main menu controllers or opening menu using interactive buttons. In the gameplay scene, this is where the player can play the game(i.e. Player can move the car, jump to another platform, interact with the gas pump if the gas pump contains the correct answer, etc.). For each of the different math type, the background are different in terms of time of day(i.e. if the user choose Addition, the background will be daytime while Subtraction is sunset).
​
I would also test the game by playing it in the editor. Since this is mobile game, I have set up my Samsung S10+ phone to be a simulation. So when I press the play button on the editor, the game will be simulated into my mobile phone acting as if I am actually playing it on my actual mobile phone. I would be playing a couple of test rounds before deciding whether I need some fixing on a bug/error while playing or satisfied with the game. However, I realized that I may be satisfied with how the game come out, yet how will others would think about the game. My friends, friend's of friend, family members, and etc. How will they think of my game. After all, they will be the consumers for my game so I would like to have them try out a demo of my game.
​
Here, I would "build" the game and install the apk file into my phone. I shared my game to my family members and they would give me suggestions or ideas on how I can improve the gameplay for the users. With those ideas in mind, I go back to the Unity Editor to add those ideas in. Repeat this process until they are satisfied with the game as well.
Gameplay Screenshot of Math Fuel
Addition
Subtraction
Uploading into App Stores
Finally, this is where my nervous, anxious inner-self is confused screaming lol. With the game looking clean and playable, it is now ready to be put in with the big boys club, the App Stores. Unfortunately, uploading to the app store isn't that simple. It isn't like you make a game, go to Google Play or App Store, and upload it in an instant like other game publishing page. Nope. In order to upload it to , I have to register an developer account and pay for their registration fee ($25 for Google & $99/yr for Apple). Using a tutorial on "How to upload Unity games to App Stores", I followed the video and set up all the necessary settings and files uploaded for the app to be ready for review. Once I have doubled check that everything is all set (some settings cannot be done after sent for review), I submit my game for review. Process depends on each store's policies. Once I received my email saying Google or Apple has approved my game to put on their app stores, I pressed that sweet published button and as an excited little kid developer I am; seeing the app is now officially on their app stores.
Officially on the App Store
Google Play
Apple App Store
Conclusion
Overall, this project has been a fun, challenge that I'm happy to see if come to fruition. Never would I find making educational games to be fun, yet challenging to develop. While the guide has helped me a lot to create a template based for my game project, there were parts I skipped because those features were not relevant to my game's features. The guide has obstacles where players would have to dodge them. Although it would bring a challenge to the player, but I think it would create a really difficult game making players not want to try to play it anymore. Also, I wanted to create the game where player can just focus on trying to solve the equation while not have to worry about dodging obstacles. Well, unless feedbacks from people wanting them would say otherwise...
​
I would say the most challenging of them all was the answer choices. The first problem I had was getting the correct answer to be shown in the gas pump. It was showing as "0". My first thought is to see if the correct answer variable was set correctly. I checked and saw that the numbers have given the correct answer, but the variable's value is still "0". Second attempt, I set the correct answer to a number, like 5. After playing, I saw that the correct answer is 5 because I set the variable to 5. I see that the number does display, but the correct answer isn't the correct answer. Going back to the script, I realized that the correct answer was set to "0" was because the GameManager object was in the Gameplay scene. Therefore, the UI for the correct answer would set to "0" at the start instead of the correct answer that was solved by the GameManager. I moved the GameManager object to the Main Menu scene. This is the solution to this problem once I test played at the main menu and the correct answer is displayed correctly when changed to the Gameplay scene.
​
The second issue and this was the worst of them all is duplicate correct answers. When playing, each answer choice (except the correct answer) are randomized from a range of 0 to the max number based on difficulty level (10 for easy, 20 for medium, 30 for hard). I create a condition where if a random number matches the correct answer, then it should choose another random number that doesn't. By doing this, it will remove duplicate numbers that matches with the correct answer being display. When playing, it seems that it would still show duplicates on certain rounds or test plays. I would try different solutions and looking up on forums to remove duplicates. Yet, the solutions still shows the error. It was frustrating that I can't fix this problem. The last resort I went to was my school's game dev discord server. I shared my problem on have duplicate correct answers shown on display when playing on certain rounds or test play. One of my alumni buddy helped explain to me and wrote a solution for me to try out. First, I create an array with all the possible answers (excluding the correct answer) with the length based on the difficulty chosen. It would shuffle the possible answers up and the correct answer will replaced one of the answers in the array by the random chosen index. Finally, the answers will be add to the answerUI array to be displayed in the game. This process repeats for each new problems after the player chosen the correct answer or play again after win or lose.
​
I share the game to a couple of people, including friends and family. My family have done the same to their group of friends and family members. Their kids played my game and enjoyed it a lot. That feedback gave me relief and joy knowing that I have finally accomplished my challenge of creating a fun math game. Although this game doesn't have division as an option, there are room to add new features and improve for better, fun gameplay. Even though the game is complete, I will continue to do work on this project whether it's adding new features from user feedbacks or bugs that wasn't a major problem yet can still give user's frustration.
​
As I end this page, I will leave the source code open and the design workspace to look at in more details.
