Input elements #1067

Jan 16, 2022

proohit
Jan 16, 2022

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!

Answered by obiot

Jan 17, 2022

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).

View full answer

proohit · Jan 17, 2022

obiot
Jan 17, 2022
Maintainer

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).

4 replies

proohit Jan 17, 2022
Author

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 Jan 17, 2022
Maintainer

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 Jan 17, 2022
Maintainer

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();
    }

};