Create Sparky Invaders in MakeCode Arcade: Setup

Let's make a game! If you're just getting started making games with MakeCode Arcade, you should check out the fundamentals in these guides first:

Once you're ready, come back here to get started with our Sparky Invaders game!

Sparky Invaders Gameplay Goals

Taking a cue from Space Invaders, here are some gameplay goals for Sparky Invaders:

  • Arcade-style shooter
  • Player character constrained to screen bottom, can move sideways only
  • Enemies come in waves from top of screen to bottom
  • Player can shoot only one projectile at a time, no spamming the fire button!
  • Points are scored for shooting enemies
  • Enemy collisions with player character cause loss of one of three lives

 

Some game elements are beyond the scope of the simple version we'll be creating. For one, we won't have the enemies shooting back!

We'll have some barriers on screen, but won't deal with their gradual destruction from missile damage. These barriers are strong!

No enemy flying saucers will grace our skies either.

Design Goals

Rather than a nondescript, mobile gun thing, our game will feature a fun, nefarious character as the player sprite -- Adafruit's own Sparky, the Blue Smoke Monster! Here he is doing what he does best: destroying a delicate integrated circuit (IC) chip.

We'll stick with the space theme, and add a moving starfield, which is easy to do in MakeCode Arcade.

Additionally, we'll style the enemies as DIP-14 IC chips.

Only use the Google Chrome browser with MakeCode!

Start at the End

Unlike our previous MakeCode Arcade guides in which we built our programs from a blank canvas, we'll start this one at the end, with our finished code. This will allow us to look at how each section works, without building every block from scratch.

Start by launching MakeCode Arcade beta using the Google Chrome web browser. Then, download the MCA_Sparky_Invaders.png file by right-clicking on the image below and saving it to your computer.

Load the Code

This is a special .png file that contains not only an image, but the entire game is embedded in it as well!

Simply drag it from the location to which you saved the image on your computer (such as the desktop as shown here) onto the Chrome browser window that is already running MakeCode Arcade (MCA).

This will open the code into the MCA editor.

Code Block Comments

A neat feature of MakeCode is the ability to add comments to your code blocks. This helps you to remember how and why something works, and to explain it to others who may take a look later.

By right-clicking on a block, you can select the Add Comment menu item and then type in your comment.

To show or hide the comment, simply click the word bubble icon on a block to toggle it.

Here's our game code with comments turned on. You can have a look at it now to get a general idea how it works, then we'll take a closer look at it section by section.

If you're ever unsure where a MakeCode block comes from, you can often find it by matching the block's color to a category on the left side of the editor. You can also use the handy search function!

Block by Block

Now that we have the code loaded up, we'll take a look at each section to see how it all works.

Part I: Setup

On Start Loop

The on start loop runs one time when the game starts up. Which is to say, all of the blocks contained within it run one time.

First, we create the star field background effect with the start screen effect block.

Then we call two functions, the SparkySetup and tileMapSetup. We'll have a closer look at both of those in a moment. The reason for using functions in this case is simply to keep the on start block from becoming a mess of too many blocks!

The code on those two functions could live here, but by putting them into functions we create some nice organizational order to sets of blocks that belong together.

Finally, we create a variable called shotFired and set its value to false. This will be used later to set the state when we have Sparky shoot an ESD (electrostatic discharge) projectile. This will allow us to prevent more than one ESD shot from being fired until the previous one has either hit something or gone off the top of the game screen. No spamming the fire button!!

SparkySetup Function

Since this function is called during the on start loop, the code in this block is effectively run just one time at game startup.

In it, we create our player sprite, Sparky, using the set mySprite block, and then renaming mySprite to Sparky in the dropdown menu.

We create simple Sparky pixel art in the sprite editor, at the default size of 16x16.

And, make sure the sprite kind is at the default of Player, since Sparky is our player character sprite.

We'll use the set position block to place Sparky at the bottom center of the screen on x=80, y=108 (the screen origin 0,0 position is the upper left corner).

The move with buttons block is a very quick and easy way to set up controls. By setting the velocity x to 100 and velocity y to 0, only the side to side motion will work.

By adding the set Sparky stay in screen block and flipping the switch to on we can constrain the player to the screen boundary.

The last part of the character setup is to add the set life to 3 block. You can tune that value to greater or fewer lives if you like. This will automatically add three heart icons to the top left of the game screen and we will subtract one from the total each time the character loses a life by being hit by an enemy Chip.

tileMapSetup Function

We'll use the tileMapSetup Function to create the barriers near the bottom of the screen.

The set tile map block determines where any of 15 color indexed tiles are placed on the screen (see this guide for lots more info!) We'll place two green tiles as shown here.

Then, the set tile to sprite with wall block is flipped to the same green color index we used in the set tile map block to indicate the position of the barriers.

In the sprite editor, you can draw out your barrier art.

Then, flip the wall toggle switch to on. Sprites cannot pass through walls, so we can block the enemies and Sparky's shots from passing through.

Shots Fired

Now, we'll set up the fire button control. The on A button pressed loop will run all the code contained within it every time the A button is pressed.

Remember we said in the gameplay goals section how we wanted to mimic Space Invaders in the firing mechanism. Only one shot is allowed on-screen at a time, so no spamming the button!

Here's how we do that. The if...then loop is the first thing to happen when the fire button is pressed. It tests if not shotFired which is a way of saying, is the shotFired variable set to false? When that's the case, it means there is not currently an ESD projectile in the scene, so it's fine to proceed. Otherwise, nothing happens.

To create the shot (when it's allowed) we create a projectile named ESD. Here's the sprite editor for the simple 8x8 pixel projectile.

It is set with a velocity of 0 on vx and -100 on vy which means the projectile will fire straight up at a moderate speed. You can experiment with other values if you like.

We'll also play a little tone pair for each shot, and then set the shotFired variable to true. That means another shot can't be fired until some action causes the variable's state to flip to false, which we'll handle later.

Meet the Enemy

Now, we'll generate the waves of enemies!

We'll use the on game update every 3500 ms loop to create a wave of three Chip enemies every three and a half seconds.

Here we'll first create a projectile for our first Chip with the set to projectile from side with vx vy block. Change the variable name to Chip first.

The reason to make Chip a projectile is that is simplifies the movement behavior setup necessary, vs. a regular character sprite.

Create pixel art for Chip such as the one shown here.

The vx = 2 and vy = 10 values mean that Chip will travel slowly to the right and more quickly downward.

Next, set Chip to kind Enemy from the dropdown menu. This makes it easy to set up the collision behavior later for ESD shots hitting them and other cases.

We want this first of three Chip "projectiles" to be emitted from a randomized spot within the first third of the screen if we break it up into conceptual columns. The set Chip x to block tells the game engine from which position to emit the projectile. By using the pick random 0 to 49 block we limit it to the first "column".

Then, we call the chipAnim function in order to animate the Chip enemy sprite. Those details are contained in the function chipAnim block, which we'll look at next.

You can see that we replicate these blocks two more times, and adjust the x position so that three total enemies are created each time the game update every 3500 ms loop is run.

Chip Animation

We'll create a two frame animation cycle for each Chip enemy so that they wiggle their little DIP legs as they fly! If you're unfamiliar with sprite animation in MakeCode Arcade, have a look at this guide first.

The function chipAnim block contains all we need to animate one Chip enemy. By calling it for each enemy that is generated by the game, we can have them all animate with just these few blocks.

The set anim to create animation of Idle with interval 250 ms block creates the animation group that will contain our frames. Any name for the animation cycle will do, I just picked Idle from the dropdown. You can tune the interval speed to your liking.

Then, add two frames of animation. The first can be the same as the original sprite for Chip, the second simply moves the leg tips (feet?) back a pixel.

attach animation anim to sprite Chip and activate animation Idle on Chip mean that all of the Chip enemies will run this animation cycle at all times.

Now that we have our player sprite, game level map, and enemies set up, we can create the gameplay!

This guide was first published on May 21, 2019. It was last updated on May 21, 2019. This page (Create Sparky Invaders in MakeCode Arcade: Setup) was last updated on Jul 16, 2019.