Sizing Trains for Depth
(Or, Those Tiny Trains in the Distance)
Train Size and Depth of the Scene
Building the Trains
Details, Details
Making it Look Realistic
javaScript
Mechanics
Train Size and Depth of the Scene
In the typical train gifs scene, trains go back and
forth, and they're all the same size. Intuitively, we therefore know that
those trains are the same distance from us. Indeed, all are scaled at 1px
= 8.5". Suppose, however, that a very small railroad engine were to go by.
All the dimensions would still be in the proper relationship to each other, but
the engine would be, say, 59px long by 15px high, rather than 83px long by 21px
high. Now, if the entire train were similarly small, our eyes and brain
would tell us that either there was a strange small train running around (most
unlikely) or the small train must be farther away from us (the viewer).
To see an example of this, go
here, and see an example of what
we're discussing. You will want to open this page and leave it open as you
study this tutorial, because we'll frequently refer to it. Be patient, as
the small train in the background doesn't appear for 180 seconds.
This tutorial has been written to show you how to use
small-sized trains to give depth to your train gifs scenes. Because we
cannot use 3-dimensional tools such as those found in Flash and other highly
sophisticated programs, the ability to add depth by using smaller scaled trains
is a major benefit for us.
Back to the Top
Building the Trains
So, we've established that these are
a good tool, but how do we actually create these trains? Assuming that you
have some engines and a bunch of neat cars in the traditional 1px = 8.5" scale,
you usually build a consist by adding the engines and then each of the cars.
All of these gifs are individually "called" by the <marquee> tag or the
javaScript being employed. This is a pretty simple system, and you can use
those cars and engines over and over, on different trains going in either
direction.
So, what if you want to create a
train that's, say, 71% the size of our regular trains? There are 2 ways to
do it. First, you can individually resize and save each gif you want in
the train. This causes a couple of logistical problems. It takes
time to do the resizing, and more importantly, you have to put those re-sized
images somewhere. You therefore must have duplicate files of the same
images, but in different sizes. This is a maintenance headache. The
other alternative is one that I adopted from Dave Hersrud. In such special
trains, you can create a new blank image of 24px high by 3000px wide (these are
rough dimensions only, and are not meant to be exact), and then individually
import into it each of the gifs you want to use. When you're finished, you
resize the entire train down to 15px high (again, this is a suggested size
only). Set your re-size parameters to retain the proportion of the
original image, and you new train will be approximately 15px high by 2,142px
long.
You now have only one 15-pixel high
image to store -- the entire train. If you will only be using a few of
these small trains, this is the way to go. On the other hand, if you're
going to be using these frequently, you're going to have to individually resize
and save each gif, so you can mix and match at will.
Back to the Top
Details, Details
If you've done at least one train
gifs scene, you know that everything has to work together and be in correct
proportion. You can't have a train that's 21px high, and a signal mast
50px high. The same is true when you make trains small. You have to
reduce the size of the roadbed, signals, shrubbery/trees, buildings, etc.
Everything in the area of the small trains is really part of the rear area of
the scene, and has to all be in the correct proportions. Note, for
example, the difference in size and detail of the roadbed in the Chicago 2003
scene. Both are the same original gif drawn by Dan Learn, but the one for
the small train is 71.4% the size of the original -- because the trains
themselves are 71.4% the size of the original. The same is true for the
signals, etc. This is easy to do with ImageReady/Photoshop, Paint Shop
Pro, or any decent image editor.
Note that as you reduce the size of
the original gifs, you lose detail. You cannot avoid this. However,
in real life, what happens when we get further and further away from an object?
Our ability to see details deteriorates. This is not a problem, but I
don't go below 15px in height. Below that, the trains become pretty wussed
out.
Back to the Top
Making it Look Realistic
Put something between near and far tracks.
Besides just reducing the size of the trains, a feeling of "depth of field" is
enhanced if you put some sort of barrier between the foreground and background
scenes. In this tutorial, "background" refers to the small trains in the
distance, and not to a backdrop, per se. In the Chicago 2003 scene, notice
the bulky buildings between the foreground and background trains. Unless
those buildings are paper thin, we all intuitively understand that the trains
behind them must be far away from us. In real life, other than on the
Nullarbor Plain in Australia, there is almost always something between things
close to us and those farther away.
Use elevation. If we're standing at Point
A, overlooking an area, our brain actually elevates the items in the rear of our
field of vision. While I don't know the technical explanation for this,
the effect is obvious, as our brain tries to bring this closer into focus for
us. In a train gifs scene using small trains for depth, you must raise the
level of the roadbed and trains, so they will be slightly higher than the
foreground trains. Imagine the effect if you do not do so -- it looks as
if you've got small trains running on the same tracks as full-sized ones.
That is not only goofy looking, it will make you glad you're not an engineer on
the smaller trains!
Slow things down. In Washington state, I
remember watching ocean going tugs pulling barges full of railroad cars towards
Alaska. The barges barely seemed to be moving, but in reality, were moving
steadily northward at a pretty respectable clip. If you're in the first
row of Lowe's Motor Speedway in Charlotte, those NASCAR speed demons seem to be
going a whole lot faster than if you're sitting up in the nosebleed sections.
The same effect is present when using small trains. S....L....O....W them
down, and they will seem even further away. Speed them up and they look
like toys.
Back to the Top
javaScript
Mechanics
Note: This section assumes you are somewhat
familiar with HTML and Brian Clough's javaScript tutorials, which are
here. If you're
not familiar with those, go here.
Here is the scripting used to embed a track and train towards the background of
your scene:
function
traingifSetup()
{
createScene("chicago1978");
//Make a train and track in the
background: pixel height of 16 pixels only//
createConsist("backgroundTrain1","../../graphics/HTMLsupport/1978string1.gif");
createTrack("backgroundTrack",34,3,160);
createTrain("trainAt16Pixels","backgroundTrain1",Right,20,150);
placeStatic("../../graphics/gifs/structuresEtc/roadbed/track-4Pixels.gif",0,30,Bottom,3);
------------------------------
The first 3 lines initiate the function, and call for
the creation of a scene named "chicago1978". Note that the coding for
these lines does not change, whether or not we employ small trains in the
background:
function
traingifSetup()
{
createScene("chicago1978");
------------------------------
The next line is just a comment to yourself, and is
ignored by the browser/interpreter:
//Make a train and
track in the background: pixel height of 15 only//
Note that while programming,
scripting, and tagging languages all vary, the use of comments is something all
share. However, there are many different ways to identify comments.
In javaScript, the //.................// is used. Everything between the
beginning // and the ending // is ignored. Comments are an excellent way
for developers to keep track of what the heck they're doing.
------------------------------
Now, we identify a unique train. We can identify
each individual car and engine, or simply specify an entire train (see
Building the Trains, above). In this
example, we specify an entire train:
createConsist("backgroundTrain1","../../graphics/HTMLsupport/1978string1.gif");
------------------------------
The next step is to identify the
track that our consist(s) will use, and there are some important things to be
careful about here.
createTrack("backgroundTrack",30,3,160);
The function is
createTrack, and the developer has named the track
backgroundTrack, and the next 2 numbers are quite
important. The first number is how many pixels from the bottom of the
scene your track is to be displayed, and the second number is the z-index upon
which the track will be displayed. Obviously, if you're using small trains
to be in the background, you do not want them to be rendered on top of trains
that are supposed to be "closer" to you. The z-index of these small
background trains must be smaller than those larger trains that are relatively
close to you.
The third number in the
createTrack statement is the number of seconds that
will elapse before the first train uses the track, in this case, 160 seconds.
-----------------------------
Next, we call the individual train
consists that will roll over our "tracks".
createTrain("trainAt16Pixels","backgroundTrain1",Right,20,150);
The createTrack
function has to keep track of the trains that it is to display, and you have to
individually name each with a unique name. Chicago 1978 uses "trainAt16Pixels", but you can call it any
thing you want. The specific name of the consist to be used is next "backgroundTrain1", and then the direction
and speed are specified. The last parameter is the amount of seconds to
elapse before the next train on this track enters the scene.
-----------------------------
The final thing we need to do is place a track under
the trains:
placeStatic("../../graphics/gifs/structuresEtc/roadbed/track-4Pixels.gif",0,30,Bottom,3);
Again, the image is called, and then
the x-offset (number of pixels from the left edge of the scene), y-offset
(vertical placement of the object within the scene), y mode (always Bottom in my
scenes), and z-level. Be aware that since your track and roadbed should be
at the same depth within the scene, it's only logical that these should both be
at the same z-level (or z-index, which means precisely the same thing).
----------------------------
I invite you to try some "trains in
the distance", and see if you can't inject some 3-D effects into your train gifs
scenes.
| 
