Unity WebGL 实现中文IME输入

参考项目：https://github.com/unity3d-jp/WebGLNativeInputField (项目实现了采用 html native input 可以激活中文输入法)

提醒：UI控件不能显示中文是中文字体的原因(把中文字体包含进去，可以去下载这个字体DroidSansFallback，体较小)，能使用中文输入法和UI显示中文是不同的问题。

需求实现：

我使用的UI插件是NGUI，点击UIInput或者UILabel时，将会调用native html input，并且我会传递 x y w h 4个参数给html (jslib)，然后html根据坐标和宽高创建input并且覆盖在我的游戏UI，功能实现简单，xywh正确计算即可。

下方例子控件是NGUI的UILabel，添加点击事件，调用Native Input，用户输入完毕后，获得html input 数据，更新UILabel。

------------------------------------------ 分割线 --------------------------------------------

核心代码是这两个文件，我希望首先先运行github的项目，再看我修改的代码，这样会比较容易理解。

//WebNativeDialog.jslib
var WebNativeDialog = {SetupOverlayDialogHtml:function(defaultValue,x,y,w,h){try {defaultValue = Pointer_stringify(defaultValue);} catch (e) {}if(!document.getElementById("nativeInputDialog")) {// setup htmlvar html = '<div id="nativeInputDialog" style="background:transparent; width:100%; height:100%; margin: 0; padding: 0; position: absolute; left: 0; top:0; z-index:888;">' +'<input id="nativeInputDialogInput" type="text" style="border: none; background: none; color: white; outline: none; display: block; position: relative; font-size: 20px; ">' +'</div>';$(document.body).append(html);$('#nativeInputDialogInput').keypress(function (event) {if (event.keyCode == 13) {$('#nativeInputDialog').hide();}});$('#nativeInputDialogInput').click(function () {return false;});$('#nativeInputDialog').click(function () {$('#nativeInputDialog').hide();});}$('#nativeInputDialogInput').val(defaultValue);$('#nativeInputDialogInput').css({left: x + 'px', top: y + 'px', width: w, height: h});$('#nativeInputDialog').show();$('#nativeInputDialogInput').focus();},HideUnityScreenIfHtmlOverlayCant:function(){if( navigator.userAgent.indexOf("Chrome/") < 0 ){document.getElementById("canvas").style.display="none";}},IsRunningOnEdgeBrowser:function(){if( navigator.userAgent.indexOf("Edge/") < 0 ){return false;}return true;},IsOverlayDialogHtmlActive:function(){return $('#nativeInputDialog').is(':visible');},IsOverlayDialogHtmlCanceled:function(){return ($('#nativeInputDialog').is(':visible'));},GetOverlayHtmlInputFieldValue:function(){var returnStr = $('#nativeInputDialogInput').val();var bufferSize = lengthBytesUTF8(returnStr) + 1;var buffer = _malloc(bufferSize);stringToUTF8(returnStr, buffer, bufferSize);return buffer;}};
mergeInto( LibraryManager.library , WebNativeDialog );

//WebGLNativeInputField.cs
public class WebGLNativeInputField : MonoBehaviour {UILabel mInput;// Use this for initializationvoid Start () {mInput = GetComponentInChildren<UILabel>();}public void OnClickInput (){var inputbounds = CalculateWidgetScreenBounds (gameObject.GetComponentInChildren<UILabel> ().gameObject.transform);WebNativeDialog.SetUpOverlayDialog (mInput.text,(int)inputbounds.min.x, (int)inputbounds.min.y, (int)inputbounds.size.x, (int)inputbounds.size.y);mInput.text = "";StartCoroutine(this.OverlayHtmlCoroutine());}private IEnumerator OverlayHtmlCoroutine(){yield return new WaitForEndOfFrame();#if UNITY_WEBGL && !UNITY_EDITORWebGLInput.captureAllKeyboardInput = false;while (WebNativeDialog.IsOverlayDialogActive()){yield return null;}WebGLInput.captureAllKeyboardInput = true;if (!WebNativeDialog.IsOverlayDialogCanceled()){mInput.text = WebNativeDialog.GetOverlayDialogValue();}#endif}static public Bounds CalculateWidgetScreenBounds (Transform child){UIWidget[] widgets = child.GetComponentsInChildren<UIWidget>(true) as UIWidget[];Bounds b = new Bounds(Vector3.zero, Vector3.zero);bool first = true;for (int i = 0, imax = widgets.Length; i < imax; ++i){UIWidget w = widgets[i];Vector2 size = w.localSize;Vector2 offset = w.pivotOffset;Transform toWorld = w.cachedTransform;float x = (offset.x + 0.5f) * size.x;float y = (offset.y - 0.5f) * size.y;size *= 0.5f;// Start with the corner of the widgetVector3 v = new Vector3(x - size.x, y - size.y, 0f);// Transform the coordinate from relative-to-widget to world spacev = toWorld.TransformPoint(v);v = UICamera.currentCamera.WorldToScreenPoint(v);v.y = Screen.height - v.y;if (first){first = false;b = new Bounds(v, Vector3.zero);}else{b.Encapsulate(v);}// Repeat for the other 3 cornersv = new Vector3(x - size.x, y + size.y, 0f);v = toWorld.TransformPoint(v);v = UICamera.currentCamera.WorldToScreenPoint(v);v.y = Screen.height - v.y;b.Encapsulate(v);v = new Vector3(x + size.x, y - size.y, 0f);v = toWorld.TransformPoint(v);v = UICamera.currentCamera.WorldToScreenPoint(v);v.y = Screen.height - v.y;b.Encapsulate(v);v = new Vector3(x + size.x, y + size.y, 0f);v = toWorld.TransformPoint(v);v = UICamera.currentCamera.WorldToScreenPoint(v);v.y = Screen.height - v.y;b.Encapsulate(v);}return b;}
}

警告：2018-06-14：

现在遇到一个问题，WebGL 在全屏下，这个不能使用(无法显示出这个 native input)，怀疑可能和全屏一些深度显示有关，没有解决这个问题。临时方案是全屏下不开启native input，如果有解决这个问题的，希望可以告诉我。

Unity WebGL 实现中文IME输入相关推荐

Unity WebGL 输入框(InputField)接受中文输入
一.病症 Unity发布成webgl后,inputfield没法接受中文输入二.病因 Unity 在webgl平台下对IME的支持有问题 Unity与IME的官方说法描述: Unity官方明确说明: ...
Unity开发webgl学习中文手册的笔记
Unity开发webgl没做过,看手册怕忘下次难得的找所以放到这来了,可以自行去看手册桌面平台的大多数主要浏览器的当前版本都支持 Unity WebGL 内容,但不同浏览器提供的支持程度存在差异. ...
Unity WebGL错误集锦
ips: 0 Unity的PlayerSettings的otherSettings或者Publish Settings里面的Enable Exceptions里面选择Full StackTrace , ...
Unity WebGL 下载替换Word模板数据
文章目录插件包介绍一.导入自己Word模板二.设置Word模板三.创建报告基础数据四.初始化下载Word 参数五.打包WebGL 六.设置配置文件 1.文件位置 2.设置参数 3.配置文件 ...
unity WebGL
自加入Unity WebGL平台以来,Unity的开发团队就一直致力于优化WebGL的内存消耗.我们已经在Unity使用手册上有对于WebGL内存管理的详尽分析,甚至在Unite Europe 201 ...
Unity WebGL发布及Ubuntu Apache服务器部署
Unity WebGL发布及Ubuntu Apache服务器部署 Unity 中WebGL的设置 Ubuntu Apache web服务器搭建网页修改附一:Ubuntu 文件操作常用命令附二:A ...
Unity WebGL开发
教程来啦一.WebGL不能干的那些事二.注意事项 1.播放声音 2.跨域 3.发布http or https? 4.包体大小 5.Odin 6.T序列化失败三.参考资料四.Build 主要步骤 ...
Qt 二级菜单栏中文无法输入问题
问题描述:Qt5.3.1版本在建立主界面的二级菜单的时候,中文无法输入,而英文确是可以输入的.(首先我在网页上面搜索了一下,他们说是Qt的设计问题.) 解决方法: (1)粘贴复制,把中文写在其他的地方 ...
java nifty_jme3与nifty gui1.3结合，修改使其支持中文的输入与显示
1.nifty gui1.3中修改代码,使其支持中文的输入: com.jme3.input.awt.AwtKeyInput类,添加toAWTCode(int key)方法,将jme3中的keyCode ...

Unity WebGL 实现中文IME输入

警告：2018-06-14：

Unity WebGL 实现中文IME输入相关推荐

最新文章

热门文章