Egret社区

老项目转微信小游戏

2018-7-6 17:14
305210
本帖最后由 tardis 于 2018-7-28 11:49 编辑

前言:最近把之前的一个h5的eui项目转成了微信小游戏,项目版本转之前已升级到能升级的最新5.0.15引擎版本(老项目升级到5.0.15相对简单,可以先升级到这个版本再参考这个贴子)*我们项目相对比较大,h5版本正常发布总文件有45MB左右(图片代码都有压缩过),并且使用到了一些第三方库文件如:jszip、greensock、protobuf等,官方库用了:egret、eui、res、tween、game、socket、dragonBones、promise

首先官方是有比较完整的老版本升级微信小游戏的文档的,但实际操作中可能还是会遇到一些问题,这个贴子就是针对这些问题给大家提供一定参考的。
官方教程文档地址:http://developer.egret.com/cn/gi ... igameFAQ/index.html
反复研读这里面几篇文档来修改能解决大多数问题。
接着我们可以开始尝试动手下了,我列个大概操作流程,在流程中标出出现的问题和解决方案:
*下载最新的小游戏开发工具:web微信开发者工具
*下载下引擎最新版本5.2.4,注意一定是5.2.4或更新的版本,因为之前的版本在发布微信小游戏时,还会有些或多或少的问题和bug,我们就不必要在这些已解决的bug上浪费时间了。
*用白鹭的引擎工具:Egret Launcher 在项目中新建一个eui项目,引擎版本5.2.4选上之前项目用到的库和参数
*把老项目的代码和资源文件等拷贝到刚创建的新项目中,主要包括src、resource、第三方库文件等  如果项目中有其它必要资源,也可根据情况拷贝过来
*如果你项目中之前有把ui皮肤文件.exml文件放在src的目录中(以前的版本是允许的),建议拷贝到resource目录中去,再批量修改掉default.thm.json中这些皮肤文件的目录。
*根据需要把egretProperties.json文件改对,之前用的res模块的,直接改使用成assetsmanager模块,因为res在微信小游戏中会引起问题。把自己用的第三方库配置进来,如:
{
        "name": "jszip",
        "path": "../WXEgretKU/jszip"
}

*修改第三方库文件,因为第三方库文件要发布微信小游戏,是要做一定修改的,可以考虑把库文件拷贝一份,再参考这个贴子来改下(这将为你节约大量时间):
http://bbs.egret.com/forum.php?mod=viewthread&tid=46130
如果在按这个贴子中处理第三方库后,还有因为用了微信不能用的api报错,如果不影响功能可以考虑直接干掉库中这块的代码。
*这里要说下,如果你有用protobuf库,或了protobuf.load('xxx.proto')这种方式,在小游戏这边是会报错的,你要改用protobufjs,参考:https://github.com/WanderWang/protobuf-egret  如果你的.proto文件按上面操作生成的protobuf-bundles.d.ts文件异常,你可以检测下,你的.proto文件是否是放在一个包中,也就是有没有代码:package xxx这个一定要有。还有如果你在.proto文件中有"_"加小写字母的命名定义,用protobufjs时会被生成大写的字母,如:_x -> X 如果这个会引起项目中的问题,只能是考虑改.proto文件命名或改项目代码了,貌似没其它什么好的办法。
*自己定义的组件和模块等在微信小游戏中会因为访问不到而报错,所以需要批量修改下项目中的TS代码,在ts文件底部加入类似:window["vm"]["MainView"] = vm.MainView;代码,"vm"是ts定义的模块名,"MainView"是ts类名,建议写个脚本来处理,我会把自己写的小工具整理加到附件中供参考,这时你还会遇到一个问题,就是小游戏中,当你访问vm模块时也会因为没有这个模块报错,你可以在项目wxgame.ts文件onFile方法中加入content += ';window.vm = {};'; 建议可以直接加在本来就有的:content += `;window.egret = egret;`;这句代码下面,如果有多个就加入多个
*如果你想要默认webGL渲染,你也可以在wxgame.ts中onFinish方法,optionStr中加入:`renderMode: "webgl",\n\t\t` +  不然默认是canvas渲染会有点卡!
*Egret Launcher工具,在项目中选择导出微信小游戏。AppID要去微信平台注册好,或者用开发工具的无id试用功能,在<微信web微信开发者>工具打开导出项目。这之后导出微信小游戏版本,可以执行命令:egret publish --target wxgame  导出发布版本,这样的代码包是最小的。
这块导出和管理微信小游戏项目可以参考这个贴:http://bbs.egret.com/thread-49354-1-1.html
*这里注意,要分清楚代码包和资源包的概念,代码包要求4MB,总包50MB,资源包可以传到服务器上,小游戏内只留代码包。
*如果你用egret publish --target wxgame (发布版本)命令导出的微信版本,代码包还是超过了4MB,但在8MB内的话,可以用分包方案解决问题,参考:https://mp.weixin.qq.com/s/9vg2cA1L-_eY2lTdbTSVeQ  如果8MB还不够怎么办?那可能是你项目中的皮肤文件发布的default.thm.js文件过大,可以考虑用commonjs2模式把皮肤文件生成gameEui.json,放到资源包中加载使用,方法是:修改config.wxgame.ts对应代码为:new ExmlPlugin('commonjs2')。这样应该肯定可以控制在8MB内了,要还不行就只能自己想办法优化了,分包时注意,微信现在分多个包会报错,所以只支持分一个包,还有分一个包,当前小游戏版本在苹果手机上测试也会报错:error: module "stage1/game.js" is not defined Stack:require ,微信官方给的回复是正式上线不会有问题,审核不会有问题,只是开发时在微信上调试有的问题。我们测试过也确实是这样,所以做过分包的开发阶段只能用安卓机测试了。*有的项目,会在老版本的index.html文件中写入一定代码逻辑,而小游戏项目可以把index.html的代码逻辑,写在小游戏项目中的game.js文件中,但不能写在太靠前,可能会window为空
*如果在微信提供的加载界面到能显示自己的登录界面之间,可能因为要加载第一个登录界面资源和eui皮肤文件:gameEui.json等,出现一段时间的黑屏,解决方案感觉有几种,如果是小点的项目,可以把到显示到第一个界面前用到的所有用到的所有资源和代码,放在小游戏的代码包上传,如果稍大的项目这样做会造成代码包超过要求大小,可以在代码包里放一张loading图片上传,再在代码中把它全屏居中显示出来,图片,可以设计为640*1385宽高尺寸,上下可留一截过度到黑的渐变。当每个界面准备好可以显示时,去掉移除这张图。当然还有很多种方式,自己写个简易的loading画面,或者放个简易的加载动画。
*小游戏中iphoneX适配(h5也可以这么处理),提供个简单快捷的实现方式,方式就是把main(或在main上在放个Group,控制Group也行)的显示上面和下面,各留出来一截用来规避iphoneX的留海空间和底部按钮区域,再在main下面垫一张可以重复铺开的小图(这样空出来的空间也不是黑的美观些)。
我的scalemode是fixedWidth模式
1.识别iphoneX(小游戏),wx是小游戏的sdk,Global.ts只是用来储存下数据,自己改下
var sysdata = wx.getSystemInfoSync();
if(sysdata.model == "iPhone X" || (sysdata.windowHeight == 812 && sysdata.windowWidth == 375)){
          Global.isIphoneX = true;
}
在h5中识别iphoneX可以判断window.screen.width == 375 && window.screen.height == 812  并且是苹果设备
2.让main在iphoneX的显示是上面和下面各留一截,在Main.ts中
在Global.ts中
public static iphoneX_spnum = 60;//iphone上下预留距离
public static initStageWidth:number = 640;设置的游戏宽度
public static isIphoneX = false;

在Main.ts中
protected createChildren(): void {
        super.createChildren();

var self = this;
self.stage.addEventListener(egret.Event.RESIZE,self.resizefun,self);
self.resizefun();

}

private resizefun(): void {
        var self = this;
        Global.stageWidth = self.stage.stageWidth;
        Global.stageHeight = self.stage.stageHeight;
        if(Global.isIphoneX){
            self.includeInLayout  = false;
            var boundingHeight = egret.Capabilities.boundingClientHeight;
            var boundingWidth = egret.Capabilities.boundingClientWidth;
            var lvnum = boundingHeight/boundingWidth;
            var mnum = Global.iphoneX_spnum;
            var mH = Math.floor(lvnum*Global.initStageWidth) - (mnum*2);
            self.y = mnum;
            self.height = mH;
            self.maxHeight = mH;
            Global.stageHeight = mH;
        }
        self.showbgimg(false);
    }

3.底部垫一张图,对上面和下面留出的一截黑色美化下,sdfwerwe是准备的平铺的小的图:
在Main.ts中加入
private _rootbgimg;
private showbgimg(iscreat):void{
        if(Global.isIphoneX){
            if(!iscreat&&!this._rootbgimg){return;}
            var _bgimg;
            if(!this._rootbgimg){
                _bgimg = new eui.Image();
                _bgimg.source = "sdfwerwe";
                _bgimg.fillMode = egret.BitmapFillMode.REPEAT;
                this.stage.addChildAt(_bgimg,0);
                this._rootbgimg = _bgimg;
                _bgimg.left = 0;
                _bgimg.right = 0;
                _bgimg.top = 0;
                _bgimg.bottom = 0;
            }else{
                _bgimg = this._rootbgimg;
            }
            var boundingHeight = egret.Capabilities.boundingClientHeight;
            var boundingWidth = egret.Capabilities.boundingClientWidth;
            var lvnum = boundingHeight/boundingWidth;
            var mH = Math.floor(lvnum*Global.initStageWidth);
            _bgimg.width = Global.initStageWidth;
            _bgimg.height = mH;
        }
    }

在sdfwerwe图片加载完成后调用self.showbgimg(true);


如果有遇到小游戏加载资源卡死问题,一是通过输出和查看网络加载查找问题,如果发现在加载fnt文件后卡住,是因为美术字这个造成卡住的话,因为要把美术字用到的.png和.fnt文件都要注册到:default.res.json文件中,你直接拖只能拖.fnt进去,也就是还要打开default.res.json把美术字的.png文件手动填进去。之前我也遇到过卡资源,但发现总是在加载完美术字卡住,就问了下官方,他们告诉我的解决办法,测试可用,不过这问题官方后续引擎版本可能会修复。

附件中就是批量给ts文件加入特定声明代码的工具,是在window运行的bat脚本,自己可以根据项目实际情况做修改,用上了nodejs,如果运行不了自己装下nodejs环境,游戏中需要大量执行的操作,我基本都会写相应的脚本或工具来执行,这个也可以给大家一个参考,在其它的操作时也可以写点这种小脚本来处理,可以很好的节省时间和出错概率。

我只是简要的说了一些流程,但在转换过程中,其实可能还会遇到代码层的很多细节问题造成卡住,因为思路和具体实现之前多少有些不同,如果大家有遇到什么问题也可以留言一起探讨。










wx.zip

1.6 KB, 下载次数: 34, 下载积分: 银子 -1

售价: 1 银子  [记录]

批量给ts文件加入小游戏声明代码

分享到 :
12 人收藏

10 个回复

倒序浏览
都斌大苏打  登堂入室 | 2018-7-7 17:40:04
谢谢大佬,拿走了
zhengluowu  登堂入室 | 2018-9-12 16:20:52
收藏一波
syk123  登堂入室 | 2018-9-19 15:11:30
mark
egret-Jerry  官方团队 | 2018-9-19 16:48:57
确实不少干货
小天辛  略有小成 | 2018-9-21 11:36:25
学习一下
yuyueliuliu  登堂入室 | 2018-9-30 16:50:24
mark一下
lddsddasw111  登堂入室 | 2018-9-30 22:52:17
66666666 mark
q584543147  初学乍练 | 2018-12-21 13:40:50
保存
Maxthon  圆转纯熟 | 2018-12-29 15:53:33
收藏保存了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部