Animation Workshop. Support Files. Advanced CODING CHALLENGE - ADVANCED

Transcription

1 Animation Workshop Support Files Greenfoot Application: Greenfoot.org/download Greenfoot Reference: Greenfoot.org/files/javadoc/Greenfoot/package-summary Template: Scholastic.com/samsungacademy/resources/animation.zip Advanced Instructions: Before we start, we will gather everything needed for this exercise. Make sure you have downloaded Greenfoot from the provided link. Once Greenfoot is downloaded and installed, download the template file provided in the URL. The template file includes everything needed to complete this exercise. Once the template is opened, we are ready to start. Double-click on the section named AnimatedWorld on the right-hand side of the screen. A window will pop up with java code. Carefully read through the comments and look for the line that sets the size of the world. Currently the size is set to 400x400. Change it to be 800 pixels wide and 400 pixels high. Again, by reading the comments, look for the line of code that adds an actor to the screen. Change the number so that the x-location is 400 and the y-location is 100. Once the bird is in the correct starting location then it is time to move on.

2 Open the Bird class on the right-hand side of the screen. Once opened look for the act method. The act method is the heart of the Bird class. This method runs continuously, making it the perfect candidate for dealing with animation, movements, and keyboard events. In the act method, you will see a call to the flyright method. Look at the flyright method and study it. You will see a call to the setlocation method. The setlocation method takes in an x-coordinate and a y-coordinate and moves the character to that location. The way the fly method works is by grabbing the current x-position and adding a variable called speed to it. It grabs the y-coordinate and sets it to the current y-position. If you run the program now, you will see that the bird does not move. This is because the speed is set to 0. Find the speed variable in the Bird object and set it to any number greater than zero. If you run it now you should see your character move to the other side of the screen and stop. Now we are going to work on getting the bird to fly back and forth left to right. First look for the flyleft method. This function will work the same as the flyright method but instead of increasing the Bird s x-position, it will decrease the x-position by the speed. Using the code from the flyright method, create the flyleft method. Test it by removing the flyright method from act and adding the flyleft. The program and your bird should now fly left. As it currently stands, the bird stops when it reaches an edge. We want our bird to have a concept of direction. Look for a method called move. We are going to use this method to control the

3 movement of our bird. The move method checks to see if our direction variable is set to the value r and if it is equal to r then it calls the flyright method. Add another if statement that checks if the direction is set to l (for left). If it is correctly set it should call the flyleft method. Go to the act method and replace the flyleft method with move. The Bird should now move right. Now we want to make our bird change direction when it reaches the edge of the screen. We have two pre-built functions that check if our bird has reached an edge, isrightedge and isleftedge. Look for the directleft and directright methods. These two methods are responsible for changing the direction of the bird. In the checkdirection method we currently have a conditional that checks to see if the bird is on the right edge, and if it is, it changes the direction. Add another conditional to checkdirection to handle the changing of direction when the bird is on the left edge of the screen. To complete the process, add the checkdirection method to the act method. If you run the application, the bird should move from left to right. You probably noticed that something was not right. Our bird still faced right, even when the

4 direction was changed to left. To fix this we need to flip our character in the directright and directleft methods. Use the getimage method, provided by Greenfoot, to grab the image and call mirrorhorizontally on the image. Run the application, the bird should turn every time it reaches an edge. The final thing we will want to complete in this section is to get the bird to move up and down. Look for the checkkeyboardmovement method. In this method, you will see an empty conditional that checks to see if the down key has been pressed. Add another conditional to check for the up key. Inside each of them call the moveup and movedown methods already provided depending on which key is pressed. If you run the program now, you will see that you can move the bird vertically. Frame Animation: Up to this point we have been dealing with moving a static object. In this section we are going to animate our character frame-by-frame. If you look at our variables, you will see an array called flyingimages. The array flyingimages will hold all our frames for the bird animation. The first thing we are going to do is to populate the array. Look for the setframeimages method. Inside you will see a for loop that iterates through the array of images. Inside the for loop, the file name is being

5 generated by increasing the index. Take that file name and create a GreenfootImage for each member of the array. The new GreenfootImage(fileName) can be used to create the individual images. After finishing the setframeimages method, add the method inside the Bird constructor method. This will call it whenever a new Bird object is created. Now that we have an array populated by the images that we will use to create our animation, the next step is to set the correct image anytime the character moves. In the end, we want to create an effect of a flapping character. Find the increaseframe method. In this method, we will increase the frame by one. Since we only have eight frames, create a conditional that checks to see if our frame variable is at eight and, if it is, reset it to zero. Use Greenfoot built-in method setimage and pass in the flyingimage array image object at that index reference by frame. Once you have completed the increaseframe method, call it every time the the bird moves. Call this method in the flyright and flyleft methods. If you run the application, you will see that the cycling of frames gives the bird the effect of flapping its wings.

6 You will notice a few things wrong with the animation. The first thing you will notice is that the bird keeps facing the right even after it changes direction to the left. This happens because we are constantly changing the image of the bird, but we do not flip them after changing to the next frame. Find the flipbirdhorizontally method. In this method, create a for loop that cycles through each image in flyingimages and calls the mirrorhorizontally method on it. We can now replace our current method for mirroring with our newly created flipbirdhorizontally method. If you run the application, you will see the bird keeps the correct animation after turning. Animation Challenge: You may have noticed that our bird flaps its wings too fast. We can fix that by adding a concept called delay. A delay is a counter that controls when an image is changed. A delay set to four will prevent the image from changing and is four times as slowing in changing the image. We can keep a counter and when the counter reaches four then the image is allowed to change. In this example, the animation will be four times slower than it currently is. Add the concept of a counter to your application. Play around with the number until you reach a point where you feel the animation is fluid.

7 User-Driven Animation: If you have reached this portion of the tutorial, you should have a strong grasp of animation using Greenfoot. The following Challenges will be fully coded by you using what you have learned from the previous sections. The first step is to allow the user to fully control the bird using the arrow keys. Just like we did with the up and down arrow keys, allow movement to be controlled to the left and to the right. If there are no arrow keys pressed, have the bird stop facing the same direction from which it was moving. Once that is done, we can add a basic animation when the bird is still. If you left-click the Bird class in the main screen, you will see an option called Set Image. If you click on it, you will see all the bird images we used for our animation. For the floating animation, we can use frames 6, 7, and 8. Play with the delay to make it seem as if the bird is slowly flapping its wings to float. The final step will be to allow the bird to move quicker when the user presses the space bar with the arrow keys. There are a few things to take into account when completing this section. Remember to increase the speed of movement and the rate at which the images change. You might have to decrease the speed of movement and animation when moving with just the arrow keys to create a believable transition of animation. Once you are done, you will have completed a base for a future video game. You can add anything from enemies, obstacles, background images, and much more. The only limit is your imagination. Additional Notes Mistakes happen! The best programmers know that mistakes are part of the process. Don t hesitate to try something new and don t get upset when you mess up. Check your resources! Don t be afraid to look things up. Use documentation, Stackoverflow, and Google to see if you can figure out the answer to a problem before you ask someone else. Feeling stuck? Double-check your dependencies, look for typos, give your mom a call. Often, just a few minutes away from a problem is all you need in order to solve it.