Parallax Scrolling
Saturday 16th, September 2006
Back to BlitzMax Tutorials
In a series of BlitzMax tutorials, we look at side-scroller shoot 'em ups. In the first
part we take a look at making the scrolling background. It features graphics from a
freeware site that I have lost the name of - sorry! If these are your images and you
want credited / have them removed, please get in touch.
Parallax scrolling simulates the real-world effect of closer-to-you moving objects
moving faster than objects further away. If you are on a train for example, you see the
ground whizzing away from you, but the mountains in the distance hardly move.
In order to simulate this in a computer game, we move foreground objects faster than background
objects. The effect is quite stunning, and was used a lot in the days of the Amiga.
The zip file contains all the code and source material.
Graphics 640, 480, 16
HideMouse()
Incbin "crackice.png"
Incbin "dreamscape.png"
Incbin "moon.jpg"
Sets up the graphics and includes the image files into the binary executable.
Type TBackDrop
Field speed:Float
Field x:Float
Field y:Int
Field width:Int
Field img:TImage
Method Update()
x = x - speed
If x < -width
x = 0
End If
End Method
Method Draw()
DrawImage(img, x, y)
If x < -(width-640)
DrawImage(img, x+width, y)
End If
End Method
Function Create:TBackDrop(nx:Int, ny:Int, ..
width:Int, speed:Float, imgFile:String)
Local o:TBackDrop = New TBackDrop
o.speed = speed
o.x = nx
o.y = ny
o.width = width
o.img = LoadImage(imgfile)
Return o
End Function
End Type
The TBackDrop type has been created to allow the easy creation of a moving background image.
We will use two of these Types to create the parallax scrolling effect.
Local Scroll1:TBackDrop = TBackDrop.Create(0, 224, ..
1024, .2, "incbin::dreamscape.png")
Local Scroll2:TBackDrop = TBackDrop.Create(0, 224, ..
1024, .5, "incbin::crackice.png")
Local Moon:TImage = LoadImage("incbin::moon.jpg")
Now we create the objects. Notice that we use the Type name to create an object. This is because Functions
are accessible only by using the UDT's name.
While Not KeyHit(KEY_ESCAPE)
Scroll1.Update()
Scroll2.Update()
Cls
DrawImage(Moon, 0, 0)
Scroll1.Draw()
Scroll2.Draw()
Flip
Wend
In the main loop, we update the respective backgrounds and then draw them to the screen. This is repeated until
the user presses the ESCAPE key. And then...
Local t:Int = MilliSecs()
Local v:Int = 255
While v > 0
If MilliSecs()> t+25
t = MilliSecs()
SetColor(v, v, v)
v = v - 5
End If
Cls
DrawImage(Moon, 0, 0)
Scroll1.Draw()
Scroll2.Draw()
Flip
Wend
Once the user presses the escape key, we still draw the screen, but we add
a nice fade out effect. This is achieved by using SetColor. By lowering the
values for the red, green and blue components, we can darken the images displayed.
This is because SetColor affects every draw operation performed after it.
|
