Jump to content

Making a graphic Rectangle clickable


Recommended Posts

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)});


Link to comment
Share on other sites

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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...