sprite wxapp

แอปเพล็ต spritejs WeChat เวอร์ชัน

นี่คือ spritejs เวอร์ชันแอปเพล็ต WeChat ปัจจุบันรองรับฟังก์ชันส่วนใหญ่ของ spritejs v 2.0 สำหรับรายละเอียด โปรดดูที่เอกสารช่วยเหลือ

ลักษณะเฉพาะ

• สไปรท์จะอัปเดตคุณสมบัติการวาดใหม่โดยอัตโนมัติ (เป็นชุด)

• ใช้ rpx เป็นหน่วยเริ่มต้น

• แอนิเมชั่นรองรับ Web Animations API

• สนับสนุนกลไกการจัดงาน

ใช้งานได้รวดเร็ว

ติดตั้ง

หลังจากเวอร์ชัน v1.10.0 เวอร์ชันมินิโปรแกรมจะรองรับการติดตั้ง NPM

 npm ติดตั้ง @spritejs/wxapp --save

จากนั้นสร้างแพ็คเกจ NPM ในแอปเพล็ต WeChat

ใช้ผ่านส่วนประกอบ

เมื่อติดตั้งและสร้างแล้ว วิธีที่ง่ายที่สุดในการใช้ SpriteJS คือผ่านส่วนประกอบฉากในตัว

ลงทะเบียนส่วนประกอบในการกำหนดค่ามินิโปรแกรม app.json:

 "usingComponents": {"s-scene": "@spritejs/wxapp/scene"
-

จากนั้นแนะนำส่วนประกอบบนเพจที่คุณต้องการใช้:

 <ดู>
<s-scene id="container"layers="bglayer,fglayer"bindSceneCreated="onSceneCreated"
></s-ฉาก>
</ดู>

เลเยอร์พารามิเตอร์ระบุจำนวนเลเยอร์ที่จะสร้างและ ID ของเลเยอร์เหล่านั้น ค่าเริ่มต้นคือค่าเริ่มต้น

bindSceneCreated เป็นเหตุการณ์การเรียกกลับหลังจากสร้างฉาก และเลเยอร์ที่สร้างขึ้นจะถูกส่งกลับในวิธีการของเหตุการณ์:

 const { สไปรท์ } = ต้องการ('@spritejs/wxapp');หน้า({
onSceneCreated ({ รายละเอียด: เลเยอร์ }) {const { bglayer, fglayer } = เลเยอร์; const s = สไปรท์ใหม่ ({ ขนาด: [100, 100], pos: [300, 300], bgcolor: 'red',}); fglayer.append(s);const s2 = สไปรท์ใหม่ ({ ขนาด: [300, 300], ตำแหน่ง: [200, 200], bgcolor: 'blue',});bglayer.append(s2);s.on('touchstart', () => { s.attr('bgcolor', 'green');}) ;s.on('touchmove', () => { s.attr('bgcolor', 'green');});s.on('touchend', () => { s.attr('bgcolor', 'red');});
-

การใช้งานที่กำหนดเอง

หากคุณไม่ต้องการใช้ส่วนประกอบ คุณสามารถสร้างแคนวาสด้วยตัวเองแล้วสร้างฉากได้

 <view class="scene-layout" id="container" catchtouchmove="noop">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" Disable-scroll="true"></canvas>
</บล็อก>
</ดู>

 const spritejs = ต้องการ('@spritejs/wxapp');หน้า({
ข้อมูล: {เลเยอร์: ['fglayer'], eventOffset: [0, 0],
-
onTouchStart (เหตุการณ์) {// จัดส่งเหตุการณ์ touchstart this.scene.layer ('fglayer').dispatchEvent (เหตุการณ์ this.data.eventOffset);
-
onReady: function() {// เนื่องจากเค้าโครงฉากของเหตุการณ์พร็อกซีอาจถูกชดเชยโดยสัมพันธ์กับหน้าต่าง จึงต้องส่งค่าชดเชยนี้ใน // เพื่อวางตำแหน่งพิกัดเหตุการณ์อย่างถูกต้อง 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'); // โหลดทรัพยากรล่วงหน้า scene.preload ([ ' ../../assets/img/birds.png', need('../../assets/img/birds.json.js')]);const bird = ใหม่ spritejs.Sprite('bird1.png');bird.attr({ สมอ: [0.5, 0.5], pos: [100, 200],});//เพิ่มเหตุการณ์ ontouch bird.on('touchstart', evt = > { console.log(evt)});// แอนิเมชันพื้นผิว ให้ i = 0; setInterval(() => { bird.textures = [`bird${i++%3+1}.png`];}, 100);//เพิ่มข้อความ const text = new spritejs.Label('Hellon World!');text.attr({ //anchor: [ 0.5, 0.5], แบบอักษร: '44px Arial', เส้นขอบ: [2, 'red'],}); const posFrom = [0, 0]; [100, 0]; // เล่นภาพเคลื่อนไหวแบบ shift text.animate ([ {pos: posFrom}, {pos: posTo},], { ระยะเวลา: 2000}); // เพิ่มสไปรท์สองตัวใน layerlayer.append (bird, ข้อความ);
-

โปรดทราบ ว่าเมื่อคุณเรียกมันด้วยตัวเอง คุณจะต้องตั้งค่าแอตทริบิวต์ canvas-id ให้สอดคล้องกับ ID ของเลเยอร์ที่สร้างขึ้นเมื่อสร้าง canvas

ข้อจำกัด/ความแตกต่างระหว่างเวอร์ชันมินิโปรแกรมและเวอร์ชันดั้งเดิม

ความแตกต่างของพารามิเตอร์ฉาก

แตกต่างจากเวอร์ชันเว็บ/โหนด ตัวสร้างฉากของเวอร์ชันมินิโปรแกรมสามารถส่งผ่านความกว้างและความสูงได้เท่านั้น และหน่วยเป็น rpx rpx เป็นหน่วยเฉพาะของมินิโปรแกรม WeChat โปรดดูคำอธิบายโดยละเอียดในเอกสารประกอบ

 const info = wx.getSystemInfoSync();const scene = ฉากใหม่ (750, 1433); // หน่วยคือ rpx

ความแตกต่างในการจัดการเหตุการณ์

หากใช้ผ่านการโหลดส่วนประกอบ เหตุการณ์ต่างๆ เช่น touchstart, touchend, touchmove, tap, longpress ฯลฯ จะถูกพร็อกซีโดยอัตโนมัติตามฉาก ดังนั้นคุณจึงสามารถเพิ่มฟังก์ชันการประมวลผลเหตุการณ์ที่เกี่ยวข้องให้กับองค์ประกอบสไปรท์เพื่อทริกเกอร์เหตุการณ์ได้ตามปกติ

หากคุณสร้างฉากด้วยตัวเอง คุณจะต้องพร็อกซีเหตุการณ์ด้วยตนเอง:

 <!--index.wxml--><view class="scene-layout" id="container">
<block wx:for="{{layers}}" wx:key="{{item}}">
<canvas canvas-id="{{item}}" bindtouchstart="touched"></canvas>
</บล็อก>
</ดู>

 const spritejs = ต้องการ('@spritejs/wxapp')หน้า({
ข้อมูล: {เลเยอร์: ['fglayer'], eventOffset: [0, 0],
-
สัมผัส: ฟังก์ชั่น (เหตุการณ์) {this.scene.layer ('fglayer'). delegateEvent (เหตุการณ์ this.data.eventOffset);
-
onReady: function() {// เนื่องจากเค้าโครงฉากของเหตุการณ์พร็อกซีอาจถูกชดเชยโดยสัมพันธ์กับหน้าต่าง จึงต้องส่งค่าชดเชยนี้ใน // เพื่อวางตำแหน่งพิกัดเหตุการณ์อย่างถูกต้อง 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');// หากใช้ในองค์ประกอบที่กำหนดเอง ให้ผ่าน พารามิเตอร์ตัวที่สองอ้างอิงถึงอินสแตนซ์ส่วนประกอบ // const layer = scene.layer('fglayer' นี้)
-

ต้องสร้างองค์ประกอบผืนผ้าใบของเลเยอร์ล่วงหน้า

WeChat ไม่รองรับการสร้างองค์ประกอบแบบไดนามิก ดังนั้นต้องสร้างแคนวาสในเทมเพลตก่อนและกำหนดให้กับ canvas-id ที่เกี่ยวข้อง

การโหลดทรัพยากรล่วงหน้าและข้อจำกัดของการรองรับภาพสไปรท์

ปัจจุบันไม่รองรับการโหลด URL ระยะไกลและรองรับเฉพาะวัสดุรูปภาพในเครื่องเท่านั้น นอกจากนี้ สไปรท์เวอร์ชันเว็บ/โหนดสามารถโหลดรูปภาพล่วงหน้าและรับความกว้างและความสูงของรูปภาพ ดังนั้นสไปรท์จึงสามารถปรับให้เข้ากับความกว้างและความสูงได้ตามค่าเริ่มต้น ในขณะที่เวอร์ชันแอปเพล็ต WeChat ไม่ได้ใช้ texturepacker เพื่อจัดแพ็คเกจรูปภาพ ไม่เช่นนั้นจะไม่สามารถรับความกว้างและความสูงเริ่มต้นได้ และต้องระบุความกว้างและความสูงก่อนจึงจะสามารถแสดงวัตถุสไปรท์ได้

โปรด ทราบว่า เมื่อ scene.preload โหลดทรัพยากรเฟรมล่วงหน้า ระบบไม่รองรับการโหลด frameData จากไฟล์ json จะต้องเป็นอ็อบเจ็กต์ js คุณสามารถบันทึก frameData เป็น js แล้วกำหนดให้ต้องใช้ในแอปได้

นอกจากนี้ ขณะนี้ยังไม่รองรับฟังก์ชันการหมุนและตัดแต่งของ Texture Packer

 // Scene.preload เวอร์ชันแอปเพล็ต WeChat เป็นแบบซิงโครนัส scene.preload(['../../assets/img/birds.png', need('../../assets/img/birds.json .js' )])const sprite1 = สไปรท์ใหม่('bird1.png') สไปรท์1.attr({
pos: [0, 0],})// รูปภาพที่โหลดจากเฟรมมีขนาดเริ่มต้นและสามารถแสดงได้ตามปกติ scene.layer().append(sprite1)const sprite2 = new Sprite('../../assets/ img /rambda.png')sprite2.attr({
ตำแหน่ง: [50, 50],
ขนาด: [100, 100], // ภาพที่ไม่ใช่เฟรมต้องระบุความกว้างและความสูง}) scene.layer().append(sprite2)

การดีบักโค้ดตัวอย่าง

เราได้วางตัวอย่างมินิเกม "Ten Drops of Water" ไว้ในโฟลเดอร์ app

หากต้องการแก้ไขโค้ดตัวอย่าง คุณสามารถเริ่มการคอมไพล์ webpack ได้

 เวลา 13.00 น. เริ่มต้น

จากนั้นใช้เครื่องมือสำหรับนักพัฒนา WeChat เพื่อดีบักโค้ด

คุณสมบัติยังไม่รองรับในขณะนี้

• WeChat ไม่รองรับการสร้างองค์ประกอบ Dom แบบไดนามิกและเข้ากันไม่ได้กับ d3 ในปัจจุบัน ฟังก์ชันของ d3 ยังไม่ได้รับการสนับสนุนในขณะนี้ (มีแผนที่จะปรับเปลี่ยนผ่านชิมในอนาคต)

• บริบท WeChat ไม่รองรับตัวกรอง ดังนั้นตัวกรองจึงไม่มีผล

• WeChat canvas ไม่รองรับการไล่ระดับสี (linearGradients และ createRadialGradient) หากคุณใช้แอตทริบิวต์การไล่ระดับสีใน attr จะเกิดข้อผิดพลาด

• Canvas ของ WeChat ไม่รองรับการสร้างบริบทแบบไดนามิก ดังนั้นจึงไม่สามารถใช้การเพิ่มประสิทธิภาพแคชได้

ข้อบกพร่องที่ไม่สามารถแก้ไขได้ในขณะนี้

• เนื่องจากมีปัญหากับการตัดคลิปจำลองของ WeChat พื้นที่คลิปขององค์ประกอบสไปรท์จึงอาจไม่ถูกต้องภายใต้เครื่องมือจำลอง

• แคนวาส globalAlpha ของ WeChat มีเพียงตัวตั้งค่าและไม่มีตัวรับ ดังนั้น เมื่อมินิโปรแกรมตั้งค่าแอตทริบิวต์ความทึบ จะไม่สามารถเรียงซ้อนได้ ความทึบขององค์ประกอบลูกจะเขียนทับค่าความทึบของคอนเทนเนอร์หลัก