Rotate a rect

Monkey Forums/Monkey Programming/Rotate a rect

grovey(Posted 2013) [#1]
Hi all

I am wanting to know how to rotate a rect in Monkey, should I use the matrix transformations in money to achieve this?

With PushMatrix Rotate and PopMatrix, I get the usual rotation around the origin, so my object does not rotate around itself (local coordinate).

Can someone point me in the right direction to get this working? Do I need to transform from world to local? Is so, how do I accomplish that?


ziggy(Posted 2013) [#2]
Translate to set the center of rotation, then rotate, then dra


grovey(Posted 2013) [#3]
Hmmm, yeah that is what I have been attempting, here is my code, it still does not translate to local coords.

Import mojo

Class Game Extends App
	Field toggle:Bool = False
	Method OnCreate()
		SetUpdateRate 60
	End
	
	Method OnRender()
		Cls
		SetColor 0, 0, 0
		
		PushMatrix()
		SetColor(255, 255, 255)
		If (toggle)
			Translate(30, 30)
			Rotate(45)
		EndIf
    	        DrawRect(300, 300, 30, 30)
    	        PopMatrix();
		DrawText "Rotation test", 10, 10
		
	End
	
	Method OnUpdate()
		If KeyHit(KEY_SPACE)
			toggle = Not toggle
		EndIf
	End
End

Function Main()
	New Game()
End



grovey(Posted 2013) [#4]
Ok, I got it, you transform to where you want the object, then rotate, and draw. Thanks!

Import mojo

Class Game Extends App
	Field toggle:Bool = False
	Field angle:Float = 0
	Method OnCreate()
		SetUpdateRate 60
	End
	
	Method OnRender()
		Cls
		SetColor 0, 0, 0
		
		PushMatrix()
		SetColor(255, 255, 255)
		Translate(300, 300)
		Rotate(angle)
    	        DrawRect(-15, -15, 30, 30)
    	        PopMatrix();
		DrawText "Rotation test", 10, 10
		angle = angle + 1
	End
	
	Method OnUpdate()
		If KeyHit(KEY_SPACE)
			toggle = Not toggle
		EndIf
	End
End

Function Main()
	New Game()
End



Paul - Taiphoz(Posted 2013) [#5]
Just wondering if your actually doing a rect as a test but your ultimatly going to be rotating a sprite or image ?

If your end goal is working with sprites then you don't in a lot of cases need to translate, you simply set the midhandle flag on the image and then use the override for DrawImage and give it the rotation value.


grovey(Posted 2013) [#6]
Interesting, let me take a look at midhandle, but I am not going to be using a sprite here.

I needed to rotate the rect, and then scale it to achieve a trail effect for a projectile.

Is there a better way for me to accomplish that?

I am scaling the rect and decreasing the alpha and it gives a really nice trail.

Here is a screenshot


I have not started using sprites yet with monkey believe it or not, do you have a quick example of what you mean?


grovey(Posted 2013) [#7]
Ah ok, are you talking about SetHandle?

I see that in one of the Monkey samples. You set the handle and the specify the rotation on DrawImage.

What do you guys recommend I do for bullet trails? Load an image, rotate it and scale it?


FelipeA(Posted 2013) [#8]
You could do something like this for rotating rectangles:

Import mojo

Class RectDemo Extends App
	
	Method CreateRectangle:Image( width:Int,height:Int,color:Int = $FFFFFFFF)
		Local img:Image = CreateImage(width,height)
		Local pixels:Int[width*height]
		For Local i:Int = 0 To pixels.Length()-1
			pixels[i] = color
		Next
		img.WritePixels(pixels,0,0,width,height)
		
		'	Set Handle to The middle
		img.SetHandle(width/2, height/2)
		
		Return img
		
	End
	
	Field rect:Image
	Field angle:Float
	Field alpha:Float
	Field dec:Float
	Field scale:Float
	
	Method OnCreate:Int()
		rect = CreateRectangle(50,50)
		angle = 0.0
		alpha = 1.0
		dec = 0.01
		scale = 1
		
		SetUpdateRate(60)
		Return 0
	End
	
	Method OnUpdate:Int()
		angle += dec*200
		alpha -= dec
		scale += dec*10
		
		If(alpha<= dec)
			dec *= -1
			alpha = 0
		
		Elseif(alpha>=1)
			dec *= -1
			alpha = 1
		
		End
		
		Return 0
	End
	
	Method OnRender:Int()
		Cls()
		SetAlpha(alpha)
		DrawImage( rect,DeviceWidth()/2,DeviceHeight()/2,angle,scale,scale )
		SetAlpha(1.0)
		Return 0
	End
	
End

Function Main:Int()
	New RectDemo()
	Return 0
End



grovey(Posted 2013) [#9]
Yeah that is pretty cool. Thanks for posting.

I will prototype this change too, and see how it looks, I will go for a gradient filled texture and stretch it the length of the trail and report back.

Is it less computationally expensive to use images, than primitives?


grovey(Posted 2013) [#10]
Well, using an image with SetHandle instead of a rectangle is a lot better. I tried it out and it works really well in a lot less lines of code.

Thanks all for your help.


Paul - Taiphoz(Posted 2013) [#11]
Is this the kind of thing your talking about ?

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

What I am doing there is taking a 2*4 pixel image and scaling it to make a line , I then create 10 line segments to make a trail that fades out, the above code is extremely inefficient because as each tail segment reaches 0 alpha I am deleting it and creating a new segment at the front, did this to test its worst case performance which I was impressed with.

What you really would do is create an array of those ten moving tail segment points and then simply draw your cool line between them, so not creating and deleting segments each move but rather just moving the ones that already created.


grovey(Posted 2013) [#12]
Kinda yeah, I will work on it some more and see how it looks after some tweaks.

Thanks again


grovey(Posted 2013) [#13]
This is what I have right now and I think it will work!




Paul - Taiphoz(Posted 2013) [#14]
how you going about it if you don't mind me asking ?


grovey(Posted 2013) [#15]
I have a 10x2 gradient filled texture, which I scale and alpha blend.

It works quite well.

I have tested 2 weapons types with many trails, and it renders real nice. I have noticed that with HTML5 as the target I get a significant frame rate drop, so I am going to have to try and speed it up more.

If you like I can post some more screenshots.


Paul - Taiphoz(Posted 2013) [#16]
screenshots are always nice, if your game has a black background there is another method of making trails that will trail everything you draw with very little overhead.


grovey(Posted 2013) [#17]
I may even post a demo tonight of the trails, yeah I won't be using just a plain background forever, so I can't use the other method.

What does that method entail? Not clearing the backbuffer?


grovey(Posted 2013) [#18]
Here is a screenshot, hopefully I can get to post a demo soon. I have made the code a lot more efficient, and now I don't see a framerate drop anymore.




Paul - Taiphoz(Posted 2013) [#19]
Yeah, this basically...

https://dl.dropboxusercontent.com/u/56777267/code/Alpha/arrows/MonkeyGame.html

What you do is replace the cls call with the drawing of a partially alphaed out mask image, the really neat thing is that you can texture this cls image to create some really cool looking effects.

the one in the above demo makes it look as if the little ship things are releasing some sort of thrust out their backs, but its actually just the cls texture.

its neat, but yeah only really usable with a black or coloured background.


muddy_shoes(Posted 2013) [#20]
A bigger limitation than requiring a flat coloured background is that the render buffer behaviour isn't consistent across targets. Some will buffer swap, some might clear without you doing it explicitly.


grovey(Posted 2013) [#21]
Interesting, say... how do you share your demo like you did there on dropbox?

I can show you guys my demo real quick

*EDIT ok, I do the whole dl.dropboxusercontent.com deal, but just get a blank page for MonkeyGame.html

Also when I try the HTML on my local machine I get a DOM security error, very frustrating. It works fine in debug, standalone, not so much.


Raph(Posted 2013) [#22]
Android in particular won't do the buffer fullscreen motion blur trick. I already tried. :( Some video cards on PC won't either.


rIKmAN(Posted 2013) [#23]
@grovey
Copy the html5 folder to your public Dropbox folder, then right click on MonkeyGame.html and choose "Copy public link" from the context menu.

Then paste that url into a post here.


grovey(Posted 2013) [#24]
I try that, but just a blank page is served up.

http://dl.dropboxusercontent.com/s/wgl5a9iz0vl7e9q/MonkeyGame.html

This file will also not work on my local machine, outside of the IDE/Debug mode


muddy_shoes(Posted 2013) [#25]
I don't think you copied the whole html5 folder. Looks like you just copied the html file.


grovey(Posted 2013) [#26]
I copied the whole directory, I get a menu option saying "Share dropbox link" but none that says "copy public link".

I copied my entire html5 directory, including the data folder, config file and main.js file.

It does seem that MonkeyGame.html is isolated as if it does not have access to the game code and data, but I cannot seem to get it shared.


muddy_shoes(Posted 2013) [#27]
"Share dropbox link" is the context menu option you get for files outside of the public folder.


grovey(Posted 2013) [#28]
Ok, dropbox accounts created after October 2012 no longer have public folders, you have you create one yourself, which is why I was not seeing the correct context menu.

Anyway, I created the public folder, and now it works.

Here is the demo.

https://dl.dropboxusercontent.com/u/201286064/html5/MonkeyGame.html


Paul - Taiphoz(Posted 2013) [#29]
is that true about the public folder? wonder why they did that.

as for the demo yeah it looks neat, simply scaling the small image out looks smooth as well, which is nice.


rIKmAN(Posted 2013) [#30]
Looks good - love me some Alien Breed / Chaos Engine / Smash TV! :)


grovey(Posted 2013) [#31]
Thanks guys, yeah I am thinking of starting a project thread here on the Monkey forums where I can chronicle the progress for others to see and play test.

This was just a prototype to get trails working, and as with most prototypes you can get carried away adding things to it.

I have a few more things to prototype and I will officially start coding the game.


grovey(Posted 2013) [#32]
Ok, I started a project thread for this

http://www.monkeycoder.co.nz/Community/topics.php?forum=211&

Hopefully I can continue to make decent progress, and actually finish a game!