Scaled Canvas: PointerEvent event.viewX value not consistant

54 views
Skip to first unread message

Paul Hastings

unread,
Mar 26, 2015, 2:57:13 AM3/26/15
to fla...@googlegroups.com
I have a game that is set so it can scale in the HTML mode for different screen sizes.  I have and issue that the event.viewX returns the exact pixel value so when the game is at full size(950 wide) then clicking on the right side returns:

event.viewX -> 950

but when the game is scaled down clicking on the right returns a different value depending on how wide the game is scaled, ie:

event.viewX -> 350

the problem I'm having is I'm trying to get the event.viewX position relative to a sprite object:

if ((event.viewX - sprite.x._) > 0) {
      //do something    
} else {
      //do something else
}

the return position of it(sprite.x._) stays relative to the scaled game(ie when the sprite is on the right (sprite.x._ = 950) not matter how the game is scaled

So is there a way to get the PointerEvent relative to the canvas?

Bill Deakin

unread,
Mar 31, 2015, 5:05:54 AM3/31/15
to fla...@googlegroups.com
This is what I do...

I set vars targetWidth and targetHeight to the "natural size" of the game container (I normally set them to 960x640 which is iPhone 4 size)

Then when I scale the game I set:

offsetX = Std.int(System.stage.width/scale - targetWidth); 
offsetY = Std.int(System.stage.height/scale - targetHeight); 

Now instead of using event.viewX and event.viewY use this:

scale = FMath.min(System.stage.width / targetWidth, System.stage.height / targetHeight);
var targetX = event.viewX/scale - offsetX/2;
var targetY = event.viewY/scale - offsetY/2;

That gives me the correct values every time, whether the game container has scaled or not.

When I don't want any scaling (i.e. for desktop or devices I know have screen sizes that will not require it) I just set scale to 1,  and offsetX and offsetY to 0.

This allows me to deploy on any device, so my games are set not to scale on desktop browsers and on most "standard" size mobile devices i.e. devices like iPhone 4/5, iPad etc. but will fill the screen responsively, but at the same time they will scale on oversize devices like iPhone 6, Samsung Galaxy S4/S5 etc.

Hope that helps.

Mark Knol

unread,
Mar 31, 2015, 5:37:06 AM3/31/15
to fla...@googlegroups.com
viewX and viewY are in view (stage) coordinates. To be complete independent of any container scale/rotation/position you should inverse the transform of the sprite using the global position. This gives you a position in local coordinates, if that is what you are looking for.

var position = new Point();
sprite.getViewMatrix().inverseTransform(event.viewX, event.viewY, position);
trace(position);
Reply all
Reply to author
Forward
0 new messages