Unity插件

您所在的位置:网站首页 android内嵌的浏览器控件 Unity插件

Unity插件

2024-07-16 16:44| 来源: 网络整理| 查看: 265

一、相关插件学习分析: (一)Embedded Browser 插件         1、优点:PC端优选

        设置简单,功能强大:输入url地址,拉取网页信息,可设置页面尺寸;

        可显示透明背景的网页;可与显示的页面进行互动(页面互动和相应添加的unity事件)。

        2、缺点:平台有限

        不支持android、iOS、UWP平台,仅支持PC端、Unity编辑器、 OS、Linux;

        3、资源地址

        资源文件夹名:ZFBrowserUnity Embedded Browser | GUI 工具 | Unity Asset Store;

(二)UniWebView插件         1、优点:据说在移动端效果最好

        适用于Andriod、ios和Mac os。支持WP8。

        2、缺点:平台有限

        不支持windowsPC桌面系统,包括编辑器状态,显示的网页是贴屏显示。

        3、测试结果

        (1)该插件显示的网页是贴屏显示,显示网页覆盖做的UI,UI放到显示网页的Image外部,不要有重叠部分才能相应实现对应UI功能。故,无法实现点击页面/页面位置,显示放大的页面,这个功能。(也可能了解不够深入,未能解决该问题)。

        (2)该插件可以简单方便的设置需要加载什么样的网页(输入地址链接即可),较简单的设置是否显示网页,前进后退网页页面等功能,以及设置加载网页的显示位置、大小尺寸。但无法设置改变加载的网页的尺寸(以适配显示区域)。

        4、资源地址

        UniWebView 4 | 网络 | Unity Asset Store;

(三)UnityAndroidWebviewToTexture插件         1、优点:可满足很多需求

        (1)支持安卓移动端,3d环境使用,非贴屏显示使用。

        (2)使用简单,且通过地址获取的网页可以自适应显示在限定的显示区域。

        (3)网页端内容改变时,移动端会自动刷新;

        (4)支持触屏点击、双击等事件。

        2、缺点:互动功能有限

        (1)移动端显示为静态的图片的Texture/Texture2D,或3d物体的Renderer的Mesh;

                无法与网页进行互动。

        (2)找不到设置网页透明通道和设置网页页面放缩的功能方法。

        3、测试结果

                理论:通过地址,获取网页页面byte信息,然后创建加载新的Texture2D显示在移动端。

        4、资源地址:

Texture Web View (Android) | GUI 工具 | Unity Asset Store;

(四)3D WebView for Android插件         1、优点:可满足多个需求

        (1)有多种包,可选支持android、ISO、WindowsPC、macOS等待。

        (2)可以动态显示加载的页面,且可以和加载的页面进行交互(如加载百度页面,可使用百度页面里的搜索栏进行搜索、页面跳转等);

        (3)对页面添加的事件也可以正常运行(如双击显示展示的页面,点击展示的页面之外区域,掩藏页面等);

        (4)可动态更改页面地址,显示不同的页面;可动态设置显示页面的分辨率来实现在显示框里放大或缩小页面。

        2、缺点:页面透明度设置存在问题

        (1)找不到设置加载的网页背景透明度的设置,显示的页面背景不透明度是百分之百。

        (2)在线卑微,说支持透明网页,但还没发现使用方法

        3、测试效果:功能挺强大。倾向优选 二、遇到的存在问题: (一)3D WebView显示问题(2021/06/25)         1、功能需求

        通过使用插件文档里,在前端网页端里添加标签,实现显示的页面背景透明显示。

        2、相关资料

        (1)开发文档地址:

3D WebView: cross-platform web browser for Unity (Android, iOS, Windows, macOS, and UWP / Hololens) | Vuplex

       (2)官方博客——透明度设置: 

How can I make a webview transparent? | Vuplex Support

         3、问题与解决过程

        我这边是前端那边做的页面是全透明的,unity端给页面加背景底图。

        最初加载过来的页面是不透明的,有网页背景显示;

        后来查官网blog,让前端同事帮忙在页面加上下面这个设置,解决透明度问题:

        4、tip

        页面修改更新后,客户端这边记得清理下浏览器页面/unity缓存;

        不然加载的页面可能显示是修改前的页面,没有透明度效果。

(二)项目中使用3D WebView存在的问题         1、问题:

        (1)在3d环境中显示页面可正常显示(使用WebView);

        (2)在画布环境中加载页面时(使用CanvasWebView),加载的页面完全看不到,环境中页面显示区域显示效果是什么都没有,但触摸点击,可发现该位置上有相关页面,且可正常与页面进行互动(如点击到百度页面的输入框,可以输入文字进行搜索),页面上相关点击事件也可正常使用。

        2、初步研究:

经测试排除画布方向错误、镜头位置和渲染层级影响,以及URP管道渲染影响(支持URP技术)的可能。

        3、进一步研究研究:         (1)原因:

        webview设置的分辨率和webview所在的canvas的设置冲突,WebView缩放问题;

        (2)表现:

                1)默认情况设置:

                CanvasWebViewPrefab预制体上分辨率InitialResolution=1;

                CanvasWebViewPrefab预制体运行时生成的WebViewPrefab的分辨率InitialResolution=1300;

                canvas的CanvasScaler可根据需求设置;

                2)当我们需要根据需求缩放页面时:

                如加载的页面在显示框里放大显示时,改CanvasWebViewPrefab的Resolution为0.3,0.4等等

                3)页面不显示时的错误参数

                (无报错,也有可能是切换调试器晚了,错过开始的报错提示):

                CanvasWebViewPrefab预制体上分辨率InitialResolution=2.5;(实际加载显示的页面进行缩小)

                canvas的CanvasScaler的Mode=Constant Pixel Size(没有设值预设尺寸:(Mode=ScaleWithScreenSize(3840*2160)));

                canvas的Canvas-RenderMode=ScreenSpace-Overlay(非项目下这个参数这样设置没问题,但项目里该模式不显示出页面)

                4)页面不显示时的错误参数(有报错):

                CanvasWebViewPrefab预制体上分辨率InitialResolution=2.5;

                canvas的CanvasScaler的Mode=ScaleWithScreenSize(3840*2160);

                canvas的Canvas-RenderMode=Main Camera

                报错:

                WebView分辨率为1300,但画布设置分辨率过大,不匹配,请修改合适的分辨率;

ArgumentException: The application specified an abnormally large webview size (9550px x 4380px), and webviews of this size are normally only created by mistake. A webview's default resolution is 1300px per Unity unit, so it's likely that you specified a large physical size by mistake or need to adjust the resolution. For more information, please see IWebView.SetResolution: https://developer.vuplex.com/webview/IWebView#SetResolution         (3)解决问题时设置

                CanvasWebViewPrefab——InitialResolution=1;

                canvas——CanvasScaler的Mode=ScaleWithScreenSize(3840*2160);

                canvas的Canvas-RenderMode=ScreenSpace-Camera;

                canvas的Canvas-RenderCamera=Main Camera;

        (4)早期可正常运行时相关测试数据

                CanvasWebViewPrefab——InitialResolution=1;

                canvas——CanvasScaler的Mode=ScaleWithScreenSize(3840*2160);

                canvas的Canvas-RenderMode=ScreenSpace-Camera;

                canvas的Canvas-RenderCamera=ScreenSpace-Camera;

        (5)猜测问题原因

                WebView缩放问题,导致页面虽加载,功能正常,但因为缩放适应出现错误,导致最终看不到加载页面的情况;

        (6)资源地址

3D WebView for Android (Web Browser) | GUI 工具 | Unity Asset Store;

三、插件使用 Embedded Browser 加载页面的使用(2021/08/30) 1、插件

        Embedded Browser 插件(文件夹名ZFBrowserUnity)

        Unity编辑器内运行、PC端打包运行都支持。

2、使用

        将插件文件里的Browser(GUI)预制体拖到目标UI上;

        加载脚本:根据需求自己写加载页面的脚本,并绑定到Browser(GUI)预制体上:

        如下图中:LoadWebPage脚本

        使用到加载Api:gameObject.GetComponent().LoadURL(url, true);

EG: string testURL = "https://www.baidu.com"; gameObject.GetComponent().LoadURL(testURL, true); 3、详细参考插件demo

个人学习笔记,不足之处欢迎指点,诚心学习!

注:查找资料时,看到一篇插件整理挺详细的文章,贴下地址,联系侵删:

【Unity 实用工具】✨| Unity 十款 浏览器相关插件 整理(web view / browser)-腾讯云开发者社区-腾讯云



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3