spritejs 微信小程序版
这是 spritejs 的微信小程序版,目前支持 spritejs v 2.0 的大部分功能,具体可以参考帮助文档
特性
- Sprite属性更新自动(分批)重绘
- 以rpx为默认单位
- 动画支持Web Animations API
- 支持事件机制
快速使用
将文件保存到小程序对应的目录(比如lib目录下),然后使用:
const spritejs =
加载整个代码库
//index.js//获取应用实例const app = const spritejs =
小程序版与原版限制/差异
Scene 的参数差异
不同于web/node版,小程序版的Scene构造函数只支持一个参数vwRate,默认vwRate=1.0,此时Scene中的精灵默认单位为rpx,即画布上元素大小为1时,实际呈现效果为1rpx。rpx是微信小程序特有的单位,具体描述参考文档。
const scene = 20 //设置为2rpx,相当于屏幕宽度对应canvas宽度为325
当Scene的vwRate参数为其他非0数值时,实际精灵的默认单位为vwRate * 1rpx,例如设置vwRate=2.0,那么精灵的默认单位则为2rpx。
事件处理的差异
小程序版不提供Scene.prototype.delegateEvent来自动代理事件,微信小程序事件直接调用layer.dispatchEvent分发到相应的层。因为微信小程序的机制限制,目前只有将事件绑定在canvas对象上的touch*事件才可以获取事件相对于canvas元素的坐标,而tap、longtap等事件拿不到相对于canvas坐标。当然如果canvas是全屏展示,我们也可以拿clientX、clientY代替。
<!--index.wxml-->
//index.js//获取应用实例const app = const spritejs =
layer的canvas元素需要预先创建
微信不支持动态创建元素,因此canvas要先在模板里创建好,并赋给对应的canvas-id。
资源预加载和Sprite图片支持的限制
目前不支持远程url的加载,只支持本地图片素材,另外web/node版的Sprite可以预加载图片并获得图片宽高,所以sprite可以默认自适应宽高,而微信小程序版除非使用texturepacker打包图片,否则不能获得默认的宽高,必须指定宽高才可以将sprite对象显示出来。
另外注意scene.preload预加frames资源载时,不支持从json文件加载frameData,必须是json对象,可以将frameData存成js,然后在app中require进来。
另外目前不支持 texture packer 的 rotated 和 trimmed 功能。
// 微信小程序版的 scene.preload 是同步的scene const sprite1 = 'bird1.png' sprite1// 从frames中加载的图片有默认大小,可以正常显示scene const sprite2 = '../../assets/img/rambda.png'sprite2 scene
调试示例代码
我们放了一个“十滴水”小游戏的例子在 app
文件夹下。
要调试示例代码,可以启动webpack编译
npm start
然后用微信开发者工具调试代码
目前不支持的特性
- 微信不支持动态创建Dom元素,不兼容d3,目前d3的功能暂时不支持(未来打算通过shim适配)。
- 微信context不支持滤镜,所以滤镜filter无效果。
- 微信canvas不支持渐变(linearGradients 和 createRadialGradient),如果在 attr 中使用渐变属性会出错。
- 微信的canvas不支持动态创建context,因此无法使用缓存优化。
目前暂时无法解决的Bug
- 由于微信的模拟器的clip有问题,所以在模拟器下sprite元素的clip区域可能不正确
- 微信的canvas的globalAlpha只有setter没有getter,因此小程序设置opacity属性的时候没法层叠,子元素的opacity会覆盖父容器的opacity值