sprite wxapp
v1.0.0
Il s'agit de la version applet WeChat de spritejs. Elle prend actuellement en charge la plupart des fonctions de spritejs v 2.0. Pour plus de détails, veuillez vous référer au document d'aide.
Les propriétés du sprite sont mises à jour automatiquement (par lots) et redessinées
Utiliser rpx comme unité par défaut
Prise en charge des animations API d'animations Web
Mécanisme d'événement de support
Après la version v1.10.0, la version mini du programme prend en charge l'installation de NPM.
npm install @spritejs/wxapp --save
Créez ensuite le package NPM dans l’applet WeChat.
Une fois installé et construit, le moyen le plus simple d'utiliser SpriteJS consiste à utiliser le composant de scène intégré.
Enregistrez le composant dans la configuration du mini-programme app.json :
"usingComponents": {"s-scene": "@spritejs/wxapp/scene"
}Introduisez ensuite le composant sur la page que vous souhaitez utiliser :
<vue> <s-scene id="container"layers="bglayer,fglayer"bindSceneCreated="onSceneCreated" ></s-scène> </vue>
Le paramètre Layers indique le nombre de couches à créer et leurs ID. La valeur par défaut est default.
bindSceneCreated est l'événement de rappel après la création de la scène, et les calques créés sont renvoyés dans la méthode événementielle :
const { Sprite } = require('@spritejs/wxapp');Page({
onSceneCreated({ détail : calques }) {const { bglayer, fglayer } = calques;const s = new Sprite({ taille : [100, 100], pos : [300, 300], bgcolor : 'rouge',}); fglayer.append(s);const s2 = new Sprite({ taille : [300, 300], pos : [200, 200], bgcolor : 'bleu',});bglayer.append(s2);s.on('touchstart', () => { s.attr('bgcolor', 'green');}) ;s.on('touchmove', () => { s.attr('bgcolor', 'jaune');});s.on('touchend', () => { s.attr('bgcolor', 'rouge');});
},});Si vous ne souhaitez pas utiliser de composants, vous pouvez également créer le canevas vous-même, puis construire la scène.
<view class="scene-layout" id="container" catchtouchmove="noop">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas Canvas-id="{{item}}" Disable-scroll="true"></canvas>
</bloc>
</vue> const spritejs = require('@spritejs/wxapp');Page({
données : {couches : ['fglayer'], eventOffset : [0, 0],
},
onTouchStart(event) {// Répartir l'événement touchstart this.scene.layer('fglayer').dispatchEvent(event, this.data.eventOffset);
},
onReady : function() {// Puisque la disposition de la scène de l'événement proxy peut être décalée par rapport à la fenêtre, ce décalage doit être transmis dans // pour positionner correctement les coordonnées de l'événement 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');// Précharger les ressources scene.preload([ ' ../../assets/img/birds.png', require('../../assets/img/birds.json.js')]);const oiseau = nouveau spritejs.Sprite('bird1.png');bird.attr({ Anchor: [0.5, 0.5], pos: [100, 200],});//Ajouter un événement ontouch bird.on('touchstart', evt = > { console.log(evt)});// Animation de texture let i = 0; setInterval(() => { bird.textures = [`bird${i++%3+1}.png`];}, 100);//Ajouter du texte const text = new spritejs.Label('Hellon World!');text.attr({ //anchor: [ 0.5, 0.5], police : '44px Arial', bordure : [2, 'red'],}); const posFrom = [0, 0]; [100, 0]; // Jouer une animation de décalage text.animate([ {pos: posFrom}, {pos: posTo},], { duration: 2000}); // Ajouter deux sprites à layerlayer.append (bird, texte);
},})Notez que lorsque vous l'appelez vous-même, vous devez définir l'attribut canvas-id pour qu'il soit cohérent avec l'ID du calque créé lors de la création du canevas.
Différent de la version web/nœud, le constructeur Scene de la version mini-programme ne peut transmettre que la largeur et la hauteur, et l'unité est rpx. rpx est une unité unique aux mini-programmes WeChat. Veuillez vous référer à la documentation pour une description détaillée.
const info = wx.getSystemInfoSync();const scene = new Scene(750, 1433); // L'unité est rpx
S'ils sont utilisés via le chargement de composants, les événements tels que touchstart, touchend, touchmove, tap, longpress etc. sont automatiquement mandatés par la scène, vous pouvez donc ajouter la fonction de traitement d'événement correspondante à l'élément sprite pour déclencher l'événement normalement.
Si vous créez la scène vous-même, vous devez manuellement proxy l'événement vous-même :
<!--index.wxml--><view class="scene-layout" id="container">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" bindtouchstart="touched"></canvas>
</bloc>
</vue> const spritejs = require('@spritejs/wxapp')Page({
données : {couches : ['fglayer'], eventOffset : [0, 0],
},
touché : function(event) {this.scene.layer('fglayer').delegateEvent(event, this.data.eventOffset);
},
onReady : function() {// Puisque la disposition de la scène de l'événement proxy peut être décalée par rapport à la fenêtre, ce décalage doit être transmis dans // pour positionner correctement les coordonnées de l'événement 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');// Si utilisé dans un composant personnalisé, Pass le deuxième paramètre est une référence à l'instance du composant. // couche const = scène.layer('fglayer', ceci)
...},})WeChat ne prend pas en charge la création dynamique d'éléments, le canevas doit donc d'abord être créé dans le modèle et attribué à l'identifiant du canevas correspondant.
Actuellement, il ne prend pas en charge le chargement d'URL distantes et ne prend en charge que les images locales. De plus, la version Web/nœud de Sprite peut précharger les images et obtenir la largeur et la hauteur de l'image, de sorte que le sprite peut s'adapter à la largeur et à la hauteur par défaut. , alors que la version de l'applet WeChat n'utilise pas texturepacker pour empaqueter les images , sinon la largeur et la hauteur par défaut ne peuvent pas être obtenues, et la largeur et la hauteur doivent être spécifiées avant que l'objet sprite puisse être affiché.
Notez également que lorsque scene.preload précharge les ressources de frames, le chargement de frameData à partir d'un fichier json n'est pas pris en charge. Il doit s'agir d'un objet js. Vous pouvez enregistrer frameData au format js, puis l'exiger dans l'application.
De plus, les fonctions de rotation et de découpage du packer de texture ne sont actuellement pas prises en charge.
// Scene.preload de la version de l'applet WeChat est synchrone scene.preload(['../../assets/img/birds.png', require('../../assets/img/birds.json .js' )])const sprite1 = nouveau Sprite('bird1.png') sprite1.attr({
pos: [0, 0],})// Les images chargées à partir des images ont des tailles par défaut et peuvent être affichées normalement scene.layer().append(sprite1)const sprite2 = new Sprite('../../assets/ img /rambda.png')sprite2.attr({
pos : [50, 50],
size : [100, 100], // Les images non-frames doivent spécifier la largeur et la hauteur}) scene.layer().append(sprite2) Nous avons placé un exemple du mini-jeu "Dix gouttes d'eau" dans le dossier app .
Pour déboguer l'exemple de code, vous pouvez démarrer la compilation du webpack
npm démarrer
Utilisez ensuite les outils de développement WeChat pour déboguer le code
WeChat ne prend pas en charge la création dynamique d'éléments Dom et n'est pas compatible avec d3 Actuellement, les fonctions de d3 ne sont pas prises en charge pour le moment (il est prévu de s'adapter via shim dans le futur).
Le contexte WeChat ne prend pas en charge les filtres, les filtres n'ont donc aucun effet.
Le canevas WeChat ne prend pas en charge les dégradés (linearGradients et createRadialGradient). Si vous utilisez l'attribut gradient dans attr, une erreur se produira.
Le canevas de WeChat ne prend pas en charge la création dynamique de contexte, l'optimisation de la mise en cache ne peut donc pas être utilisée.
Puisqu'il y a un problème avec le découpage du simulateur de WeChat, la zone de découpage de l'élément sprite peut être incorrecte sous le simulateur.
Le globalAlpha du canevas de WeChat n'a qu'un setter et aucun getter. Par conséquent, lorsque le mini-programme définit l'attribut d'opacité, il ne peut pas être mis en cascade. L'opacité de l'élément enfant écrasera la valeur d'opacité du conteneur parent.
