The Train Gif JavaScript Tutorial

Static Objects

A scene with just trains would be quite boring, so I've included three functions that allow you to add static elements to your scenes. The simplest of these is placeStatic. This function puts a single image at the X, Y, and Z coordinates you specify.

The above scene includes four images (thanks to Railmation for the pine trees) placed with placeStatic. The code fragment below shows the details of these calls.
createTrack("east", 0, 2);
placeStatic("pine3a.gif", 30, 0, Bottom, 1);
placeStatic("pine4a.gif", 70, 0, Bottom, 3);
placeStatic("pine3b.gif", 160, 0, Bottom, 1);
placeStatic("pine3c.gif", 290, 0, Bottom, 3);


Notes on z level

If you examine the scene above, you'll notice that the train passes behind two trees and in front of the other two. If you look at the source code, you'll see that the z level parameter (the last parameter of each function) is 2 for the track (and thus the train), and either 1 or 3 for the static objects. The rule is, an object with a higher z level will appear in front of an object with a lower one. Therefore the train (Z=2) passes in front of the first and third trees (Z=1) and behind the second and last trees (Z=3). The z level is not limited to the range of 1-3, of course. It can be any positive integer.

This scene demonstrates the second static object function, placeStaticRepeat. This function puts multiple copies of an image into a scene with a single call. These images stretch horizontally across the scene, from edge to edge. Below is part of the source code for this scene.

createTrack("east", 0, 2);
placeStaticRepeat("poles3.gif", 0, Bottom, 3);


Notes on Y Mode

In the code above note that the y offset is greater than 0, and the y mode is set to "Top", in the call to placeStaticRepeat. The constants "Top" and "Bottom" are provided for use with the y mode parameter. They allow you to specify whether the y offset refers to the offset of the top or bottom of the image. Note that the y offset of both the track and the static object have a value of 5, but the "Y" of a track always refers to the bottom. Remember that the Y Offset refers to the distance from the bottom of the scene. Since the static image has an offset of 5 at the top, and the train has an offset of 5 at the bottom, the two appear one above the other.