Rotation Demo Issues...

Monkey Forums/Monkey Programming/Rotation Demo Issues...

Neuro (Posted 2011) [#1]

Is anyone else having issues running the rotation sample demos (Rotation sickness, and Jump rotate)? It appears to run extremely slow, and have color issues when running on HTML 5 browsers. I've tested this on Firefox 4.0, IE 9.0, Chrome 12.0, and Safari browsers on my MacBook Pro and multiple Window 7 laptops all with the same results. Also tested an Open GL, and IOS version with the same results too. The demos seem to stop working right at around Monkey version 3.9. Any ideas?

slenkar (Posted 2011) [#2]

they use setcolor which was enabled for html5 recently , it is slow on html5, disable it if you want to speed things up (by removing it from the code) html5 may be the slowest target but it is fast to compile and crashes in a way that is easier to debug.

DruggedBunny (Posted 2011) [#3]

Yeah, SetColor screwed them up. I'd swear I updated them for future use (on the BRL testers forum), but since the Blitz site is down I can't prove it! I must have done something wrong originally, as the demos fail to set things back to SetColor 255, 255, 255 before drawing the rocket, etc. If you put that before the For/Next loop in each case, it should sort it (from memory).

Neuro (Posted 2011) [#4]

Thanks guys, but is it only suppose to slow down in HTML 5? Cause the same code also crawls when running on OGL or IOS too.

DruggedBunny (Posted 2011) [#5]

Strange, I wouldn't have thought it affected OpenGL, but I can't test this right now. (I also don't have an IOS device.) The code was setting the colour to green, drawing the 'ground', then drawing the blocks in a For/Next loop. Because SetColor had no effect on images before, it was fine. After the change, it's manually colouring each image then drawing it. Putting a SetColor 255, 255, 255 before the For/Next loop fixes this, as images' colours are not manually changed with 255, 255, 255, so it should run full-speed again. Here's rotationsickness.monkey fixed: ' ----------------------------------------------------------------------------- ' Rotation around player. Confusing, disorientating and, well, sickening... ' ----------------------------------------------------------------------------- ' WARNING: MAY INDUCE MOTION SICKNESS! Not actually kidding... ' This looks and feels 'wrong' while moving since the rotation point is also ' constantly moving, but it's doing what it's meant to do. ' Basic imports for most purposes... Import mojo ' ----------------------------------------------------------------------------- ' DISPLAY ROTATION FUNCTIONS... ' ----------------------------------------------------------------------------- ' ----------------------------------------------------------------------------- ' RotateDisplay: rotates view around x, y by angle... ' ----------------------------------------------------------------------------- Function RotateDisplay (x:Float, y:Float, angle:Float) PushMatrix ' Store current rotation, scale, etc Translate x, y ' Shift origin across to here Rotate angle ' Rotate around origin Translate -x, -y ' Shift origin back where it was End ' ----------------------------------------------------------------------------- ' ResetDisplay: resets view back to normal... ' ----------------------------------------------------------------------------- Function ResetDisplay () PopMatrix ' Restore rotation, scale, etc End Class Block Field x:Float Field y:Float Field image:Image End ' App class... Class Game Extends App Field player:Image Field block:Image Field px:Float Field py:Float Field pxs:Float Field pys:Float Field ang:Float Field angspeed:Float Field rotatemode:Int Field blocklist:List <Block> Method OnCreate () ' Load media and SET UPDATE RATE here... px = DeviceWidth * 0.5 py = DeviceHeight * 0.5 player = LoadCenteredImage ("player.png") block = LoadCenteredImage ("block.png") blocklist = New List <Block> For Local loop:Int = 1 To 100 Local temp:Block = New Block temp.image = block temp.x = Rnd (-DeviceWidth, DeviceWidth) temp.y = Rnd (-DeviceHeight, DeviceHeight) blocklist.AddLast temp Next SetUpdateRate 60 rotatemode = 1 End Method OnUpdate () ' Take input and update game here... If KeyDown (KEY_LEFT) Then pxs = pxs - 0.1 If KeyDown (KEY_RIGHT) Then pxs = pxs + 0.1 If KeyDown (KEY_UP) Then pys = pys - 0.1 If KeyDown (KEY_DOWN) Then pys = pys + 0.1 If KeyDown (KEY_Z) Then angspeed = angspeed - 0.01 If KeyDown (KEY_X) Then angspeed = angspeed + 0.01 If KeyDown (KEY_SPACE) pxs = 0 pys = 0 Endif If KeyDown (KEY_ENTER) Then angspeed = 0 If KeyHit (KEY_R) rotatemode = rotatemode + 1 If rotatemode > 4 Then rotatemode = 1 px = DeviceWidth * 0.5 py = DeviceHeight * 0.5 pxs = 0 pys = 0 ang = 0 angspeed = 0 Endif px = px + pxs py = py + pys If px < 0 pxs = 0 px = 0 Else If px > DeviceWidth pxs = 0 px = DeviceWidth - 1 Endif Endif If py < 0 pys = 0 py = 0 Else If py > DeviceHeight pys = 0 py = DeviceHeight - 1 Endif Endif ang = ang + angspeed ' ang = ang Mod 360.0 ' Mod returning Int! End Method OnRender () ' Draw frame here... Cls 64, 96, 128 Select rotatemode Case 1 RotateDisplay px, py, ang SetColor 0, 64, 0 DrawRect -DeviceWidth, DeviceHeight * 0.5, DeviceWidth * 4.0, DeviceHeight * 3.0 ' Just making sure... SetColor 255, 255, 255 For Local b:Block = Eachin blocklist DrawImage b.image, b.x, b.y, 0, 0.25, 0.25 Next ResetDisplay ' Display set to normal so player drawn normally, with control movements ' relative to screen as normal... DrawImage player, px, py, 0, 0.25, 0.25 Case 2 RotateDisplay px, py, ang SetColor 0, 64, 0 DrawRect -DeviceWidth, DeviceHeight * 0.5, DeviceWidth * 4.0, DeviceHeight * 3.0 ' Just making sure... SetColor 255, 255, 255 For Local b:Block = Eachin blocklist DrawImage b.image, b.x, b.y, 0, 0.25, 0.25 Next ' Display still set to rotated state, so player movements are affected by rotation, ' ie. relative to background... DrawImage player, px, py, 0, 0.25, 0.25 ResetDisplay Case 3 RotateDisplay DeviceWidth * 0.5, DeviceHeight * 0.5, ang SetColor 0, 64, 0 DrawRect -DeviceWidth, DeviceHeight * 0.5, DeviceWidth * 4.0, DeviceHeight * 3.0 ' Just making sure... SetColor 255, 255, 255 For Local b:Block = Eachin blocklist DrawImage b.image, b.x, b.y, 0, 0.25, 0.25 Next ResetDisplay DrawImage player, px, py, 0, 0.25, 0.25 Case 4 RotateDisplay DeviceWidth * 0.5, DeviceHeight * 0.5, ang SetColor 0, 64, 0 DrawRect -DeviceWidth, DeviceHeight * 0.5, DeviceWidth * 4.0, DeviceHeight * 3.0 ' Just making sure... SetColor 255, 255, 255 For Local b:Block = Eachin blocklist DrawImage b.image, b.x, b.y, 0, 0.25, 0.25 Next DrawImage player, px, py, 0, 0.25, 0.25 ResetDisplay End DrawText "[CURSORS - move player] [SPACE - stop player]", 20, 20 DrawText "[Z/X - rotate around player] [ENTER - stop rotation]", 20, 40 Local mode$ = "" Select rotatemode Case 1 mode = "Rotate around player (controls relative to screen)" Case 2 mode = "Rotate with player (controls relative to background)" Case 3 mode = "Rotate around centre (controls relative to screen)" Case 4 mode = "Rotate around centre (controls relative to background)" End DrawText "[R - change rotation mode: " + mode, 20, 60 End End ' Main function... Function Main () New Game End ' Set image's handle to centre... Function MidHandle (image:Image) image.SetHandle image.Width () * 0.5, image.Height () * 0.5 End ' Load an image with handle already centered (uses MidHandle function above)... Function LoadCenteredImage:Image (image:String) Local img:Image = LoadImage (image) MidHandle img Return img End ... and here's jump_rotate.monkey: ' ----------------------------------------------------------------------------- ' Rotate background around player... ' ----------------------------------------------------------------------------- ' Demo 2. Quick hack showing rotation while jumping. Worst jumping code ever, ' hard-coded rotation speed for jump height, and very buggy... but that's not ' the point! It rotates correctly around the player, that's all. ' Move using LEFT/RIGHT and hit SPACE to jump really badly... ' ----------------------------------------------------------------------------- ' Basic imports for most purposes... ' ----------------------------------------------------------------------------- Import mojo ' ----------------------------------------------------------------------------- ' DISPLAY ROTATION FUNCTIONS... ' ----------------------------------------------------------------------------- ' ----------------------------------------------------------------------------- ' RotateDisplay: rotates view around x, y by angle... ' ----------------------------------------------------------------------------- Function RotateDisplay (X:Float, Y:Float, angle:Float) PushMatrix ' Store current rotation, scale, etc Translate X, Y ' Shift origin across to here Rotate angle ' Rotate around origin Translate -X, -Y ' Shift origin back where it was End ' ----------------------------------------------------------------------------- ' ResetDisplay: resets view back to normal... ' ----------------------------------------------------------------------------- Function ResetDisplay () PopMatrix ' Restore rotation, scale, etc End ' ----------------------------------------------------------------------------- ' USAGE... ' ----------------------------------------------------------------------------- ' Step 1) In OnRender, call RotateDisplay with x/y position to rotate around ' and the angle at which to draw... ' Step 2) DRAW BACKGROUND STUFF HERE! ' Step 3) Call ResetDisplay and continue drawing as normal... ' See OnRender code for example... ' ----------------------------------------------------------------------------- ' TOP TIP! You can use this call to just rotate around screen centre... ' ----------------------------------------------------------------------------- ' RotateDisplay DeviceWidth * 0.5, DeviceHeight * 0.5, ang Class Block Field X:Float Field Y:Float Field Image:Image End ' App class... Class Game Extends App Field gravity:Float = 0.05 Field player:Image Field block:Image Field px:Float Field py:Float Field pxs:Float Field pys:Float Field groundy:Float Field ang:Float Field angspeed:Float Field rotating:Bool Field blocklist:List <Block> Method OnCreate () ' Load media and SET UPDATE RATE here... ' px = DeviceWidth * 0.5 py = DeviceHeight * 0.5 player = LoadCenteredImage ("player.png") block = LoadCenteredImage ("block.png") blocklist = New List <Block> For Local loop:Int = 1 To 100 Local temp:Block = New Block temp.Image = block temp.X = Rnd (-DeviceWidth, DeviceWidth) temp.Y = Rnd (-DeviceHeight, DeviceHeight) blocklist.AddLast temp Next groundy = 300 + (player.Height * 0.5) * 0.25 SetUpdateRate 60 End Method OnUpdate () ' Take input and update game here... Local movinglr:Bool If Not rotating If KeyDown (KEY_LEFT) pxs = pxs - 0.1 movinglr = True Endif If KeyDown (KEY_RIGHT) pxs = pxs + 0.1 movinglr = True Endif If py >= 295 If KeyDown (KEY_SPACE) pys = -3 rotating = True Endif Endif Endif If pxs > 2 Then pxs = 2 If pxs < -2 Then pxs = -2 px = px + pxs If Not movinglr And py >= 295 Then pxs = pxs * 0.99 pys = pys + gravity py = py + pys If py > 300 py = 300 pys = -pys * 0.5 Endif If px < 0 Or px > DeviceWidth pxs = -pxs px = px + pxs Endif If py < 0 Or py > DeviceHeight pys = -pys py = py + pys Endif If rotating ang = ang + 3 * Sgn (pxs) If ang < -360 Or ang > 360 ang = 0 rotating = False Endif Endif End Method OnRender () ' Draw frame here... Cls 64, 96, 128 ' --------------------------------------------------------------------- ' Rotate display around player position... ' --------------------------------------------------------------------- RotateDisplay px, py, ang ' --------------------------------------------------------------------- ' DRAW BACKGROUND... SetColor 0, 64, 0 DrawRect -DeviceWidth, groundy, DeviceWidth * 4.0, DeviceHeight * 3.0 ' Just making sure... SetColor 255, 255, 255 For Local B:Block = Eachin blocklist DrawImage B.Image, B.X, B.Y, 0, 0.25, 0.25 Next DrawText "-11 -10 -09 -08 -07 -06 -05 -04 -03 -02 -01 000 +01 +02 +03 +04 +05 +06 +07 +08 +09 +10 + 11", 0, groundy ' --------------------------------------------------------------------- ' Set display back to previous (ie. normal) state... ' --------------------------------------------------------------------- ResetDisplay ' --------------------------------------------------------------------- ' DRAW PLAYER AT NORMAL ORIENTATION and DRAW DISPLAY TEXT... DrawImage player, px, py, 0, 0.25, 0.25 DrawText "[CURSORS - move player] [SPACE - jump]", 20, 20 End End ' Main function... Function Main () New Game End ' Set image's handle to centre... Function MidHandle (Image:Image) Image.SetHandle Image.Width () * 0.5, Image.Height () * 0.5 End ' Load an image with handle already centered (uses MidHandle function above)... Function LoadCenteredImage:Image (Image:String) Local img:Image = LoadImage (Image) MidHandle img Return img End

Neuro (Posted 2011) [#6]

Thanks DruggedBunny. But new codes, doesn't compiles on GLFX and on HTML 5 it throws this error : TypeError : Unable to get value of the property 'bbm_SetHandle': object is null or undefined

DruggedBunny (Posted 2011) [#7]

Did you save it in the same folder as the original, and delete the .build folder? I don't see why it should fail, since that's a Monkey command... Just tried copying and pasting both over the originals and they're working fine here on both HTML5 and GLFW.