Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Is there a simple way to adjust the detection of mouse cursor coordinates to account for changes in stageContainer.scale?


eggborne
 Share

Recommended Posts

I have a viewable game window sized 800 by 600, but a "map size" of 1920 by 1200. The WASD keys move a sprite onscreen, and it rotates to aim at the mouse pointer. This is working very smoothly until I zoom in or out (from center) by manipulating a displayObjectContainer (I meant to put that in the title instead of stageContainer, which is the variable I chose personally).
 
I have an inkling of what the problem is. When zoomed in or out, the upper left corner (e.g.) of the game window still registers as (0,0), but the sprite is pointing at what it originally considered to be (0,0) before the displayObjectContainer was scaled up or down. Thus it all goes out of whack unless the container is scaled (1,1).

 

I know I either need to change the sprite to be able to recognize the "new" location of (0,0) after scaling, or make the cursor coordinates appear relative to the unscaled container (as the sprite now "sees" them).
 
I'm adjusting the sprite's rotation according to cursor position as follows:

// using jQuery$( "#game-canvas" ).mousemove(function( event ) {      var parentOffset = $(this).parent().offset();      cursorX = (event.pageX-parentOffset.left);      cursorY = (event.pageY-parentOffset.top);      player.sprite.rotation = angleOfPointABFromXY(cursorX,cursorY,player.sprite.position.x,player.sprite.position.y);      console.log(cursorX + "," + cursorY + " | " + event.pageX + "," + event.pageY);});

and zooming thusly:

var zoom = function(direction,speed) {    if (direction === "in") {      stageContainer.scale.x += speed;      stageContainer.scale.y += speed;      stageContainer.position.x -= speed*gameWidth/2;      stageContainer.position.y -= speed*gameHeight/2;    } else {      stageContainer.scale.x -= speed;      stageContainer.scale.y -= speed;      stageContainer.position.x += speed*gameWidth/2;      stageContainer.position.y += speed*gameHeight/2;    };}

If anyone could give me some advice I would greatly appreciate it. Thanks!
 
An example of the problem is here (mouse wheel zooms in and out): http://belikewally.netai.net

 

Link to comment
Share on other sites

Hello eggborne,

 

I am not completely sure I follow correctly everything that you are saying, but I can tell you that in my own project, I do employ scaling, and in some instances I have to dynamically multiply the lengths I am using to set position by a factor of 1/scaleFactor (i.e. divide by scaleFactor).

 

For example, I use this function when I want to center a rectangular object:

 

  var centerScaledX = function (widthOfObjToBeCentered) {
      var centeredXPos = ( (rendererDims.width * (1 / rendererDims.scaleFactor)) -
                                         widthOfObjToBeCentered ) / 2;
      return Math.round(centeredXPos);
  };
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...