Unity 发布web版本自定义logo进度条和全屏显示

最新推荐文章于 2023-05-26 10:10:27 发布

刘大嘿

最新推荐文章于 2023-05-26 10:10:27 发布

阅读量1.8k

点赞数

分类专栏： Unity

Unity 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先，Unity官方有一个Web Player Deployment ：http://docs.unity3d.com/Manual/WorkingwithUnityObject.html，就讲了怎样自定义logo和屏蔽右键等一系列的东西，读完了估计也了解的差不多了。

下面是我的找到的一些方法，自定义logo：

var config = {
width: window.innerWidth,
height: window.innerHeight,
params: {
backgroundcolor: "FFFFFF",
bordercolor: "FFFFFF",
textcolor: "FFFFFF",
logoimage: "bunny-welcome.png",
progressbarimage: "bar_frame.png",
progressframeimage: "bar.png",
enableDebugging:"0",
disableContextMenu:true //屏蔽右键
}
};
var u = new UnityObject2(config);

或者是这种方法：

//config其实可以不用要

var config = {
width: window.innerWidth,
height: window.innerHeight,
params: { enableDebugging:"0" }
};

var params = {
backgroundcolor: "FFFFFF",
bordercolor: "FFFFFF",
textcolor: "FFFFFF",
logoimage: "bunny-welcome.png",
progressbarimage: "bar_frame.png",
progressframeimage: "bar.png",

disableContextMenu:true
};
var u = UnityObject2({ params: params });

自定义logo其实就是这么简单，接下来看全屏显示：

先转载一篇详细的：http://unitycoder.com/blog/2013/03/31/webplayer-100-width-height/

You are now viewing the HTML source, find lines:
var config = {
width: 960,
height: 600,
Replace those numbers with:
var config = {
width: window.innerWidth,
height: window.innerHeight,
Go down a bit, find lines:
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
}
After line “text-align: center;”, add these lines:
margin:0px;
padding:0px;
width:100%;
height:100%;
Next find line:
div.content {
margin: auto;
width: 960px;
}
Modify that style to:
div.content {
margin: auto;
width: 100%;
height:100%;
}
Find this part:
div#unityPlayer {
cursor: default;
height: 600px;
width: 960px;
}
Modify it to:
div#unityPlayer {
cursor: default;
height: 100%;
width: 100%;
}
*NEW: Insert this style also, to override embed object width:
embed
{
width:100% !important;
}
Next we just remove the extra elements from the page, so that only the player is left
Find this line, and delete it:
Unity Web Player | v4d
Same here, remove this line:
« created with <a href=”http://unity3d.com/unity/” title=”Go to unity3d.com”>Unity</a> »
Save the html file and test it!

其实大概的意思就是把config的宽高值变成 window.innerWidth和window.innerHeight，找到body，content，unityPlayer，把他们的宽高变成100%，根据情况把margin和padding变成 0px。删除不用的文字和链接，然后保存就可以看到已经全屏了。具体来阅读上面的吧，写的非常详细。

最后进度条出来的效果：