Unity WebGL Mobile browser workaround and keyboard input fix?

user_13851659 0
Viewed 4275

Hey everyone so I read that unity doesn't really support mobile browsers for WebGL games. im using 2020.1.4.And sure enough, the game gets a bit distorted by not being scaled properly. it's like the camera is bigger so it shows on the screen that blue color. I tried some things, setting width and height to auto or removing config.devicePixelRatio = 1; as suggested by a friend but nope! still looks horrible! And if that wasn't enough the keyboard doesn't show up when clicking on form fields. i tried this one https://github.com/eforerog/keyboardMobileWebGLUnity which displayed an error when pressed on and this one https://github.com/dantasulisses/WebMobileInputFix which just didn't even compile!

Any ideas, please?

unity-webgl unity3d mobile
5 Answers

I did my research and tried every plugin I could find. I used Unity 2020.3.28f1 and tested both on Android-phone and iPhone.Here is my report.

These plugins don't work:

https://unitylist.com/p/f58/Unity-webgl-inputfield
https://github.com/eforerog/keyboardMobileWebGLUnity
https://github.com/dantasulisses/WebMobileInputFix

This plugin works, but you should use different settings for IOS and Android on same input field game object. If you use "prompt", it works for IOS only, and "overlay" works for Android only. Look for documentation in page:

https://github.com/unity3d-jp/WebGLNativeInputField

And this plugin works best at the moment. Yes, it is a bit ugly though, but it works.

https://github.com/kou-yeung/WebGLInput

And there is a fix for Unity 2021 for it:

https://github.com/kou-yeung/WebGLInput/releases/tag/1.0
user_74379030
user_162508350
user_185452190

I would recommend using the native js window.prompt() fields as of writing. They have great cross-platform support, allow for extra features like special characters, emojis, copy and paste etc. and are pretty easy to set up. Once (or honestly if ever) Unity adds their own reliable implementation you can easily remove this lightweight implementation.

  1. Create a .jslib file that has a function opening a window.prompt(description, currentText)
  2. Return the result at the end of that function back to a unity object with a recipient script
  3. Make a derivation from Unity's event system overwriting the OnApplicationFocus(bool focus) function (leaving it empty), to fix a sneaky Chrome Android bug.

That's it. The result should look something like in this demo: https://pop.demo.neoludic.games

If you want to save some development time on a feature that really should just be native in Unity, you can also check out my plugin based on the method above. https://neoludic-games.itch.io/pop-input

user_195090240

I also need to enable mobile virtual keyboard for running webgl on mobile device. I've tried the code from your mentioned url. It gives you some idea on how to do it, but the code are totally buggy and unusable. Now I am trying to implement it by myself.

user_106321560
Related