Visit the MakeCode Arcade website at https://arcade.makecode.com/ and click on 'New Project'. Name your project 'Interactive Story Adventure'.
In this story there will be two characters, Sam and Rocko.
We will also need a 'choice' variable to store the user's choices in this interactive story. Create a variable called 'choice' and set it to 0 for the start.
Add the following code and select your characters from the sprite gallery.
let choice = 0
let sam = sprites.create(img`
. . . . . f f f f . . . . .
. . . f f 5 5 5 5 f f . . .
. . f 5 5 5 5 5 5 5 5 f . .
. f 5 5 5 5 5 5 5 5 5 5 f .
. f 5 5 5 d b b d 5 5 5 f .
f 5 5 5 b 4 4 4 4 b 5 5 5 f
f 5 5 c c 4 4 4 4 c c 5 5 f
f b b f b f 4 4 f b f b b f
f b b 4 1 f d d f 1 4 b b f
. f b f d d d d d d f b f .
. f e f e 4 4 4 4 e f e f .
. e 4 f 6 9 9 9 9 6 f 4 e .
. 4 d c 9 9 9 9 9 9 c d 4 .
. 4 f b 3 b 3 b 3 b b f 4 .
. . f f 3 b 3 b 3 3 f f . .
. . . . f f b b f f . . . .
`, SpriteKind.Player)
let rocko = sprites.create(img`
. . . . f f f f . . . . .
. . f f f f f f f f . . .
. f f f f f f c f f f . .
f f f f f f c c f f f c .
f f f c f f f f f f f c .
c c c f f f e e f f c c .
f f f f f e e f f c c f .
f f f b f e e f b f f f .
. f 4 1 f 4 4 f 1 4 f . .
. f e 4 4 4 4 4 4 e f . .
. f f f e e e e f f f . .
f e f b 7 7 7 7 b f e f .
e 4 f 7 7 7 7 7 7 f 4 e .
e e f 6 6 6 6 6 6 f e e .
. . . f f f f f f . . . .
. . . f f . . f f . . . .
`, SpriteKind.Player)
choice = 0
Click on the gray box in the sprite block to open the Editor. You can choose a sprite from the Gallery or you can paint your own sprite using the Editor.
In this step, we will create a function named 'setCharacter'. This function will allow us to place a character at a specific location on the screen or hide the character if needed. Here's how it works:
Now, let's add the 'setCharacter' function to our code:
function setCharacter (mySprite: Sprite, xPos: number, yPos: number, hide: boolean) {
mySprite.setPosition(xPos, yPos)
mySprite.setFlag(SpriteFlag.Invisible, hide)
}
Functions are useful if you have some code/instructions that you want to use again and again.
To create a function go to the Advanced > Functions toolbox and click 'Make a Function'.
Give your function a name that makes sense and choose whether to pass anything into the function. In this example we will pass in a sprite and some text for it to say.
In this step, we will create a function that allows our characters to 'speak'. This function will display a speech bubble with the character's dialogue on the screen. The function will take two inputs: the character who is speaking, and what they are saying.
The function we're creating is called 'dialogue'. It's like a recipe for how to make a character speak. Whenever we want a character to say something in our story, we'll use this function and provide the character and the dialogue as ingredients.
Here's how to write this function:
function dialogue (character: Sprite, text: string) {
character.sayText(text, 5000, false)
}The 'character' input is the character who will be speaking. The 'text' input is what the character will say. The 'sayText' command makes the character say the text. The '5000' is how long the text will stay on the screen (in milliseconds), and 'false' means the text won't be animated.
Remember, this function doesn't make a character speak by itself. It's just the recipe. We'll use this function in our story whenever we want a character to speak.
You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.