sprite wxapp
v1.0.0
Ini adalah spritejs versi applet WeChat. Saat ini mendukung sebagian besar fungsi spritejs v 2.0.
Properti sprite diperbarui secara otomatis (berkelompok) menggambar ulang
Gunakan rpx sebagai unit default
Dukungan animasi API Animasi Web
Mendukung mekanisme acara
Setelah versi v1.10.0, versi program mini mendukung instalasi NPM.
npm install @spritejs/wxapp --simpan
Kemudian buat paket NPM di applet WeChat.
Setelah diinstal dan dibangun, cara termudah untuk menggunakan SpriteJS adalah melalui komponen scene bawaan.
Daftarkan komponen dalam konfigurasi program mini app.json:
"usingComponents": {"s-scene": "@spritejs/wxapp/scene"
}Kemudian perkenalkan komponen pada halaman yang ingin Anda gunakan:
<tampilan> <s-scene id="container"layers="bglayer,fglayer"bindSceneCreated="onSceneCreated" ></s-adegan> </tampilan>
Lapisan parameter menunjukkan berapa banyak lapisan yang akan dibuat dan ID-nya. Defaultnya adalah default.
bindSceneCreated adalah event callback setelah pembuatan Scene, dan lapisan yang dibuat dikembalikan dalam metode event:
const { Sprite } = memerlukan('@spritejs/wxapp');Halaman({
onSceneCreated({ detail: lapisan }) {const { bglayer, fglayer } = lapisan;const s = Sprite baru({ ukuran: [100, 100], pos: [300, 300], bgcolor: 'merah',}); fglayer.append(s);const s2 = Sprite baru({ ukuran: [300, 300], pos: [200, 200], bgcolor: 'biru',});bglayer.append(s2);s.on('touchstart', () => { s.attr('bgcolor', 'hijau');}) ;s.on('touchmove', () => { s.attr('bgcolor', 'kuning');});s.on('touchend', () => { s.attr('bgcolor', 'merah');});
},});Jika Anda tidak ingin menggunakan komponen, Anda juga dapat membuat kanvas sendiri lalu membuat adegannya
<lihat class="scene-layout" id="container" catchtouchmove="noop">
<blok wx:for="{{lapisan}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" nonaktifkan-scroll="true"></canvas>
</blok>
</tampilan> const spritejs = memerlukan('@spritejs/wxapp');Halaman({
data: {lapisan: ['fglayer'], eventOffset: [0, 0],
},
onTouchStart(event) {// Mengirimkan acara touchstart this.scene.layer('fglayer').dispatchEvent(event, this.data.eventOffset);
},
onReady: function() {// Karena tata letak adegan peristiwa proxy mungkin diimbangi relatif terhadap jendela, offset ini perlu diteruskan // untuk memposisikan koordinat peristiwa dengan benar const query = wx.createSelectorQuery();query .select( '.scene-layout').boundingClientRect().exec(([rect]) => { if(rect) {this.setData({ eventOffset: [rect.left, rect.top],}); }});const scene = spritejs baru.Scene();this.scene = scene;const layer = scene.layer('fglayer');// Muat sumber daya scene.preload([ ' ../../assets/img/birds.png', require('../../assets/img/birds.json.js')]);const bird = baru spritejs.Sprite('bird1.png');bird.attr({ jangkar: [0.5, 0.5], pos: [100, 200],});//Tambahkan acara ontouch bird.on('touchstart', evt = > { console.log(evt)});// Animasi tekstur misalkan i = 0; setInterval(() => { bird.textures = [`bird${i++%3+1}.png`];}, 100);//Tambahkan teks const text = spritejs baru.Label('Halo Dunia!');text.attr({ //anchor: [ 0,5, 0,5], font: '44px Arial', batas: [2, 'merah'],}); const posFrom = [0, 0]; [100, 0]; // Memutar animasi shift text.animate([ {pos: posFrom}, {pos: posTo},], { durasi: 2000}); teks);
},})Perhatikan bahwa saat Anda memanggilnya sendiri, Anda perlu menyetel atribut canvas-id agar konsisten dengan ID lapisan yang dibuat saat membuat kanvas.
Berbeda dengan versi web/node, konstruktor Scene versi program mini hanya dapat meneruskan lebar dan tinggi, dan satuannya adalah rpx. rpx adalah unit unik untuk program mini WeChat. Silakan merujuk ke dokumentasi untuk penjelasan rinci.
const info = wx.getSystemInfoSync();const scene = new Scene(750, 1433); // Unitnya adalah rpx
Jika digunakan melalui pemuatan komponen, peristiwa seperti touchstart, touchend, touchmove, tap, longpress dll. secara otomatis diproksi oleh adegan, sehingga Anda dapat menambahkan fungsi pemrosesan peristiwa yang sesuai ke elemen sprite untuk memicu peristiwa secara normal.
Jika Anda membuat adegan sendiri, Anda perlu memproksi sendiri acara tersebut secara manual:
<!--index.wxml--><view class="scene-layout" id="container">
<blok wx:for="{{lapisan}}" wx:key="{{item}}">
<kanvas kanvas-id="{{item}}" bindtouchstart="menyentuh"></kanvas>
</blok>
</tampilan> const spritejs = memerlukan('@spritejs/wxapp')Halaman({
data: {lapisan: ['fglayer'], eventOffset: [0, 0],
},
disentuh: function(event) {this.scene.layer('fglayer').delegateEvent(event, this.data.eventOffset);
},
onReady: function() {// Karena tata letak adegan peristiwa proxy mungkin diimbangi relatif terhadap jendela, offset ini perlu diteruskan // untuk memposisikan koordinat peristiwa dengan benar 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');// Jika digunakan dalam komponen khusus, Lulus parameter kedua referensi ke instance komponen. // const layer = scene.layer('fglayer', ini)
... },})WeChat tidak mendukung pembuatan elemen dinamis, jadi kanvas harus dibuat di template terlebih dahulu dan ditetapkan ke id kanvas yang sesuai.
Saat ini, Sprite tidak mendukung pemuatan URL jarak jauh dan hanya mendukung materi gambar lokal. Selain itu, Sprite versi web/node dapat memuat gambar terlebih dahulu dan mendapatkan lebar dan tinggi gambar, sehingga sprite dapat beradaptasi dengan lebar dan tinggi secara default. , sedangkan versi applet WeChat tidak menggunakan texturepacker untuk mengemas gambar. , jika tidak, lebar dan tinggi default tidak dapat diperoleh, dan lebar serta tinggi harus ditentukan sebelum objek sprite dapat ditampilkan.
Perhatikan juga bahwa ketika scene.preload memuat sumber daya frame, memuat frameData dari file json tidak didukung. Itu harus berupa objek js.
Selain itu, fungsi pengemas tekstur yang diputar dan dipangkas saat ini tidak didukung.
// scene.preload versi applet WeChat sinkron scene.preload(['../../assets/img/birds.png', require('../../assets/img/birds.json .js' )])const sprite1 = Sprite baru('bird1.png') sprite1.attr({
pos: [0, 0],})// Gambar yang diambil dari bingkai memiliki ukuran default dan dapat ditampilkan secara normal scene.layer().append(sprite1)const sprite2 = new Sprite('../../assets/ img /rambda.png')sprite2.attr({
posisi: [50, 50],
ukuran: [100, 100], // Gambar non-bingkai harus menentukan lebar dan tinggi}) scene.layer().append(sprite2) Kami telah menempatkan contoh mini-game "Sepuluh Tetes Air" di folder app .
Untuk men-debug kode contoh, Anda dapat memulai kompilasi webpack
npm mulai
Kemudian gunakan alat pengembang WeChat untuk men-debug kode
WeChat tidak mendukung pembuatan elemen Dom secara dinamis dan tidak kompatibel dengan d3. Saat ini, fungsi d3 tidak didukung (direncanakan untuk diadaptasi melalui shim di masa mendatang).
Konteks WeChat tidak mendukung filter, jadi filter tidak berpengaruh.
Kanvas WeChat tidak mendukung gradien (linearGradients dan createRadialGradient). Jika Anda menggunakan atribut gradien di attr, kesalahan akan terjadi.
Kanvas WeChat tidak mendukung pembuatan konteks dinamis, sehingga pengoptimalan cache tidak dapat digunakan.
Karena ada masalah dengan kliping simulator WeChat, area kliping elemen sprite di bawah simulator mungkin salah.
GlobalAlpha kanvas WeChat hanya memiliki setter dan tidak ada pengambil. Oleh karena itu, ketika program mini menyetel atribut opacity, opacity elemen anak akan menimpa nilai opacity dari wadah induk.
