白鹭H5游戏移植到微信小游戏笔记

最有用的资源应该算是白鹭的官方FAQ,不过还是有点太言简意赅了,对一些底层机制介绍的太少。

移植的步骤大概可以分为以下几步1.前期准备2.项目迁移3.真机调试4.Bug与优化5.发布6.接入更多小游戏功能

这里就是wxgame2_wxgame了。

至此,准备工作完成,下一步进行正式项目迁移。

1).拷贝旧项目代码及资源到新项目中2).编译试运行

egretbuild--targetwxgame除非你的项目跟helloworld一样简单,通常来说,都会报一堆的错误,来一个个解决。

3).第三方库3.1).下载项目所需的最新的第三方库,包括白鹭自带的第三方库,比如物理引擎physics,粒子系统particle

3.2).将第三方库的模块注册到window变量下,打开/wxgame/wxgame.ts找到asynconFile(file:plugins.File)方法,模仿别的库的方法,将particle挂到window下

3.3).我测试的时候,发现物理引擎库p2按照3.2)的方式添加有问题,所以,我换了一种方式。直接打开physics.js和physisc.min.js,修改如下:

(physics.js)

(physics.min.js)

3.4).如果你需要解析xml,比如tiledmap文件,则需要引入xmldom库:下载地址:

放到小游戏项目(_wxgame)的根目录下,不要放到js或者libs目录,打包的时候会被清空:

3.5).将xml库挂到window上,可以修改小游戏项目的/game.js文件,egret.runEgret之前添加:

3.6).如果你还用到了其他的第三方库,注意两点:a).如果是白鹭的,更新到最新b).然后,添加到window上。(参考以上3种添加方式)

4).新项目默认用assetsmanager,如果用不惯,或者跟我一样遇到api调用错误,修改egretProperties.json,把assetsmanager改回res

5).如果你用白鹭的eui,那么,请注意,

小游戏中不支持从外部加载exml的方式。

具体原因,大概是因为eui库使用了动态生成代码的技术,而这是小游戏所不允许的。

要发布到小游戏,eui必须用commonjs的方式发布,不过,新生成的工程默认已经是这个选项了,并不需要改动什么的。

查看/scripts/config.wxgame.ts文件

所以,每次你修改exml文件,都需要重新编译成小游戏项目。

egretbuild--targetwxgame生成的js文件会自动拷贝到/js/下,并在manifest.js中引用

由于种种原因,你所用到的.thm.json文件和skins文件,最好都放在resource目录,并在egretProperties.json中正确配置。

另外,不要尝试直接或者间接使用exml文件,由于eui的实现机制已经被小游戏禁用了,目前这条路走不通。非要用的话,得自己去解析并构建界面。

6).如果用到自定义组件,可能需要手动挂到window下。

比如我自己写了一个WxHelper.ts文件,里边放了一个RegisterGlobalClasses方法,用来注册一些自定义组件和外部

然后在这个组件被使用之前,调用这个方法。比如,Main.ts里。

7).手动拷贝resource目录外的资源到小游戏工程。egretbuild或者publish只会帮你处理resource目录下的资源,所以,如果你跟我一样,有些资源是自己管理的,则需要手动拷贝到小游戏工程目录下。

不过,实际上,大部分时候,你会看到另一个错误:

这是因为,开发者工具会把整个工程含资源打包上传。一般来说,除非你的游戏非常小,否则都会超过4M的上限。

所以,要进行真机调试,最重要的步骤是,把资源从项目里分离出来,放到外部服务器,然后在游戏启动后,去动态加载。

并在游戏里打开调试模式:

7).资源分好后,再次尝试“预览”,这个时候,上传的包还有可能超过4M,但是只差个几K就可以了。

这是因为,我们用egretbuild命令时,所有代码都是没有压缩的,并且包含大量的注释,其中白鹭引擎的代码就已经将近3M了,留给我们的代码空间比较小。

如果差的不是很多,你可以尝试以下方法:

a).删掉没用的ts文件,比如一些没用到的类b).去掉大段的注释,比如一些没用到的方法,旧的实现,等等如果这时候还超,就需要用publish的方式来重新编译项目,这时候,代码会被压缩,一般就不会超4M了。如果publish还超,说明你的代码量超过4M,已经不是小游戏范畴了……

8).外部资源的加载这时候如果去真机上“预览”,通常都会出现很多资源找不到的错误,为什么呢?

原因是,动态资源被放到外部服务器了,但是资源配置文件(default.res.json)中的路径还是指向本地路径。有两个方法:

a).可以通过修改配置文件,把外部资源的url都带上服务器地址这样带来一些问题:一是要改的地方可能会比较多。二是每次更换服务器,都要改配置文件。

b).不修改配置文件,而是在代码里,对外部资源的url自动添加服务器地址。这样的好处是显而易见,调试和管理上都简单很多。不过,引擎自带的Resource库默认并没有暴露出足够的接口,让我们可以比较方便的去做。所以需要修改引擎代码将所需的接口暴露出来,然后在代码动态添加服务器地址。

9).走到这一步,差不多应该可以顺利在手机上预览游戏了。

1.1).bug:真机丢声音

1.2).bug:真机切后台后,背景音中断

这个严格来说不是bug,而是小游戏的设定。官方文档中写的很清楚,游戏切后台,或者被系统打断时,音频会自动中断,开发者需要自行处理恢复音频的播放。

简单来说,需要在以下两个方法里判定是否需要恢复声音的播放:

要解决编译时的问题,需要添加一个wxapi的描述文件,也就是通常所说的.d.ts文件。

这个文件可以从网上找,github上挺多的。如果你需要调用的api比较少,也可以自己写一个,只考虑音频的话,wxgame.d.ts只需要以下几行:

如果你开发的是像素游戏,需要在游戏里设置

egret.Bitmap.defaultSmoothing=false。正常效果应该是这样:

然而,如果你开启了滤镜(比如发光滤镜)或者遮罩,会发现,图像变模糊了。

这是引擎的一个bug,需要修改引擎的渲染代码,H5是egret.web.js或者WebGLRenderContext.ts

以及小游戏的渲染代码**/egret.wxgame.js**中的方法:

WebGLRenderContext.prototype.drawTextureElements

需要注意的,在以上过程中,我们的项目一直都是处于Debug模式,如果要切换到Release模式,则需要用egretpublish--targetwxgame的命令。

小游戏的发布与H5项目的发布,并没有不同。首先,我们要了解的是Release模式与Debug模式的不同之处:a).资源资源publish以后,需要重新上传到服务器上。b).代码代码在publish过程中会被压缩。

对于小游戏来说,影响最大的,应该是资源的缓存问题。由于缓存空间有限(50M),哪些资源需要缓存,怎样缓存与更新,都是需要小心设计的。

THE END
1.H5和微信小程序测试区别01 什么是H5? H5,也就是“HTML5”,指“HTML”的第5个版本。众所周知“HTML”是”超文本标记语言”,是一门描述网页的标准语言,所以HTML5也是一种网页技术,而且是更高级的网页技术,包括HTML、CSS和JavaScript在内的一套技术组合。 所以,H5本质上可以理解为是一个网页,依赖的外壳主要是浏览器,因此只要有浏览器,https://blog.csdn.net/qq_48811377/article/details/144425899
2.h5项目是什么项目答,H5指的是HTML5,即网页使用的HTML代码的第五代标准。HTML5相比以前的标准,增加了对移动设备、音频视频、拖放、本地存储、画布等的支持,使网页可以更加丰富和互动。狭义上,H5指的是一种互动形式的多媒体广告页面,通常可以在手机上浏览和分享,利用HTML5的特性制作出各种动画、游戏、故事等效果,https://zhidao.baidu.com/question/1872531704958681787.html
3.h5项目怎么运行H5教程运行h5 项目需要以下步骤:安装 web 服务器、node.js、开发工具等必要工具。搭建开发环境,创建项目文件夹、初始化项目、编写代码。启动开发服务器,使用命令行运行命令。在浏览器中预览项目,输入开发服务器 url。发布项目,优化代码、部署项目、设置 web 服务器配置。 https://m.php.cn/faq/816524.html
4.近两万字的干货!可能是最全面的网页设计基础知识全攻略微信、浏览器等平台级产品在手机端中火爆促进了依靠入口而传播的 H5 的发展。如果设计出色,你的项目可能会在朋友圈产生病毒传播的效果。 △ 使用前端语言编译的适合手机浏览的H5界面 移动端H5尺寸 设计移动端 H5 项目的时候,我们一般以用户量较高的 iPhone6/7/8的尺寸:750x1334px为准,然后我们要在顶部预留出https://www.uisdc.com/web-design-basics-raiders
5.网页设计必须要懂得的那些事儿使用前端语言编译的适合手机浏览的H5界面 移动端H5尺寸 设计移动端H5项目的时候,我们一般以用户量较高的iPhone6/7/8的尺寸:750x1334px 为准,然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了,一般H5的操作是上下滑动。 字体方面使用苹方字体,并且字号设置为24PX以上,渲染方式设置成锐利https://www.163.com/dy/article/DO2OHDO80511805E.html
6.拍摄是做什么的,落明版良汇解解剖版GFH5人物拍摄是一种艺术和技术相结合的活动,通过使用相机捕捉图像和视频。落明版良汇解则可能指一种拍摄技术或方法,而“解剖版GFH5”可能是指具体拍摄项目或系列。具体内容涉及拍摄原理、技术细节及特定作品分析。 探索拍摄奥秘:落明版良汇解,解剖版GFH5背后的故事 http://www.hukingdee.com/post/4727.html
7.h5项目demoH5项目是什么意思mob64ca140f9cec的技术博客h5项目demo H5项目是什么意思 详细介绍一下H5技术 H5技术指的是HTML5技术,它是一种用于Web开发的标准化标记语言,是HTML4的后继者。H5技术可以用来开发跨平台和可访问的Web应用程序,包括网站、桌面应用程序、移动应用程序等。 H5技术包括以下几个方面: 1. 语义化标签:H5技术引入了一些新的语义化标签,如<header>、https://blog.51cto.com/u_16213681/10681869
8.如何在uniapp项目中嵌套H5页面javascript技巧有一个需求是,在app中嵌入一个H5页面,H5是一个网络页面,不在app项目里,APP可以打开H5页面,实现单点登录,并且在H5 页面中打开APP指定的页面 Web-View 在uniapp中,有一个web-view组件,这就相当于一个浏览器组件,可以用来承载网页的容器,会自动铺满整个页面web-view的详细文档参考uniapp官网 1 https://uniapp.https://www.jb51.net/javascript/316492vlp.htm
9.移动端H5开发之页面适配篇腾讯云开发者社区最近开发并上线了一款H5项目,在这里想和大家分享一下关于项目中使用到的移动端适配技巧,如果对你们有所帮助的话,就多多点赞收藏 各位看官老爷别着急,在讲页面适配之前,我们先来捋一捋viewport(视口)的概念~ 在Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的UI, 菜单栏等——即指你正在浏览的文档的https://cloud.tencent.com/developer/article/2020264
10.腾讯游戏H5:AI古琴疗愈计划是的,我们又双叒做了一个互动H5项目! 项目背景 客户需求非常明确,AI化身古琴疗愈师,我们需要以心理学模型为理论依据定制一个情绪测试H5,最后生成专属的AI谱曲的古琴情绪“药方”。 很快我们便有了逻辑思路。 受如今大火的MBIT启发,不同MBIT会有不同的情绪特征,而一个人的情绪往往与其性格挂钩。于是,我们决定把它https://www.digitaling.com/projects/281364.html
11.推荐20个开源的前端低代码项目tmagic-editor是一款由腾讯技术中心出品的一款开源低代码框架,能够实现零代码/低代码生成页面 , 可以快速搭建可视化页面生产平台,让非技术人员可以通过拖拽和配置,自助生成H5页面、PC页面、TV页面,大大降低页面生产成本 。 项目链接:gitee.com/webapp_qsr/… https://www.easemob.com/news/9525
12.皇帝成长计划2h5大运河怎么建?特殊建筑介绍。游戏中有许多种玩法,建筑功能也算是其亮点之一。这些建筑不仅仅彰显着玩家的国力水平,同时还能提供一些特殊的属性加成,方便大家在游戏中发展。今天,小编就给大家介绍下皇帝成长计划2h5大运河怎么建? 一、如何建造 1、上朝时,点击下方选项栏中的“工”字图标。点击后可以选择安排建造功能,可建造的建筑就会在列表中等待https://m.wandoujia.com/apps/2061139/6880764781590414502.html
13.uniapp实战之单击菜单发布单击菜单发布->H5 对于在当前项目下的unpackage/dist/build/h5目录中找到的资源,请部署服务器(或使用本地服务器预览)。如果需要部署到相对路径(支持打开本地文件协议),请参阅:https://ask.dcloud.net.cn/article/37432。 如何引用第三方js: 通过npm引入(只有h5平台可以通过条件编译导入相应的库)编辑清单中h5节点https://open.alipay.com/portal/forum/post/161601022
14.全新UI功能3.0腾讯IM即时通讯+视频聊天(APP小程序H5)三端--- 可定制各类高端需求、定制 IM、解决问题、定制项目: 复制代码1.高效率研发团队,承接定制各类项目需求; 2.承接各类高端 APP、小程序、H5 项目,定制联系群主的 QQ:270315475; -介绍 隐私、权限声明 1. 本插件需要申请的系统权限列表: . 2. 本插件采集https://ext.dcloud.net.cn/plugin?id=3803
15.抖音商城系统源码开发H5源码火爆项目区块源码H5源码,, 展开全文 商务服务 ?软件开发 ?APP开发 ? 郑州APP开发 我们其他产品 抖音商城小程序源码部署行业app软件成品开发2023-03-31 抖音商城小程序源码解决方案火爆项目2023-03-31 抖音吃喝玩乐小程序源码解决方案火爆项目2023-03-31 抖音吃喝玩乐小程序源码行业app软件快速上线2023-03-31 抖音多商户小https://m.11467.com/product/d19300156.htm
16.你了解数据期刊么?你知道什么是“人类企鹅项目”么?ScientificData最近,由12个国家15个心理学研究者团队合作收集、由本人与殷继兴(西北师范大学心理学院)主要负责整理的数据——人类企鹅项目数据——发表在数据期刊 Scientific data上(Hu et al., 2019)。这对于一直在推Open Science的我来说,是非常值得开心的,因为这说明科学界也奖励分享研究数据本身。也就是说,研究者用于整理数据https://news.sciencenet.cn/htmlpaper/2019/5/20195141955751550212.shtm
17.H5开发app项目是什么意思?有那些步骤?H5开发app项目是什么意思?有那些步骤? H5开发app项目是一种利用HTML5技术来构建移动应用的方法,它具有跨平台、开发成本低、更新迭代快等优点。H5开发app项目的主要步骤如下:1. 确定项目需求和目标,分析用户画像和市场竞争,制定项 H5开发app项目是一种利用HTML5技术来构建移动应用的方法,它具有跨平台、开发成本低、https://www.yimenapp.com/kb-yimen/16813/
18.H5开发app项目是什么意思?有那些步骤?技术博客H5开发app项目是什么意思?有那些步骤? H5开发app项目是一种利用HTML5技术来构建移动应用的方法,它具有跨平台、开发成本低、更新迭代快等优点。H5开发app项目的主要步骤如 下: 1. 确定项目需求和目标,分析用户画像和市场竞争,制定项目计划和设计方案。 2. 选择合适的H5开怎么发框架和工具,如uni-app、Taro、Flutterhttps://www.yimenapp.net/knowledge/blog-1454.html
19.H5客户端开发(微信小游戏捕鱼项目)是做什么的1、计算机相关专业毕业,3年以上H5游戏开发经验,1年以上LayaBox开发经验; 2、精通JavaScript和TypeScript,具备初步的游戏前端框架设计能力; 3、全面掌握H5游戏性能优化的方法,且有实际优化经验; 4、善于沟通,能妥善处理项目开发过程中遇到的各类项目问题; 5、有较强的学习能力和承压能力; https://www.zhipin.com/job_detail/f165be2f98ee38f31nJ83NW9FVtV.html
20.大学毕业三年后,我成功拿下B站offer,分享下B站五面面经(附过程答:领导你好;我叫**,16年本科毕业于***大学;毕业后在合肥卫宁,一家医疗软件公司工作,技术上前后端、数据库包括项目部署都做,属于全栈开发,18年来到上海入职京东一直到现在,做的是线下商场的后台及接口开发;老的项目还是mvc,新项目都做了前后端分离,前端用到H5、小程序JQuery、EasyUI、VUE、Angular,后端用到.Nethttps://maimai.cn/article/detail?fid=1693413786&efid=jhBZWfE8_tfp7FIFxkzT-A
21.2023Web前端开发八股文&面试题(万字系列)——这篇就够了!1.2 h5新特性 新增选择器 document.querySelector、document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 audio 本地存储 localStorage 和 sessionStorage 离线应用 manifest 桌面通知 Notififications 语意化标签 article、footer、header、nav、section https://developer.aliyun.com/article/1353677