Build your own Video Game using Thunkable!
Este tutorial está disponible en español 🇲🇽— Haz click en este link!
Developing video games is one of the best projects for kids if they want to get their hands on coding. Coding video games in Thunkable is the easiest way to get started. This medium post will guide you on how to create a basic video game and at the end will have some free resources to build it yourself.
I would categorized this activity advanced for kids and teenagers or for anyone with experience using Thunkable or App Inventor.
Let’s get started!
This is the method I use to teach my class how to program apps in Thunkable:
Step 1: Draw your screens.
The first step to designing your video game is to define it and draw it on screens.
You can seek for inspiration in other video games, pinterest images or anything else. I chose this for inspiration.
Concept:
¿What is it about? ¿How do you play the game? ¿Is there points?¿How do you get the points?
Basically you need to answer all those questions to have a clear idea of the game you’re developing. In this medium post we will do a doughnut video game. In which you will get an order and you need to assembly it. There are 3 basic objects in this game:
- Doughnut Base: vanilla and chocolate
- Frosting: vanilla, chocolate and strawberry
- Decoration(Sprinkles)
Every time you complete an order correctly you gain a point but if you get it wrong you lose one. Simple right?
You have about 30 seconds to prepare 10 doughnuts. If you achieve this you win if not you lose.
Draw your screens:
It is important to draw all your screens so you can get a bigger picture of the game and what it’s going to look like. This way it’s much easier to draw all the components and build the game. While you draw your screens you can also notice if you’re missing something for your game.
You can use this handy template to build your game :)
Parte 2: Pseudocode or Flowchart
Now you have to write your pseudocode o make a flowchart. Depending on what you prefer or is more easy for you. In this medium post I will do both. Here is a handy template to get you started :)
Pseudocode:
Pseudocode is writing the code in your own words. No fancy styles or anything. This is very useful when building with Thunkable blocks since most of the times the blocks are named some what the same.
Flowchart:
A flowchart in code is a visual representation of a process or an algorithm. In my video game this would be the flowchart :)
In reality, both are very useful. I actually always recommend doing both you can get details on how certain loops work also gain a lot of insight of just writing all the code in your own words.
Step 3: Visual Design in Thunkable
For the design part of the video game I decided to make my own sprites or video game elements. This sprites are available in the resources part below.
The first step is to add all the components you need in your screens. Once you have all the components, change the design using your phone to make it easier.
Canvas:
To keep going building our video games I must explain what is the canvas. According to Thunkable’s oficial documentation a canvas is:
The canvas component is a touch-sensitive panel that enables the movement of items. — Thunkable Docs 2019
You can add sprites to a canvas to control what happens on it. You can drag, select, hide, view, and more a sprite. This feature is super cool on Thunkable because there is a new canvas tab!
In the current version of Thunkable ( November 2019) there are some minor hacks to help you become a better video game designer.
- Each sprite has a master sprite and child sprites. Divide all your elements in categories for example I chose Doughnut Base as a category and Chocolate and Vanilla as child sprites.
- Duplicate the initial sprite that comes in thunkable many times so you have sprites you can work with.
- Add your sprites, work your way from the back to the front. This way our z-order will be intact. Modify the aspect of the sprites as you add them.
- Build your video game on Thunkable’s website but check on your phone if everything looks ok.
Step 4: Blocks!
To code all your Video Game is really useful to go back to step 2 and use the pseudocode and flowcharts you have written. What I do is go line by line in my pseudocode and find the appropriate blocks for it.
These are the blocks I used for my video game I will explain a little bit on what it does in the game.
Screen 1 : Main Menu
Start Button Click→ When you click the Start Button I want to be redirected to my Game Screen.
About Thunkable & DIY This App → When I click any of the buttons I want it to open a link in Chrome or Safari in any of those sites :)
Screen 2: Game
These are my variables:
Second → With this variable I made a timer to update a text label with the time.
Score → This is the score when you’re playing the game.
Frosting, decor, base → I also added three variables to randomize them and get the different combinations for my game.
Game Opens → Every time I open the game I want to set the score and time to 0.
Start → This is a sprite, it’s my start button so every time I click it I want to hide the instructions, the start button itself, show the tick sprite and initialize my game.
Initialize Game → I set the score to 0 again to avoid problems and I enable the timers. I also call out my generate function which generates a new combination.
Level 1 Timer → This timer is a 30000ms so I know when to send the user the final score screen.
Timer Second →This timer is to change every second the label on my time measure.
How this game works is I play with the visibility of the sprites. I you touch an item you set the visibility of the item to a specific sprite. So if you need the vanilla base for doughnuts you hide the chocolate and so on.
Canvas 1 loads is basically a process to set up the initial state of the game. So I hide my doughnuts and enable the user to build their own.
Ok this block is a handful, let me explain. This is the main block that controls the score. What I do is basically a series of conditions to go to any case the game will have. What Ido is check if a sprite is visible and is selected in my variables. This is an example of a basic conditional operation I use.
At the end of all the conditionals I hide my sprites ( I clean my canvas) so the user can make another combination. And at the very end the game puts another combination.
Hide Sprites → This is my block to hide all the active sprites.
This si the new combination block, in which I first set a random item from the available options and then go though a series of conditionals to show the appropriate combination sprite.
Screen 3: Final Score
Final Score Opens → When the screen opens, the global app variable score determines if the user won or loss. If the score is equal or above 10 the user wins. The message changes to “You Win!” and shows the score the user got.
When the score is bellow 10 the user gets a message with a ‘Uh-ohh.. Try again!’ and gives the user’s score.
Play Again Click → If you click this button you will be prompted to the Game Screen again so you can play again!
We are finished!
This is the final result! If you would like to remix this project in Thunkable you can do so in the next link.
You can get a hang of all the resources in the game though this link :)
If you like this project and think it helped you give me share this post! You can also tag mi with my medium/instagram/facebook/instagram social media tag @sogalanbat :)
Who am I?
Hello! My name is Sofía I’m an engineer. My passion is to create and teach others how to create. Although I don’t have an education degree I’ve been involved in ed-tech for 4 years now in many projects. I also teach a very talented group of women in Sacred Heart School Mexico City.
Open Source License
This license requires that reuses give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes.
This work is licensed under CC BY 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by/4.0
