Side Scroller 6

Step 1
The Villager's Message

In this lesson, we will be creating a function to tell us the villager's message, using an array, which is just a list of different data.

Step 2
Define a function to play the message

Define a new function called playMessage whose purpose will be to show us what the villager wants.

Step 3
Call the function

In the part of your code where the player can interact with the villager, instead of using the think function, call the playMessage function you just defined.

Check Your Work
Step 4

Go to the correct scene, and press "Enter" when you are overlapping the villager. A new screen should appear, like this:

Step 5

You know that the rect function takes four inputs or parameters: X, Y, width, and height.

But it can also take a fifth parameter, and this will decide how rounded the corners of the rectangle are.

Step 6
Check out those rounded corners

Press "Enter" over the villager again to see the rounded corners. You can try out bigger and smaller numbers to change this appearance.

Step 7
Define a "message" variable.

Declare a variable called message and assign it to "Greetings, Traveler." in the setup function.

Step 8
Show the message

Use the text function to display the message inside the box we created.

Check Your Work
Step 9
Check out the message

Press "Enter" on the villager again to see the message.

Step 10
Declare two more Boolean variables

Declare two variables, called messageStarted and messageFinished at the top of your code, and assign them both to false in setup.

Step 11
Switch on the message

Boolean variables are like switches. We will set messageStarted to true when we want to start the message, and later, we can set messageFinished to true when it is time to go back to the scenes.

Step 12
What is an array?

An array is a list of different data, assigned to just one variable.

One piece of data in the array is called an element.

To get an element of the array you use [ ] and a number, called an index.

Step 13
Change the message to an array

Change message, so it now contains two different strings. Be sure to use [ ] around both elements, and , between each element.

Check Your Work
Step 14
Press enter to see how the array looks

If you use an array in the text function, it just displays all of the elements, separated by commas ( , ). This isn't exactly what we want, so we'll be using an array index in the next steps to show the lines one at a time.

Step 15
Add an index

To access just one element of an array, we use an index in [ ] after the name of the array.

Add the index 1 here to see what gets displayed.

Drawing %281%29 Temp1540513636
Step 16
Arrays start with 0

You may have noticed that the index of 1 does not give us the first element in the array. This is because array indices actually start at 0.

Change the index to 0 to see the first array element.

Drawing Temp1540513362
Step 17
Add some more elements.
Step 18
Change the index

Change the index between [ ] to display this message:

Step 19
Declare another variable

Declare a variable called counter at the top, and assign it to 0 in the setup function.

Step 20
Use your new variable

Instead of just writing a number for the index, we're going to use the counter variable, so we can change the index with code.

Drawing %282%29
Step 21
Make the counter count up

Add this if statement to increase the number that counter is when the user presses "Enter" again.

Check Your Work
Step 22
What happens when you press enter?

When you press "enter" on the villager's message screen, you should see each part of the dialogue quickly flash by, before going blank. Why do you think this is?

Step 23
Set interact back to false each time
Step 24
How many elements are in the array?

Next, we need to say the message has finished when we reach the last element of the array. To figure out the index of the last element, we need to know how many there are.

  • We could go up to the message and count how many elements are there
  • OR, we can use the handy .length method to make the program calculate it for us.


var myDogs = ["Agnes", "Weasy", "Eddie", "Arthur"]
// myDogs.length will be 4

var helicopterGameScores = [44, 100, 1002, 2, 56]
// helicopterGameScores.length will be 5
Step 25
Finish the message

Your challenge is to write a new if statement that checks if the counter is greater than the number of elements in the messages array, and if so, makes messageFinished true.

Step 26
Change the background

Right now, the background(0) makes it completely black when the message is played. Change that code to make a transparent background.


The last number in the fill() function is the alpha value, which decides how opaque a color should be. Try different numbers to make it darker or lighter when the message is played.

Side Scroller 6 Info


MVCode Clubs

Created By

Mandala2 slinkous


Side Scroll Adventure

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach