How would you implement layers?

Monkey Forums/Monkey Beginners/How would you implement layers?

Gianmichele

(Posted 2013) [#1]

Hi everyone,

I'm really new to Monkey, and going through the invaderjim's videos which I find fantastic! I'm an artist(animator) with a passion for coding, so I always try to organize my code with the visuals in mind.

I'd love to create a few helper classes to create a sort of layering system, where I can add objects that would react to these layers.

From what I got so far using the push/pop matrix is the way to go, so I can have a master layer that controls the "stage" with resolution indipendence, etc and then a list of layers that gets rendered within this master layer to each of which I associate all the objects that I want.

Am I on the right track with this, or is there a different/simpler method I could use?

Thanks a lot.

Gianmichele

ziggy

(Posted 2013) [#2]

If by layers you mean the Z-Order of rendering (place some images on top of others) I think your best option is to organize rendering order. You could create a class "stage" that has a collection of "layers" and each layer has a "render" method. Then call the "render" of each member of the "stage" class in the list order. That would be like rendering from back to front of a Z-Order.

Gianmichele

(Posted 2013) [#3]

Thanks, that's exactly what I'm trying to achieve as well as some helper functions to create layers and set them up.

ziggy

(Posted 2013) [#4]

This is a very very basic example on how this could be implemented. You can take it as a starting point to develop your own, if you like it:

Import mojo


#REM
	CORE CLASES:
#END

#Rem Monkeydoc
	This class is a Scene. It's a layer conainter.
#END
Class Scene
	#rem monkeydoc
		Append a layer to the top of the Z-Order
	#END
	Method AppendLayer(layer:Layer)
		layers.AddLast(layer)
	End
	
	
	#rem monkeydoc
		Remove a layer from the scene
	#END
	Method RemoveLayer(layer:Layer)
		layers.Remove(layer)
	End
	
	
	#rem monkeydoc
		Brings the specified layer to the front of the scene
	#END
	Method BringToFront(layer:Layer)
		layers.Remove(layer)
		layers.AddLast(layer)
	End
	
	#rem monkeydoc
		Sends the specified layer to the back of the scene
	#END
	Method SendToBack(layer:Layer)
		layers.Remove(layer)
		layers.AddFirst(layer)
	End
	#Rem monkeydoc
		This returns the number of layers in the scene
	#END
	Method Count:Int()
		Return layers.count
	End
	
	#Rem monkeydoc
		This returns an array that conatins all the layers in the scene, in their drawing order (from bottom to front)
	#END
	Method ToArray()
		Return layers.ToArray()
	End
	#Rem monkeydoc
		This object enumerator allows for ForEach iteration of the scene.
	#END
	Method ObjectEnumerator:list.Enumerator<Layer>()
		Return layers.ObjectEnumerator
	End
	
	#Rem monkeydoc
		This method removes all layers from the scene.
	#END
	Method ClearAll()
		layers.Clear()
	End
	
	#Rem monkeydoc
		This method calls the Update method for all layers of the scene.
	#END
	Method Update()
		For Local l:Layer = EachIn Self
			l.Update(Self)
		Next
	End
	
	#Rem monkeydoc
		This method renders all layers of the scene in their correct order (from bottom to front)
	#END
	Method Render()
		For Local l:Layer = EachIn Self
			l.Render(Self)
		Next
	End
	
	Private
	Field layers:= New List<Layer>
End

#Rem monkeydoc
	This is a basic layer class.
	Extend it to create your useful own layers that
#END
Class Layer

	#Rem monkeydoc
		This method will be called by the scene whenever this layer needs to be updated.
	#END
	Method Update(scene:Scene)
		
	End
	
	#Rem monkeydoc
		This method will be called by the scene whenever this layer needs to be rendered.
	#END
	Method Render(scene:Scene)
		
	End
	
End

#REM
	USAGE EXAMPLE :
#END
Function Main()
	New Game
End


#Rem
	This is a custom made layer that draws a semi transparent red rectangle.
#END
Class MyBackgroundLayer Extends Layer


	#rem monkeydoc
		This just renders the red semitransparent box:	
	#END
	Method Render(scene:Scene)
		SetColor(255, 0, 0)
		SetAlpha(0.5)
		DrawRect(10, 10, 400, 400)
		SetColor(255, 255, 255)
		SetAlpha(1)
	End
End


#Rem 
	This is another layer. this one draws a randomly colored circle that moves from left to right of the screen.
	When the circle reaches the DeviceWidth coordinate, the layer auto-removes itself from the scene.
#END

Class AnotherLayer Extends Layer

	'Those are the circle coordinates:
	Field xpos:Int = 0
	Field yPos:Int = Rnd(0, 400)
	
	'This is the RGB color of the circle:
	Field r:Int = Rnd(0, 255)
	Field g:Int = Rnd(0, 255)
	Field b:Int = Rnd(0, 255)
	
	
	#Rem
		this method will update the layer.
		In this case, it just increases the X xpos variable, and if it is over the DeviceWidth, the layer is removed from the scene.
	#END
	Method Update(scene:Scene)
		xpos += 1
		If xpos > DeviceWidth Then
			scene.RemoveLayer(Self)
		EndIf
	End
	
	#Rem
		This just renders the layer on the device
	#END
	Method Render(scene:Scene)
		SetColor(r, g, b)
		DrawCircle(xpos, yPos, 50)
	End
End


#Rem
	This is the basic App setup:
#END
Class Game Extends App

	Field scene:Scene
	Field backLayer:MyBackgroundLayer

	Method OnCreate()
		SetUpdateRate(60)
		
		scene = New Scene
		backLayer = New MyBackgroundLayer
		scene.AppendLayer(backLayer)
		scene.AppendLayer(New AnotherLayer)
	End
	
	Method OnUpdate()
		scene.Update
		
		If KeyHit(KEY_SPACE)
			scene.AppendLayer(New AnotherLayer)
		ElseIf KeyHit(KEY_UP)
			scene.BringToFront(backLayer)
		ElseIf KeyHit(KEY_DOWN)
			scene.SendToBack(backLayer)
		EndIf
	End
	
	Method OnRender()
		Cls(255, 255, 255)
		scene.Render
		SetColor(255, 255, 255)
		DrawText("SPACE-> New Layer, Up -> Bring backgroundlayer to front, DOWN -> send background layer to back", 0, 0)
	End
End

Notice that the 2 sample layers are just a square and a moving circle, but a layer could be whatever. I mean, a single layer could be used to draw lots of elements, no need to create a layer per element.

Gianmichele

(Posted 2014) [#5]

Thanks a lot. It is what I'm doing at the moment (more or less). It's fun getting into these things :)

Gianmichele

(Posted 2014) [#6]

On a side note, what if I want to transform these layers for parallax effects for example?Is this where the pop/push matrix come into play?

Jesse

(Posted 2014) [#7]

push/pop matrix is used for graphics manipulation such as scale, rotate and translate. It may be useful for what you are doing but not essential and not necessarily helpful.
if you want to scale an image use the push matrix and pop matrix on that specific image so the rest of the graphics do not get affected by the scaling. scaling and rotation work the same way.