# How to make graphics interactive

**URL:** <https://phaser.discourse.group/t/how-to-make-graphics-interactive/487>\
**Category:** Phaser 3\
**Created:** [December 27, 2018, 10:25am UTC](https://phaser.discourse.group/t/how-to-make-graphics-interactive/487 "2018-12-27T10:25:45Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rorywalsh](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rorywalsh/32/325_2.png) [@rorywalsh](https://phaser.discourse.group/u/rorywalsh)\
**Post date:** [December 27, 2018, 10:25am UTC](https://phaser.discourse.group/t/how-to-make-graphics-interactive/487/1 "2018-12-27T10:25:45Z")

</div>

Just wondering how I go about making a simple graphics object interactive? The following doesn’t seem to work:

```
create ()
{
    this.graphics = this.add.graphics();
    this.graphics.setInteractive();
    this.graphics.fillStyle(0xffff00, 1);
    this.graphics.fillCircle(300, 300, 150);

    this.input.on('gameobjectdown',function (pointer, gameObject){
            gameObject.destroy();        
    }, this);
}
```

---

<div class="post-metadata">

**Author:** ![Olf](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/olf/32/213_2.png) [@Olf](https://phaser.discourse.group/u/Olf)\
**Post date:** [December 27, 2018, 10:46am UTC](https://phaser.discourse.group/t/how-to-make-graphics-interactive/487/2 "2018-12-27T10:46:15Z")

</div>

You can find examples here : [Buttons in Phaser 3](https://snowbillr.github.io/blog/2018-07-03-buttons-in-phaser-3/) - these buttons are simply interactive objects.

I think the event you listen to,` 'gameobjectdown'`, is not valid.

From the linked page :

> Great, we know our “button” is firing off input events that we can listen for and respond to. The other events that we care about are:
> 
> - `pointerout` - this is the opposite of `pointerover` . It fires when the cursor _leaves_ the area of the game object.
> - `pointerdown` - this fires at the start of a click or a touch on the game object, literally when the mouse button is pushed down or when a finger touches down.
> - `pointerup` - this is the opposite of `pointerdown` . It fires when the mouse button is released or a finger is lifted up from the game object.

---

<div class="post-metadata">

**Author:** ![rorywalsh](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rorywalsh/32/325_2.png) [@rorywalsh](https://phaser.discourse.group/u/rorywalsh)\
**Post date:** [December 27, 2018, 11:45am UTC](https://phaser.discourse.group/t/how-to-make-graphics-interactive/487/3 "2018-12-27T11:45:00Z")

</div>

Thanks Olf. Those don’t seem to work with a graphics object.

```
create ()
    {
        this.graphics = this.add.graphics();
        this.graphics.setInteractive();
        this.graphics.fillStyle(0xffff00, 1);
        this.graphics.fillCircle(300, 300, 150);
        this.graphics.on('pointerdown', () => { console.log('pointerover'); });
    }

```

> [@Olf](#):
>
> I think the event you listen to, `'gameobjectdown'` , is not valid.

[gameobjectdown](https://labs.phaser.io/view.html?src=src/input%5Cgame%20object%5Cdestroy%20sprite%20on%20down%20event.js) can be used to listen to mouse click on game objects.

**[edit]** looks like I need to pass a shape and callback to setInteractive() for this to work. All good now 😉

---

<div class="post-metadata">

**Author:** ![Olf](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/olf/32/213_2.png) [@Olf](https://phaser.discourse.group/u/Olf)\
**Post date:** [December 27, 2018, 12:57pm UTC](https://phaser.discourse.group/t/how-to-make-graphics-interactive/487/4 "2018-12-27T12:57:49Z")

</div>

Glad it’s working now. 🎉

From the quoted page :

> These events are emitted in two ways:
> 
> 1. Directly from the `GameObject` itself
> 2. From the `InputPlugin` object ( `this.input` in a scene)

It seems to me `gameobjectdown` is used with the second option, whereas here you are listening to events from a GameObject.

I’m know, I’m writing a lot about this subject but I’m learning at the same time. 😉  
Have a great time with Phaser 3.

---

<div class="post-metadata">

**Author:** ![rich](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rich/32/4_2.png) [@rich](https://phaser.discourse.group/u/rich)\
**Post date:** [December 28, 2018, 10:07am UTC](https://phaser.discourse.group/t/how-to-make-graphics-interactive/487/5 "2018-12-28T10:07:23Z")

</div>

Just to confirm: Graphics objects need to be passed a shape to use as the hit area for interaction.

If you’re just needing something simple like a circle or rectangle then use the Shape game objects as they support interaction directly.

---

<div class="post-metadata">

**Author:** ![rorywalsh](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rorywalsh/32/325_2.png) [@rorywalsh](https://phaser.discourse.group/u/rorywalsh)\
**Post date:** [December 28, 2018, 7:07pm UTC](https://phaser.discourse.group/t/how-to-make-graphics-interactive/487/6 "2018-12-28T19:07:54Z")

</div>

Thanks @rich. I ended up using a graphics object and applying its texture to another object, which works fine. But shapes definitely look simpler. So much to learn.