Godar's Game Development Package Tutorial.
 |
Basic Sprite Animation
| |
| Example applet display's animation using an image strip. Use mouse drag and arrows to move the dog. |
 |
| Image used. |
This tutorial introduces my GGD package which will give functionality to create games and other animated programs. In the above applet you should see an animated dog. The image shown below the applet is the image used for animation. It is better to contain an animated sprite in a single image instead of loading individual images for each frame. Each image requires a connection call to the server therefore applet loading times are greatly increased.
What follows is an explanation of how to animate a single sprite using the GGD package. The example also uses the base classes we designed in the Java basic's Tutorial 1. It is recommended that you read this tutorial if you are having trouble understanding how the sprite package is implemented.
For technical documentation about the GGD package view it's home page here. You will find class diagrams and descriptions along with the javadoc, if you are familiar with UML you will gain a better understanding of how the GGD package works.
The Sprite Tutorial 1:
Feww!! Now that's over we can have a look at how the GGD package is used to create simple animation with relatively minimal code. First we have to declare a new instance of type BS_Loop
private BS_Loop sprite;
Simple enough! Now we have to create a new instance of the BS_Loop object. There is a little trick here to creating an animated sprite with the GGD package. It has to do with the ImgUtil class in the com.ctek.util.*; I designed the ImgUtil class to manipulate images. The animation classes of this package require an array or multi-dimensional array of images to create the animation. As I mentioned above it is far more convenient to animate an image that is loaded in a single block than to load images individually. The BS_Loop class requires an array of type Image, you have a few options available to you at this stage:
- Load images individually into your own array. (not-recomended)
- Create your own Image array and fill it with your own image frames. (ensuring all images are the same dimensions.)
- Or use the ImgUtil to create an image array out of an image strip you create, like the one above.
Here I will explain how to use the ImgUtil class to create an array. The other methods you can work out for yourself.
sprite = new BS_Loop(ImgUtil.splitImgStrip(Global.imgs[Global.IMG_1], 1, 6));
Image[] ImgUtil.splitImgStrip(Image img, int rows, int cols); as you can see the splitImgStrip() method will equally section the image into the rows and cols specified, returning an array of the sections. I find this is the easiest way to create an animated sprite. The only thing you must be couscous of, is that the main image is equally divided whether it is in block form or not. If there are more than one row to the animation block divide the frames equally from left to right and from top to bottom the algorithm will then return the required array. Look at the javadoc for the BS_Loop class to see the other options available to manipulating the class. The only other thing left to do is put a call to paint() and a call to update() where required.
That's all there is to creating an animation....lol After creating a new instance for sprite I set the location of the sprite to the center of the window. Then I set the skip var to 1 which mean for every 2 updates the sprite is only updated once. (ie: skips one call to update() then updates next call to update()
The only other thing I have done in this example is allow the user to move the animated sprite via the keyboard arrows or by dragging the mouse pointer within the screen. (Try it!). If you look at the code in the GMainPanel class where the mouse and keyboard events are located (bottom of code) I manipulate an array of boolean flags to test whether or not a specific key has been pressed or released. This method of detecting keyboard creates smooth and flowing movement of the sprite and I will be using this method throughout my game designs.
Every class that extends (inherits) the Sprite class also inherits a number of other helpful classes (see class diagram). One of which is the MoveRect class this class is responsible for the movement velocity of the sprite. Its main function is to handle collision detection and sprite velocity's. The x and y velocity's are added to the sprites x and y location which then move the sprite across the screen, how you manipulate the vx and vy values will determine where the sprite move across the screen. Experiment with this and try to get new creative movements. I will be showing you how to create an asteroids type game in later tutorials and it uses a number of trig functions to generate movement which should give you an idea of what methods of motion you could use.
That's all for this tutorial for now, download the source and the GGD package and see what you can come up with. I am always interested in looking at what has been created with my code or information contained within these tutorials so email me with your own projects and I will have a look at them.
Download Source: animation.zip
|
|