From 3f943cb4b6eb85de5b1b215b3e1331b33c2b2d00 Mon Sep 17 00:00:00 2001 From: mickfuzz Date: Thu, 19 Mar 2020 16:23:08 +0000 Subject: [PATCH] Adding tutorial part one --- pxt.json | 3 +- tutorialPartOne.md | 298 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 300 insertions(+), 1 deletion(-) create mode 100644 tutorialPartOne.md diff --git a/pxt.json b/pxt.json index afd437a..6e7bdad 100644 --- a/pxt.json +++ b/pxt.json @@ -12,7 +12,8 @@ "tutorialPartTwo.md", "addEnemy.md", "addLives.md", - "addLivesTest.md" + "addLivesTest.md", + "tutorialPartOne.md" ], "testFiles": [ "test.ts" diff --git a/tutorialPartOne.md b/tutorialPartOne.md new file mode 100644 index 0000000..8903df4 --- /dev/null +++ b/tutorialPartOne.md @@ -0,0 +1,298 @@ +### @activities true + +# Making a Platformer Game Part One + +## Introduction +### Introduction @unplugged + +Welcome to part one of this this tutorial on how to make a platformer game with Arcade MakeCode. +In this tutorial we will cover the basics of how to: + +* Create a Player character +* Move the Player element around the screen +* Create a Game Space using platforms using the tilemap tool +* Add Food to collect using the tilemap tool + +## Introduction Creating your Player Character +### Create your Character @fullscreen + +To create your character. Drag the ``||variables:set mySprite||`` ``||sprites:to IMAGE of kind Player||`` into the ``||loops:on start||`` block. +Click on the blank square and choose a player from the Gallery. What about a duck? +Anything in the ``||loops:on start||`` block runs when the game starts. + +```blocks +let mySprite = sprites.create(img` + . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . + . . . . . . . . . b 5 5 b . . . + . . . . . . b b b b b b . . . . + . . . . . b b 5 5 5 5 5 b . . . + . b b b b b 5 5 5 5 5 5 5 b . . + . b d 5 b 5 5 5 5 5 5 5 5 b . . + . . b 5 5 b 5 d 1 f 5 d 4 f . . + . . b d 5 5 b 1 f f 5 4 4 c . . + b b d b 5 5 5 d f b 4 4 4 4 b . + b d d c d 5 5 b 5 4 4 4 4 4 4 b + c d d d c c b 5 5 5 5 5 5 5 b . + c b d d d d d 5 5 5 5 5 5 5 b . + . c d d d d d d 5 5 5 5 5 d b . + . . c b d d d d d 5 5 5 b b . . + . . . c c c c c c c c b b . . . +`, SpriteKind.Player) +``` + +## Moving your Character +### Move your Character left and right @fullscreen + +Drag ``||controller:moveSprite with buttons||`` under your existing block. +Click on the plus sign at the end of the block. Keep ``||controller:vx||`` as 100 but change the ``||controller:vy||`` setting to 0. + +```blocks +let mySprite = sprites.create(img` + . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . + . . . . . . . . . b 5 5 b . . . + . . . . . . b b b b b b . . . . + . . . . . b b 5 5 5 5 5 b . . . + . b b b b b 5 5 5 5 5 5 5 b . . + . b d 5 b 5 5 5 5 5 5 5 5 b . . + . . b 5 5 b 5 d 1 f 5 d 4 f . . + . . b d 5 5 b 1 f f 5 4 4 c . . + b b d b 5 5 5 d f b 4 4 4 4 b . + b d d c d 5 5 b 5 4 4 4 4 4 4 b + c d d d c c b 5 5 5 5 5 5 5 b . + c b d d d d d 5 5 5 5 5 5 5 b . + . c d d d d d d 5 5 5 5 5 d b . + . . c b d d d d d 5 5 5 b b . . + . . . c c c c c c c c b b . . . +`, SpriteKind.Player) +controller.moveSprite(mySprite, 100, 0) +``` + +### Make our Character Jump @fullscreen + +Let's add a **Jump Event** which listens for the ``||controllers:A button||`` being pressed. +When that happens it will move our character up in the y axis. Up here is a negative value. Drag in the ``||controllers: on A button pressed ||`` +Drag inside that a block ``||sprites:set mySprite x to 0 ||``. Change ``||sprites:x||`` to ``||sprites:vy velocity||`` set it to **-150** + +```blocks +let mySprite: Sprite = null +controller.A.onEvent(ControllerButtonEvent.Pressed, function () { + mySprite.vy = -150 +}) +``` + +## Change the colour of the background + +### Change the colour of the background @fullscreen +Change the colour of your background. Drag in from scene ``||scene:set background color to ||`` after your current blocks and click on the square to choose a colour. + +```block +scene.setBackgroundColor(9) +``` + +## What about Gravity? +### What happens? @fullscreen +When we press ``||controllers:A||`` (which is SPACE on the keyboard) we jump but we don't come back down. +We need gravity! Add another block like ``||sprites:set mySprite x to 0 ||`` to the on start block and change the property to +``||sprites: ay (acceleration y) ||`` and set that to **300** + +```blocks +let mySprite: Sprite = null +mySprite = sprites.create(img` + . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . + . . . . . . . . . b 5 5 b . . . + . . . . . . b b b b b b . . . . + . . . . . b b 5 5 5 5 5 b . . . + . b b b b b 5 5 5 5 5 5 5 b . . + . b d 5 b 5 5 5 5 5 5 5 5 b . . + . . b 5 5 b 5 d 1 f 5 d 4 f . . + . . b d 5 5 b 1 f f 5 4 4 c . . + b b d b 5 5 5 d f b 4 4 4 4 b . + b d d c d 5 5 b 5 4 4 4 4 4 4 b + c d d d c c b 5 5 5 5 5 5 5 b . + c b d d d d d 5 5 5 5 5 5 5 b . + . c d d d d d d 5 5 5 5 5 d b . + . . c b d d d d d 5 5 5 b b . . + . . . c c c c c c c c b b . . . +`, SpriteKind.Player) +controller.moveSprite(mySprite, 100, 0) +mySprite.ay = 300 +``` +## Using Tilemaps +### Create a Floor using a Tilemap @fullscreen + +To make a platformer we are going to need a floor and some platforms. +Drag in the ``||scene:set tilemap to ||`` block into your on start block. + +```blocks +let mySprite: Sprite = null +mySprite = sprites.create(img` + . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . + . . . . . . . . . b 5 5 b . . . + . . . . . . b b b b b b . . . . + . . . . . b b 5 5 5 5 5 b . . . + . b b b b b 5 5 5 5 5 5 5 b . . + . b d 5 b 5 5 5 5 5 5 5 5 b . . + . . b 5 5 b 5 d 1 f 5 d 4 f . . + . . b d 5 5 b 1 f f 5 4 4 c . . + b b d b 5 5 5 d f b 4 4 4 4 b . + b d d c d 5 5 b 5 4 4 4 4 4 4 b + c d d d c c b 5 5 5 5 5 5 5 b . + c b d d d d d 5 5 5 5 5 5 5 b . + . c d d d d d d 5 5 5 5 5 d b . + . . c b d d d d d 5 5 5 b b . . + . . . c c c c c c c c b b . . . +`, SpriteKind.Player) +controller.moveSprite(mySprite, 100, 0) +mySprite.ay = 200 +tiles.setTilemap(tiles.createTilemap( + hex`100008000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001010101010101010101010101010101`, + img` + . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . + 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 + `, + [myTiles.tile0,sprites.castle.tileGrass2,myTiles.tile2], + TileScale.Sixteen + )) + +``` + +### Create a Floor using a Tilemap 2 @fullscreen + +Click on the square and this opens up the ``||scene:Tilemap||`` editor. +Change the size in the bottom left to **10 x 8** because each tile is 16 pixels square this is the just a bit bigger than the size of the screen. +The whole screen is actually **160px wide by 120px high**. You can do the maths if you want :) + +![Change size to 10 by 8 ](https://raw.githubusercontent.com/mickfuzz/getting-started-making-a-platformer-test1/master/images/tilemap_1.png) + +###Create a Floor using a Tilemap 3 @fullscreen +Create a line of tiles to be a floor. Choose a suitable tile for your floor. Why not the first, default one. Draw a line by clicking tiles at the bottom of the drawing area to create a floor. +Now select the **Wall Drawing tool** and click the same squares. Then click on Done. + +![Create a row of images and walls ](https://raw.githubusercontent.com/mickfuzz/getting-started-making-a-platformer-test1/master/images/makecode-1-2020-02-14-145027.gif) + +### Now draw more platforms @fullscreen + +Now you will fall and come to rest on the floor. Can also jump up. In fact you can jump a lot, **even when you are in the air!** +We'll fix that in a bit. For now **add some more platforms in your tilemap.** + +![Design your platforms ](https://raw.githubusercontent.com/mickfuzz/getting-started-making-a-platformer-test1/master/images/makecode-2.png) + +## Jump only when touching floor +### Jump only when touching floor @fullscreen + +To jump only when touching floor we need to add in an extra ``||logic:logic if||`` block in our Event block. +Drag in a ``||logic:if true then||`` block from the Logic section ``||ControllerButtonEvent: on A button pressed ||``. + +```blocks +let mySprite: Sprite = null +controller.A.onEvent(ControllerButtonEvent.Pressed, function () { + if (true) { + mySprite.vy = -150 + } +}) +``` + +### Jump only when touching floor @fullscreen +Drag in a ``||scene:Scene||`` block ``||scene:is mySprite hitting wall ||`` inside the ``||logic:logic if||`` block. Change the setting to ``||scene:hitting wall bottome||``. +Now the player will only jump when it is touching down on a platform. + +```blocks +let mySprite: Sprite = null +controller.A.onEvent(ControllerButtonEvent.Pressed, function () { + if (mySprite.isHittingTile(CollisionDirection.Bottom)) { + mySprite.vy = -150 + } + +``` + +## Add a Goal - Collectable Food + +### Adding Food to our Tilemap @fullscreen +**Now we need a Goal for our Game**. +To add Food for the Player to collect **click on the tilmap image and add in a few yellow squares**. +In the next step we will then turn them into strawberries. + +![Add in Yellow Squares ](https://raw.githubusercontent.com/mickfuzz/getting-started-making-a-platformer-test1/master/images/makecode-yellow-s1-2020-02-16-19.gif) + +### Adding Food: Change Squares to Food @fullscreen +Drag a ``||loops: for element value of list||`` block after your current blocks. +Replace ``||variables:list||`` with ``||scene: array of all locations||`` and choose a yellow block. Inside the ``||for loop||`` add a ``||variables:set strawberry to sprite of kind Food||`` and add a strawberry image from the gallery. +After this add a ``||scene:place on top of ||`` block and set to ``||scene:place strawberry on top of value||`` + +![Convert Yellow Squares ](https://raw.githubusercontent.com/mickfuzz/getting-started-making-a-platformer-test1/master/images/makecode-yellow-s2.gif) + +### Adding Food: Change Squares to Food @fullscreen + +Let's removing the original yellow square which is now behind the strawberry by adding a ``||scene:scene||`` block ``||scene: set blank box at||`` into our loop. +Keep the blank image in the first part of the block but change the second value to ``||variables:value||``. +![blank square](https://github.com/mickfuzz/makecode-platformer-101/blob/master/images/loop_replace_yellow.png?raw=true) + + +## Eating Food and Points +### Eating Food and Points @fullscreen +Drag in a ``||sprites:on sprite of kind Player overlaps ||`` block anywhere on your workspace. +Change the second ``||variables:Player||`` variable to ``||variables:Food||``. + +```blocks +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { +}) +``` + +### Eating Food and Points 2 @fullscreen +Drag in a ``||sprites:destroy mySprite ||`` block inside the ``||sprites:on sprite of kind Player overlaps ||`` block +Grab the ``||variables:otherSprite||`` variable from the first block onto the ``||variables:mySprite||`` part of the ``||sprites:destroy||`` block + +```blocks +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { + otherSprite.destroy() +}) +``` + +### Eating Food and Points 3 @fullscreen +Add an ``||info:Info||`` block ``||info:change score by 1||`` under the ``||sprites:destroy||`` block +Now Your food should disappear when you touch it and you **gain points**. +```blocks +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { + otherSprite.destroy() + info.changeScoreBy(1) +}) +``` + +## Play Part One +### Play Part One @unplugged + +**That's it now let's play our game** + +Then play your game to test that it works ok. + +Is it too easy? If so, can you make it changes that so one of the jumps is more challenging? +Or is it too hard? If so what can you change to make it easier? + +Try making small or large changes to the following: + +* the jump ``||sprites:vy (velocity y)||`` in the ``||controller:on A button pressed||`` block +* player gravity with the ``||sprites:ay (acceleration y)||`` setting +* player speed left and right in the ``||controller:move mySprite with buttons||`` block +* the location of the platforms to make the jumps more challenging + +Get a friend or family member to test it out. Can they collect all the Food first time? +Getting the balance right between too hard and too easy is key to making our game challening and interesting to play. + +Hope you enjoyed part one of this tutorial. In part two we add the following elements to our platform game. + +* Adding an End Goal that you must touch to win game +* Make it so you much collect all Food to win the game +* Creating a larger Game Space by increasing the width of the level +* Adding Levels to extend our Game Space and increase challenge + +