Monday 22nd

1. Get Started

The first thing we’ll do is get acquainted with MakeCode Arcade.

Firstly, visit arcade.makecode.com and click New Project. Give your game a name (it can be changed later) and have a look around the Interface.

2. Saving

Before we get started we should find out how to save.That way, if we keep saving we won’t lose our game.

Find the Save icon near the bottom. When you click it, you are asked to save a .png file. This image is secretly hiding your game data beneath the picture.

3. Loading

Now we’ve saved, we can load. You can load any .png made by MakeCode Arcade.

That way you can share games and view other peoples. It’s a good way of viewing my code as an example.

4. Assets

Now we can start on our game. The first thing to make is the image of our player character.

All Images are Assets. Assets are images that we can come back to when we need them.

Switch to the Asset tab and click new Asset. Draw a new character or choose one from the Gallery. Make sure to give it a sensible name.

5. Sprites

Sprites are the interactive objects of a game. They can be controlled with code and can collide with other sprites.

Switch back to the Blocks tab. With our player asset drawn we can now use it in the game code.

Inside an 'on start' block, use a 'set mySprite to sprite [  ] of kind player' block from the Sprites menu.

6. Sprite meets Asset

Use the drop-down arrow on mySprite to rename it to playerSpr. Click the [  ] to select your player asset.

Now your sprite is wearing your player character image. You can see this in the Simulator on the left.

7. Controller

If we visit the Controller menu, we can grab the 'move mySprite with buttons' block and put in inside on start too. 

Use the drop-down arrow to change mySprite to playerSpr.

Now press play on the Simulator to see our player move around with user control!

8. Tilemap

We've now got a player character, but currently they're walking through the void.

To give them a world to explore we're going to add a Tilemap. This is a grid of squares or Tiles. Each Tile can have a design.

Create a new Tilemap in the Assets tab and use the Tiles to create a world for your game.

9. Camera

Now we have the Asset we can use the 'set tilemap to [  ]' block and place it in 'on start'.

If we press Play and move our character around we can see that they quickly disappear off screen. This isn't good.

To fix this, we're going to find the Scene tab and place the 'camera follow sprite mySprite' in 'on start'. Obviously we need to change mySprite out.

10. Walls

Now when we move the player around the Camera follows. But notice how the player can move through rocks, cliffs and trees?

To fix that we're going to visit our Tilemap in the Assets tab and use the Wall Tool to draw walls over everything we want solid in the world.

11. Enemies

For the next session we'll need something to fight!

Use your knowledge to create an Enemy asset the exact same way you created the player. Make sure to use sensible names!

Optional Extension

An RPG needs lots of different types of enemy. You could start by adding more enemy Assets of different types for later use.

On top of that, many RPGs use variations of certain enemy types. For example, you could make an evolved version of your enemy that is more powerful, or a version that has a different style, or attack, or behaviour.

12. Placing an Enemy

At the moment we just have an Enemy Asset.

To make a sprite, we'll place another 'set mySprite to sprite [  ] of kind player' in 'on start' but this time we change the kind to enemy. This is important for later. Don't forget to rename mySprite something new as well.

14. Position

At the moment our player sprite is at postion (80, 60). This means they are 80 pixels away from the left and 60 pixels away from the top.

This is because the x position of the player is 80 and the y position is 60.

If we move the player around this changes. We can see that change by looking in the Sprite panel and finding the 'set playerSprite auto destory off' block and changing auto destroy to show physics and off to on.

15. Placing multiple Enemies

At the moment we jhave one Enemy.

We can surround our 'set myEnemy to sprite [  ] of kind enemy' block with a block from the Loops panel called 'repeat 4'.

This creates 4 enemies all on top of each other.

16. Random Spawning

To spread the enemies out we're going to set their x position and y position to something random.

From the Sprites panel, find 'set mySprite position to x 0 y 0'.

Using two 'pick random 0 to 10' blocks from the Math panel in the place of the 0s in x and y we can get the enemies to spawn across the map!

You will need to change the 10 in the 'pick random' blocks to a higher number. Too high and they'll appear outside your map. Too low and they'll be confined to a small area.