Unity中webgl使用避雷要素指南

 更新时间:2021年09月03日 11:14:52   作者:LOONGV  
这篇文章主要介绍了Unity中webgl使用过程中会踩过的坑,以及如何解决这些问题,有需要的朋友可以借鉴参考下,希望可以对广大读者朋友能够有所帮助

1.不支持ios设备播放音频(无论是MP3还是ogg格式)

目前是通过unity调用html的Audio标签播放来实现跨平台音频播放的。

首先在Assets文件夹下创建Plugins文件夹,在其中创建externFunction.jslib文件用于调用js方法,文件内容如下:

mergeInto(LibraryManager.library, {
PlayAudios: function (audioname) {
	PlayAudio(Pointer_stringify(audioname));
}
});

之后再Scripts目录下创建一个C#脚本用于调用

    /// <summary>
    /// 按照音频名播放音频
    /// </summary>
    /// <param name="audioname"></param>
    [DllImport("__Internal")]
    private static extern void PlayAudios(string _audioName);
    /// <summary>
    /// 播放js音频
    /// </summary>
    /// <param name="_audioName"></param>
    public void PlayJsAudio(string _audioName,bool _play)
    {
         PlayAudios(_audioName,_play);
    }

之后再unity场景中想要播放音频的时候直接调用PlayJsAudio(_audioName,true)播放音频(false为暂停)。

打包到webgl后,在html中添加如下脚本

	function PlayAudio(audioid,isplay) {
		var player = document.getElementById(audioid)
		if(isplay)
		{
			player.play();
		}
		else
		{
			player.pause();
		}
	}

当然也需要添加对应的audio标签想要同时播放几段音频就需要创建几个audio标签(比如背景音乐一个,触发音频如按钮一个)

<audio id="bg" preload="auto"><source src="Audios/bg.mp3" type="audio/mpeg"></audio>
<audio id="button" preload="auto"><source src="Audios/button.mp3" type="audio/mpeg"></audio>

完成以上配置后不要忘记在发布出来的webgl目录下创建一个Audios文件夹,并将音频放进去,之后如果要播放背景音乐,则在C#中调用PlayJsAudio("bg",true),暂停为PlayJsAudio("bg",false);

注意IOS设备的浏览器不支持音频自动播放,为此没被需求方少抱怨╮(╯▽╰)╭

2.在ios设备的浏览器(无论是Safari 还是微信浏览器)

都会出现ui自适应的问题,安卓设备及pc都无问题。

可将Canvas物体上CanvasScalerde UIScaleMode设置为“ScaleWithScreenSize”,将ReferenceResolution设置为目标设备的分辨率(比如x:1440,y:2540),如下图

若不起作用,将Canvas做如下配置,注意将UI摄像机拖入RenderCamera中

3.发布到webgl的时候注意所有Text都需要使用自定义的字体

否则所有中文都不会显示,这里推荐使用思源字体或阿里巴巴字体,这些字体中都有免费商用的,不用担心版权问题。

4.若要更改loading界面

可以直接替换打包后TemplateData文件夹中的图片,如下所示

若要修改背景颜色,需要更改Build文件夹下面的json文件

若要改成背景图片,需要将此处改为"backgroundUrl": "图片相对路径",如下图所示,图片最好放在Build目录下

​​​​​​​

5.如果想做微信小程序可以通过laya进行后期制作

或者通过下方工具转换(当前版本不支持videoplayer)

https://github.com/wechat-miniprogram/minigame-unity-webgl-transform

6.在本地iis服务器运行没有问题

在线上服务器运行出现Wasm Memory access out of range 问题,建议换一台服务器,应该是线上服务器抽了~~这是真实项目遇到过的情况,在我本地的iis服务器和腾讯的存储桶中运行都一点问题没有,但是发布到客户的服务器后触发某button的时候就会报这个错误,我当时就提出是服务器的问题,但是形式比人强,客户硬是让我想办法解决,折腾到凌晨2点多,最后还是换了一台服务器,问题立马就没了···时隔5天,我再打开一开始发布到有问题的服务器上的项目,这个问题已经没有了···

7.在webgl中使用对象池模式可能会出现莫名其妙的状况

比如根据接口返回的数据生成一批元素的时候,在Editor或者本地测试都没有问题,但是发布到服务器后可能会出现部分元素未生成的情况,经过排查接口返回的数据是没有问题的,对象池的逻辑也是没有问题的;最后停用了对象池,而是每次结束后都destroy掉所有元素,然后重新生成,这样就不再出现问题。

8.在webgl中调用接口动态生成元素还有个坑

就是如果用户的网速够慢、手机购卡,用户可以连续触发生成功能,导致场景中的元素是设计中的两倍,所以涉及到网络的触发功能最好加一个状态字段防止用户多次触发。

以上就是Unity中webgl使用避雷要素的详细内容,更多关于Unity中webgl使用指南的资料请关注脚本之家其它相关文章!

相关文章

  • GIt的基本操作详解

    GIt的基本操作详解

    本文主要介绍了GIt的基本操作。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 彻底理解cookie,session,token的使用及原理

    彻底理解cookie,session,token的使用及原理

    这篇文章主要介绍了彻底理解cookie,session,token的使用及原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 分享10个程序员常用的的代码文本编辑器

    分享10个程序员常用的的代码文本编辑器

    通常操作系统和软件开发包中都包含文本编辑器,可以用来编辑配置文件,文档文件和源代码,这里分享一下程序员常用的代码编辑器,需要的朋友可以参考下
    2016-09-09
  • Matlab实现新冠病毒传播模拟效果

    Matlab实现新冠病毒传播模拟效果

    2022年4月11日报道,日本NEC公司8日宣布已开始利用最尖端的人工智能(AI)技术开发新冠疫苗,本文给大家带来了Matlab实现新冠病毒传播模拟效果,需要的朋友可以参考下
    2022-04-04
  • IDEA升级后Git拉取和推送的标签消失的解决方法

    IDEA升级后Git拉取和推送的标签消失的解决方法

    本文主要介绍了IDEA升级后Git拉取和推送的标签消失的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • postman扩展程序包安装与使用步骤

    postman扩展程序包安装与使用步骤

    这篇文章主要介绍了postman扩展程序包安装与使用步骤,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • 详解scratch3.0二次开发之scratch-blocks中的blocks的类型、定义和使用方法

    详解scratch3.0二次开发之scratch-blocks中的blocks的类型、定义和使用方法

    scratch-blocks是scratch-gui依赖的一个基本模块,blocks的作用是通过拖曳的方法组成blocks堆块,今天通过本文给大家分享scratch3.0二次开发之scratch-blocks的免编译修改方法,感兴趣的朋友一起看看吧
    2021-08-08
  • Python虽然很火找工作为什么这么难

    Python虽然很火找工作为什么这么难

    这两年因为第三波人工智能热潮让 Python火了一把,让中小学生、非程序员(产品经理、运营)都加入到了学习Python的行列,那之前Python火吗
    2019-06-06
  • Gitlab新建用户无法收到邮件的问题解决办法

    Gitlab新建用户无法收到邮件的问题解决办法

    在配置GitLab邮件服务时,可能因为环境或版本差异遇到问题,本文就来介绍一下Gitlab新建用户无法收到邮件的问题解决办法,感兴趣的可以了解一下
    2024-11-11
  • 导致爬虫无法使用的原因探讨解决

    导致爬虫无法使用的原因探讨解决

    随着互联网的普及和发展,爬虫技术也越来越多地被应用到各个领域,然而,在实际使用中,爬虫可能会遇到各种问题导致无法正常工作,本文将探讨导致爬虫无法使用的原因,并给出相应的解决方法
    2023-10-10

最新评论