Help with transformations....

Monkey Forums/Monkey Programming/Help with transformations....

NoOdle (Posted 2011) [#1]

I have never used transformations before so I figured it was time to pull my finger out and tackle it head on. Below is some code I wrote to test transformations. If you run it you will see what it does; Left and Right keys moves the layer and Space rotates the layer. This all works fine and I'm quite pleased with the results, the children all rotate and scale and translate with the parent. I would like to improve the transformations further. At the moment the layers rotate around the origin 0, 0 but I would like them to rotate around the anchorPointX, anchorPointY variable. These are in the range of 0 - 1 so 0.5 would be the centre. Layers have the size of the screen and an anchor point set as 0.5, so what I would like to achieve is all the children to rotate around the size * anchorPoint rather that the origin 0, 0. I have tried fiddling to see if I can achieve anything close to what I'm after but I'm stuck. If anyone can point me in the right direction or even modify the code to take into account a Nodes anchor point, this would be great! Import mojo Class Node Field positionX : Float Field positionY : Float Field scaleX : Float Field scaleY : Float Field sizeX : Float Field sizeY : Float Field rotation : Float Field anchorPointX : Float Field anchorPointY : Float Field r : Int Field g : Int Field b : Int Field parent : Node Field children : List <Node> 'new Method New() Self.positionX = 0 Self.positionY = 0 Self.scaleX = 1 Self.scaleY = 1 Self.sizeX = 0 Self.sizeY = 0 Self.rotation = 0 Self.r = 255 Self.g = 255 Self.b = 255 Self.anchorPointX = 0 Self.anchorPointY = 0 Self.parent = Null Self.children = Null End Method Method SetPosition( x : Float, y : Float ) Self.positionX = x Self.positionY = y End Method Method SetSize( x : Float, y : Float ) Self.sizeX = x Self.sizeY = y End Method Method SetScale( x : Float, y : Float ) Self.scaleX = x Self.scaleY = y End Method Method SetRotation( r : Float ) Self.rotation = r End Method Method SetColour( nr : Int, ng : Int, nb : Int ) Self.r = nr Self.g = ng Self.b = nb End Method 'anchor point range 0 - 1 Method SetAnchorPoint( x : Float, y : Float ) Self.anchorPointX = x Self.anchorPointY = y End Method 'adds a child Method AddChild( id : Node ) 'if no children create the list If Self.children = Null Self.children = New List <Node> Endif 'add the child Self.children.AddLast( id ) 'sets child parent id.parent = Self End Method 'override me Method Draw() End Method 'visits the node and renders Method Visit() 'draws self Self.Draw() PushMatrix() 'transform matrix Scale( Self.scaleX, Self.scaleY ) Rotate( Self.rotation ) Translate( Self.positionX, Self.positionY ) 'renders the children If Self.children <> Null For Local child : Node = Eachin Self.children child.Visit() Next Endif PopMatrix() End Method End Class Class Circle Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 End Method Function Create : Circle() Local this : Circle = New Circle() Return this End Function Method Draw() SetColor( Self.r, Self.g, Self.b ) DrawOval Self.positionX - (( Self.sizeX * Self.anchorPointX ) * Self.scaleX ), Self.positionY - (( Self.sizeY * Self.anchorPointY ) * Self.scaleY ), Self.sizeX * Self.scaleX, Self.sizeY * Self.scaleY End Method End Class Class Rectangle Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 End Method Function Create : Rectangle() Local this : Rectangle = New Rectangle() Return this End Function Method Draw() SetColor( Self.r, Self.g, Self.b ) DrawRect Self.positionX - (( Self.sizeX * Self.anchorPointX ) * Self.scaleX ), Self.positionY - (( Self.sizeY * Self.anchorPointY ) * Self.scaleY ), Self.sizeX * Self.scaleX, Self.sizeY * Self.scaleY End Method End Class Class Scene Extends Node Field backgroundR : Int Field backgroundG : Int Field backgroundB : Int Method SetBackgroundColour( r : Int, g : Int, b : Int ) Self.backgroundR = r Self.backgroundG = g Self.backgroundB = b End Method Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 Self.sizeX = DeviceWidth() Self.sizeY = DeviceHeight() End Method Method Draw() Cls( Self.backgroundR, Self.backgroundG, Self.backgroundB ) End Method End Class Class Layer Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 Self.sizeX = DeviceWidth() Self.sizeY = DeviceHeight() End Method End Class Class Director Global currentScene : Scene Function SetScene( scene : Scene ) currentScene = scene End Function Function DrawScene() Director.currentScene.Visit() End Function End Class Class MyApp Extends App Field myScene : Scene Field myLayer : Layer Method OnCreate() SetUpdateRate 60 'creates a scene myScene = New Scene() myScene.SetBackgroundColour( 0, 0, 0 ) 'set director to draw scene Director.SetScene( myScene ) 'creates a layer myLayer = New Layer() myScene.AddChild( myLayer ) 'creates a background Local myRectangle : Rectangle = New Rectangle() myRectangle.SetColour( 255, 0, 255 ) myRectangle.SetSize( DeviceWidth(), DeviceHeight()) myRectangle.SetPosition( DeviceWidth() / 2.0, DeviceHeight() / 2.0 ) myLayer.AddChild( myRectangle ) 'creates a few circles to look at Local myCircle : Circle myCircle = Circle.Create() myCircle.SetPosition( 50, 50 ) myCircle.SetSize( 100, 100 ) myCircle.SetColour( 255, 0, 0 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( 25, DeviceHeight() - 25 ) myCircle.SetSize( 50, 50 ) myCircle.SetColour( 0, 255, 0 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( DeviceWidth() - 25, 25 ) myCircle.SetSize( 50, 50 ) myCircle.SetColour( 0, 0, 255 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( DeviceWidth() - 50, DeviceHeight() - 50 ) myCircle.SetSize( 100, 100 ) myCircle.SetColour( 255, 255, 0 ) myLayer.AddChild( myCircle ) End Method Method OnUpdate() If KeyDown( KEY_LEFT ) myLayer.positionX = myLayer.positionX - 10 Endif If KeyDown( KEY_RIGHT ) myLayer.positionX = myLayer.positionX + 10 Endif If KeyDown( KEY_MINUS ) myLayer.scaleX = myLayer.scaleX + 0.1 myLayer.scaleY = myLayer.scaleY + 0.1 Endif If KeyDown( KEY_EQUALS ) myLayer.scaleX = myLayer.scaleX - 0.1 myLayer.scaleY = myLayer.scaleY - 0.1 Endif If KeyDown( KEY_SPACE ) myLayer.rotation = myLayer.rotation + 10 Endif End Method Method OnRender() 'draws scene Director.DrawScene() End Method End Class Function Main() New MyApp() End Function Thanks guys!

NoOdle (Posted 2011) [#2]

Urgh, something is definitely not right with the code, I added in some extra controls to make sure that the parent - child relationship was working ok. As you can see by running the code below and using w/a/s/d to move the circle and z/x to rotate it, the rectangle does not orbit the circle as expected. Import mojo Class Node Field positionX : Float Field positionY : Float Field scaleX : Float Field scaleY : Float Field sizeX : Float Field sizeY : Float Field rotation : Float Field anchorPointX : Float Field anchorPointY : Float Field r : Int Field g : Int Field b : Int Field parent : Node Field children : List <Node> 'new Method New() Self.positionX = 0 Self.positionY = 0 Self.scaleX = 1 Self.scaleY = 1 Self.sizeX = 0 Self.sizeY = 0 Self.rotation = 0 Self.r = 255 Self.g = 255 Self.b = 255 Self.anchorPointX = 0 Self.anchorPointY = 0 Self.parent = Null Self.children = Null End Method Method SetPosition( x : Float, y : Float ) Self.positionX = x Self.positionY = y End Method Method SetSize( x : Float, y : Float ) Self.sizeX = x Self.sizeY = y End Method Method SetScale( x : Float, y : Float ) Self.scaleX = x Self.scaleY = y End Method Method SetRotation( r : Float ) Self.rotation = r End Method Method SetColour( nr : Int, ng : Int, nb : Int ) Self.r = nr Self.g = ng Self.b = nb End Method 'anchor point range 0 - 1 Method SetAnchorPoint( x : Float, y : Float ) Self.anchorPointX = x Self.anchorPointY = y End Method 'adds a child Method AddChild( id : Node ) 'if no children create the list If Self.children = Null Self.children = New List <Node> Endif 'add the child Self.children.AddLast( id ) 'sets child parent id.parent = Self End Method 'override me Method Draw() End Method 'visits the node and renders Method Visit() 'draws self Self.Draw() PushMatrix() 'transform matrix Scale( Self.scaleX, Self.scaleY ) Rotate( Self.rotation ) Translate( Self.positionX, Self.positionY ) 'renders the children If Self.children <> Null For Local child : Node = Eachin Self.children child.Visit() Next Endif PopMatrix() End Method End Class Class Circle Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 End Method Function Create : Circle() Local this : Circle = New Circle() Return this End Function Method Draw() SetColor( Self.r, Self.g, Self.b ) DrawOval Self.positionX - (( Self.sizeX * Self.anchorPointX ) * Self.scaleX ), Self.positionY - (( Self.sizeY * Self.anchorPointY ) * Self.scaleY ), Self.sizeX * Self.scaleX, Self.sizeY * Self.scaleY End Method End Class Class Rectangle Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 End Method Function Create : Rectangle() Local this : Rectangle = New Rectangle() Return this End Function Method Draw() SetColor( Self.r, Self.g, Self.b ) DrawRect Self.positionX - (( Self.sizeX * Self.anchorPointX ) * Self.scaleX ), Self.positionY - (( Self.sizeY * Self.anchorPointY ) * Self.scaleY ), Self.sizeX * Self.scaleX, Self.sizeY * Self.scaleY End Method End Class Class Scene Extends Node Field backgroundR : Int Field backgroundG : Int Field backgroundB : Int Method SetBackgroundColour( r : Int, g : Int, b : Int ) Self.backgroundR = r Self.backgroundG = g Self.backgroundB = b End Method Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 Self.sizeX = DeviceWidth() Self.sizeY = DeviceHeight() End Method Method Draw() Cls( Self.backgroundR, Self.backgroundG, Self.backgroundB ) End Method End Class Class Layer Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 Self.sizeX = DeviceWidth() Self.sizeY = DeviceHeight() End Method End Class Class Director Global currentScene : Scene Function SetScene( scene : Scene ) currentScene = scene End Function Function DrawScene() Director.currentScene.Visit() End Function End Class Class MyApp Extends App Field myScene : Scene Field myLayer : Layer Field myObject : Circle Method OnCreate() SetUpdateRate 60 'creates a scene myScene = New Scene() myScene.SetBackgroundColour( 0, 0, 0 ) 'set director to draw scene Director.SetScene( myScene ) 'creates a layer myLayer = New Layer() myScene.AddChild( myLayer ) 'creates a background Local myRectangle : Rectangle = New Rectangle() myRectangle.SetColour( 255, 0, 255 ) myRectangle.SetSize( DeviceWidth(), DeviceHeight()) myRectangle.SetPosition( DeviceWidth() / 2.0, DeviceHeight() / 2.0 ) myLayer.AddChild( myRectangle ) 'creates a few circles to look at Local myCircle : Circle myCircle = Circle.Create() myCircle.SetPosition( 50, 50 ) myCircle.SetSize( 100, 100 ) myCircle.SetColour( 255, 0, 0 ) myLayer.AddChild( myCircle ) myObject = myCircle 'adds a rectangle as a child to the circle myRectangle = Rectangle.Create() myRectangle.SetPosition( 100, 100 ) myRectangle.SetSize( 10, 10 ) myRectangle.SetColour( 255, 255, 0 ) myObject.AddChild( myRectangle ) myCircle = Circle.Create() myCircle.SetPosition( 25, DeviceHeight() - 25 ) myCircle.SetSize( 50, 50 ) myCircle.SetColour( 0, 255, 0 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( DeviceWidth() - 25, 25 ) myCircle.SetSize( 50, 50 ) myCircle.SetColour( 0, 0, 255 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( DeviceWidth() - 50, DeviceHeight() - 50 ) myCircle.SetSize( 100, 100 ) myCircle.SetColour( 255, 255, 0 ) myLayer.AddChild( myCircle ) End Method Method OnUpdate() If KeyDown( KEY_LEFT ) myLayer.positionX = myLayer.positionX - 10 Endif If KeyDown( KEY_RIGHT ) myLayer.positionX = myLayer.positionX + 10 Endif If KeyDown( KEY_MINUS ) myLayer.scaleX = myLayer.scaleX + 0.1 myLayer.scaleY = myLayer.scaleY + 0.1 Endif If KeyDown( KEY_EQUALS ) myLayer.scaleX = myLayer.scaleX - 0.1 myLayer.scaleY = myLayer.scaleY - 0.1 Endif If KeyDown( KEY_SPACE ) myLayer.rotation = myLayer.rotation + 10 Endif If KeyDown( KEY_A ) myObject.positionX = myObject.positionX - 1 Endif If KeyDown( KEY_D ) myObject.positionX = myObject.positionX + 1 Endif If KeyDown( KEY_W ) myObject.positionY = myObject.positionY - 1 Endif If KeyDown( KEY_S ) myObject.positionY = myObject.positionY + 1 Endif If KeyDown( KEY_Z ) myObject.rotation = myObject.rotation - 1 Endif If KeyDown( KEY_X ) myObject.rotation = myObject.rotation + 1 Endif End Method Method OnRender() 'draws scene Director.DrawScene() End Method End Class Function Main() New MyApp() End Function

NoOdle (Posted 2011) [#3]

Ok ignore the previous post, It seems the order of transformation was wrong, now using TRS and the orbiting is now working as expected. Still the original problem of rotating around the size * anchorPoint. More fiddling required.... can anyone see what I would need to change? Import mojo Class Node Field positionX : Float Field positionY : Float Field scaleX : Float Field scaleY : Float Field sizeX : Float Field sizeY : Float Field rotation : Float Field anchorPointX : Float Field anchorPointY : Float Field r : Int Field g : Int Field b : Int Field parent : Node Field children : List <Node> 'new Method New() Self.positionX = 0 Self.positionY = 0 Self.scaleX = 1 Self.scaleY = 1 Self.sizeX = 0 Self.sizeY = 0 Self.rotation = 0 Self.r = 255 Self.g = 255 Self.b = 255 Self.anchorPointX = 0 Self.anchorPointY = 0 Self.parent = Null Self.children = Null End Method Method SetPosition( x : Float, y : Float ) Self.positionX = x Self.positionY = y End Method Method SetSize( x : Float, y : Float ) Self.sizeX = x Self.sizeY = y End Method Method SetScale( x : Float, y : Float ) Self.scaleX = x Self.scaleY = y End Method Method SetRotation( r : Float ) Self.rotation = r End Method Method SetColour( nr : Int, ng : Int, nb : Int ) Self.r = nr Self.g = ng Self.b = nb End Method 'anchor point range 0 - 1 Method SetAnchorPoint( x : Float, y : Float ) Self.anchorPointX = x Self.anchorPointY = y End Method 'adds a child Method AddChild( id : Node ) 'if no children create the list If Self.children = Null Self.children = New List <Node> Endif 'add the child Self.children.AddLast( id ) 'sets child parent id.parent = Self End Method 'override me Method Draw() End Method 'visits the node and renders Method Visit() 'draws self Self.Draw() PushMatrix() 'transform matrix Translate( Self.positionX, Self.positionY ) Rotate( Self.rotation ) Scale( Self.scaleX, Self.scaleY ) 'renders the children If Self.children <> Null For Local child : Node = Eachin Self.children child.Visit() Next Endif PopMatrix() End Method End Class Class Circle Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 End Method Function Create : Circle() Local this : Circle = New Circle() Return this End Function Method Draw() SetColor( Self.r, Self.g, Self.b ) DrawOval Self.positionX - (( Self.sizeX * Self.anchorPointX ) * Self.scaleX ), Self.positionY - (( Self.sizeY * Self.anchorPointY ) * Self.scaleY ), Self.sizeX * Self.scaleX, Self.sizeY * Self.scaleY End Method End Class Class Rectangle Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 End Method Function Create : Rectangle() Local this : Rectangle = New Rectangle() Return this End Function Method Draw() SetColor( Self.r, Self.g, Self.b ) DrawRect Self.positionX - (( Self.sizeX * Self.anchorPointX ) * Self.scaleX ), Self.positionY - (( Self.sizeY * Self.anchorPointY ) * Self.scaleY ), Self.sizeX * Self.scaleX, Self.sizeY * Self.scaleY End Method End Class Class Scene Extends Node Field backgroundR : Int Field backgroundG : Int Field backgroundB : Int Method SetBackgroundColour( r : Int, g : Int, b : Int ) Self.backgroundR = r Self.backgroundG = g Self.backgroundB = b End Method Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 Self.sizeX = DeviceWidth() Self.sizeY = DeviceHeight() End Method Method Draw() Cls( Self.backgroundR, Self.backgroundG, Self.backgroundB ) End Method End Class Class Layer Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 Self.sizeX = DeviceWidth() Self.sizeY = DeviceHeight() End Method End Class Class Director Global currentScene : Scene Function SetScene( scene : Scene ) currentScene = scene End Function Function DrawScene() Director.currentScene.Visit() End Function End Class Class MyApp Extends App Field myScene : Scene Field myLayer : Layer Field myObject : Circle Method OnCreate() SetUpdateRate 60 'creates a scene myScene = New Scene() myScene.SetBackgroundColour( 0, 0, 0 ) 'set director to draw scene Director.SetScene( myScene ) 'creates a layer myLayer = New Layer() myScene.AddChild( myLayer ) 'creates a background Local myRectangle : Rectangle = New Rectangle() myRectangle.SetColour( 255, 0, 255 ) myRectangle.SetSize( DeviceWidth(), DeviceHeight()) myRectangle.SetPosition( DeviceWidth() / 2.0, DeviceHeight() / 2.0 ) myLayer.AddChild( myRectangle ) 'creates a few circles to look at Local myCircle : Circle myCircle = Circle.Create() myCircle.SetPosition( 50, 50 ) myCircle.SetSize( 100, 100 ) myCircle.SetColour( 255, 0, 0 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( 25, DeviceHeight() - 25 ) myCircle.SetSize( 50, 50 ) myCircle.SetColour( 0, 255, 0 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( DeviceWidth() - 25, 25 ) myCircle.SetSize( 50, 50 ) myCircle.SetColour( 0, 0, 255 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( DeviceWidth() - 50, DeviceHeight() - 50 ) myCircle.SetSize( 100, 100 ) myCircle.SetColour( 255, 255, 0 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( DeviceWidth() / 2, DeviceHeight() / 2 ) myCircle.SetSize( 100, 100 ) myCircle.SetColour( 255, 0, 0 ) myLayer.AddChild( myCircle ) myObject = myCircle 'adds a rectangle as a child to the circle myRectangle = Rectangle.Create() myRectangle.SetPosition( 100, 100 ) myRectangle.SetSize( 10, 10 ) myRectangle.SetColour( 255, 255, 0 ) myObject.AddChild( myRectangle ) End Method Method OnUpdate() If KeyDown( KEY_LEFT ) myLayer.positionX = myLayer.positionX - 10 Endif If KeyDown( KEY_RIGHT ) myLayer.positionX = myLayer.positionX + 10 Endif If KeyDown( KEY_MINUS ) myLayer.scaleX = myLayer.scaleX + 0.1 myLayer.scaleY = myLayer.scaleY + 0.1 Endif If KeyDown( KEY_EQUALS ) myLayer.scaleX = myLayer.scaleX - 0.1 myLayer.scaleY = myLayer.scaleY - 0.1 Endif If KeyDown( KEY_SPACE ) myLayer.rotation = myLayer.rotation + 10 Endif If KeyDown( KEY_A ) myObject.positionX = myObject.positionX - 1 Endif If KeyDown( KEY_D ) myObject.positionX = myObject.positionX + 1 Endif If KeyDown( KEY_W ) myObject.positionY = myObject.positionY - 1 Endif If KeyDown( KEY_S ) myObject.positionY = myObject.positionY + 1 Endif If KeyDown( KEY_Z ) myObject.rotation = myObject.rotation - 1 Endif If KeyDown( KEY_X ) myObject.rotation = myObject.rotation + 1 Endif End Method Method OnRender() 'draws scene Director.DrawScene() End Method End Class Function Main() New MyApp() End Function

NoOdle (Posted 2011) [#4]

Well it took a while but I think I've cracked it. For anyone that is interested below is the code. up / down / left / right moves layer + / - scales layer < / > rotates the layer w / a / s / d moves test object + children 1 / 2 scales test object + children z / x rotates test object + children I would like to thank Warpy, his transform_mouse example in bananas helped me to understand what I was doing wrong! Import mojo Class Node Field positionX : Float Field positionY : Float Field scaleX : Float Field scaleY : Float Field sizeX : Float Field sizeY : Float Field rotation : Float Field anchorPointX : Float Field anchorPointY : Float Field anchorPointRelative : Bool Field r : Int Field g : Int Field b : Int Field parent : Node Field children : List <Node> 'new Method New() Self.positionX = 0 Self.positionY = 0 Self.scaleX = 1 Self.scaleY = 1 Self.sizeX = 0 Self.sizeY = 0 Self.rotation = 0 Self.r = 255 Self.g = 255 Self.b = 255 Self.anchorPointX = 0 Self.anchorPointY = 0 Self.anchorPointRelative = False Self.parent = Null Self.children = Null End Method Method SetPosition( x : Float, y : Float ) Self.positionX = x Self.positionY = y End Method Method SetSize( x : Float, y : Float ) Self.sizeX = x Self.sizeY = y End Method Method SetScale( x : Float, y : Float ) Self.scaleX = x Self.scaleY = y End Method Method SetRotation( r : Float ) Self.rotation = r End Method Method SetColour( nr : Int, ng : Int, nb : Int ) Self.r = nr Self.g = ng Self.b = nb End Method 'anchor point range 0 - 1 Method SetAnchorPoint( x : Float, y : Float ) Self.anchorPointX = x Self.anchorPointY = y End Method 'adds a child Method AddChild( id : Node ) 'if no children create the list If Self.children = Null Self.children = New List <Node> Endif 'add the child Self.children.AddLast( id ) 'sets child parent id.parent = Self End Method 'override me Method Draw() End Method 'visits the node and renders Method Visit() 'push matrix onto stack PushMatrix() 'transform matrix Local dw : Float = Self.sizeX * Self.anchorPointX Local dh : Float = Self.sizeY * Self.anchorPointY 'if translation is relative to anchor If Self.anchorPointRelative = True 'centre transformation to the anchor point Translate( dw, dh ) Rotate( Self.rotation ) Scale( Self.scaleX, Self.scaleY ) 'reset traslation Translate( -dw, -dh ) 'translate to currenr position Translate( Self.positionX, Self.positionY ) Else 'centre transformation to parent Translate( Self.positionX, Self.positionY ) Rotate( Self.rotation ) Scale( Self.scaleX, Self.scaleY ) Endif 'draws self Self.Draw() 'renders the children If Self.children <> Null For Local child : Node = Eachin Self.children child.Visit() Next Endif 'restore matrix PopMatrix() End Method End Class Class Circle Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 End Method Function Create : Circle() Local this : Circle = New Circle() Return this End Function Method Draw() SetColor( Self.r, Self.g, Self.b ) DrawOval -( Self.sizeX * Self.anchorPointX ), -( Self.sizeY * Self.anchorPointY ), Self.sizeX, Self.sizeY End Method End Class Class Rectangle Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 End Method Function Create : Rectangle() Local this : Rectangle = New Rectangle() Return this End Function Method Draw() SetColor( Self.r, Self.g, Self.b ) DrawRect -( Self.sizeX * Self.anchorPointX ), -( Self.sizeY * Self.anchorPointY ), Self.sizeX, Self.sizeY End Method End Class Class Scene Extends Node Field backgroundR : Int Field backgroundG : Int Field backgroundB : Int Method SetBackgroundColour( r : Int, g : Int, b : Int ) Self.backgroundR = r Self.backgroundG = g Self.backgroundB = b End Method Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 Self.anchorPointRelative = True Self.sizeX = DeviceWidth() Self.sizeY = DeviceHeight() End Method Method Draw() Cls( Self.backgroundR, Self.backgroundG, Self.backgroundB ) End Method End Class Class Layer Extends Node Method New() Super.New() Self.anchorPointX = 0.5 Self.anchorPointY = 0.5 Self.anchorPointRelative = True Self.sizeX = DeviceWidth() Self.sizeY = DeviceHeight() End Method End Class Class Director Global currentScene : Scene Function SetScene( scene : Scene ) currentScene = scene End Function Function DrawScene() Director.currentScene.Visit() End Function End Class Class MyApp Extends App Field myScene : Scene Field myLayer : Layer Field myObject : Circle Method OnCreate() SetUpdateRate 60 'creates a scene myScene = New Scene() myScene.SetBackgroundColour( 0, 0, 0 ) 'set director to draw scene Director.SetScene( myScene ) 'creates a layer myLayer = New Layer() myScene.AddChild( myLayer ) 'creates a background Local myRectangle : Rectangle = New Rectangle() myRectangle.SetColour( 255, 0, 255 ) myRectangle.SetSize( DeviceWidth(), DeviceHeight()) myRectangle.SetPosition( DeviceWidth() / 2.0, DeviceHeight() / 2.0 ) myLayer.AddChild( myRectangle ) 'creates a few circles to look at Local myCircle : Circle myCircle = Circle.Create() myCircle.SetPosition( 50, 50 ) myCircle.SetSize( 100, 100 ) myCircle.SetColour( 255, 0, 0 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( 25, DeviceHeight() - 25 ) myCircle.SetSize( 50, 50 ) myCircle.SetColour( 0, 255, 0 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( DeviceWidth() - 25, 25 ) myCircle.SetSize( 50, 50 ) myCircle.SetColour( 0, 0, 255 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( DeviceWidth() - 50, DeviceHeight() - 50 ) myCircle.SetSize( 100, 100 ) myCircle.SetColour( 255, 255, 0 ) myLayer.AddChild( myCircle ) myCircle = Circle.Create() myCircle.SetPosition( DeviceWidth() / 2, DeviceHeight() / 2 ) myCircle.SetSize( 100, 100 ) myCircle.SetColour( 255, 0, 0 ) myLayer.AddChild( myCircle ) myObject = myCircle 'adds a rectangle as a child to the circle myRectangle = Rectangle.Create() myRectangle.SetPosition( 100, 100 ) myRectangle.SetSize( 10, 10 ) myRectangle.SetColour( 255, 255, 0 ) myObject.AddChild( myRectangle ) End Method Method OnUpdate() 'moves the layer with arrow keys ( up / down / left / right ) If KeyDown( KEY_LEFT ) myLayer.positionX = myLayer.positionX - 10 Endif If KeyDown( KEY_RIGHT ) myLayer.positionX = myLayer.positionX + 10 Endif If KeyDown( KEY_UP) myLayer.positionY = myLayer.positionY - 10 Endif If KeyDown( KEY_DOWN ) myLayer.positionY = myLayer.positionY + 10 Endif 'scales layer with ( + / - ) keys If KeyDown( KEY_MINUS ) myLayer.scaleX = myLayer.scaleX + 0.1 myLayer.scaleY = myLayer.scaleY + 0.1 Endif If KeyDown( KEY_EQUALS ) myLayer.scaleX = myLayer.scaleX - 0.1 myLayer.scaleY = myLayer.scaleY - 0.1 Endif 'rotates the layer with ( < / > ) keys (, / .) If KeyDown( KEY_COMMA ) myLayer.rotation = myLayer.rotation + 1 Endif If KeyDown( KEY_PERIOD ) myLayer.rotation = myLayer.rotation - 1 Endif 'moves test object with ( w / a / s / d ) keys If KeyDown( KEY_A ) myObject.positionX = myObject.positionX - 1 Endif If KeyDown( KEY_D ) myObject.positionX = myObject.positionX + 1 Endif If KeyDown( KEY_W ) myObject.positionY = myObject.positionY - 1 Endif If KeyDown( KEY_S ) myObject.positionY = myObject.positionY + 1 Endif 'rotates test object with ( z / x ) keys If KeyDown( KEY_Z ) myObject.rotation = myObject.rotation - 1 Endif If KeyDown( KEY_X ) myObject.rotation = myObject.rotation + 1 Endif 'scales test object with ( 1 / 2 ) keys If KeyDown( KEY_1 ) myObject.scaleX = myObject.scaleX + 0.1 myObject.scaleY = myObject.scaleY + 0.1 Endif If KeyDown( KEY_2 ) myObject.scaleX = myObject.scaleX - 0.1 myObject.scaleY = myObject.scaleY - 0.1 Endif End Method Method OnRender() 'draws scene Director.DrawScene() End Method End Class Function Main() New MyApp() End Function

AdamRedwoods (Posted 2011) [#5]

More reference for the Transform command: http://www.monkeycoder.co.nz/Community/posts.php?topic=1098&

NoOdle (Posted 2011) [#6]

Aha thanks Adam, I was struggling to figure that out from the documentation! :)

Gianmichele (Posted 2014) [#7]

WOW Thanks! This is exactly what I was looking for :)