Side Scroller 6

Planning
Step 1
The Villager's Message
Temp1540928337

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.

Temp1540431360
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.

Temp1540431124
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:

Temp1540431408
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.

Temp1540431505
Planning
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.

Temp1540431660
Challenge
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.

Temp1540432169
Check Your Work
Step 9
Check out the message

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

Temp1540432260
Challenge
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.

Temp1540433619
Information
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.

Temp1540837194
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.

Temp1540434003
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.

Temp1540512884
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.
Temp1540515106
Challenge
Step 18
Change the index

Change the index between [ ] to display this message:

Temp1540515404
Challenge
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.

Temp1540515722
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
Temp1540658704
Planning
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.

Example:

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

var helicopterGameScores = [44, 100, 1002, 2, 56]
// helicopterGameScores.length will be 5
Challenge
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.

Temp1540837913
Side Scroller 6 Info

Account

MVCode Clubs

Created By

Mandala2 slinkous

Course:

Side Scroll Adventure

Access Level

premium

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