Mouse Pan and Zoom

Post your help queries and engine programming questions here

Mouse Pan and Zoom

Postby rs199483 » Sun Jul 20, 2014 6:13 pm


Is there currently a way to enable both mouse pan and zoom at the same time? If I enable them both only one works.
Perhaps LMB pan and RMB zoom. Would this cause any issues on a mobile device?

I was thinking to change this code in the engine to check for right or left mouse but i don't want to change the engine if I don't have to.

this._entity.mouseDown(function (event) { self._mouseDown(event); });
this._entity.mouseMove(function (event) { self._mouseMove(event); });
this._entity.mouseUp(function (event) { self._mouseUp(event); });

Posts: 3
Joined: Sun Jul 20, 2014 6:08 pm

Re: Mouse Pan and Zoom

Postby robaldred » Tue Aug 05, 2014 10:14 am

You could certainly do something to make this work. You have access to the engine source for exactly this reason.
Create your own classes and extend the standard mouse pan and mouse zoom components just like you would in any inheritance situation.

Mobile isn't going to work if you're only working with LMB and or RMB, you're going to have to offer either a mobile alternative or some alternative interface. If I were doing this, I'd be tempted to extend the MouseZoomComponent to support pinch zoom.
The engine as it stands only deals with a single touch, this is normalized to that that within your game you can use the single event handlers for mouseOver etc.

You can use the gesture events (although they're only supported by the latest browsers) gesturestart, gesturechange, gestureend
At it's most basic, you could assume that two touches are instigating a zoom, so using the normal touch events.

# psuedo code
Code: Select all
if(e.touches.length == 2) {
    pinching = true;

if(pinching) {

if(pinching) {
    pinching = false;

All you'd then need to do is get the distance between using some simple pythagorus the two touches and apply a factor to your current camera scale.
Code: Select all
var distance = Math.sqrt(
    (e.touches[0].x-e.touches[1].x) * (e.touches[0].x-e.touches[1].x) +
    (e.touches[0].y-e.touches[1].y) * (e.touches[0].y-e.touches[1].y));
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest