Making a graphic Rectangle clickable

[ashtrail]

Hello everyone,

 

I'm trying to make a rectangle clickable just like a sprite. I read here and there and the hitArea way should be the best for me since the rectangle have variable size, so I can't really use an invisible sprite.

That's what my code looks like but it raises the error : "Uncaught TypeError: Cannot read property 'onInputUp' of undefined".

 

So what would be the proper way to do this (I coulnd't find doc on hitArea) :

unpauseButton = game.add.graphics(0, 0);unpauseButton.beginFill(0x81DEED, 1);unpauseButton.drawRect(SIZE_X * 0.55, SIZE_Y * 0.65, SIZE_X * 0.1, SIZE_Y * 0.06);unpauseButton.hitArea = new Phaser.Rectangle(SIZE_X * 0.55, SIZE_Y * 0.65, SIZE_X * 0.1, SIZE_Y * 0.06);unpauseButtonText = game.add.text(SIZE_X * 0.55, SIZE_Y * 0.65, quitButton2Text, {fontSize: '16px', fill : '#000'});unpauseButton.hitArea.inputEnabled = true;// Error here :unpauseButton.hitArea.events.onInputUp.add(function () {unpauseGame(game, gameBoard, showQuitMessage, unpauseButton, darkScreen, quitTitleSprite, quitMessageSprite)});

Thanks!

[Tom Atom]

Hi, this is clickable rectangle without hitArea:

            // play button            var g = this.add.graphics(0, 0);            // draw a rectangle            g.lineStyle(2, 0x0000FF, 0.5);            g.beginFill(0xFF8080, 1);            g.drawRect(this.world.centerX - 50, this.world.centerY - 50, 100, 100);            g.endFill();            // input            g.inputEnabled = true;            g.events.onInputDown.add(function () {                console.log("Pressed ...");               }, this);

 events and inputEnabled are properties of graphics, not hitArea. Second, you are missing "this" parameter in your onIputUp setup.

 

If you want to add hit Area, do for example this:

g.hitArea = new PIXI.Circle(0, 0, diameter);

hitArea can be any object that has method: contains(x: number, y: number) returning boolean. In PIXI it is Circle, Ellipse, Polygon, Rectangle.

[ashtrail]

You think it's because of the "this"? I'll try it out next time I want to make a clickable rectangle. For that rectangle I found another way to do it ( http://www.html5gamedevs.com/topic/5685-clickable-area/ ). But thanks!