Text Input

[Zaraka]

I need to somehow implement console + chat into my game. But I'm struggling with TextInput. MelonJS doesn't provide any solution for this problem. I have tried emulate it through Keyboard events, but it's terrible (You can check it at my Mana repo). Is there any better solution?

[nvlbg]

I suppose the best alternative for now is to use html <textarea> or <input>.

[parasyte]

Definitely HTML is the way to go! 😄

[Zaraka]

But how implement HTML tags directly into canvas window?

[parasyte]

@Zaraka You have the option of positioning and styling the HTML elements using CSS. You already have a fairly complete set of GUI elements implemented in your game. While it's a novel idea, you'll find it does have limitations, like having to reimplement basic navigation features using keyboard and mouse input. Even things you necessarily don't have to think about, like focus, tab selection, copy+paste, scrolling, etc. And on Mobile, you'll even have to reimplement the virtual keyboard, since the native keyboard only appears when an HTML text element is focused!

Using the HTML elements will take care of all of these cases for you, and they provide pretty simple APIs to get and manipulate their values, as well. Especially if you are already using jQuery. (Which you are!)

So here's an example reimplementing your game.gui.TextInput class using HTML <input type="text">:

game.gui.TextInput = me.Renderable.extend({
    init : function (x, y, type, length) {
        this.$input = $('<input type="' + type + '" required>').css({
            "left" : x,
            "top" : y
        });

        switch (type) {
        case "text":
            this.$input
                .attr("maxlength", length)
                .attr("pattern", "[a-zA-Z0-9_\-]+");
            break;
        case "number":
            this.$input.attr("max", length);
            break;
        }

        $(me.video.getWrapper()).append(this.$input);
    },

    destroy : function () {
        this.$input.remove();
    }
});

Then add the following CSS:

#screen {
    position: relative;
}

#screen input {
    position: absolute;
    z-index: 2;
}

You can also style the HTML inputs with background and font-color, font styles, border styles, etc. to better match your game.

You can manipulate the HTML element contents using the jQuery element reference, eg. with this.$input.val() and so on.

[Zaraka]

@parasyte I'll give you my firstborn!!! This hack is so usefull. You should really add it to FAQ or Code Snippets

[parasyte]

@Zaraka Excellent! I will train them as part of my growing ninja hacker clan as we try to take over the world!

[Vizwind]

Hi Jay, thanks for sharing this handy technique!

If we use html controls as GUI components, that will be very convenient. How about the responsiveness on mobiles, since mousedown, mouseup, mousemove are much slower than their counter parts - touchdown, touchup, touchmove.

[agmcleod]

Having touch move events for thing like gestures would be awesome.
Definitely something I'd like to look at in the near future. Presently
melon allows you to take a mouse event binding and apply a touch to the
same name. So we do have touch up and down :)

On Sunday, October 27, 2013, Roland wrote:

Hi Jay, thanks for sharing this handy technique!

If we use html controls as GUI components, that will be very convenient.
How about the responsiveness on mobiles, since mousedown, mouseup,
mousemove are much slower than their counter parts - touchdown, touchup,
touchmove.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/276#issuecomment-27165356
.

Aaron McLeod
http://agmprojects.com

[parasyte]

@Vizwind melonJS automatically converts mouse events into equivalent touch and pointer events, depending on the device capabilities. This allows e.g. multi-touch capabilities and normal mouse events using the same event listener code.