The Ultimate Background System Object Tutorial
By Chris Street (aka Circy)

For this you will need:

Multimedia Fusion 1.5, Build 116 (at least)
Background System Object (which comes with the latest build)
An image editing package (Photoshop or Paintshop is good) for the last tutorial.

Download File:
www.klikacademy.com/circy/tutorials/bgs.zip

This Tutorial Covers
:Static Parallax
:Basic Parallax
epth Parallax
:Water Effects
:Snow Effects
:Heat Haze Effects

This tutorial is designed to teach you all you need to know about the Background System Object, one of the most under-used extentions I know of. I've been working with it for over a year, and have taught myself many, many effects.

There are some limitations which you'll need to know of, however. It works best in a low resolution (for this tutorial, a resolution of 320x200 is always used), and as few colours as possible (change it to 256) to keep the speed up. If you want to try and achieve this yourself without looking at the examples, then I suggest you save frequently.

I'm going to divide this tutorial into sections, and I really hope that you use this to advantage to make your games more professional. Of course, you can always give me credit if you wish to


Static Parallax Scrolling (reference: BGS.cca, Frame 1: Beginner)

Ok, information. Parallax scrolling is a little hard to describe, but games like Sonic The Hedgehog and Super Mario use it. Think of it as being in the back of a car, and looking out of the window. The objects in the distance (hills and far clouds) move very slowly as the car moves, while closer objects to the car (like fences, roadsigns) move more quickly. This section will not focus on that aspect yet, but it will teach you how to make a static image in the background of your platformer.

Open Multimedia Fusion 1.5 and change the number of colours to 256, and the resolution to 320x200. Change the initial frame to 640x200 and enter it. Create some 32x32 platforms, and make a quick level design. Add a character and assign it a platform movement (either the built in one or a customized one - the tutorial uses a built in one). Add the necessary events for the platform movement (stop the character if it overlaps the backdrop...you know all that anyway). Oh, and make the game scroll. That's important! Add all this into a group called Game Engine

Now, go to Insert an object in the Objects menu, and select Background System Box. You'll then be faced with a daunting array of options. For now, use these options:

Set Fill Colour = None
Set Border Colour 1 = None
Set Border Colour 2 = None

Change the image section (on the right hand side of the box) to Pattern, and then click on edit. You'll come to a sprite editor, exactly the same as the ones for the active and backdrop objects. You can choose any size you wish (I'm using 64x64 for this tutorial) and draw a few squiggles, making sure the entire box is filled with colour. Exit the box menu when you're done, and ensure that the BGS is viewed to back, so it's behind the platforms.

Event editor time.

Two groups are needed: The game engine (hopefully you did this earlier), and the Parallax. Now it's vitally important that you order this in the correct way. If you do not, then the parallax could be quite buggy. So the Game Engine group needs to be at the top.

In the Parallax Group, you'll first need to define the size of the object. So as this is static, you'll want to keep it the same size as the resolution (aka 320x200). So:

Group Parallax is activated:
Set Dimensions to 320,200

Ok? So thats the size. Now we want this to keep a permanant position. There are a couple of ways to do this, but my preferred way is to always position it to the left and top sides of the frame:

Group Parallax is activated:
Set Position to X Left Frame, Y Top Frame

Save, and try it out! Bingo! Your first parallax effect.


THINGS TO TRY
You can enlarge the frame, both vertically or horizontally, and the background will always stay in that position.



Basic Parallax Scrolling (reference: BGS.cca, Frame 2: Intermediate)

Ok this time we're going to modify the BGS so it actually scrolls more slowly than the window scrolls, creating a little depth.

Do EVERYTHING as mentioned in section 1. But this time, you'll have to increase the x size of the BGS. You don't need to make any actual changes to the BGS, but in the event editor, where it says:

Group Parallax is activated:
Set Dimensions to 320,200

Change it to:

Group Parallax is activated:
Set Dimensions to frame width,200

It doesn't HAVE to be the width of the frame - it can be slightly smaller, but to keep things simple we do it this way.

Now we need to change the position, to make it scroll more slowly than the window. For now, the Y position stays the same. Find:

Group Parallax is activated:
Set Position to X Left Frame, Y Top Frame

and modify it so it says:

Group Parallax is activated:
Set Position to X Left Frame/2, Y Top Frame

Save, and run. You have a proper parallax effect!


THINGS TO DO
1. Enlarge the frame vertically. Again, the Y position remains the same.

2. Why not try creating parallax scrolling vertically, rather than horizontally? You'd need to keep the frame width at 320, and make the height of the frame taller. Then you'd need to change the X and Y settings of the Parallax group so only Y moves around, rather than X... if you see what I mean.

3. Maybe you'd want to make a huge screen with both the X and Y positions of the parallax moving? Work it out.





Depth Parallax Scrolling (reference: BGS.cca, Frame 3: Advanced)

Ok, we're now going to try out something a little more advanced. Multi-layered depth parallax scrolling. Very much like the Sonic games, where closer objects move more slowly, while distant ones move quickly.

In addition, you'll need to create a couple more background system boxes.

Ok, so right now, do everything you did in section 2. Create a new BGS, call it GRASS. Make the width about 100, and the height 200, and draw a fairly small tree on it, and some green grass (again, check the .cca if you're unsure what I mean.

Copy all the events you used in Section 2 for the Parallax, and use the same ones for the Grass. Except this time, the grass needs to be moving quicker than the sky. So set the skys position to:

X Left Frame/1.2, Y Top Frame

Modify the grass' position to:

X Left Frame/1.5, Y Top Frame

Save, and run. If all went well, then you should have a sky, moving fairly slowly in the distance, and some grass with trees, moving a little quicker. Don't forget to re-organise the views, so that the sky always stays at the back. But wait, we're not done! We're going to add another layer.

Create a third BGS, call it TREE, and draw a large tree on it. Keep the height to 200, and the width to 100. Don't bother drawing any grass. To the event editor!

Copy the events from BGS GRASS to BGS TREE, and modify the X position again, so it reads:

Set Position: X Left Frame/2.2, Y Top frame

Now save and run! You should have three layers now! Well done! Thats the Parallax Scrolling all sorted out!

__________________________________


The Background System Object is extremely versatile. It doesn't just have to be used for scrolling. This next tutorial will teach you how to make an animated river, as in my Santas Christmas Cracker!


Water Effects (reference: BGS.cca, Frame 4: Higher One)

Load up the first parallax tutorial you worked on. The Static one. We're going to create a very nice water effect. If you ever made an RPG engine (like the ones that Pokemon games use), special positioning is the key here.

Create a second BGS object, make the height 200, and the width 16. About 40 or 50 pixels from the bottom, draw a gentle slant going up from the left. It must NOT reach the top of the BGS (otherwise it isn't gentle, is it??) Fill the part below it in a blue, to create half the sea. Now enlarge the width to 32 pixels, and duplicate and mirror that half of the sea so you get essentially an upside down gentle V, with blue underneath (again, check the .cca if you're unsure).

To the event editor!

For the sea to move, we need to set its X position to Alterable Value A, and then add up the value. We also need to make it LARGER than the frame, otherwise when the sea does move, there'll be a worryingly large gap on the left side of the frame! So we do this:

Group Parallax is activated:

Set Dimensions of SEA to Frame Width+32, 200


For the actual sea movement:

Group Parallax is activated:
Set Position of SEA to Alterable Value A -32, Y Top Frame
Add 1 to Alterable Value A of SEA.

A new event now. When the alterable value reaches a certain number, we reset the position of the sea. It is vitally important that the sea image is symmetric, otherwise, it will look very odd indeed.

Alterable Value A of SEA is greater or equals 32: Set Alterable Value A to 0


It's complex, but once you've done it, save it, and observe your handiwork. A nice sea effect!

THINGS TO TRY

1. Reverse the seas direction
2. Speed the seas movement up
3. Multilayered sea (refer to Frame 3 in the .cca!)

________________________________

Phew, this article has taken well over two hours to compose, and I'm making this tutorial along with it. I hope my efforts are appreciated! There are two more tutorials left.

Precipitation Effects (reference: BGS.cca, Frame 6: Higher Two)

Precipitation, if you don't know, is what comes from the sky... be it hail, snow, or rain. I'm focussing on snow. The cool thing about this is that the snow can go BEHIND backdrop objects, meaning if you want a cave in your game you won't have to make it out of active objects to mask previous active snow effects! Again, Santas Christmas Cracker uses this method, as does Mr Stumps Dentures.

The principle is the same as the Water tutorial you just did. Except this time, it's all vertical. So load up the Water Tutorial and this time, change the water size to 32x32 in the BGS properties. Obviously you draw snow! Rename it from SEA to SNOW. Now, if you could increase the speed of it, and then run it, you would have a snowstorm effect. Which is pretty rubbish, and not exactly what we're trying to achieve here. We want gentle snow.

To the event editor!

First, delete all the events under SNOW. Some pretty big modifications to be made, and it's easier to start from scratch. Once again, we need to define the size of the snow. It needs to be wide enough to cover the whole width, and a lot taller than the vertical resolution (200). So here goes.

Group Parallax is activated:

Set Dimensions to Frame Width, 264-32 (trust me on this!)


Now we need to make the snow travel down. Once again we set it to Alterable Value A so it can actually move...



Group Parallax is activated:

Set Position of Snow to X(Snow), Y Top Frame +Alt Value A of Snow-32
Add 1 to Alt Value A of Snow

And finally, we reset the snow when the value reaches 32...

Alt Value A of Snow is Greater or Equal to 32: Set Value A to 0

Save it! Run! Enjoy the snow.

THINGS TO TRY

1. Making layered snow
2. Creating a blizzard effect

________________________________

Ok, final tutorial! This has now taken three and a half hours to write and code all this, and I'm really quite tired now...

Static Parallax with Heat Haze (reference: BGS.cca, Frame 7: Intermediate)

Ok, say you're working on a level in a desert or something, and you want to make a heat haze for it... well, look no further! While this isn't the most brilliant haze effect, it's probably the only way to do it with Background System Object. This tutorial is an advanced version of the original Static Parallax (frame one), so go and load that up.

Firstly, in the background system box sprite editor, resize the image to 320x200, and draw a complete image, with no transparant gaps whatsoever. Once you've done that, select it all and copy it.

Now this is where Photoshop or PSP comes in. I'm going to reference Photoshop, as it is more effective. Load it up, and paste the image.

What you need to do is to distort it. So go to FILTER, Distort, and then go to Glass. You want a Frosted Texture, and set both the Distortion and Smoothness to 5. Once thats done, copy and paste it back into the BGS sprite editor. Do NOT close down Photoshop yet. Enlarge the BGS image from 320 to 960, and move your newly distorted image to the far left.

Go back to Photoshop, and press CTRL and F to distort some more. Copy and paste next to the first image, and return again to Photoshop and distort it one final time. Copy and paste again. So now, you should effectively have three images in your BGS, each one slightly warped. Can you guess what we're going to do now?

We're going to change the positioning of the image. So close Photoshop down - you won't need it, and save. Rename the BGS as HAZE.

Event editor time! Head to the second event - the one which positions the backdrop, and just replace:

Group Parallax is activated -with- Alterable Value A of HAZE = 0. Leave the actual result of the event alone.

Copy this same event twice more, and edit the Alterable Value Ato 1 and 2

Now you should have three events, ranging from Alterable Value A = 0, to Alt Value A=2. Great stuff. Now save.

This next bit positions the BGS exactly where we want it. Do the following things:

Alterable Value A = 1:
Set position to X Left Frame -320, Y Top Frame

Alterable Value A = 2:
Set position to X Left Frame -640, Y Top Frame


Can you see how this is developing? We need some kind of timer now... and we need to use Alterable Value B as the storage for the timer. Head for the first event:

Group Parallax is activated

and add, under the HAZE BGS, Add 1 to Alterable Value B.

You'll also need to modify the X dimension so eventually the whole event reads:

Group Parallax is activated:
Set Dimensions to 960,200
Add 1 to Alterable Value B of HAZE


Done that? Good...save. We have five more events to code, and it's all relatively simple from now on in. When the Alterable Value B reaches a certain number, Value A changes. Remember that the position is set when a Value A is a particular number. So here we go, the last leg!


Alterable Value B = 0
Set Alterable Value A=0

Alterable Value B = 10
Set Alterable Value A=1

Alterable Value B = 20
Set Alterable Value A=2

Alterable Value B = 30
Set Alterable Value A=0

Alterable Value B = 40
Set Alterable Value A=0
Set Alterable Value B=0


Save, and try it out. If it works, then great! If not, then you need more practice... or maybe I need to explain this better. You could also use this effect to create some underwater effects.

____________________

Well, thats it for now. Hope you enjoyed this very long article. As I said earlier, feel free to credit me

Circy out.