0 votes

Hello!

So during the development of our jam game our team discovered an issue (luckily with 4 days to spare) in which it seems like, when you play an HTML export game on mobile, there is no way to have the virtual keyboard pop up when attempting to enter text into a text box. Likewise, there is no clipboard functionality. These both work perfectly fine in the desktop version of the same export, and apparently what we ran into is a known issue (Github Issue #32680).

However in that same issue, they mention some kind of workaround where you can directly edit the exported HTML base page for the game (presumably using this) to essentially pass normal HTML text input back and forth from the game. They do not mention or explain or link what this workaround is though, and none of the functions on that doc page seem directly relevant.

One obvious solution that immediately came to me is it should be pretty easy, using a click event or something, to just make a Control node based keyboard in Godot and have it only display on certain OSes (if that's even possible, idk that was next step if I can't figure this out). The only problem is that the game has a cooperative element where you continue the game state by sending relatively complicated hashes back and forth to each other, so even if I could DIY a keyboard solution then it wouldn't really solve the UX problem of having to fat finger in a 20 character code like an old Nintendo game. Ideally it would be great to have some kind of access to the clipboard, as we imagine players probably sharing the code over discord or even a text app or something.

tl;dr

  1. Virtual keyboard does not work on mobile HTML gameplay
  2. We mostly need the ability to copy and paste, but typing would also be cool
  3. Are there any known workarounds?

Thank you.

asked Jan 15 in Engine by AniMerrill (25 points)

1 Answer

0 votes
Best answer

You could probably do an entry form in html+Javascript and let overlay the game.

You can communicate with the html page via Javascript.eval().
See:
https://docs.godotengine.org/en/3.1/getting_started/workflow/export/exporting_for_web.html#calling-javascript-from-script
https://docs.godotengine.org/en/3.1/classes/class_javascript.html#javascript

An input in HTML should work like every other html page on that device and therefore allow copy & paste + virtual keyboard (if no physical kb is present).

Due to the asynchronuous nature of the form input (eval can/should not wait for an answer) you'd probably have to poll for a result. At least I don't know of a method of directly calling back / signalling back to Godot from HTML.

Polling means that the html input form sets some (javascript global) variable which you repeatedly check from Godot (i.e. in a Timer each 50ms). Make sure to set the parameter for use_global_execution_context to true.

If a simple line entry is sufficient you might just directly use/eval the Javascript window.prompt().

https://www.w3schools.com/jsref/met_win_prompt.asp

answered Jan 16 by wombatstampede (2,785 points)
selected Jan 16 by AniMerrill

Yeah somebody on reddit had told me about the JavaScript.eval() thing, so I just used it to call a prompt and a couple other things.

func _ready():
    connect("focus_entered", self, "js_text_entry")

func js_text_entry():
    text = JavaScript.eval(
            "prompt('%s', '%s');" % ["Please enter text:", text], 
            true
            )

    release_focus()

Here's the full source for what I did over on Github, for any future Googlers who want a more comprehensive example. Basically just a script that can go on any LineEdit node.

I do hope that 4.0 possibly adds a more eloquent solution to being able to use UI on mobile HTML games. It's frankly impressive that the desktop versions of all games come with copypaste menus so you don't have to make that functionality yourself, it's sort of disappointing that isn't there on mobile.

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.