lesson 3: arrays and loops. arrays arrays are like collections of variables picture mailboxes all...

Lesson 3: Arrays and Loops

Arrays

• Arrays are like collections of variables• Picture mailboxes all lined up in a row, or

storage holes in a shelf– You could number the whole and store things in

each slot• You access each variable by it position in the

array (slot number)

Arrays

• Example of an array of numbers, called “arry”

• In java you can access the first element (position) call using the following syntax

arry[0]

• You can treat this like any other variablearry[0] = 6; int value = arry[0]; arry[3] = arry[0];

Position 0 1 2 3 4

Value 10 0 25 -40 3

Arrays

• Each array must have a predetermined length– This has 5 values so the length is 5! But the last element (slot) is 4!

• We create arrays in java using new just like objectsint[] myArray = new int[5];This creates and array with 5 elements, but currently the elements are empty

Position 0 1 2 3 4

Value 10 0 25 -40 3

Loops

• Loops are a way of repeating an instruction/action a certain number of times.

• They are often used with arrays and lists– Repeat the same action for each element in the array

• Some common uses/patterns– Addition up values– Transforming arrays of values

• multiple each element• Add something to each element

Loops

• Loops are made of fours parts– Initialization – setup the loop– Condition – check if the loop should continue or end– Body – the action to repeat– Update – update a value or something so the action

is applied to something different

• There are three common loop types:– For, for each, and while

For-loopsint[] array = new int[5];for( int i = 0; i < array.length; i++ ){

array[i] = i + 1;}

int[] array = new int[5];for( int i = 0; i < array.length; i++ ){

array[i] = i + 1;}

For-loops

Initialization– create a variable called i- It it’s value to zero (0)

For-loopsint[] array = new int[5];for( int i = 0; i < array.length; i++ ){

array[i] = i + 1;}

Condition– continue while i is less than the length of the array- Basically I will equal 0, 1, 2, 3, 4 (or for each position of the array)

For-loopsint[] array = new int[5];for( int i = 0; i < array.length; i++ ){

array[i] = i + 1;}

Body– set the value of array[i] to i + 1

For-loopsint[] array = new int[5];for( int i = 0; i < array.length; i++ ){

array[i] = i + 1;}

Update– increase i by 1

For-loopsint[] array = new int[5];for( int i = 0; i < array.length; i++ ){

array[i] = i + 1;}

i 0 1 2 3 4

Position 0 1 2 3 4

Value 1 2 3 4 5

Tiled Backgrounds

• With the last game we had to create the background using large images or many Actors.– Actors require extra processing and can slow

down the game– Let’s make a world built from tiles that we can

repeat and reuse

Tiled Backgrounds

• We will use an array (or more specifically a 2D array) to represent background information

Tiled Backgrounds

• We can put background information into each element – think of a Mario type game

Let’s start

• Open Lesson 3

• There are already some simple classes

• We will start by changing scroll world

• Open ScrollWorld

Setting up the backgroundFirst we need to create an array to store the

backgroundThe background is made of many tiles at different

(x, y) positionsWe need to create an array with X and Y elementsWe will use this notation:

array[x][y]

Setting up the backgroundCreate a variable to hold the array inside the

Scroll world

Now in the constructor of Scroll world create the array of size full width (x), full height (y)

We can now storebackground information

But we can’t draw the background or add anything to it.Let’s start by adding stuff to the backgroundThen we will draw it

Adding to the backgroundLet create a methods called

“addBackgroundActor” It will take an Actor and an X and Y coordinate It will put the actor in the position specified by X, Y

Eg. myBackground[x][y] = actor

Adding to the backgroundNow in DemoWorld add some bricks somewhere

on screen.

But we can’t see them yet. We need to add code to draw the background!

Drawing the background

• To draw the background we are going to implement the updateBackground method in ScrollWorld

Drawing the background

• We want to create of image of only the viewable– We will need the camera position– We will loop over the visible tiles and draw them

into the image

Drawing the background

• We want to create of image of only the viewable– We will need the camera position– We will loop over the visible tiles and draw them

into the image

Drawing the background

myVisibleXCells

myVisibleYCells

(myCameraX, myCameraY)

for( int i = 0; i < myVisibleXCells; i++ ){

int x = myCameraX + i;int y = myCameraY;

}

Drawing the background

myCameraX+myVisibleXCellsmyCameraX

i =0 i = 1 i = 2 i = 3

for( int i = 0; i < myVisibleXCells; i++ ){

for( int j = 0; j < myVisibleYCells; j++ )

{int x = myCameraX + i;int y = myCameraY + j;// get Cell and Draw Cell

}}

Drawing the background

myCameraX+myVisibleXCellsmyCameraX

i =0 i = 1 i = 2 i = 3j = 0

j = 1

j = 2

myCameraY

myCameraY+myVisibleYCells

for( in i = 0; i < myVisibleXCells; i++ ){

for( int j = 0; j < myVisibleYCells; j++ )

{int x = myCameraX + i;int y = myCameraY + j;// get Cell and Draw Cell

}}

Drawing the background• Open ScrollWorld• Find the void updateBackground() method• Create a loop like the one below• Try getting the Actor from the myBackground array

myBackground[x][y]• Put the actor in a variable, called actor?

Drawing the background

myVisibleXCells

myVisibleYCells

(myCameraX, myCameraY)

• Technically the camera does not need to line up with cells, so we are going• To have to draw the image potentially miss aligned• Now we have to draw as many as

myVisibleXCells + 1 and myVisibleXCells + 1

Drawing the background

Drawing the background

Remove the old background!!!

Draw one cell into the new background

Adding more to the background

It can be difficult to add one thing to the background at a timeCould we add long platforms together?Could we define where the ground is?

Let’s make methods to do this work for us

Then let’s call them to make a bigger interesting world

• We want to make a method that given an position (x,y) can make a platform of length l

We will use a for loop againTry it yourselfThen try calling it in DemoWorld to add a platform

x,ylength

Adding Platforms

Adding Platforms

x,ylength

Adding ground• We want to make a method that given an position (x,y) can

make Ground of length l• Ground will start the position y and fill blocks all the way

downWe will use the add platform methodWe will use a for each different height

Remember y = 0 is the top, y = myFullHeight -1 is the bottom

Try it

x,y

length

Adding ground

x,y

length

One last thing: Animation

• Let’s animate the baby• The key to animation is change the picture

slightly– At the right time– Enough of the little changes look the like the

character is moving– Change the pictures too fast or too slow and it will

look strange

Animation

• Open player– In the constructor we are going to load the

pictures needed for animation into an array– We are going to make a counter, we will use it to

choose a picture• It either indicates the time (or the current frame for

animation)

– We are going to make an array, which indicate which sequence of images to use

Animation

GreenfootImage[] myImages

int[] myFrameSequence

int[] myClip

0 0 0 0 0 0 1 1 1 1 1 1

0

Animation

GreenfootImage[] myImages

int[] myFrameSequence

int[] myClip

0 0 0 0 0 0 1 1 1 1 1 1

1

Animation

GreenfootImage[] myImages

int[] myFrameSequence

int[] myClip

0 0 0 0 0 0 1 1 1 1 1 1

2

Animation

GreenfootImage[] myImages

int[] myFrameSequence

int[] myClip

0 0 0 0 0 0 1 1 1 1 1 1

3

Animation

GreenfootImage[] myImages

int[] myFrameSequence

int[] myClip

0 0 0 0 0 0 1 1 1 1 1 1

4

Animation

GreenfootImage[] myImages

int[] myFrameSequence

int[] myClip

0 0 0 0 0 0 1 1 1 1 1 1

5

Animation

GreenfootImage[] myImages

int[] myFrameSequence

int[] myClip

0 0 0 0 0 0 1 1 1 1 1 1

6

Animation

• Open player• Create myClip, myImages, myFrameSequence– Set myClip = 0– Create the myFrameSequence[] like this

myFrameSequence[] = { 0, 0, 0, 0, 0, 1, 1, 1, 1, 1 };

– Create the image array– Load images into with

new GreenfootImage( "baby1.png" );new GreenfootImage( "baby1b.png" );

AnimationIn the act() method

Set the next image at the endsetImage( myImages[ myFrameSequence[myClip] ] );

When the player moves left or right update myClip myClip = (myClip + 1 ) % myFrameSequence.length;

The “% myFrames.length” will make sure that myClip is always between 0 and length of the frame sequence array

If you try to access a position outside the array the program crashes

Animation In the act() method

Set the next image at the endsetImage( myImages[ myFrameSequence[myClip] ] );

When the player moves left or right update myClip myClip = (myClip + 1 ) % myFrameSequence.length;

The “% myFrames.length” will make sure that myClip is always between 0 and length of the frame sequence array

If you try to access a position outside the array the program crashes

0 0 0 0 0 0 1 1 1 1 1 1

12CRASH !!! Ouch!!!

AnimationInitializing things

Animation

Animating in the act() method

Make the game yoursBuild the level

Make the player shoot things

Make the player break things

Have things fall from the sky

Make the camera scroll forward

Add more objects into the game