插件
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
- 项目设置窗口中选择自定义的模板