如何使用鼠标事件添加精灵Cocos2d-js
How to use mouse event for adding sprite Cocos2d-js
我已经在尝试了,但这不是我所期待的。
我想在我的鼠标指向精灵时创建一些东西,那个精灵会发光或有红色边框或其他东西注意到你鼠标指向那个精灵。在这种情况下,我调用了另一个具有相同精灵但更亮的精灵。
这不是真正的精灵,我有我想要的精灵背景,所以这里的代码从我的背景指向特定位置
Objs.aSprite_1st12 = new cc.Node();
Objs.aSprite_1st12.setContentSize(100,100);
Objs.aSprite_1st12.setAnchorPoint(0.5, 0.5);
Objs.aSprite_1st12.setScaleX(1.4);
Objs.aSprite_1st12.setScaleY(0.4);
Objs.aSprite_1st12.setRotation(25);
Objs.aSprite_1st12.setSkewX(10);
Objs.aSprite_1st12.setSkewY(-12);
Objs.aSprite_1st12.setPosition(cc.p(474,263));
this.addChild(Objs.aSprite_1st12, 10);
我正在调用函数鼠标事件
mouseEvent(this);
这里的函数是
function mouseEvent(that){
cc.eventManager.addListener({
event:cc.EventListener.MOUSE,
onMouseMove: function (event){
var target = event.getCurrentTarget();
var locationInNode = Objs.aSprite_1st12;
var s = target.getContentSize();
var rect = cc.rect(0, 0, s.width, s.height);
if (cc.rectContainsPoint(rect, locationInNode)) {
var sprite1 = new cc.Sprite.create(Objs.sidechip);
sprite1.setPosition(cc.p(474,263));
sprite1.setScale(0.3);
that.addChild(sprite1,0);
}
}
}, that);
}
此代码有效,并且在特定位置添加了一个新精灵我希望在鼠标移动时使用它,但问题是每当鼠标移动时总是添加该精灵。我只想要如果鼠标指向 Objs.aSprite_1st12
,添加新的精灵。
虽然我不知道 Objs.aSprite_1st12
实际上是什么,但我确定您显示的代码
var target = event.getCurrentTarget();
var locationInNode = Objs.aSprite_1st12;
将任何 cc.Node 视为目标。因此,如果您希望它仅在 Objs.aSprite_1st12
悬停时触发,并且希望 Objs.aSprite_1st12
是一个 cc.Node 实例,而不仅仅是您的精灵资源,您需要更改
var s = target.getContentSize();
var rect = cc.rect(0, 0, s.width, s.height);
if (cc.rectContainsPoint(rect, locationInNode)) {
到
var s = Objs.aSprite_1st12.getContentSize();
var rect = cc.rect(0, 0, s.width, s.height);
if (cc.rectContainsPoint(rect, locationInNode)) {
对吗?
这里的代码正是我想要的。
var sprite1 = new cc.Sprite.create(Objs.sidechip);
sprite1.setPosition(cc.p(474,263));
sprite1.setScale(0.3);
sprite1.setVisible (false);
this.addChild(sprite1,0);
cc.eventManager.addListener(
{
event:cc.EventListener.MOUSE,
onMouseMove: function (event)
{
var n = Math.floor(event.getLocationX());
var m = Math.floor(event.getLocationY());
if (n >= 396 && n <= 556 && m >= 216 && m <= 303){
cc.log ("ikeh");
sprite1.setVisible (true);
}else{
sprite1.setVisible (false);
}
}
}, this);
所以我只是先添加我想要的精灵,然后 setVisible(false);
然后,当鼠标指向 (n >= 396 && n <= 556 && m >= 216 && m <= 303)
之间时,它是 setVisible(true);
。
我已经在尝试了,但这不是我所期待的。
我想在我的鼠标指向精灵时创建一些东西,那个精灵会发光或有红色边框或其他东西注意到你鼠标指向那个精灵。在这种情况下,我调用了另一个具有相同精灵但更亮的精灵。
这不是真正的精灵,我有我想要的精灵背景,所以这里的代码从我的背景指向特定位置
Objs.aSprite_1st12 = new cc.Node();
Objs.aSprite_1st12.setContentSize(100,100);
Objs.aSprite_1st12.setAnchorPoint(0.5, 0.5);
Objs.aSprite_1st12.setScaleX(1.4);
Objs.aSprite_1st12.setScaleY(0.4);
Objs.aSprite_1st12.setRotation(25);
Objs.aSprite_1st12.setSkewX(10);
Objs.aSprite_1st12.setSkewY(-12);
Objs.aSprite_1st12.setPosition(cc.p(474,263));
this.addChild(Objs.aSprite_1st12, 10);
我正在调用函数鼠标事件
mouseEvent(this);
这里的函数是
function mouseEvent(that){
cc.eventManager.addListener({
event:cc.EventListener.MOUSE,
onMouseMove: function (event){
var target = event.getCurrentTarget();
var locationInNode = Objs.aSprite_1st12;
var s = target.getContentSize();
var rect = cc.rect(0, 0, s.width, s.height);
if (cc.rectContainsPoint(rect, locationInNode)) {
var sprite1 = new cc.Sprite.create(Objs.sidechip);
sprite1.setPosition(cc.p(474,263));
sprite1.setScale(0.3);
that.addChild(sprite1,0);
}
}
}, that);
}
此代码有效,并且在特定位置添加了一个新精灵我希望在鼠标移动时使用它,但问题是每当鼠标移动时总是添加该精灵。我只想要如果鼠标指向 Objs.aSprite_1st12
,添加新的精灵。
虽然我不知道 Objs.aSprite_1st12
实际上是什么,但我确定您显示的代码
var target = event.getCurrentTarget();
var locationInNode = Objs.aSprite_1st12;
将任何 cc.Node 视为目标。因此,如果您希望它仅在 Objs.aSprite_1st12
悬停时触发,并且希望 Objs.aSprite_1st12
是一个 cc.Node 实例,而不仅仅是您的精灵资源,您需要更改
var s = target.getContentSize();
var rect = cc.rect(0, 0, s.width, s.height);
if (cc.rectContainsPoint(rect, locationInNode)) {
到
var s = Objs.aSprite_1st12.getContentSize();
var rect = cc.rect(0, 0, s.width, s.height);
if (cc.rectContainsPoint(rect, locationInNode)) {
对吗?
这里的代码正是我想要的。
var sprite1 = new cc.Sprite.create(Objs.sidechip);
sprite1.setPosition(cc.p(474,263));
sprite1.setScale(0.3);
sprite1.setVisible (false);
this.addChild(sprite1,0);
cc.eventManager.addListener(
{
event:cc.EventListener.MOUSE,
onMouseMove: function (event)
{
var n = Math.floor(event.getLocationX());
var m = Math.floor(event.getLocationY());
if (n >= 396 && n <= 556 && m >= 216 && m <= 303){
cc.log ("ikeh");
sprite1.setVisible (true);
}else{
sprite1.setVisible (false);
}
}
}, this);
所以我只是先添加我想要的精灵,然后 setVisible(false);
然后,当鼠标指向 (n >= 396 && n <= 556 && m >= 216 && m <= 303)
之间时,它是 setVisible(true);
。