入坑到弃坑:我一个老前端折腾白鹭技术栈的那些血泪史

mysmile 1个月前 (05-29) 行业资讯 35 0

前两天翻硬盘,看到我那个躺了快三年的“xx消灭星星”工程文件夹,心里头突然有点不是滋味。真快啊,距离我最后一次正儿八经用 Egret 做东西,眼瞅着都快2026年了。那时候这玩意儿还叫白鹭,圈里头老铁都管它叫“啥也不懂还得装懂引擎”(开个玩笑)。今天就好为人师一把,把当年踩的那些坑、翻的那些车,还有后来怎么从一个只会Ctrl+C/V的页面仔,到稍微摸到点游戏开发门道的那些破事儿,跟恁们好好絮叨絮叨。咱不讲那些官话套话,就说点大实话,聊聊那个曾经让我又爱又恨的 白鹭技术栈

刚开始接触那会儿,大概是2018、19年?那时候H5小游戏火得一塌糊涂,微信小游戏刚起来,啥《跳一跳》全民都在玩。我寻思着,这不就是我这种前端渣渣的出路吗?页面仔竞争太激烈了,得搞点有壁垒的。当时市面上能打的H5游戏引擎,Cocos Creator还没现在这么凶,Layabox听着像搞传销的,也就白鹭(Egret)看着最顺眼,文档全中文,社区热闹得很,动不动就“青出于蓝胜于蓝”,虽然咱也不知道胜了谁。

我跟你讲,刚开始是真顺溜。按照官网那教程,用Egret Launcher噼里啪啦一顿点,一个带旋转小球的Demo就跑起来了。那种感觉,比用原生js写个轮播图爽多了!为啥?因为有“类型”了!那时候刚从ES5的泥潭里爬出来,见到TypeScript就跟见到亲人似的,恨不得每个变量都给他写上:string。白鹭技术栈这一点做得是真不赖,直接把TS作为头等公民,让咱这种习惯了大厂那一套(虽然我也没进过大厂)代码规范的人,心里头那叫一个踏实。

但是,但是啊朋友们,一旦你想动真格的,做点复杂逻辑,这坑就一个接一个地来了。

先说这适配,真能整死个人。你按着设计稿750x1334美滋滋地摆好了UI,心想用showAll模式,不管啥屏幕都能完整显示,完美!结果一上iPhone X(那时候还是齐刘海),好家伙,上下俩大黑边,游戏画面缩在中间跟块麻将似的。老板说了:“这不行啊,屏幕空间得利用起来,给我改成exactFit!” 改完是铺满了,但里面的圆形按钮都压成鸡蛋了,看着就让人想生二胎。后来才琢磨明白,这玩意儿得配合舞台的resize事件,动态地重新计算和布局,不能光指望引擎给你全包了。那时候我就想,白鹭啊白鹭,你咋就不学学人家H5的vw/vh那一套呢?-4

还有这资源加载,我滴个老天爷。我刚写完第一个稍微大点的游戏,满心欢喜地扔到测试环境,结果加载了十秒还没进主界面。用户早跑了!后来查了白鹭技术栈的一些老鸟帖子才知道,这资源不能一把梭。得用RES.loadGroup搞分包加载,先把首屏那点东西load进来,让用户先进来看着LOGO或者进度条,背后再偷偷摸摸加载剩下的。这就跟相亲一样,第一眼印象得先整好,剩下的缺点后面慢慢暴露也不迟-1。纹理集更是必须得打的,Texture Merger这工具虽然界面丑得跟用MFC画出来的似的,但它是真好使啊。几百张小图打成一张图集,DrawCall瞬间从三位数降到个位数,那流畅度,蹭蹭的-1

说到性能优化,这里头门道更深了。有段时间我特迷龙骨(DragonBones)动画,觉得那骨骼动画太吊了,比序列帧省地儿。结果在一个关卡里放了十多个带骨骼动画的怪物,真机直接卡成PPT。后来看社区一个大神的分享,说你这“帧率”没优化,每一帧都重新计算骨骼矩阵,CPU不崩谁崩?得设置armature.cacheFrameRate = 24,把动画缓存成位图,拿空间换时间-1。这一招下去,整个世界清静了。

还有那对象池,Egret.Pool。新手写子弹,都是new一个,飞出去,到边界了this.parent.removeChild(this),完事。老手咋写?子弹回收,重置状态,下次再用。你想想,一秒钟生成30发子弹,再销毁30个对象,那内存跟坐过山车似的,GC一启动,游戏就卡一下。用了对象池,内存曲线稳得跟老狗一样-1。我那时候就悟出一个道理:写游戏跟过日子一样,别老折腾着造新东西,把旧的拾掇拾掇再利用,才是王道。

跨平台发布这块,白鹭当年还是挺能打的。尤其是发微信小游戏,虽然有各种限制,比如主包不能超过2MB,但配合egret.res.splitLibs这命令,能把代码和资源拆得明明白白-1。我还记得那时候为了把主包压到2M以内,愣是把所有图片都压缩出了噪点,能省一个字节是一个字节。最逗的是接入微信子域做排行榜,那套开放数据域的机制,Canvas是独立的,通信只能靠postMessage,折腾得我死去活来-1。但有一说一,那时候白鹭的文档里,关于这些平台的适配指南写得还算详细,照着一步步做,虽然坎坷,但总能走通。

现在想想,那时候的技术氛围其实挺有意思的。不像现在,满世界都在卷AI、卷大模型,那时候大家就纯粹地琢磨怎么让动画更流畅,怎么让包体更小。甚至还有人在白鹭的基础上封装了自己的框架,比如我在npm上扫到过一个叫“tubao”的(这名字起的,一看就是自己人搞的),说是基于Egret 5.3.10,加了一堆现成的算法和UI组件,想帮开发者进一步提效-2。虽然我没在生产环境用过,但这种“自己动手,丰衣足食”的精神头,现在真不多见了。

当然,也得吐槽吐槽。白鹭的社区后期有点“凉凉”的趋势,官方答疑的速度变慢,一些陈年老Bug(比如音频在iOS上的兼容性问题)一直没彻底解决-1。而且版本迭代有时候有点“随心所欲”,小版本升级都可能搞出breaking change,吓得我们这种小团队根本不敢追新,一直抱着5.x的老版本苟延残喘。后来我也转了,去接触了Cocos Creator,再后来又试了试Laya,发现各有各的好,也各有各的坑。但白鹭对我来说,就像初恋一样,虽然那时候啥也不懂,笨手笨脚,但它确实领我进了游戏开发这道门。

我到现在电脑里还装着Egret Launcher,虽然打开的频率越来越低。有时候看看里面那些旧项目,还能想起当年为了一个粒子特效熬到凌晨三点的夜晚,也能想起第一次把游戏二维码发到朋友圈,看到几十个人同时在线的截图。那种成就感,是真金白银换不来的。

如果你现在是个新手,想入行小游戏开发,我可能会建议你去看看更现代、生态更活跃的引擎。但如果你手里正好有个老项目要维护,或者对TypeScript写游戏有特别的情结,翻翻 白鹭技术栈 的旧文档,挖挖那些沉淀下来的实战经验,你会发现,有些底层的思考和优化思路,是永远不会过时的。就像那本《HTML5游戏开发技术》的书里写的,不管是摇奖游戏还是塔防,背后的图形图像、AI、网络通信,这些基本功,在任何引擎里都吃得开-7-8

好了,啰嗦了这么多,也不知道有没有人看。权当给自己这段经历画个逗号吧。如果有兄弟还在用白鹭扛项目,遇到了啥奇葩问题,欢迎底下留言,虽然我不一定记得咋解决,但咱可以一起骂骂咧咧地回忆当年。毕竟,那些杀不死我们的,终会让我们变得更……更会填坑。

扫描二维码

手机扫一扫添加微信