2

I know I can use mousedown selection for it, but I am wanting the clicked on sprite to follow my mouse, there is a mousetracker function of sorts mentioned in the api; but unfortunately there are no examples of this other than stating that it allows mouse detection. 

//add mousedown events for yarnballs.
$(".gQ_sprite").mousedown(function() {
    clickedDivId = $(this).attr('id');
    if(clickedDivId.charAt(8) == "-")
    {
        currentClickedDivId = clickedDivId
        $(document).mousemove(function(e){
            spriteXPosition = e.pageX
            spriteYPosition = e.pageY
        });

    }
});

I have the location of the mouse selected, just not sure how to get the selected sprite to follow it.

any help would be greatly appreciated.

j.gooch
  • 305
  • 1
  • 4
  • 21

2 Answers2

3

What Mati said is correct: $.gQ.mouseTracker allows you to access the mouse's state outside of an event handler. The example he gives is correct but it can't be used to move a gQ object (sprite, tile-map or group) around because you'r not allowed to use the .css() function for those. Doing so will break collision detection.

If what you want is to move a gQ object you should do this instead :

$('#' + currentClickedDivId).xy($.gQ.mouseTracker.x, $.gQ.mouseTracker.y);

But since this should be done in a periodical callback, the smoothness of the dragging will depend on the refresh rate.

If you want to use event handlers instead you could modify you code to look like this (without using the mouseTracker):

var clickedDiv;
var clickedDivOffset = {x:0, y:0};

$(".gQ_sprite").mousedown(function(e) {
    clickedDiv = $(this);
    clickedDivOffset = {
        x: e.pageX - clickedDiv.x() - $().playground().offset().left,
        y: e.pageY - clickedDiv.y() - $().playground().offset().top
    };
});

$(".gQ_sprite").mouseup(function() {
    clickedDiv = false;
});

$().playground().mousemove(function(e) {
    if(clickedDiv){
        clickedDiv.xy(
            e.pageX - clickedDivOffset.x,
            e.pageY - clickedDivOffset.y,
        );
    }
});

This will implement a drag-n-drop effect. If you want the clicked element to stick to the mouse you will have to slightly adapt the code but the basics will remain the same.

Selim Arsever
  • 320
  • 1
  • 6
  • thanks selim. this helps significantly, btw; love the library; great work you have done with it – j.gooch May 26 '13 at 20:03
  • btw @selim I don't think you understand just how much that helped me. I originally tried to rehack the code to manipulate the css and was having trouble with collision detection, thanks to your answer; collision detection now works. if you ever come to ann arbor michigan: I owe you a beer – j.gooch May 26 '13 at 21:38
2

According to the documentation:

If the mouse tracker is enabled you can check the state of the mouse at anytime by looking into the object $.gQ.mouseTracker where x and y contain the position of the mouse and 1, 2 and 3 a boolean value where true means that the first, second or thrid button is pressed.

Observe the output of:

$("#playground").playground({ refreshRate: 60, mouseTracker: true });

$.playground().startGame();
$.playground().registerCallback(function(){
    console.log( $.gQ.mouseTracker );
}, 1000);

To make those divs actually follow the cursor, you have to use .css()

$('#' + currentClickedDivId).css({
    top:  $.gQ.mouseTracker.y + 'px',
    left: $.gQ.mouseTracker.x + 'px'
});
Mati
  • 1,378
  • 15
  • 20
  • looks about like this should work, I realized due to the way that the css positioned itself, I will have to hack around moving the object etc. its almost worth just using the native jquery functions instead of the $.gQ.mouseTracker.y etc since the way its positioned it has the top and left defined as 0. – j.gooch May 26 '13 at 00:02