Unity项目发布webgl端时Input Field控件是无法支持中文的,那么解决这个问题的一个思路就是重写unity的inputField控件来调用html页面上的input表单控件,然后输入完成后将输入的值传给unity的inputfield控件。
主页面
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>资源多维精准展现</title>
<link rel="shortcut icon" href="TemplateData/favicon.png">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="TemplateData/jquery.min.js"></script>
<script src="Build/jquery-1.8.2.min.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
$(function(){
ChangeCanvas();
$(window).resize(function(){
document.getElementById('int').focus();
});
document.getElementById('int').focus();
});
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/webshow.json",{onProgress: UnityProgress});
function goBack() {
window.history.go(-1)
};
function parseUrl() {
var searchHref = window.location.search.replace('?', '');
var str_before = searchHref.split("&")[0];
var params = searchHref.split('&');
var returnParam = {};
params.forEach(function (param) {
var paramSplit = param.split('=');
returnParam[paramSplit[0]] = paramSplit[1];
});
return returnParam;
}
window.params = parseUrl();
var inputType='';
function enter(){
hideMask();
var ip = "http://192.168.1.126:8088";
gameInstance.SendMessage("Canvas","MainEnter",params.CAMPSITE_ID+"_"+ip);
}
function ChangeCanvas() {
hideWrap();
}
function showWrap(str,lx){
inputType=lx;
$("#iframe_wrap").show();
var win = $("#iframe").contents()[0];
$("#iframe").contents().find("#int").val(str);
win.getElementById('int').focus();
}
function hideWrap(){
$("#iframe_wrap").hide();
//$("#iframe").contents().find("#int").val("");
}
function sureWrap(){
var val = $("#iframe").contents().find("#int").val();
gameInstance.SendMessage("Main Camera","get"+inputType+"Value",val);
document.getElementById('int').focus();
gameInstance.SendMessage("Main Camera",inputType,val);
hideWrap();
}
function hideMask() {
$('.x-frame-mask').remove();
}
function size(left, top, _width, _height){
$('#gameContainer').height();
$("#iframe_wrap").css({"left":left,"top":top,"width":_width,"height":_height});
document.getElementById('int').focus();
}
</script>
<style type="text/css">
.webgl-content,#gameContainer,canvas{
width: 100%;
height: 100vh;
}
.hidden{
/* display: none; */
}
.x-frame-mask {
position: fixed;
float: left;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .2);
z-index: 99999;
}
.frameloading {
position: fixed;
z-index: 9999;
left: 50%;
top: 50%;
margin-top: -140px;
margin-left: -140px;
}
.x-frame-mask .x-mask-msg-text {
padding: 125px 125px;
background-image: none;
background-color: transparent;
width: 250px;
height: 250px;
}
@-moz-keyframes rotate{
100%{
-moz-transform:rotate(0deg);
}
100%{
-moz-transform:rotate(360deg);
}
}
@-webkit-keyframes rotate{
100%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
@keyframes rotate{
100%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.x-frame-mask .m-17 {
width: 250px;
height: 250px;
filter: alpha(opacity = 50);
-moz-opacity: 0.50;
opacity: 0.50;
background: no-repeat url("TemplateData/2.png") left top;
background-size: 250px 250px;
margin: 0 auto;
-webkit-background-size: 250px 250px;
-moz-background-size: 250px 250px;
-webkit-border-radius: 175px;
border-radius: 175px;
-moz-transition: all .6s;
-webkit-transition: all .6s;
transition: all .6s;
-moz-animation: rotate 0.6s infinite linear;
-webkit-animation: rotate 0.6s infinite linear;
animation: rotate 0.6s infinite linear;
}
.x-frame-mask .m-19 {
width: 250px;
height: 250px;
filter: alpha(opacity = 70);
-moz-opacity: 0.70;
opacity: 0.70;
background: no-repeat url("TemplateData/4.png") left top;
background-size: 250px 250px;
margin: 0 auto;
margin-top: -100%;
-webkit-background-size: 250px 250px;
-moz-background-size: 250px 250px;
-webkit-border-radius: 175px;
border-radius: 175px;
-moz-transition: all .2s;
-webkit-transition: all .2s;
transition: all .2s;
-moz-animation: rotate 2s infinite linear;
-webkit-animation: rotate 2s infinite linear;
animation: rotate 2s infinite linear;
}
.x-frame-mask .m-20 {
width: 250px;
height: 250px;
filter: alpha(opacity = 50);
-moz-opacity: 0.50;
opacity: 0.50;
background: no-repeat url("TemplateData/5.png") left top;
background-size: 250px 250px;
margin: 0 auto;
margin-top: -100%;
-webkit-background-size: 250px 250px;
-moz-background-size: 250px 250px;
-webkit-border-radius: 175px;
border-radius: 175px;
-moz-transition: all .8s;
-webkit-transition: all .8s;
transition: all .8s;
-moz-animation: rotate 0.8s infinite linear;
-webkit-animation: rotate 0.8s infinite linear;
animation: rotate 0.8s infinite linear;
}
.x-frame-mask .m-21 {
width: 250px;
height: 250px;
filter: alpha(opacity = 50);
-moz-opacity: 0.50;
opacity: 0.50;
background: no-repeat url("TemplateData/6.png") left top;
background-size: 250px 250px;
margin: 0 auto;
margin-top: -100%;
-webkit-background-size: 250px 250px;
-moz-background-size: 250px 250px;
-webkit-border-radius: 175px;
border-radius: 175px;
-moz-transition: all .3s;
-webkit-transition: all .3s;
transition: all .3s;
-moz-animation: rotate 0.3s infinite linear;
-webkit-animation: rotate 0.3s infinite linear;
animation: rotate 0.3s infinite linear;
}
.x-frame-mask .m-22 {
width: 250px;
height: 250px;
filter: alpha(opacity = 80);
-moz-opacity: 0.80;
opacity: 0.80;
background: no-repeat url("TemplateData/7.png") left top;
background-size: 250px 250px;
margin: 0 auto;
margin-top: -100%;
-webkit-background-size: 250px 250px;
-moz-background-size: 250px 250px;
-webkit-border-radius: 175px;
border-radius: 175px;
-moz-transition: all .25s;
-webkit-transition: all .25s;
transition: all .25s;
-moz-animation: rotate 25s infinite linear;
-webkit-animation: rotate 25s infinite linear;
animation: rotate 25s infinite linear;
}
.x-frame-mask .m-23 {
width: 250px;
height: 250px;
filter: alpha(opacity = 80);
-moz-opacity: 0.80;
opacity: 0.80;
background: no-repeat url("TemplateData/8.png") left top;
background-size: 250px 250px;
margin: 0 auto;
margin-top: -100%;
-webkit-background-size: 250px 250px;
-moz-background-size: 250px 250px;
-webkit-border-radius: 175px;
border-radius: 175px;
-moz-transition: all .3s;
-webkit-transition: all .3s;
transition: all .3s;
-moz-animation: rotate 0.3s infinite linear;
-webkit-animation: rotate 0.3s infinite linear;
animation: rotate 0.3s infinite linear;
}
.x-frame-mask .xzleft {
-webkit-transform: rotateZ(720deg);
-moz-transform: rotateZ(720deg);
-o-transform: rotateZ(720deg);
-ms-transform: rotateZ(720deg);
transform: rotateZ(720deg);
}
.logo,.progress{
display: none;
}
.input-hidden{
width: 0;
height: 0px;
position: fixed;
top: 0;
right: 0;
}
</style>
</head>
<body onresize="ChangeCanvas()" style="margin: 0; background-color:#222C36;">
<div class="webgl-content" style="z-index: -1;">
<div id="gameContainer" style="width:100%; height: 100vh"></div>
<div class="x-frame-mask">
<div class="frameloading">
<div class="m-17 "></div>
<div class="m-19 "></div>
<div class="m-20 xzleft"></div>
<div class="m-21 "></div>
<div class="m-22 "></div>
<div class="m-23 xzleft"></div>
</div>
</div>
<input class="input-hidden" type="text" id="int" value="asdasdasdasd">
</div>
<div id="iframe_wrap" style="width:200px;height:30px;position:absolute;left:10%;top:10%;overflow: hidden;display:none;">
<iframe id="iframe" src="input.html" scrolling="none" frameborder="0" style="width:100%;height:100%;border:none;">
</iframe>
</div>
<script>
ChangeCanvas();
</script>
</body>
</html>
输入框页面:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<style type="text/css">
*{
padding:0;
margin:0;
}
#int_wrap{
}
.input-box{
}
.input-box{
width: calc(100% - 2px);
height: 32px;
display: flex;
justify-content: center;
border: 1px solid #5d76a5;
}
.input-text{
width: calc(100% - 34px);
min-width: 0;
padding: 0 10px;
font-size: 14px;
background: #2b3649;
border: none;
color: #fff;
border-right: none;
height: 31px;
line-height: 31px;
outline: none;
}
.search-btn{
/*background-image: url(TemplateData/search.png);
background-position: 5px 6px;
background-repeat: no-repeat;
*/
height: 32px;
width: 34px;
border: none;
background-color: #2b3649;
}
body{
overflow: hidden;
}
</style>
</head>
<body >
<div id="int_wrap">
<div class="input-box" >
<input class="input-text" type="text" id="int"><a onclick="top.sureWrap()" class="search-btn"></a>
</div>
</div>
<script>
document.onkeyup=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e&&e.keyCode==13){
top.sureWrap()
}
}
</script>
</body>
</html>
当我们点击unity的inputfiled控件时调用主页面的showWrap方法,在当前控件的同位置显示html的input控件,然后在该控件中输入文字,确定后调用主页面的sureWrap方法将输入的值传给unity的inputfiled控件,并隐藏html页面的input控件