Unity WebGL文本输入
插件
kou-yeung/WebGLInput
版本如下图所示:
使用
Unity版本:2019.4.40
使用:文本输入组件对象添加WebGLInput脚本,没有其他额外操作,输入组件正常使用
问题:插件中部分C#语法需要高版本支持,可自行修改。
发布
使用WebGL默认模板发布。
问题:
非全屏模式下,文本输入正常,输入光标跟随移动。
全屏模式下,文本输入异常,输入光标不跟随移动。
解决:
运行插件作者的示例项目(默认),查看网页原代码。
修改index.html文件,覆盖全屏按钮的点击事件。修改如下:
<script>var fullscreenButton = document.querySelector(".fullscreen");fullscreenButton.onclick = function () {document.makeFullscreen('unityContainer');};</script>
完整index.html
<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Wooden Toy Production Line Webgl</title><link rel="shortcut icon" href="TemplateData/favicon.ico"><link rel="stylesheet" href="TemplateData/style.css"><script src="TemplateData/UnityProgress.js"></script><script src="Build/UnityLoader.js"></script><script>var unityInstance = UnityLoader.instantiate("unityContainer", "Build/WebGL.json", { onProgress: UnityProgress });</script>
</head><body><div class="webgl-content"><div id="unityContainer" style="width: 1008px; height: 567px"></div><div class="footer"><div class="webgl-logo"></div><div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div><div class="title">Test Text Input</div></div></div><script>var fullscreenButton = document.querySelector(".fullscreen");fullscreenButton.onclick = function () {document.makeFullscreen('unityContainer');};</script>
</body></html>
成功解决
小优化
使用 WebGL 模板
创建一个webgl模板,不需要每次发布后修改index.html
- 找到引擎安装路径,在文件夹中查找webgl模板,例如搜索 WebGLTemplates
- Assets文件夹下新建文件夹WebGLTemplates,此文件夹中新建文件夹Custom,名字区分不同的模板
- 复制默认模板中的内容到Custom文件夹中,修改index.html
- 项目设置窗口中选择自定义的模板