สร้างพินแผนที่ PixiJS กระพริบ 3 ครั้งแล้วหยุดด้วย NixieFX
นักพัฒนาแชร์วิธีสร้างพินแผนที่เกมใน PixiJS 8 พร้อมเอฟเฟกต์กระพริบ 3 ครั้งและหยุดอัตโนมัติเมื่ออยู่นอกจอ ช่วยลดความรกตา
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- พินแผนที่เกมใน PixiJS 8 พร้อมเอฟเฟกต์กระพริบจำกัดครั้งเพื่อลดความรกตา
- ใช้ไลบรารี NixieFX 0.1.20 และรันบน Pixi.js เวอร์ชัน 8.22.0 ด้วยนาฬิกาคงที่ 1/60 วินาที
- เอฟเฟกต์ประกอบด้วยแสงเรืองรองและประกายไฟ 14 ดวงพุ่งออกด้านนอกเป็นเวลา 0.7 ถึง 0.8 วินาที
- ควบคุมรอบการเล่นผ่านโค้ดเกมทั้งหมดโดยไม่มีการวนลูปเอฟเฟกต์เอง
เครื่องหมายเป้าหมายบนแผนที่เกมมีหน้าที่หลักคือช่วยให้ผู้เล่นมองเห็นจุดหมายได้อย่างรวดเร็ว แต่หากพินทุกอันบนแผนที่กระพริบตลอดเวลาจะกลายเป็นความน่ารำคาญและไม่มีอะไรโดดเด่นขึ้นมา บทความนี้จึงนำเสนอการสร้างพินติดตามเป้าหมายใน PixiJS 8 ร่วมกับเอฟเฟกต์อนุภาคจาก NixieFX ที่มีงบประมาณความสนใจจำกัด โดยจะกระพริบสามครั้งเมื่อเปิดแผนที่ ข้ามจังหวะเมื่อพินอยู่นอกจอ และหยุดทำงานอย่างสมบูรณ์
ตัวอย่างการทดลองนี้รันบน pixi.js 8.22.0 ร่วมกับ nixie-fx 0.1.20 โดยอัปเดตบนนาฬิกาคงที่ 1/60 วินาที เอฟเฟกต์ที่สร้างขึ้นเป็นแบบพัลส์ครั้งเดียวจบ (one-shot) ซึ่งประกอบด้วยตัวปล่อยอนุภาคสองตัว ได้แก่ แสงเรืองรองนุ่มนวลที่ขยายใหญ่และจางหายไปในเวลา 0.7 วินาที และวงแหวนประกายไฟ 14 ดวงที่เคลื่อนที่ออกด้านนอกในเวลาประมาณ 0.8 วินาที เอฟเฟกต์นี้จะไม่วนลูปเอง แต่ให้ตัวเกมเป็นผู้ตัดสินใจว่าจะเรียกใช้งานอีกครั้งเมื่อใด เพื่อให้เงื่อนไขการหยุดทั้งหมดถูกควบคุมไว้ในที่เดียวในโค้ด
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
แผนที่ตัวอย่างมีพินจำนวน 30 อันบนขนาดแผน 1100 คูณ 720 พิกเซล แสดงผลผ่านแคนวาสขนาด 640 คูณ 400 พิกเซล ทำให้มีพินปรากฏบนหน้าจอ 9 อันในการทดลองแต่ละรอบที่กินเวลา 8 วินาที ผู้เขียนได้นับจำนวนการเรียก WebGL draw calls จริงด้วยการครอบฟังก์ชัน drawArrays และ drawElements ซึ่งแต่ละสถานการณ์ถูกรันสามครั้งและได้จำนวนครั้งที่เท่ากันทุกรอบ
การจำกัดการแสดงผลและเอฟเฟกต์ภาพบนแผนที่เกม (Attention Budget) เป็นแนวทางสำคัญในการพัฒนาเกมสมัยใหม่ เพื่อป้องกันไม่ให้สมองของผู้เล่นรับข้อมูลภาพมากเกินไป (Visual Fatigue) การใช้เทคนิคพินกระพริบจำกัดจำนวนครั้งและการซ่อนเอฟเฟกต์เมื่ออยู่นอกจอ ช่วยประหยัดทรัพยากรการประมวลผลของ GPU และรักษาความสะอาดตาของอินเทอร์เฟซผู้ใช้ได้อย่างมีประสิทธิภาพ
เอฟเฟกต์นี้ใช้เพียงคุณสมบัติสีตามอายุ ขนาดตามอายุ ความเร็ว และแรงต้าน (velocity and drag) เท่านั้น โดยไฟล์ส่งออกจะถูกทำเครื่องหมายว่ารองรับสำหรับ pixi2d หากนักพัฒนาต้องการสร้างเอฟเฟกต์ที่ซับซ้อนขึ้น จะต้องตรวจสอบการรองรับในส่วน support.backends.pixi2d ของไฟล์ manifest.json ก่อน เนื่องจากฟีเจอร์อย่างเช่น ร่องรอย (trails), สัญญาณรบกวน, การชน, แสง, หรือตัวปล่อยอนุภาคย่อย จะทำให้การส่งออกแสดงผลเป็นแบบรองรับบางส่วน (partial) สำหรับ Pixi
ผู้พัฒนาสามารถเขียนเอฟเฟกต์นี้ในรูปของไฟล์ JSON แล้วทำการส่งออกด้วยคำสั่ง npx nixie-fx export . หรือหากต้องการปรับแต่งแสงเรืองและวงแหวนด้วยสายตา NixieFX ก็มีเครื่องมือแก้ไขอนุภาคแบบภาพสำหรับ PixiJS ที่บันทึกในรูปแบบเดียวกัน โดยสามารถศึกษาคู่มือการโหลดชุดข้อมูลและการตั้งค่า ticker ได้จากเอกสารประกอบของ PixiJS
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น