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 variable arry[0] = 6; int value = arry[0]; arry[3] = arry[0]; Position01234 Value

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 objects int[] myArray = new int[5]; This creates and array with 5 elements, but currently the elements are empty Position01234 Value

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-loops int[] 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-loops int[] 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-loops int[] 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-loops int[] array = new int[5]; for( int i = 0; i < array.length; i++ ) { array[i] = i + 1; } Update – increase i by 1

For-loops int[] array = new int[5]; for( int i = 0; i < array.length; i++ ) { array[i] = i + 1; } i01234 Position01234 Value12345

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 background First we need to create an array to store the background The background is made of many tiles at different (x, y) positions We need to create an array with X and Y elements We will use this notation: array[x][y]

Setting up the background Create 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 store background information But we can’t draw the background or add anything to it. Let’s start by adding stuff to the background Then we will draw it

Adding to the background Let 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 background Now 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+myVisibleXCells myCameraX 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+myVisibleXCells myCameraX i =0 i = 1 i = 2 i = 3 j = 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

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 time Could 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 again Try it yourself Then try calling it in DemoWorld to add a platform x,y length Adding Platforms

x,y length

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 down We will use the add platform method We 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

Animation GreenfootImage[] myImages int[] myFrameSequence int[] myClip

Animation GreenfootImage[] myImages int[] myFrameSequence int[] myClip

Animation GreenfootImage[] myImages int[] myFrameSequence int[] myClip

Animation GreenfootImage[] myImages int[] myFrameSequence int[] myClip

Animation GreenfootImage[] myImages int[] myFrameSequence int[] myClip

Animation GreenfootImage[] myImages int[] myFrameSequence int[] myClip

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" );

Animation In the act() method Set the next image at the end setImage( 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 end setImage( 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 CRASH !!! Ouch!!!

Animation Initializing things

Animation Animating in the act() method

Make the game yours Build 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