What's the best way to do a multiple hotspots on a single bitmap?

Phaser 3
1

Hello, another newbie question here, hope somebody with experience can answer this!

image
image.jpg1167×405 227 KB

I have a sprite with bitmap attached to it, there are several buildings that needs to be / appear “interactive”. I need to detect 3 mouse events : rollover, rollout and click.

So in my mind I could think of these 2 scenarios of how to achieve this:

  1. create actual “dummy” rectangle shapes with 0 alpha and overlay these on the top of bitmap.

  2. define these hotspots programmatically and in global input handler check if the cursor is within the bounds of these rectangles.

Tried the approach nu 1:

with this code: (I’m using TypeScript)

    let settingsGFX = this.add.graphics();
    settingsGFX.fillStyle(0x0000ff, .3);
    settingsGFX.fillRect(setting_rect.x, setting_rect.y, setting_rect.width, setting_rect.height);
    settingsGFX.setInteractive({useHandCursor:true, hitAreaCallback: ()=>this.setActiveSection("settings")});

…

private setActiveSection( section :string):void
{
    var pointer : Pointer = this.input.activePointer;

    if (pointer.isDown)
    {
        console.log(section);
        console.log(pointer);
    }
}

(full code here : https://pastebin.com/EyD98y7Y )

While this works kinda ok with click event, the problem I have is to detect mouse over and out events, as well as I am not sure how to define the hitArea, as by default I would expect the settingsGFX as a whole to be considered as hit area?

So to recap , I guess my too questions are:

  1. what’s the best way to achieve multiple hotspots on a single sprite containing and image?
    (with mouseover / mousedown / mouseout events)

  2. if I use the described method… how do I correctly define the hotspot in the setInteractive handler, and get mouse over and out working as well?

2

Phaser has a special type of Game Object called a Zone which is meant to be used for this exact purpose: http://labs.phaser.io/edit.html?src=src/input/zones/basic%20input%20zone.js. A Zone does not render at all, but otherwise acts like any other Game Object, so it gives you all of the events you could expect to find on one.

The problem that you’re running into is that a Graphics object is a canvas (not the HTML element, but the concept) that you can draw to, so Phaser can’t figure out its effective size (in fact, I’m not fully sure how input-enabled Graphics are handled, I’ve never tried it). Setting a hit area on it would likely work; of course, it would require one Graphics object for each area, which would become inefficient really quickly because rendering a Graphics object can be expensive.

In case you actually need the hotspots to render, you can instead use a Rectangle shape (see http://labs.phaser.io/edit.html?src=src/game%20objects/shapes/rectangle.js). Shape objects are not as expensive as Graphics objects and have an intrinsic size, which will allow you to easily attach an input handler to them.

1 Like
3

Brilliant, thank you Telinc1, appreciate you’ve taken the time to answer my question!! Will have a look at the Zones, hopefully, they’ll do the trick!