Code Your Video Game

Code Your Video Game

Yes, you can do it! Even if you have no programming skills yet! Last summer I showed how to code a Scratch game to my little Yourinaut. If a seven years old boy can do it, so can you. He liked it so much that he named it his favorite activity from the summer vacations (ahhh, mom is proud).

What is Scratch?

Scratch is a programming language that allows you to create your own interactive stories, games and/or animations. It’s a project from the Lifelong Kindergarten at MIT Media Lab and it is freely available on the web at www.scratch.mit.edu. Create your free account and sign-in using the top right menu. Once you are connected, use the top right menu to select “My Stuff”. Then you only need to click the “+ New Project” button to start having fun in Scratch.

Create the Game

Scratch interface. Scratch interface.You can start by entering a title for you project in the field located in the top left part of the screen (I entered “Tryonaut Code”). Right under that, you have the game window. The green flag starts the game. A little below is where you have the icons for the stage and the sprites. On the right, there are 3 tabs. The “Scripts” tab has the library of code blocks that you can put in the script space on the right to create the game code. There are organized in categories that are easily recognizable by their colors. The 2 other tabs will allow you to change the look of the selected stage or sprite and to assign sounds to it.

Stage

Select the stage (white rectangle) under the game window. Then you need to go to the “Backdrops” tab to choose the picture that will be display as the game background (in my case it’s “Space”). You can select a picture from the library (small picture), draw a new image yourself (brush) or upload one to the site (folder with arrow). Do not forget to delete the default picture (white rectangle) by clicking the small “X” at the top right corner of the white rectangle icon (“backdrop1”). Your picture should appear in the game window. If you move the mouse in the game window, you will see the x and y coordinates, displayed under the window, change depending on the mouse pointer location. The x=0, y=0 value is located in the middle of that space. The x value varies from -240 on the left to 240 on the right. The y value varies from -180 at the bottom of the image to 180 at the top. Each point in the game window has a unique combination of x and y values that allows you to position objects precisely in your game. You can choose a soundtrack in the Scratch library (speaker), record one using your microphone (mike) or upload one from your computer (folder with arrow). This site is very good for finding free music for your games: https://www.dl-sounds.com/royalty-free/. I chose the “Melatonine” song and downloaded it to my computer and then uploaded it to Scratch.

Background code.
Background code.

You must now return to the “Script” tab to add the code that will play the game music loop. The code blocks are organized into categories associated with colors. Select blocks in the block library by following the color code to reproduce the code from the image above. The block “when green flag is clicked” indicates that the instructions below it will be executed at the start of the game. The loop “forever” indicates that the code inside it will be repeated in a loop until the game stops. It’s much more practical than copying the “play sound …” block several times! It also avoids having to guess how long the game will last to play the music long enough. Finally, the code that begins with “playing sound…” plays the soundtrack you have chosen. Do not forget to select the right file on the block. That’s it, you built your first script! If you click on the green flag above the game window, you will hear the selected music.

Main Sprite

The sprites are the objects that you can animate with your code. Start by selecting the cat image under the game window. Choose the “Costumes” tab next to “Script” like you did for the stage. Here you can choose another image from the library to represent your main character (little guy), draw a new image yourself (brush) or upload one to the site (folder with arrow). If you choose another sprite than the cat, do not forget to delete the cat costume by clicking the little “X” at the corner of the cat icon. I chose the Tryonaut drawing as the character, I uploaded it from my computer. Then you can choose a sound that will be played when the game ends by selecting the “Sounds” tab, the same way you did for the background music. In my example, I chose “chomp”.

Character code.
Character code.

Back to the “Scripts” tab, you will need to select blocks to create the code of this sprite. The “when green flag clicked” indicates that the instructions below will be executed at the start of the game. The purple blocks that follow hide the sprite, readjust its size to a reasonable fraction of the original image (the percentage depends on the costume you have chosen, try different values ​​to see what works) and show it. You will now have to create your first variable. Choose the “Data” category in the block library. Click on the “Make a Variable” button. In the window that appears, enter the variable name (“Energy” for our game). Make sure that “For all sprites” is selected and click “OK”. This variable now appears in your block list. Now you can insert the orange code in the main sprite’s script. This variable will let you know how much energy your character has. The other elements of the game will raise or lower its value. That is why, at the end of the infinite loop, we will check if the energy has fallen to 0 with a block “if … then”. When the energy is smaller than 1, the code contained in the “if” block will be activated to complete the game. If the energy is greater than 0, the code will not be executed. When the energy is emptied, you can change the appearance of the character with an effect (explore choices of effects and values) and play the sound of your choice before ending the game. Variables are very important in programming to keep values. You can think of it as a small box where you put a number that you can read again or change later. The long piece of code with the blue blocks is used to control the movement of your character. Each time, we check if a key is pressed. If this is the case, for the side arrows, we will change its orientation by a few degrees. If it is the up arrow, it will move forward and for the down arrow, it will move back.

Enemy Sprite

The enemy sprite will wander around the image and steal energy from our character. Under the game window, you must add a new sprite from an image of the library (little guy), by drawing a new image yourself (brush) or by uploading one to the site (folder with arrow). In the same way you did for your character, you can choose a sound that will be played when the enemy collides with your character. I took the sound “owl” and the costume “octopus” in my sample game.

Enemy code.
Enemy code.

The enemy script has two parts. As we want to have several enemies in the screen, we will create clones of this sprite. Programmers do not like to rewrite the same thing many times, so we’ll have a script that creates clones and a script that describes what the enemy sprite does once created. This behavior will be the same for all the clones. The clone script begins with the “when I start as a clone” block. We will first position the sprite and give it a direction, then we make it visible. The position and direction are chosen at random so that each clone starts at a different place. A small loop chooses another position as long as the one generated is too close to the character. Otherwise, it would be too hard to avoid a monster that appears directly on the character. It is also given a random movement orientation. Then, an infinite loop will move the sprite forward continuously, until it bounces on a wall or hits the main character. In this case, we reduce the “Energy” variable by 1 and we play the collision noise before deleting this clone.

Bonus Sprite

The bonus sprite the object that your character must catch to regain energy. This sprite will work in a manner similar to the enemy sprite. You add a new sprite under the game window. Then you have to choose a sound that will be played when the character catches the bonus. I chose a star in the library and I colored it with orange. For the sound, I left “pop” which is the default sound for a new sprite.

Bonus code.
Bonus code.

The code of the bonus sprite has two parts like we had for the enemy sprite. The first one adjusts the display of the star and creates a single clone. The second code, the clone’s code, positions the bonus sprite at a different location than the character’s, then enters an infinite loop that continuously checks if the character touches the star. If this is the case, a sound is played, the energy of the character increases by one, the star is hidden and after a few seconds a new bonus sprite is created and this one ends.

Challenge for YOU

Create your game by following the instructions above. For a little variation, you could also think of adding other enemies that move differently or super stars that give 5 energy instead of 1. You can share the link to your game in the comments on this page. My game is here: https://scratch.mit.edu/projects/201096487/

Resources

I found this beginners’ book for learning Scratch along with important progamming concepts. Unlike many other books, it does not just make you copy Scratch code. The author takes the time to explain the important concepts in a very accessible way. You get know what you do and WHY you do it. This is very important if you want to acquire the skills required to create your own projects in the future. Afterwards, a book which proposes games projects to implement will be easier to understand.

 

error

Leave a Reply

1 thought on “Code Your Video Game”