|
Creating the Level
Add our background image
Now that we have our fish moving on key press, we can give it a level to move around in. We
have three background images that we can place. First we will place the one first on the Static
Sprites list (as shown in Figure 3.1.1)</>, so click and drag it into your level <i>(as shown in Figure
3.1.2).
 | |
| Figure 3.1.1 | Figure 3.1.2 |
As you can see, after dropping the image into your level it is far too big. This is because the
image's source size was created very big to scale properly with higher resolutions. So lets scale
it down. The easiest way to do this is to zoom out (with your mouse wheel or the zoom out
button) and then grab a corner, hold shift as you drag to keep its ratio (as shown in Figure 3.1.3),
our goal is to make it just bigger than our camera (which is represented as the blue border line
behind our image), to do this you must first size it just inside the camera (as shown in Figure
3.1.4), then scale it out just beyond the camera's borders.
Figure 3.1.3 |
Figure 3.1.4 |
Setting our background's layer
Now one more thing we need to do before we can add the next two background images, we need
to set this background's layer. As you can see our fish is now hidden behind the background
image. In TGB, objects can exist on different “layers†in the view. The lower the number, the
closer. There are 32 layers that range from layer 0 (this layer is the closest to view so whatever
is on this layer will be shown in front of the other layers) to layer 31 (this is the furthest layer,
anything on this layer will be shown behind all other layers). Setting things on different layers can
give us some very cool effects. For example, if you set the rock image a few levels before the
background image and then set the fish's level in between you will see the fish go behind the
rocks. As you can imagine this can give a much desired effect.
| The next question is how do we set the layer.
This is a very simple process, all you have to do
is select the background image. Then click on
the “Edit†tab (as shown in Figure 3.2.1). Now
you should see all of this object's properties,
|
Figure 3.2.1 |
Figure 3.2.2 |
including its image map, position, size, rotation, and further down a bit
it's layer (as shown in Figure 3.2.2). Now since this is our background
image, we will want it pretty far back in the layers. It's always good to
keep a layer open the furthest back though, in case you want to move
any objects out of view, so lets set this image to layer 30. You can do
this by either typing it in and pressing the enter key, or by pressing the
right arrow 30 times (as shown in Figure 3.2.3). As you may have
|
Figure 3.2.3 |
|
noticed our background image is now properly behind our fish instead of blocking the fish
completely. This is because when you add an image it's default layer is 0, since we never
changed our fish's layer it is in layer 0 while our background is in layer 30 (as shown in Figure
3.2.4).
|
Figure 3.2.4
Adding and layering our rock images
|
Now that we know the process for adding, positioning and layering our full screen background
images, lets repeat the process for our two rock images. These will need to be added in a layer
|
|
above the background image, but behind the
fish image. We also will want to put a bit of a
gap between the two rock layer images so our
fish can be made to swim in between them.
Click the “Create†tab to see our images again
(as shown in Figure 3.3.1).
|
Figure 3.3.1 |
Figure 3.3.2 |
Now drag the first rock image, the third image in our Static
Sprites library (as shown in Figure 3.3.2), into the center of your
level. Just like our background image, click one of the corners
and hold the shift key to drag it proportionally, do this on each
corner until it fits our background image nicely. It is better to
make it just a slight bit larger than our background image than
smaller (as shown in Figure 3.3.3). As you can see our image is
in front of the fish image, so we must change it's layer. Click the
“Edit†tab and then change it's layer to 20. Now the rocks
should be behind the fish (as shown in Figure 3.3.4).
|
Figure 3.3.3 |
Figure 3.3.4 |
|
Now we have our first rock image in, lets add our
second one. As you can see on the rock image we
just added, there are some areas that seem to be
detailed very roughly in comparison to the rest. These
are the spots that our next layer will fit over, so when
sizing and positioning our next rock layer we must
make sure we fit it nicely over those areas. Click on
the “Create†tab again and this time we are getting the
fourth image in our Static Sprites library ,i>(as shown in
Figure 3.3.5)</i>. Drag that image into the center of our
level and resize it to fit our other rock image (just like
we did before, you can hold shift to keep the resizing
proportional when using the corner handles on the
object).
|
Figure 3.3.5 |
|
Once you get your object to the right size and position (as shown in Figure 3.3.6) you can then go
to the “Edit†tab and change its layer to 12. Having it on layer 12 should give us plenty of layers
(as shown in Figure 3.3.7).
|
Figure 3.3.6 |
in between the two rock images to give us the
feeling of depth as the fish move between them
|
|
We have now placed
our background image,
layered it to be shown
behind everything, our
|
|
Figure 3.3.7 |
|
back rock image to be shown behind everything
but our background, as well as our front rock
image to be shown a few layers in front of our
back rock image. Our base level is complete, it
no longer looks like our fish is swimming in
space.
|
Setting our fish to a layer in between our rocks and testing it
|
Our final step before testing our fish swimming in our newly created level, is to change our fish's
layer. We have our back rock layer set to 20 and our front rock layer set to 12, so our fish must
be somewhere in between these layers. I created such a gap so we have a lot of options to place
things in our level in front of or behind our fish, but still in-between the rocks. So select your fish,
|
Figure 3.4.1 |
you may need to click on the fish's area a few times to
cycle through selections, (as shown in Figure 3.4.1)
and then click the “Edit†tab. Now change the fish's
layer to 16 (as shown in Figure 3.4.2).
|
Figure 3.4.2 |
Finished!
Your fish now has a world to swim in! In the next section you will give the fish some more advanced movement controls.
Continue on to Part 4 - Adjusting Movement
|
