webGL平台Unity打开Color窗口

最新推荐文章于 2023-08-04 10:59:20 发布

探求虚无

最新推荐文章于 2023-08-04 10:59:20 发布

阅读量2k

点赞数 1

分类专栏： Unity3d WebGL 文章标签： Unity3D webgl

本文链接：https://blog.csdn.net/tankerhunter/article/details/52626915

版权

Unity3d 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

WebGL

2 篇文章 0 订阅

订阅专栏

前一段时间写过一个windows平台下unity程序打开颜色窗口的方法，最后需要给出一个在线的小demo展示，当时的颜色窗口是window平台使用的。所以需要调用html提供的颜色选择窗口。

要解决这样一个问题，首先要实现的是如何在Html上打开一个颜色选择窗口，并想办法用unity3d来调用这样一个方法，这样就实现了一半。然后利用html获取到选中的颜色并传回unity，加载到背景上，就实现了一个点击ui打开颜色选择框并加载颜色这样一个过程。

1、打开颜色对话窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html5 input color标签</title>
	</head>
	<body>
		<input style="display:none;" type="color" id="color" />
		<button id="btn">弹出色盘</button>
	</body>
    <script type='text/javascript'>
document.getElementById('btn').onclick = function(){
	document.getElementById('color').click();
};
document.getElementById('color').onchange = function(){
	alert('您选择的颜色是：'+this.value)
};
</script>
 </html>

利用以上代码在就可以实现一个基本的，打开颜色窗口，显示所选择的颜色。

2、查看Unity调用js，html访问unity的方法

在unity 的Plugins中新建立一个jslib后缀的文件，并写入如下代码：

var WindowDll = {
    OpenColorDialog: function()
    {
        document.getElementById('color').click();
    }
};

mergeInto(LibraryManager.library, WindowDll);

这样，就可以在C#中导入：

public static class WindowDll
{
[DllImport("__Internal")]
public static extern void OpenColorDialog();
}

只需要在其他任何脚本中调用这个OpenColorDialog方法，就可以调用到对应的js文件中的代码。

3、修改index.html文档

在打包生成index.html文件中的body标签内部，写入：

并在任何script标签内写入：

document.getElementById('color').onchange = function(){
SendMessage("Script","SetColor",this.value);
}

就可以实现将选中后的颜色传回到unity的c#方法中，得以实现全过程