sprite wxapp
v1.0.0
This is the WeChat applet version of spritejs. It currently supports most functions of spritejs v 2.0. For details, please refer to the help document.
Sprite property updates automatically (batched) redraw
Use rpx as the default unit
Animation support Web Animations API
Support event mechanism
After version v1.10.0, the mini program version supports NPM installation.
npm install @spritejs/wxapp --save
Then build the NPM package in the WeChat applet.
Once installed and built, the easiest way to use SpriteJS is through the built-in scene component.
Register the component in the mini program configuration app.json:
"usingComponents": {"s-scene": "@spritejs/wxapp/scene"
}Then introduce the component on the page you want to use:
<view> <s-scene id="container"layers="bglayer,fglayer"bindSceneCreated="onSceneCreated" ></s-scene> </view>
The parameter layers indicates how many layers to create and their IDs. The default is default.
bindSceneCreated is the callback event after creating the Scene, and the created layers are returned in the event method:
const { Sprite } = require('@spritejs/wxapp');Page({
onSceneCreated({ detail: layers }) {const { bglayer, fglayer } = layers;const s = new Sprite({ size: [100, 100], pos: [300, 300], bgcolor: 'red',}); fglayer.append(s);const s2 = new Sprite({ size: [300, 300], pos: [200, 200], bgcolor: 'blue',});bglayer.append(s2);s.on('touchstart', () => { s.attr('bgcolor', 'green');}) ;s.on('touchmove', () => { s.attr('bgcolor', 'yellow');});s.on('touchend', () => { s.attr('bgcolor', 'red');});
},});If you don't want to use components, you can also create the canvas yourself and then construct the scene
<view class="scene-layout" id="container" catchtouchmove="noop">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" disable-scroll="true"></canvas>
</block>
</view> const spritejs = require('@spritejs/wxapp');Page({
data: {layers: ['fglayer'], eventOffset: [0, 0],
},
onTouchStart(event) {// Dispatch touchstart event this.scene.layer('fglayer').dispatchEvent(event, this.data.eventOffset);
},
onReady: function() {// Since the scene-layout of the proxy event may be offset relative to the window, this offset needs to be passed in // to correctly position the event coordinates const query = wx.createSelectorQuery();query.select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({ eventOffset: [rect.left, rect.top],}); }});const scene = new spritejs.Scene();this.scene = scene;const layer = scene.layer('fglayer');// Preload resources scene.preload([ '../../assets/img/birds.png', require('../../assets/img/birds.json.js')]);const bird = new spritejs.Sprite('bird1.png');bird.attr({ anchor: [0.5, 0.5], pos: [100, 200],});//Add ontouch event bird.on('touchstart', evt = > { console.log(evt)});// Texture animation let i = 0; setInterval(() => { bird.textures = [`bird${i++%3+1}.png`];}, 100);//Add text const text = new spritejs.Label('Hellon World!');text.attr({ //anchor: [ 0.5, 0.5], font: '44px Arial', border: [2, 'red'],}); const posFrom = [0, 0]; const posTo = [100, 0]; // Play a shift animation text.animate([ {pos: posFrom}, {pos: posTo},], { duration: 2000}); // Add two sprites to layerlayer.append (bird, text);
},})Note that when you call it yourself, you need to set the canvas-id attribute to be consistent with the ID of the created layer when creating the canvas.
Different from the web/node version, the Scene constructor of the mini program version can only pass width and height, and the unit is rpx. rpx is a unit unique to WeChat mini programs. Please refer to the documentation for detailed description.
const info = wx.getSystemInfoSync();const scene = new Scene(750, 1433); // The unit is rpx
If used through component loading, events such as touchstart, touchend, touchmove, tap, longpress etc. are automatically proxied by the scene, so you can add the corresponding event processing function to the sprite element to trigger the event normally.
If you create the scene yourself, you need to manually proxy the event yourself:
<!--index.wxml--><view class="scene-layout" id="container">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" bindtouchstart="touched"></canvas>
</block>
</view> const spritejs = require('@spritejs/wxapp')Page({
data: {layers: ['fglayer'], eventOffset: [0, 0],
},
touched: function(event) {this.scene.layer('fglayer').delegateEvent(event, this.data.eventOffset);
},
onReady: function() {// Since the scene-layout of the proxy event may be offset relative to the window, this offset needs to be passed in // to correctly position the event coordinates const query = wx.createSelectorQuery();query.select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({ eventOffset: [rect.left, rect.top],}); }});const scene = new spritejs.Scene();this.scene = scene;const layer = scene.layer('fglayer');// If used in a custom component, Pass the second parameter a reference to the component instance. // const layer = scene.layer('fglayer', this)
... },})WeChat does not support dynamic creation of elements, so the canvas must be created in the template first and assigned to the corresponding canvas-id.
Currently, it does not support the loading of remote URLs and only supports local image materials. In addition, the web/node version of Sprite can preload images and obtain the image width and height, so sprite can adapt to the width and height by default, while the WeChat applet version does not use texturepacker to package images. , otherwise the default width and height cannot be obtained, and the width and height must be specified before the sprite object can be displayed.
Also note that when scene.preload preloads frames resources, loading frameData from a json file is not supported. It must be a js object. You can save frameData as js and then require it in the app.
In addition, the rotated and trimmed functions of texture packer are currently not supported.
// WeChat applet version's scene.preload is synchronous scene.preload(['../../assets/img/birds.png', require('../../assets/img/birds.json .js')])const sprite1 = new Sprite('bird1.png') sprite1.attr({
pos: [0, 0],})// Images loaded from frames have default sizes and can be displayed normally scene.layer().append(sprite1)const sprite2 = new Sprite('../../assets/ img/rambda.png')sprite2.attr({
pos: [50, 50],
size: [100, 100], // Non-frames images must specify width and height}) scene.layer().append(sprite2) We have placed an example of the "Ten Drops of Water" mini-game in the app folder.
To debug the example code, you can start webpack compilation
npm start
Then use WeChat developer tools to debug the code
WeChat does not support the dynamic creation of Dom elements and is not compatible with d3. Currently, the functions of d3 are not supported for the time being (it is planned to adapt through shim in the future).
WeChat context does not support filters, so filters have no effect.
WeChat canvas does not support gradients (linearGradients and createRadialGradient). If you use the gradient attribute in attr, an error will occur.
WeChat's canvas does not support dynamic creation of context, so caching optimization cannot be used.
Since there is a problem with the clipping of WeChat's simulator, the clipping area of the sprite element may be incorrect under the simulator.
The globalAlpha of WeChat's canvas only has a setter and no getter. Therefore, when the mini program sets the opacity attribute, it cannot be cascaded. The opacity of the child element will overwrite the opacity value of the parent container.
