Input elements

[proohit]

I'm fairly new to game development and melonjs. Please excuse my dumb question :). I want to implement an audio controller as a GUI element for a music based game. How can I draw basic GUI elements like buttons or text inputs on top of the game screen? I found #276 but have no idea how to use the defined TextInput as a GUI_Object or Renderable. Thanks in advance!

[obiot]

Hi and welcome then !

We have a UI example here that should help you get started with the corresponding source code here.

However for text input, I would really rather use DOM/CSS elements, as this will be way easier to manage different language/keyboard and so on (unless you have very basic needs).

[proohit]

Thanks for your reply. Is there an example that uses DOM elements and integrates them into the game? I'm wondering if the DOM state will be handled separately from game state?

[parasyte]

There's a reeeeeally old example in #276 (comment) which does this. You will have to update it to the new version of melonJS, and replace the jQuery stuff. But the basic idea would still be the same, AFAIK.

[obiot]

Thanks Jay ! Always nice to see you around here :)

for the example, it should be as follow after updating to melonJS 2 (ES6) :

case TextInput extends Renderable {

    constructor(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.getParent()).append(this.$input);
    }

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

};

[obiot]

also covered in the FAQ here :
https://github.com/melonjs/melonJS/wiki/Frequently-Asked-Questions#form_inputs

[obiot]

see this as well :
https://www.html5gamedevs.com/topic/34357-do-you-build-your-uis-in-melonjs-or-dom/#comment-197361

[obiot]

and this: https://github.com/goldfire/CanvasInput