Code for Scrolling Parallax Backgrounds?

Monkey Forums/Monkey Programming/Code for Scrolling Parallax Backgrounds?

zoqfotpik

(Posted 2013) [#1]

Does anyone have any code lying around for parallax backgrounds? This is for a scrolling platformer-- I want to draw the game level tiles, but with a transparent background so that the player can see the "outside" which will be composed of two layers of images, the first partly transparent so that you can see through to the final background. The first (front) background should move more than the back background. I am thinking of moving them with the same offset as I scroll the actual platform tiles, but less.

Any ideas?

Why0Why

(Posted 2013) [#2]

Ignition makes this VERY easy. I was just playing with layers last night.

Midimaster

(Posted 2013) [#3]

a simple simulation would be to define an virtual z-value for each object. Lets say yot monitor-screen/camera-point has Z#=0.0, a foreground has 0.5, the player has Z=1.0 the first background has 3.0 and a far background has 10.0

the x-offset of each object is now defined as the x-distanz to camera.

If the camera moves virtuell 10 pixels to the right the objects move 10.0/Z# to the left, it results in:

camera-point +0.0
foreground -20.0
player -10.0
first background -3.3
far background -1.0

If the camera moves virtuell 10 pixels together with the player to the right the objects move 10.0/Z# to the left, it results in:

camera-point +0.0
foreground -20.0
player -10.0 + 10.0 = +0.0
first background -3.3
far background -1.0

So you can say for all Objects in the game:

ObjectRealX# = ObjectXScreen# - CameraRealX#/objectZ#

An Object which move itself, move always regarding its z-value:

ObjectScreenX# = ObjectXScreen# + ObjectMoveX#/objectZ#

Considering both and setting a first origin on the middle of the screen:

ObjectX# = ObjectX# + ObjectMoveX#/
ObjectScreenX# = ObjectX#/objectZ#
ObjectRealX# = ObjectXScreen# - CameraRealX#/objectZ#

Midimaster

(Posted 2013) [#4]

here is a executable sample:

Strict
Import mojo

Class Game Extends App
	
	Field CameraX#
	Field GrassX#, GrassZ#
	Field PlayerX#, PlayerZ#
	Field TreeX#, TreeZ#
	Field CarX#, CarZ#
	Field MountainX#, MountainZ#




	Method OnCreate%()
		SetUpdateRate 60

		GrassZ=0.5
		GrassX=-400*GrassZ

		PlayerZ=1
		PlayerX=0*PlayerZ

		TreeZ=3
		TreeX=-400*TreeZ

		CarZ=7
		CarX=-800*CarZ
		
		MountainZ=10
		MountainX=-400*MountainZ

		Return 0
	End	




	Method OnUpdate%()
		If KeyHit(KEY_ESCAPE) Then Error ""
		CameraX=CameraX+1
		PlayerX=PlayerX+1
		CarX=CarX+10
		Return 0
	End	




	Method OnRender%()
		Cls 100,200,255
		SetColor 255,255,222
		DrawOval  400,100,50,50
		DrawMountains
		DrawCar
		DrawTrees
		DrawPlayer
		DrawGrass 
		Return 0
	End	



	
	Method DrawGrass:Void()
		PushMatrix
			SetColor 0,255,0
			Translate RealX(GrassX, GrassZ),0
			For Local i%=0 To 12000 Step 40
				DrawRect i,300,10,100
			Next
		PopMatrix
	End


	
	Method DrawPlayer:Void()
		PushMatrix
			SetColor 222,222,0
			Translate RealX(PlayerX, PlayerZ),0
			DrawRect -40,220,80,150
			DrawOval -40,140,80,80
		PopMatrix
	End




	Method DrawTrees:Void()
		PushMatrix
			SetColor 0,155,0
			Translate RealX(TreeX, TreeZ),0
			For Local i%=0 To 3000 Step 200
				SetColor 55,0,0
				DrawRect i-20,180,40,150
				SetColor 0,155,0
				DrawOval i-80,40,160,160
			Next
		PopMatrix
	End




	Method DrawCar:Void()
		PushMatrix
			SetColor 222,0,0
			Translate RealX(CarX, CarZ),0
			DrawRect -25,240,50,20
		PopMatrix
	End



	Method DrawMountains:Void()
		PushMatrix
			SetColor 55,55,88
			Translate RealX(MountainX, MountainZ),0
			For Local i%=0 To 12000 Step 300
				DrawOval i,140,320,220
			Next
		PopMatrix
		SetColor 100,80,0
		DrawRect 0,250, DeviceWidth(), DeviceHeight()
	End



	
	Method RealX#(ObjectX#,ObjectZ#)
		ObjectX = ObjectX/ObjectZ
		ObjectX = ObjectX-CameraX/ObjectZ
		ObjectX = ObjectX+DeviceWidth()/2
		Return ObjectX
	End
End




Function Main%()
	New Game
	Return 0
End

In this sample you don't have to care about the resulting x value of the object. If you want to move something, it always can handle the x values as world coordinates like "meters". So if you add 1 to the player it moves 1 gamemeter/second and 10 to a car means it moves as 10gamemeters/sec. Watch the fast driving car coming with speed=10

If you add a second far away figur with the same speed like the player it will keep the same distance to the player.

have fun and happy coding...

Playniax

(Posted 2013) [#5]

The Ignition layer system could be something for you :)

http://www.playniax.com/share/demos/defenstar/MonkeyGame.html

It is possible to attach layer objects to the layer or have the layer render directly by using it's OnRender () method.

Code would look something like this.

Method OnCreate ()

   playfield = new iPlayfield
   playfield.AddLast (Engine)

   layer [0] = New Layer0
   layer [0].AddLast (playfield)
   layer [0].cameraSpeedX = .5

   layer [1] = New Layer1
   layer [1].AddLast (playfield)
   layer [1].cameraSpeedX = 1

End Method

Class Layer0 Extends iLayer

   Method OnRender ()
      * render stuff *
   End Method

End Class

Class Layer1 Extends iLayer

   Method OnRender ()
      * render stuff *
   End Method

End Class

Jesse

(Posted 2013) [#6]

if you are interested I can email you a link to the source for this game:

http://www.monkeycoder.co.nz/Community/topics.php?forum=1027&app_id=27

zoqfotpik

(Posted 2013) [#7]

Please do! pming you my addy... amazing how good the ground looks in that for so few parallax layers.