Phaser 3 dom set interactive

Phaser 3
1

var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: ‘#2d2d2d’,
parent: ‘phaser-example’,
scale: {
mode: Phaser.Scale.FIT,
parent: ‘phaser-example’,
width: 800,
height: 600
},
dom: {
createContainer: true
},
scene: {
create: create
}
};
var game = new Phaser.Game(config);
function create ()
{
var element2 = this.add.dom(500, 200, ‘div’, ‘background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); width: 220px; height: 100px; font: 48px Arial; font-weight: bold; color: white; user-select: none;pointer-events: none !important’, ‘Phaser 3’);
// element2.setBlendMode(‘HUE’);
element2.setInteractive({ useHandCursor: true, draggable: true });
// let startX = -element2.originX * element2.displayWidth;
// let startY = -element2.originY * element2.displayHeight;
// element2.input.hitArea = new Phaser.Geom.Rectangle(startX, startY, element2.displayWidth, element2.displayHeight)
element2.on(“drag”, (, dragX, dragY) => {
element2.x = dragX;
element2.y = dragY;
});
}

when i set interactive for a dom element, dom hit area not true. So a reset hit area as comment lines. But i get an error when mouse inside dom element and i drag element, drag event not fire! Even when i comment the lines.
The lab link: https://labs.phaser.io/edit.html?src=src/game%20objects/dom%20element/blend%20mode.js&v=3.24.1

2

Please, put the error message here

1 Like
3

it is not an error. It’s not logically correct, you can try it by copying and pasting this code into the lab’s link

4

Hi @conganhpham,
I had the same problem.
This is extracted from Phaser docs in reference to DOMElements:

They also cannot be enabled for input. To do that, you have to use the addListener method to add native event listeners directly.

So, a possible solution could be something like this:

function create() {
    // Phaser DOMElement object
    var phaserDiv = this.add.dom(500, 200, 'div', 'background: blue; width: 220px; height: 100px; font: 48px Arial; font-weight: bold; color: white; user-select: none;', 'Phaser 3');
    phaserDiv.offsetX = 0; // distance from pointer.x to phaserDiv.x
    phaserDiv.offsetY = 0; // distance from pointer.y to phaserDiv.y

    // html DOM element
    let domDiv = phaserDiv.node;
    domDiv.setAttribute('draggable', 'true');
    domDiv.addEventListener('dragstart', (event) =>{
        phaserDiv.alpha = 0;
        phaserDiv.offsetX = event.clientX - phaserDiv.x;
        phaserDiv.offsetY = event.clientY - phaserDiv.y;
    })

    domDiv.addEventListener('dragend', (event) =>{        
        phaserDiv.setPosition(
            event.clientX - phaserDiv.offsetX,
            event.clientY - phaserDiv.offsetY
            );
        phaserDiv.alpha = 1;
    });
}

Greetings

2 Likes
5

Thank you for saving me so many days