Parallaxing

[ LiB ]

Parallaxing is a very interesting topic, and we are going to jump right into it. Using paral-laxing, you can create the effect of movement through 3D space from a fixed viewpoint. You could think of parallaxing as scrolling, if you'd like; in essence, you are scrolling two or more backgrounds at the same time to simulate movement.

NOTE

What Is Parallaxing?

Remember the last time you were in a car on the freeway ? When you looked outside ( assuming you weren't playing a videogame), did you notice that the objects that were closer to you moved faster than the objects that were farther away? The road markers that lined the road shot by you while the trees on the mountains far away moved much slower. Parallaxing creates this effect in games : one part of the background moves faster than the other part, based on distance from the player's viewpoint.

Before we can actually begin parallaxing, we need to go over two Blitz Basic commands: TileBlock and TileImage .

TileBlock and TileImage

Because parallaxing effects begin in the background, we must first learn how to create backgrounds. Easier said then done, huh? Fortunately for us, Blitz Basic provides two functions for tiling backgrounds: TileBlock and TileImage .

NOTE

You should probably know what tiling is, since both TileBlock and TileImage do it. Tiling takes a single image, and plasters it all over your program's background in a tiled pat tern. Just like kitchen tiles: each tile is exactly the same as the next one.

Both TileBlock and TileImage have the same definition.

 TileBlock image, [x,y,frames] TileImage image, [x,y,frames]

As you can see, the only required parameter is image (the image you want to be tiled). x and y move the starting point of the tiles to a location other than the default (0,0). Frames is used with animation, which will be discussed in the next chapter.

There is a small difference between TileBlock and TileImage. When using TileBlock , all transparency and masking on your image is ignored. Therefore, you cannot draw overlapping backgrounds using TileBlock . Of course, since it ignores transparency, TileBlock is a little bit faster. For the most part, however, we will be using TileImage .

Using TileBlock and TileImage is really easy. Call the function you want to use with the image you want to tile. For our next demo program, we will be using the image in Figure 7.23.

Figure 7.23. The tiled image.

The following program is called demo07-12.bb. It only has 4 callsone that initializes the graphics, one that loads the background image, and one that tiles the image using TileBlock . The program's last call is to WaitKey so that the user can see the program before it closes .

The call to TileBlock is very simple.

 ;Tile the image TileBlock backgroundimage

As you can probably guess, backgroundimage was previously loaded.

Now that we've got the image tiled, we need to figure out how to scroll it up and down. Scrolling causes the game to appear in motion; therefore, it will seem like you are actually flying in space. The following program is located on the CD as demo07-13.bb.

The program begins as it usually does, with graphics initialization and whatnot (I don't think I have ever said 'whatnot' before, ever). The initialization also creates the variable scrolly , which is used in the TileImage command. We then load the background. Now we enter the main loop.

 ;MAIN LOOP While Not KeyDown(1) ;Tile the background at the y position of scrolly TileBlock backgroundimage,0,scrolly ;Scroll the background a bit by incrementing scrolly scrolly=scrolly+1 ;If scrolly gets to big, reset it to zero If scrolly >= ImageHeight(backgroundimage)         scrolly = 0 EndIf Flip Wend ;END OF MAIN LOOP

The loop begins as you probably expect. The first line inside the loop is a TileImage command. This line tiles the background image, but it includes the optional parameter scrolly for y . Since scrolly is incremented each frame in the next line of code, the image is tiled a little bit higher each frame. This tiling effect creates a scrolling effect. The last important line in the main loop, the If statement, resets scrolly when the program has scrolled the image one full time. In other words, if backgroundimage is 64 pixels high, every 64 ^th frame will be exact copies of one another.

Just in case you want to know, ImageHeight returns the height of the given image in pixels.

NOTE

Notice that there is no Cls command in the main loop. Since we are tiling a back ground, clearing the screen is worthless, because the TileBlock command writes over everything under it. If you use TileImage , which retains the image's trans parency, you will need to use Cls .

Figure 7.24 shows three screenshots of demo07-13.bb at five frame intervals. As you can see, each one has changed very slightly.

Figure 7.24. The background at 5 frame intervals.

The last thing we have to do is scroll two images at once. Two images will create the effect of distance, since some stars will appear closer (by scrolling them faster) and others will appear farther away (by scrolling them slower). In addition, the closer stars are brighter.

Following is the full program demo07-14.bb. As you can see, we load two images and scrolled them.

 ;demo07-14.bb - A Parallaxing Program Graphics 800,600  ;Set AutoMidhandle to true and draw everything to back buffer AutoMidHandle True SetBuffer BackBuffer()  ;IMAGES ;The close and quickly scrolled background backgroundimageclose = LoadImage("stars.bmp")    ;The further and slowly scrolled background backgroundimagefar = LoadImage("starsfarther.bmp")  ;Create scrolling tracker variable scrolly = 0 ;MAIN LOOP While Not KeyDown(1) ;Clear the screen Cls ;Tile both backgrounds at proper speed TileImage backgroundimagefar,0,scrolly TileImage backgroundimageclose,0,scrolly*2   ;Increment scrolly scrolly=scrolly+1   ;Reset tracker variable if it gets too large If scrolly >= ImageHeight(backgroundimageclose)         scrolly = 0 EndIf Flip Wend ;END OF MAIN LOOP

NOTE

Notice that I drew the closer stars after drawing the distant stars. This is kind of importantif I drew the closer ones first, they would appear to be under the distant ones. This would ruin the effect of parallaxing.

The major difference when comparing this program to the previous one is the loading and tiling. Instead of loading one image, this program loads two: backgroundimage- close and backgroundimagefar . The TileImage command tiles both images, but the second image is set to scroll twice as fast. Therefore, it gives the impression of being farther away

Well, that's it for image parallaxing. If you want to have some fun, try adding another image to the mix. Can you do it?

For the final program of the chapter, demo07-15.bb, I simply took the KONG program from Chapter 1 and added a parallaxing star field on the background. It's the same as regular KONG, but now it's in space. Figure 7.25 shows the new KONG running.

Figure 7.25. The demo07-15.bb program.

[ LiB ]