Click on Graphic

[Phyron]

Hi!

 

I create a graphic:

graphics = game.add.graphics(0, 0);draw(graphics); function draw(ctx) {      ctx.beginFill(0xFF3300);      ctx.moveTo(121.0, 741.7);      ctx.lineTo(0.8, 741.8);      ctx.lineTo(0.0, 0.1);      ctx.lineTo(120.2, 0.0);      ctx.lineTo(121.0, 741.7);          ctx.endFill();       }

It's created correctly.

 

Now i need click with mouse on this graphic and other graphics in game. 

 

I think convert a graphic to a sprite (for use a normal click event), but i don't know if it is posible. 

 

 

[lewster32]

You can just create a Sprite or Image with no key, then do sprite.addChild(graphics) to add your Graphics object to it. Then you can use the normal input methods available on the Sprite and Image objects.

[Phyron]

Thanks!

 

I added graphin in sprite. And work fine.

 

For mouse event I followed the  next example for click on sprite.

 

Link

 

But It does not work. And does not give me any errors.

 

I thought it is better with a image file. When i move the graphic, the "game" goes slow, but with a image, goes good.

 

It's best way use images vs graphics? The images outweighs, and need a perfect pixel collsion, but goes faster?

 

Thanks!

[albertofortes]

UPDATE: Forget it, I was using Phaser 2.0.6, I've updated to 2.2.1. and everything works perfectly!

I've the same problem: I created a canvas graphic and added as sprite, but I can't click:  With 2.2.1 the following works nice!

[...]create: function() {   this._graphicsHat = game.add.graphics(0, 0);   var createCanvas = this.drawHat(this._graphicsHat, 0, 0);   this._canvasHat = game.add.sprite(0, 0);   this._canvasHat.addChild( createCanvas );   // click:   this._canvasHat.inputEnabled = true;   this._canvasHat.events.onInputDown.add(this.clickHat, this);},drawHat: function(ctx, xoff, yoff) {   ctx.beginFill(this._colorBlue); // ctx.beginPath() en Pixie.js   ctx.lineStyle(4, this._colorBlack, 1);   ctx.moveTo(279 + xoff, 301 + yoff);   ctx.bezierCurveTo(263 + xoff, 296 + yoff, 262 + xoff, 269 + yoff, 273 + xoff, 253 + yoff);   ctx.bezierCurveTo(276 + xoff, 224 + yoff, 302 + xoff, 159 + yoff, 310 + xoff, 147 + yoff);   ctx.bezierCurveTo(346 + xoff, 93 + yoff, 405 + xoff, 75 + yoff, 420 + xoff, 74 + yoff);   // a lot of more ctx.    return ctx;},clickHat: function() {   console.log('click en sombrero');},[...]

Click on this._canvasHat never enter in clickHat method, but if I change the canvas for any image, this works perfectly... The problem is that I need use canvas

¿Any idea?