How to Fix DOM Element to Coordinates In Canvas?

Phaser 3
1

All I want is a simple text box so someone can manually enter numbers. I tried this example: http://labs.phaser.io/view.html?src=src\game%20objects\dom%20element\form%20input.js&v=dev

It works, however, the coordinates of this.add.dom(0, 0) are the top left of the DOM , not the canvas. When you resize the browser or scroll, the input is not staying in place.

Is this behavior going to be changed in future releases, or am I looking at a weeks worth of coding with painful trial and error just so the user can have the feedback of getting a blinking cursor when the click the text input?

1 Like
2

In that example the DOM object is fixed to the canvas container.

Make sure you’re using dom.createContainer: true.

DOM tree in the 'dom element/form input' example
createContainer.png1604Ă—1057 295 KB

3

I still don’t get how to fix the element in the canvas and have it scale with the scale manager. My current solution doesn’t allow mobile users to input a number as it doesn’t pop up their keyboard.

This is what I have for config:

var config = {
    type: Phaser.AUTO,
    scale: {
        parent: 'CanvasDiv',
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 1080,
        height: 1920,
        isPortrait: true
    },
    dom: {
        createContainer: true
    },
    scene: {
        preload: preload,
        create: create
    }
};

Is it possible to use inside the canvas at all? iOS needs a text input area to pop up the keyboard, even if the scaling is wonky, it can work if it is invisible.

4

Scaling may be a little more complex, I haven’t tried that.

5

I gave up on it for now. I hope someone has an answer for this. I realize this is in development currently.

6

You can add the box directly to the index.html file. Check out this example:

But I am not sure if you manually have to remove the EventListeners when you enter a new scene or reload the scene. Maybe @samme knows this?

2 Likes
7

It’s a good workaround for some uses, but it isn’t coordinated with the Scale Manager. It would need to scale exactly along with it so it doesn’t move around. I just have one text input that only accepts numbers, and needs a cursor once like normal text input when active.

01
Screenshot 2019-02-22 23.18.01.png1946Ă—1114 204 KB

8

I think I know what you mean.

Check this example. It scales the box based on the scaling of the phaser canvas:

1 Like
9

Maybe I misunderstood how DOM support was going to work? Even putting position to relative on the input-box it still moves around when scaled.

I really hope there is a possibility for text input. The biggest thing I learned is that without a native DOM element, iOS just won’t play ball with the native keyboard. It won’t ever be a native experience.

I guess with this solution you can more or less have pop up input, but it’s not good UX and might get blocked on mobile, where it is hard to figure out how to enable popups. I’m also using it for a dapp, so some native dapp browsers aren’t going to like the popup either.

10

I have just modified the second example. It now works perfectly! :heart_eyes:

3 Likes
11

Awesome! I hope this gets added as an example too to the DOM. I was not figuring this out quickly at all.

I think this is good enough, especially if you have a fixed size or specific media queries.

12

3.16 has resolved all my issues, now I am back to using Phaser.