Scratch Multimodal Games

Ben Sutherland on Flickr

Take your Scratch games to the next level by adding multiple modes with multiple sprites.

In the past couple of issues, we’ve done some basic and not-so-basic Scratch programming leading up to designing a small game.

Now we’re going to try making a bit bigger of a game; this one is going to be what I’m going to call multimodal. It’ll shift between two different modes of play: an old fashioned side scroller and an arcade-style shooter game.

The first skill we need is to change which sprite the character uses when the backdrop changes! I have a small example here at https://scratch.mit.edu/projects/170371110 that shows my method for switching which sprite is the “active” one. We have just a very simple program where you click the initial text and then move to a scene with a little beetle sprite.

You can move the beetle all the way to the right, and then the scene changes to a car that you can move all the way to the left to go back to the scene with the beetle. These aren’t just different costumes for the same sprite, we’re actively changing which sprite is getting input.

In code, we do this by giving each sprite a variable that controls whether it is the active sprite that should be receiving user input. We need to do this because hiding a sprite doesn’t mean it stops receiving input or moving around the screen; it just isn’t visible.

Now we’ll review how to do simple platforming, and we’ll include a little twist: a health meter made up of three hearts. If you get touched by enemies three times you die and the level starts over!

So to make a platforming level what you’re going to do is:

  • choose a sprite for the player to control
  • give the sprite variables for:
    • health
    • x-velocity, or the rate at which the x-coordinate is changing
    • y-velocity, or the rate at which the y-coordinate is changing
  • write code to handle the controls
    • you should be able to move left and right as well as jump
  • write a main loop that runs when the level starts
  • design the level
    • for platforms you can either draw platforms as a consistent color in the backdrop or you can make sprites that correspond to platforms and then clone or duplicate them to fill the level

Here’s a silly little example of what it might look like by quickly painting the background:

Your main loop for your sprite is going to have to do a few things:

  • move your sprite based on its velocity, so that it smoothly accelerates and moves
  • have gravity reduce the y-velocity if the sprite isn’t on the “ground”.
  • handle collisions with enemies
  • stop the game when the player’s HP hits zero

A very simple loop might look something like:

Now, if you were wondering why I made the platforms out of two colors, it’s so that we can avoid getting stuck if we jump against the bottom of the platform. Otherwise this might happen because touching green counts as “the ground”.

Your healthbar is a sprite with three costumes that changes every time it receives a message.

The rest of this example can be seen at https://scratch.mit.edu/projects/170440272/.

Next is our second gameplay mode: an arcade shooter. Now this isn’t like a first person shooter where you’re moving around, it’s more a test of reflexes where you need to shoot enemies as they fly across the screen shooting at you.

The two big concepts here are depth and clones.

This example can be found at https://scratch.mit.edu/projects/169474187/

Ghosts will fly across the screen at different “distances” away from the player, shooting at you randomly. You have to stop their projectiles by shooting them before they hit you. You aim by moving the mouse and fire by clicking.

So the idea of depth is that every sprite except for the target reticle has a “depth” variable that we call “z” for “z-axis”, which is typically the way depth is described in coordinates. We have a z of 10 for the position of the player and a z of 0 for infinitely far away. How do we represent depth? Just by shrinking the objects.

If you did the previous Scratch project with the player and AI shooting at each other you’ve seen at least a little bit of using clones, but in this game mode both our projectiles and our enemies are going to be clones.

We have a base sprite for the ghosts that we keep hidden and use a loop to spawn new ghosts as clones every few seconds. We can use the “When I start as a clone” event to control the rest of our ghost’s behavior.

Your shots and the ghosts shots are going to be similar to each other but “moving” in opposite directions. Your shots start at a depth of 10 and shrink down as they fire “into the distance”. The ghosts’ shots start at the depth of the ghost who fired them and grow as they come towards you. If the enemy shot reaches a z of 10 then it hits the player and they take damage. Both your shots and the enemy shots are going to be clones of a base projectile.

First, you need to make your start screen like we did in our first program. It should display some text to the effect of “Press any button to start” or “Click here to start”. When it starts it should go to your first level, in my game this’ll be a platformer level. When you clear the level then it transitions to an arcade shooter level. You can make the game as long as you want, transitioning back and forth between level types.

What other kinds of games might you want to mix into your game? One thing you might want to do is try making a form of overhead “twin stick shooter” games. These are games where one hand is controlling the character’s movement and the other is controlling the direction the character fires. A slightly older but famous example of this genre was Geometry Wars. Now, you can’t use joysticks but you could potentially use “asdf” keys for movement and the arrow keys for shooting. This means you’ll be having to press multiple keys at once, though, which doesn’t actually work well in Scratch if you’re using events; instead, you need to use sensor blocks to check what keys are held down for movement and shooting.

Learn More

Scratch example for changing scenes

https://scratch.mit.edu/projects/170371110/

Scratch example for a simple platformer

https://scratch.mit.edu/projects/170440272/

Scratch example of an arcade shooter

https://scratch.mit.edu/projects/169474187/

Using sensing blocks instead of events to handle multiple key presses

https://scratch.mit.edu/discuss/topic/13750/?page=1

Geometry Wars, a twin stick shooter

https://en.wikipedia.org/wiki/Geometry_Wars:_Retro_Evolved

Ideas for games in Scratch

https://scratch.mit.edu/discuss/topic/16229/

Shoot’em ups

https://en.wikipedia.org/wiki/Shoot_%27em_up

Metroidvania

https://en.wikipedia.org/wiki/Metroidvania

Woof.js Framework

http://woofjs.com

Also In The December 2017 Issue

Learn some nifty coding tricks while creating a Formula EV3 Race Car.

With binary search, you don’t have to be a mind reader to beat this simple coding activity.

Controllers have come a long way in 50 years. Let’s appreciate the bulky, awkward ancestors that led us here!

Take your Scratch games to the next level by adding multiple modes with multiple sprites.

Let the CSS Zen Gardens wow you with variety and elegance. Making a pretty website isn’t so complicated after all!

An introduction to a hip new alternative to Java. It’s all the rage in android development!

Resources to transform you into a web virtuoso, from messaging apps to testers to code converters.

New treasures and new enemies await in two unique, dangerous realms.

Create your own 3D digital museum and learn how you can help preserve cultural artifacts.

Interesting stories about computer science, software programming, and technology for December 2017.

Add data types to your new programming language in this third installment of the series.

Links from the bottom of all the December 2017 articles, collected in one place for you to print, share, or bookmark.