To increase the sense of movement and depth, we are going to use a technique called parallax scrolling. This means that objects will move at different speeds based on their distance from the viewer. In real life, you can see this phenomenon when you are riding in a train or a car. When looking out of the side window, you will notice that objects that are close to the vehicle seem to be moving past a lot faster than objects that are further in the distance. Objects on the horizon hardly seem to move at all.
This relative movement is what we perceive as depth or distance. It allows us to guess the three-dimensional proportions of a space. We are going to simulate that 3D effect with our 2D sprites to make the scene a bit more realistic and engaging.
First we need some more sprites to use as objects moving past the viewer. Let's create some rocks and seaweed that we can place along the floor of the scene.
The result should look something like the following screenshot:
Once we are happy with our first seaweed drawing, we will create another with a slightly different shape and color.
Six different costumes should be enough to create a nicely varied background as shown in the following screenshot:
Let's move on to the scripting. We will use the cloning method again to create multiple objects from a base sprite shown as follows:
5
in the go back () layers block. This is to make sure that the sprite will be at the depth where we want it to be. If the sprites are not layered properly, the parallax effect will look weird.240
and -150
respectively.speedMultiplier
variable, just like the background images.2
.1
and 5
. These values give good results.-170
and -130
.1
to 6
.That concludes the base sprite script. Next we will create a clone script. This will control how the clones will move, just like in the previous examples.
position
only for this sprite. This variable will store a virtual x position value. We use this method to allow a value to go beyond the borders of the stage.300
in the set <position> to() block. This is beyond the right border of the stage.-300
in the position < () block.Our first scrolling sprite is now finished. Test the script and we will see that the rocks and seaweed move a lot faster than the background image.
To make full use of the effect, we need a few more layers of objects though. We will create a few more background objects moving at different speeds:
For the first copy, we edit the script in a few places.
10
in the go back () layers block.80
in the set size to () % block to make the sprites a bit smaller. These objects are a bit further in the distance.-100
.speedMultiplier
to 1.5
.-90
and -110
should be okay.For the second copy, we make similar changes with the following values:
15
in the go back () layers block60
in the set size to () block70
speedMultiplier
to 1
-60
and -80
for the height rangeThe parallax background is now ready to go as shown in the following screenshot:
We added a lot of graphical spectacle in this project, but after the initial effort it took to create the sprites, the scripting is fairly simple. All sprites behave the same. They just use different values based on where they are on the screen. You could even add more layers if you wish. Just keep in mind that all those clones require the computer's attention. When there are too many, you will notice that the game starts slowing down and skipping frames.
Something you might want to try is adding to or changing the costumes. The intensity of the effect depends a lot on the kind of images used. More horizontal images can increase the perception of depth in the scene while vertical objects in the foreground will increase the sense of speed.
A nice add-on is to create large silhouette shapes in the foreground. These objects should use a script similar to the scrolling background images. Like those background images, they will also need two identical sprites to scroll seamlessly.
First, we need to create the image. This will be a hand-drawn image as big as the stage. Let's draw a rocky floor in the Bitmap mode. The floor can contain a few outcrops and spires that obscure a part of the stage. This makes the complete scene more interesting. But we need to be careful about not obscuring too much of the important stuff like the diver and the starfish.
After creating the foreground images, we can drag-copy the script from the background to the new sprite.
We make a few additions to this script that we take from the parallax scrolling script:
speedMultiplier
value should be quite high, somewhere between 2.5 and 4 works well; enter 4
.-240
and 240
respectively.The following screenshot shows the final script:
3.145.109.8