How to add changing cursor to "pointer" for clickable sprites in cocos2d-html5?

cocos2d-x JavaScript
#1

I would like to change mouse cursor to “pointer” or others whenever mouse is over particular sprites (either normal sprite, or menuitem) in cocos2d-html5 game. How can I do that?

I would believe it needs to bog down into library (.js) file and modify it in the time of creating a new sprite or menuitem. Any suggestions would be appreciated. Thanks ahead!

1 Like
#2 
var testLayer = cc.Layer.extend({
    init:function () {
        var a = new cc.Sprite();
        a.initWithFile(s_ship01);
        a.setPosition(cc.ccp(111, 111))
        this.addChild(a);
        this.setIsTouchEnabled(true);
        return true;
    },
    ccTouchesBegan:function (touches, e) {
        var tmpSprite = this._itemForTouch(touches[0]);
        if (tmpSprite) {
            cc.Log("do something")
        }
    },
    ccTouchesMoved:function (touches, e) {
        var tmpSprite = this._itemForTouch(touches[0]);
        if (tmpSprite) {
            cc.$("#gameCanvas").style.cursor = "pointer";
        } else {
            cc.$("#gameCanvas").style.cursor = "default";
        }
    },
    _itemForTouch:function (touch) {
        var touchLocation = touch.locationInView(touch.view());
        if (this.getChildren()) {
            var child;
            for (var i = 0; i < this.getChildren().length; i++) {
                child = this.getChildren()[i];
                if (child instanceof cc.Sprite && child.getIsVisible()) {
                    var local = child.convertToNodeSpace(touchLocation);
                    var r = child.boundingBox();
                    r.origin = cc.PointZero();
                    if (cc.Rect.CCRectContainsPoint(r, local)) {
                        return child;
                    }
                }
            }
        }
        return null;
    }
});

testLayer.create = function () {
    var tmplayer = new testLayer();
    if (tmplayer.init()) {
        return tmplayer;
    }
}

testLayer.scene = function () {
    var scene = cc.Scene.create();
    var layer = testLayer.create();
    scene.addChild(layer);
    return scene;
}
Replacing cursor with custom image in cocos creator?
#3

i believe there are some browser limitation

while you could use javascript to change the css browser icon on the fly, the cursor will not be changed untill a “mouseenter” event has being fired. in other word, the cursor must move outside the canvas and back in to the canvas to see the effect.

you could however import some cursor sprite, then hide your normal mouse, then move the mouse sprite every frame to your mouse location

#4

Sorry for late reply guys, I switched to another stuff recently.

By the way,
Thanks Shengxiang Chen, it’s pretty much handy code. I didn’t have a chance to test it out yet but whenever I test it out I will get back to you.
Thanks Hao Wu as well for information.

Thanks guys!

#5

Go through this code!!

onMouseMoved:function(event) {
var location = event.getLocation();
if (cc.rectContainsPoint(this.yourSprite.getBoundingBox(), location)) {
cc.canvas.style.cursor = “pointer”;
} else {
cc.canvas.style.cursor = “default”;
}
}

#6

There is some modifications in code

Change it to

      cc._canvas.style.cursor = "pointer";
      cc._canvas.style.cursor = "default";