พิกซี่

PixiJS — เครื่องมือสร้าง HTML5

โปรเจ็กต์นี้มีจุดมุ่งหมายเพื่อมอบไลบรารี 2D ที่รวดเร็วและมีน้ำหนักเบาซึ่งทำงานได้กับทุกอุปกรณ์ ตัวเรนเดอร์ PixiJS ช่วยให้ทุกคนเพลิดเพลินไปกับพลังของการเร่งความเร็วด้วยฮาร์ดแวร์โดยไม่ต้องมีความรู้เกี่ยวกับ WebGL มาก่อน นอกจากนี้ยังรวดเร็วอีกด้วย รวดเร็วจริงๆ

หากคุณต้องการติดตามข่าวสารล่าสุดของ PixiJS โปรดติดตามเราบน Twitter @PixiJS แล้วเราจะแจ้งให้คุณทราบ! คุณยังสามารถกลับมาตรวจสอบอีกครั้งบนเว็บไซต์ของเราได้ เนื่องจากจะมีการโพสต์ความก้าวหน้าใดๆ ที่นั่นด้วยเช่นกัน

ตอนนี้เราเป็นส่วนหนึ่งของ Open Collective และด้วยการสนับสนุนของคุณ คุณสามารถช่วยเราปรับปรุง PixiJS ให้ดียิ่งขึ้นได้ หากต้องการบริจาค เพียงคลิกปุ่มด้านล่าง แล้วเราจะรักคุณตลอดไป!

ควรใช้ PixiJS เพื่ออะไรและควรใช้เมื่อใด

PixiJS เป็นไลบรารีการเรนเดอร์ที่จะช่วยให้คุณสร้างกราฟิกเชิงโต้ตอบที่สมบูรณ์ รวมถึงแอปพลิเคชันและเกมข้ามแพลตฟอร์ม โดยไม่ต้องเจาะลึกเข้าไปใน WebGL API หรือจัดการกับเบราว์เซอร์และอุปกรณ์ที่เข้ากันได้

PixiJS รองรับ WebGPU พร้อมการรองรับทางเลือกสำหรับ WebGL ในฐานะห้องสมุด PixiJS เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการเขียนเนื้อหาเชิงโต้ตอบ ใช้สำหรับเว็บไซต์ แอพพลิเคชั่น และเกม HTML5 ที่มีกราฟิกเข้มข้น ความเข้ากันได้แบบนอกกรอบ ข้ามแพลตฟอร์ม และการเสื่อมถอยลงอย่างงดงาม หมายความว่าคุณมีงานที่ต้องทำน้อยลงและสนุกไปกับมันมากขึ้น! หากคุณต้องการสร้างประสบการณ์ที่สวยงามและประณีตอย่างรวดเร็วโดยไม่ต้องเจาะลึกโค้ดระดับต่ำที่หนาแน่น ทั้งหมดนี้หลีกเลี่ยงอาการปวดหัวจากความไม่สอดคล้องกันของเบราว์เซอร์ จากนั้นโปรเจ็กต์ถัดไปของคุณด้วยเวทมนตร์ PixiJS!

เพิ่มพัฒนาการของคุณและใช้จินตนาการของคุณได้อย่างอิสระ!

คุณสมบัติปัจจุบัน

• ตัวเรนเดอร์ WebGL (พร้อมการแบทช์อัจฉริยะอัตโนมัติ ช่วยให้ทำงานได้อย่างรวดเร็วจริงๆ)

• ตัวเรนเดอร์ WebGPU (ใหม่สำหรับเบราว์เซอร์ล่าสุด!)

• Canvas renderer (เร็วที่สุดในเมือง!)

• กราฟฉากเต็ม

• API ใช้งานง่ายสุด ๆ (คล้ายกับ API รายการแสดงแฟลช)

• รองรับแผนที่พื้นผิว

• ตัวโหลดเนื้อหา / ตัวโหลดสไปรท์ชีต

• ตรวจหาอัตโนมัติว่าควรใช้ตัวเรนเดอร์ตัวใด

• เมาส์เต็มรูปแบบและการโต้ตอบแบบมัลติทัช

• ข้อความ

• ข้อความบิตแมปฟอนต์

• ข้อความหลายบรรทัด

• เรนเดอร์พื้นผิว

• การวาดภาพเบื้องต้น

• การกำบัง

• ตัวกรอง

• ปลั๊กอินที่สนับสนุนโดยชุมชน

• ตอบสนอง

• กระดูกสันหลัง

• ตัวกรอง

• เคลื่อนไหว

• ไฟ

• UI

• เค้าโครง

• กิฟ

• และอื่นๆ อีกมากมาย!

ตั้งค่า

การเริ่มต้นใช้งาน PixiJS เป็นเรื่องง่าย! เพียงดาวน์โหลดบิลด์ที่สร้างไว้ล่วงหน้า!

อีกทางหนึ่ง สามารถติดตั้ง PixiJS ด้วย npm หรือใช้ URL ของเครือข่ายการจัดส่งเนื้อหา (CDN) เพื่อฝัง PixiJS บนหน้า HTML ของคุณโดยตรง

การติดตั้ง NPM

 npm ติดตั้ง pixi.js

ไม่มีการส่งออกเริ่มต้น วิธีที่ถูกต้องในการนำเข้า PixiJS คือ:

 นำเข้า * เป็น PIXI จาก 'pixi.js';

การติดตั้ง CDN

ผ่าน jsDelivr:

หรือผ่าน unpkg:

ตัวอย่างการใช้งานขั้นพื้นฐาน

 import { Application, Sprite, Assets } from 'pixi.js';// แอปพลิเคชันจะสร้างตัวเรนเดอร์โดยใช้ WebGL ถ้าเป็นไปได้// พร้อมตัวเลือกสำรองสำหรับการเรนเดอร์แคนวาส นอกจากนี้ยังจะตั้งค่าทิกเกอร์// และรูทสเตจ PIXI.Containerconst app = new Application();// รอให้ Renderer พร้อมใช้งานรอ app.init();// แอปพลิเคชันจะสร้างองค์ประกอบ canvas ให้คุณ // จากนั้นสามารถแทรกลงใน DOMdocument.body.appendChild(app.canvas);// โหลดพื้นผิวที่เราต้องการconst texture = await Assets.load('bunny.png');// สิ่งนี้จะสร้างพื้นผิวจาก 'bunny. png' imageconst bunny = สไปรท์ใหม่ (พื้นผิว);// ตั้งค่าตำแหน่งของ bunnybunny.x = app.renderer.width / 2;bunny.y = app.renderer.height / 2;// หมุนรอบ centerbunny.anchor .x = 0.5;bunny.anchor.y = 0.5;// เพิ่มกระต่ายในฉากที่เรากำลังสร้าง app.stage.addChild(bunny);// Listen for frame Updatesapp.ticker.add(() => { // แต่ละเฟรมเราหมุนกระต่ายไปรอบ ๆ เล็กน้อย bunny.rotation += 0.01;});

เรียนรู้

• เว็บไซต์: ค้นหาข้อมูลเพิ่มเติมเกี่ยวกับ PixiJS ได้จากเว็บไซต์อย่างเป็นทางการ

• เริ่มต้นใช้งาน:

• ดูคู่มือการเริ่มต้นใช้งาน

• นอกจากนี้ ลองดูบทช่วยสอน PixiJS ของ @miltoncandelero ที่มุ่งเป้าไปที่วิดีโอเกมพร้อมสูตรอาหารและแนวทางปฏิบัติที่ดีที่สุดที่นี่

• ตัวอย่าง: ติดขัดและลองใช้โค้ดและฟีเจอร์ PixiJS ที่นี่!

• เอกสารประกอบ API: ทำความรู้จักกับ PixiJS API โดยดูเอกสาร

• คำแนะนำ: คำแนะนำการใช้งานเพิ่มเติมสำหรับเอกสารประกอบ API ที่นี่

การสาธิต

• การสาธิตตัวกรอง

• กระต่ายสาธิต

• การสาธิตการมาสก์

• การสาธิตการโต้ตอบ

• ตัวอย่างเพิ่มเติม

ชุมชน

• ฟอรัม: ดูการสนทนาและ Stackoverflow -- ทั้งสองสถานที่ที่เป็นมิตรสำหรับการถามคำถาม PixiJS ของคุณ

• แชท: คุณสามารถเข้าร่วม Discord กับเราเพื่อพูดคุยเกี่ยวกับ PixiJS

วิธีการสร้าง

โปรดทราบว่าสำหรับผู้ใช้ส่วนใหญ่ คุณไม่จำเป็นต้องสร้างโปรเจ็กต์นี้ หากคุณต้องการใช้ PixiJS เพียงดาวน์โหลดหนึ่งในรีลีสที่สร้างไว้ล่วงหน้าของเรา ครั้งเดียวที่คุณควรสร้าง PixiJS คือคุณกำลังพัฒนามันอยู่

หากคุณยังไม่มี Node.js และ NPM ให้ไปติดตั้ง จากนั้น ในโฟลเดอร์ที่คุณได้โคลนพื้นที่เก็บข้อมูล ให้ติดตั้งการขึ้นต่อกันของบิลด์โดยใช้ npm:

 ติดตั้ง npm

จากนั้น หากต้องการสร้างแหล่งที่มา ให้รัน:

 บิลด์การรัน NPM

วิธีสร้างเอกสารประกอบ

สามารถสร้างเอกสารได้โดยใช้ npm:

 เอกสารการรัน NPM

มีส่วนช่วย

ต้องการเป็นส่วนหนึ่งของโครงการ PixiJS หรือไม่? ยอดเยี่ยม! ยินดีต้อนรับทุกท่าน! เราจะไปถึงที่นั่นเร็วขึ้นด้วยกัน :) ไม่ว่าคุณจะพบจุดบกพร่อง มีคำขอคุณสมบัติที่ยอดเยี่ยม หรือคุณอยากเป็นเจ้าของงานจากโรดแมปด้านบน โปรดติดต่อเราได้ตลอดเวลา

อย่าลืมอ่านคู่มือการมีส่วนร่วมก่อนที่จะส่งการเปลี่ยนแปลง

ใบอนุญาต

เนื้อหานี้เผยแพร่ภายใต้ใบอนุญาต MIT