• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!

GameMaker Text input in an HTML5 game on Mobile Devices in GMS2?

F

FB-Productions

Guest
Hello!
I am having trouble creating a keyboard_string-like textbox for text input in an HTML5 game in Game Maker Studio 2.
It should work as expected on PC/laptop browsers running the HTML5 game as they have physical keyboards, but if someone plays on a mobile device browser, the game would require the virtual keyboard that belongs to the mobile device (iOS/Android).
Problem is, I cannot find any way to show/hide and use the virtual keyboards while on HTML5 export. (GMS2 actually says that the Virtual Keyboard functionality is limited to iOS, Android and UWP export.)

Is there any way that I can get text input (with iOS and Android virtual keyboards) to work in HTML5 games on mobile devices in Game Maker Studio 2?
If Studio 2 truly doesn't support it itself, does anyone know about any ways to get/make an extension to do this? (Googling didn't do the trick sadly...)
I appreciate any help :)
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
I feel like there was some JS extension for this - essentially you want to create an off-screen <input> element, give it focus (.focus()), and that will pop up the system keyboard. Then listen to "blur" event for text having been finalized and check .value for the current value.
 
F

FB-Productions

Guest
I feel like there was some JS extension for this - essentially you want to create an off-screen <input> element, give it focus (.focus()), and that will pop up the system keyboard. Then listen to "blur" event for text having been finalized and check .value for the current value.
So a JavaScript extension would need to be made for that to work? Sadly I don't have any experience with JS, so are there any other workarounds or can you please go into more detail on how to create such an extension and what those JS functions you mentioned represent?
(If you can somehow locate the link to the JS extension you mentioned, that would be great!)
Thanks for the help!
 
R

Reventador

Guest
I feel like there was some JS extension for this - essentially you want to create an off-screen <input> element, give it focus (.focus()), and that will pop up the system keyboard. Then listen to "blur" event for text having been finalized and check .value for the current value.
I've tried doing this.

JavaScript:
function openKeyBoard(){
    document.getElementById("canvas").addEventListener('click', function(){
        document.getElementById("dummyInput").focus();
        //alert("click!");
    });

    document.getElementById("canvas").addEventListener('tap', function(){
        document.getElementById("dummyInput").focus();
        //alert("tap!");
    });

    document.getElementById("canvas").addEventListener('touch', function(){
        document.getElementById("dummyInput").focus();
        //alert("touch!");
    });
    return "keyboard open";
}
HTML
HTML:
<body>
        <div class="gm4html5_div_class" id="gm4html5_div_id">
            
            <canvas id="canvas" width="1" height="1">
                <input id="dummyInput" type="text">
              
                <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
          
        </div>

        <script type="text/javascript" src="html5game/webbcanvas.js?LJGYB=8024099543544"></script>
        <script>window.onload = GameMaker_Init</script>
    </body>

In gamemaker I just have a object that when clicked runs the JS extension function - this works, i get a debug callback when I have it in however the keyboard doesn't open.

When I click above the canvas, it opens the keyboard and fires the JSextension.

Any thoughts on this would be appreciated.
 
Top