Ycc-engine发布v0.0.5版本

忙了几个月,这个Canvas引擎的又一个迭代版本发布了,喜大普奔!虽然很累,但好歹还是有成果的。

总的来说,这个版本的重点是对性能的优化,下面我就来介绍一下到底发布了哪些内容吧~

一、高分屏的支持

现在移动终端设备的分辨率是越来越高了,而设备的物理宽度、厚度等都没什么变化,这就涉及到一个很重要的问题–像素比dpr

像素比是指,屏幕的分辨率和屏幕的物理高宽尺寸之间的比值。

很早之前大多都是1:1,苹果Mac上高分屏是2:1,而现在的很多手机都已经到达了3:1,所以对于底层引擎,对这种高分屏的适配是势在必行的。

这也给引擎优化带来了很多的挑战,比如,如果物理画布需要100*100的物理显示区,那么底层引擎就必须绘制200*200甚至300*300的画布显示区以达到最佳显示效果,这对于性能开销来说是指数型增加的。

话不多说,看效果

image.png

注意看红色的方框,以及红色方框内的文字,右侧明显要清晰很多,并且已经达到文字dom的显示效果了。

二、离屏Canvas的支持

离屏Canvas是一个比较古老而提升性能相当明显的技术,它的思想就是先将静态不变的内容绘制到一个离屏Cavnas内,再一次性的绘制到上屏Canvas。

说起来有点抽象,举个例子:

超级玛丽都玩过吧?

image.png

红色箭头所指的部分(金币、原型桶、地面、背景墙),全部是静态内容,也就是说在游戏过程中,他们的位置都是唯一的。

这个时候,我们就可以使用一个大的离屏canvas将他们全部绘制出来,人物移动时,只需要截取这个超大canvas中的一部分,直接一次性绘制到上屏canvas。

经常写CSS的朋友或许对这个操作感觉似曾相识,是的,这个操作跟我们写css的background-image很像。

写CSS时,背景图可能很大,但是容器div限制了高宽,这个时候我们就可以通过background-position来控制显示背景图的哪个位置,这跟离屏canvas本质是一个思想。

三、其他更新

1、Ticker模块帧率值修改,只支持几个特定的帧率(60 30 20 15),用户指定的帧率值会自动计算至最佳帧率;

修改原因:

之前版本可由用户自定义设置帧率为一个特定值,比如50,对应20ms一次刷新。

原来的做法是每次在raf中检测时间是否达到20ms,而实际浏览器是16.67ms一次raf回调,这样势必会造成某次会两次raf刷新一次界面,就会造成界面些微卡顿。

新版的做法,为兼容老版本,采用浏览器最大帧率(60)的乘积因子来指定raf的刷新间隔,这样能保证raf的间隔,解决卡顿。

2、Debug图层默认不再初始化;

修改原因:很多情况下并不需要这个图层。

3、新增:Loader加载器兼容微信的云开发;

4、新增引擎性能测试示例;

5、修复一些已知BUG;

附Ycc-engine的更新日志:https://github.com/lizhiqianduan/ycc/releases

(希望大家点个star,让我看见你们!)

我的联系方式

QQ群:439366057

邮箱:xiaohei@lizhiqianduan.com

公众号:三天不装逼浑身不自在的小黑哥

1572416815129344.png



打赏作者

发表评论

电子邮件地址不会被公开。 必填项已用*标注