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)

Strict

Import mojo

Function Main:Int()
	New MyGame
	Return 0
End

Class MyGame Extends App
	Field player:Sprite
	
	Method OnCreate:Int()
		Local img:Image = LoadImage("sprite.png")
		player = New Sprite(img, 100, 200)
		
		SetUpdateRate(60)
		Return 0
	End
	Method OnUpdate:Int()
		player.Update()
		Return 0
	End
	Method OnRender:Int()
		Cls
		DrawInstructions()
		player.Render()
		DrawLine (0, 258, DeviceWidth(), 258)
		Return 0
	End
	Method DrawInstructions:Void()
		Local x% = 10, y% = 10, gapy% = 15
		DrawText("Cursor keys Left and Right to move", x, y)
		y += gapy
		DrawText("Key Q and E to Rotate", x, y)
		y += gapy
		DrawText("Press 1 to MIDHANDLE the Image", x, y)
		y += gapy
		DrawText("W,A,S,D to move the Handle of the Image", x, y)		
		y += gapy * 2

		DrawText("Image  X, Y = " + player.x + "," + player.y, x, y)
		y += gapy
		DrawText("Handle X, Y = " + player.img.HandleX() + "," +player.img.HandleY(), x, y)				
		y += gapy		
		DrawText("Scale X, Y  = " + player.scaleX + "," +player.scaleY, x, y)				
		y += gapy		
		DrawText("Rotation    = " + player.rot, x, y)				
	End
End

Class Sprite
	Field img:Image
	Field x:Float, y:Float
	Field scaleX:Float, scaleY:Float
	Field rot:Float
	
	Method New(img:Image, x:Float, y:Float)
		Self.img = img
		Self.x = x
		Self.y = y
		Self.scaleX = 1
		Self.scaleY = 1
	End
	
	Method Update:Void()
		' position
		If KeyDown(KEY_RIGHT)
			x += 2
			scaleX = 1
		End
		If KeyDown(KEY_LEFT)
			x -= 2
			scaleX = -1
		End
		If KeyDown(KEY_UP)
			y -= 2
		End
		If KeyDown(KEY_DOWN)
			y += 2
		End
		
		' handle
		If KeyHit(KEY_1)
			img.SetHandle(img.Width() / 2, img.Height() / 2)
		End
		If KeyDown(KEY_W)
			img.SetHandle(img.HandleX(), img.HandleY() - 2)
		End
		If KeyDown(KEY_A)
			img.SetHandle(img.HandleX() - 2, img.HandleY())
		End
		If KeyDown(KEY_S)
			img.SetHandle(img.HandleX(), img.HandleY() + 2)
		End
		If KeyDown(KEY_D)
			img.SetHandle(img.HandleX() + 2, img.HandleY())
		End
		
		' rotation
		If KeyDown(KEY_Q)
			rot += 2
		End
		If KeyDown(KEY_E)
			rot -= 2
		End
	End
	
	Method Render:Void()
		DrawImage (img, x, y, rot, scaleX, scaleY)
		DrawCircle (x, y, 5) ' draw the handle location
	End
End

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.