Image.Handle / SetHandle is not like photoshop

Monkey Forums/Monkey Beginners/Image.Handle / SetHandle is not like photoshop

GC-Martijn(Posted 2015) [#1]
H!

The official documentation
Method SetHandle : Int ( tx:Float, ty:Float )
Sets the image offset handle for this image. The handle is a 2D offset subtracted from the x,y coordinates of the image when it is drawn.

By default, images have a handle of 0,0, meaning the top-left pixel appears at the coordinates used in DrawImage.

By specifying Image.MidHandle when loading or grabbing an image - or by setting Image.Default flags to Image.MidHandle before hand - images will automatically be handled by their centre instead.

The image handle is subtracted before rotation and scale are applied providing a 'local' origin.


To make this more clear for beginners like me, the handle is not like photoshop the middle point.


But it is the location where the image will be draw at.

And monkey don't have such photoshop point (don't know how to call it).


I first thought the monkey image handle was something like this, and run into conflicts with my code.
Because i'm using a animated sprite map and the movement using a mouse click.

The sprite map contains a man walking to the right, so when the man is walking to the left, I flip the image (so the sprite map contains only the necessary things).

And then comes the 'problem' the image Handle.

First I thought, well when I flip the image, the image Handle will flipping - wrong
Then I thought, well then I set the image Handle with SetHandle() , because its relative to the image - wrong

SetHandle is not relative to the image ? So then I try something like this.

onUpdate()
if goingRight then
 flipImage=false
 setHandle(pos.X+img.width(),pos.Y+img.height()) ' handle bottom right
elseif goingLeft then
 ' image at drawing point is now flipped
 flipImage= true
 setHandle(pos.X,pos.Y+img.height()) ' handle bottom right
end

onRender()
draw img
drawCircle img.HandleX(),img.HandleY(),20


Then I see its not like photoshop, but something else.


therevills(Posted 2015) [#2]
SetHandle is an offset of where the image is drawn and will rotate/scale around that point.

Check out this example:

https://dl.dropboxusercontent.com/u/35103024/Monkey/flip.buildv81a/html5/MonkeyGame.html

(Borrowed SpriteAttack's cool sprite)




GC-Martijn(Posted 2015) [#3]
that is a better example for the new users :)
I will going to use the midhandle only i guess, so I only have to do the 'math' using that point.
If I don't than I have to make different calculations when the image is flipped with collision etc.


GC-Martijn(Posted 2015) [#4]
To illustrate my 'problem', change this line in your code:

DrawCircle (img.HandleX(), img.HandleY(), 5) ' draw the handle location


I thought it will return the location (for example the center/middle) (the x,y)
But it don't. Cost me a couple of hours to figure this out haha.