Layered Animator
The Lanimator Instructions
The Lanimator is fairly straightforward to use, but does involve a lot of numbers, so make sure you plan out everything on paper first. The Lanimator takes its commands from your webpage's HTML file in the form of applet parameter tags. To set up the Lanimator, put the Lanimator files in the same directory as your HTML file and then put the following line of code in your HTML file:
<applet code="Lanimator.class" height=H width=W>
This sets up the window for your applet. Replace H and W with the height and width you desire in pixels.
All the graphics you wish to use must be in one file. This should ideally be a GIF format file, because the GIF format can save transparency information. If you want to get the full use out of this applet, transparency is the key. Each picture or sprite occupies a layer in the screen. These layers are drawn in order, so an object in a high number layer will be drawn over the top of an object in a lower number layer. Using transparency, you can make your sprites weave in an out of objects, disappear behind things etc. To tell the applet the name of the file that contains your graphics, use the following line of code:
<param name="Filename" value="yourfile.gif">
The next line of code sets the background colour for your applet. It runs like this:
<param name="BGColour" value="R G B">
Firstly, note the spelling of colour - I'm English, and this is the correct spelling for any Americans reading. Three numbers separated by a space give the colour. Each number is a decimal running from 0-255 in the usual way for colours. So using R=255, G=255 and B=0 gives a bright yellow, and so on. If you miss out this tag, the background colour will be set to zero.
The next line of code tells the applet how many layers you have. Replace L with the number of layers you're going to have.
<param name="Layers" value="L">
Next comes the delay parameter. This is the length of the pause between frames in milliseconds. However, be careful. Just because you want a pause of 100 milliseconds between a frame doesn't mean you're gonna get ten frames per second. The drawing takes time, especially if you have a lot on the screen. So while the applet will try and get a constant frame rate, it might not always work. Sorry…
<param name="Delay" value="D">
The next parameter is the totals. This takes some explanation first. There are 6 possible types of layer in the current version. (More are planned) Here they are, given with their identifying numbers 0-5.
0. Stationary Picture (No animation)
1. Reflecting Lake
2. Fireworks
3. Stationary Sprite (Same as 0 but can be animated)
4. Sprite that moves left and right.
5. Sprite that moves up and down.
The totals tag gives the total number of each, except for the fireworks, of which there can be either one or zero. In the following line of code, replace the number with the total number of that type of layer. If there are zero of that type, make sure you put a zero. All numbers are separated by a space.
<param name="Totals" value="0 1 3 4 5">
Now we get to the interesting part, the layers themselves. The layers take the general form:
<param name="LayerXXX" value="type arguments">
XXX is the number of the layer. If you have n layers, XXX will run from 0 to n-1. E.g. for 16 layers, XXX runs from 0 to 15. The layers are drawn in order from 0 to n. type is the layer type, from 0-5, given above. arguments is a series of numbers separated by a space which controls how the layer works. The arguments vary between layer types, and are explained below. Coordinates are given in pixels. x coordinates start with zero on the left and move right, y coordinates start with zero on the top and move down. Therefore the top left hand corner of your applet window is x=0 y=0. All numbers (Unless stated otherwise) should be integers. (Whole numbers)
Type 0 - Stationary Picture
arguments - x y w h xpos ypos
x and y are the top left hand coordinates of the picture on your graphic file. w and h are the width and height of the picture. xpos and ypos are the top left hand coordinates of where you want the picture to appear in the applet window.
Type 1 - Reflecting Lake
arguments - x y w h nwaves percent offinc filter a r g b
x and y are the top left hand coordinates of where you want the lake to start, and w and h are the width and height of the lake. nwaves is the number of waves that will be visible in the lake at any one time. (For any mathematicians out there, the waves are basically sine waves) percent is the amplitude (Height) of the waves. It is given as a percentage of the height of the lake. offinc is how much the wave is the angular velocity of the wave. It is basically how much the wave moves per frame, in degrees. If it moves by 360 degrees, then the wave moves downwards one wavelength. If it moves by 180 degrees, it moves down by half a wavelength, etc. It can also be a negative number if you want the waves to move upwards. nwaves, percent and offinc do not have to be whole numbers - you can have floating point numbers. (E.g. 1.4142)
filter can either be 0 or 1. If it is 1, a colour filter is applied to the lake. The colour filter is given by the 4 numbers a, r, g, b. These numbers are percentages of the original. r is red value, g is green and b is blue. a is the alpha channel, or transparency. So for example, 100 50 150 200 would leave transparency as it is, red is reduced to 50%, green is increased by 1.5 times (150%) and blue is doubled. (200%) Note that if filter is set to 0, you should be able to get away without including values for a, r, g and b.
Also note that the lake will only reflect what has been drawn at the time, so in most cases you will want it to be the top layer. However you can get cool effects if you draw it earlier, like vampires with no reflection…
Type 2 - Fireworks
arguments - x y w h nrockets
x, y, w and h define the area where the rockets are launched into, with x and y giving the top left hand corner, and w and h giving the width and height. However, they may not stay inside that area in the current version. (They are especially prone to shoot out of the top) nrockets is the number of rockets you wish to have. The current version has a set of 8 fixed colours - this may change in the next version.
Type 3 - Stationary Sprite
arguments - x y w h frames xpos ypos frskip
All sprites consist of a series of frames, which have to be of the same size. These have to be stored in a horizontal line next to each other on your graphic file. x and y give the top left hand corner of the first frame. w and h give the size of each frame. frames gives the total number of frames of animation the sprite has. xpos and ypos give the top left hand corner of the position of the sprite on the screen. frskip gives the number of times the screen is redrawn before the image is changed to the next frame. 1 means the image changes every time the screen is redrawn. 2 means the screen is redrawn twice before the image changes, etc.
Type 4 - Left/Right Sprite
arguments - x y w h frames flip bounce bx1 bx2 by speed startdir startx
Now things start to get complicated… As with the stationary sprite, x, y, w and h define the dimensions of the first frame in your graphic file. frames is the number of frames in one direction. A moving sprite can change direction, and has a different series of frames for each direction. bounce determines if it changes direction. A value of 1 means when it encounters a wall (Defined later) it bounces off and changes direction. If the value for bounce is 0, it reappears at the other wall, still going in the same direction. If bounce is 0, it can only move in one direction. (Defined later) flip changes its meaning depending on the value of bounce:
|
bounce = 1 |
flip = 0 |
The program will pick up 2 times frames frames from the graphic file, with right facing frames first, followed by left facing frames. |
|
|
flip = 1 |
The program will pick up the right facing frames only, and create the left facing frames by flipping the right facing frames around. |
|
bounce = 0 |
flip = 0 |
The program will pick frames number of frames and use them for the direction the sprite moves. |
|
|
flip = 1 |
Same as above, but the applet flips them from left to right before use. |
That may sound a bit baffling, but it can be quite useful. Have a look at a few examples if you are unsure.
bx1 and bx2 are the x positions of the walls that bound the sprite's movements - bx1 is the left wall, bx2 the right wall. by is the top coordinate for the sprite. the bys and bxs form top left corner coordinates, so a sprite at (bx2, by) will actually be drawn to the right of bx2. Values of bx1 and bx2 do not have to be in the applet window - they can even be negative! This can be useful if you want a sprite to disappear off the screen and reappear after a delay. Simply make it move a bit more off the screen.
speed is how many pixels the sprite moves each time the screen is redrawn. Note this does not have to be an integer! The sprites obviously cannot be drawn in a fraction of a pixel so numbers are rounded before drawing. For example, a value of 3.0 will move 3 pixels every frame, or 6 pixels every two frames. A value of 3.4 will move 3 pixels after one frame, and 7 pixels after two frames.
startdir gives the starting direction for the sprite. (If bounce is 0, then it defines the sprite's direction) 0 is moving to the right, 1 is moving to the left. startx gives the starting x coordinate for the sprite.
Type 5 - Up/Down Sprite
arguments - x y w h frames flip bounce by1 by2 bx speed startdir starty
This is very similar to the LR sprite. The first difference is that sprites have to be stored in the graphics file down facing first then up facing. (As opposed to right facing then left facing as above) x, y, w, h, frames, flip and bounce then basically work as before. by1 and by2 define the upper and lower walls respectively, and bx defines the x coordinate of the sprite. speed is as before. startdir is 0 for down, 1 for up. starty is the starting y coordinate for the sprite.
Back to the lanimator applet page
New on the Java Boutique:
New Review:
Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling
API boasts simplicity, ease-of-integration, a well-rounded feature
set, and it's free!
New Applet:
Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA
sequences into three useful formats.
Elsewhere on internet.com:
WebDeveloper Java
Lots of Java information on webdeveloper.com
WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.
ScriptSearch Java
Hundreds of free Java code files to download.
jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.
|