บทความนี้ส่วนใหญ่แนะนำการสอนเกี่ยวกับการใช้ผืนผ้าใบเลเยอร์เพื่อเพิ่มประสิทธิภาพการแสดงผล HTML5 มันมาจากเอกสารทางเทคนิคของผู้พัฒนาเว็บไซต์อย่างเป็นทางการของ IBM เพื่อนที่ต้องการมันสามารถอ้างถึง บทนำ ต่อไปนี้
โดยทั่วไปเมื่อเล่นเกม 2D หรือการแสดงผล HTML5 Canvas จำเป็นต้องมีการปรับให้เหมาะสมเพื่อใช้หลายเลเยอร์เพื่อสร้างฉากสังเคราะห์ ในการเรนเดอร์ระดับต่ำเช่น OpenGL หรือ WebGL การเรนเดอร์จะดำเนินการโดยการทำความสะอาดและวาดภาพฉากต่อเฟรม หลังจากดำเนินการเรนเดอร์แล้วเกมจะต้องได้รับการปรับให้เหมาะสมเพื่อลดจำนวนการแสดงผลและค่าใช้จ่ายที่ต้องการจะแตกต่างกันไปตามสถานการณ์สู่สถานการณ์ เนื่องจากผืนผ้าใบเป็นองค์ประกอบ DOM จึงช่วยให้คุณสามารถเลเยอร์หลายผืนผ้าใบเป็นวิธีการเพิ่มประสิทธิภาพ
ตัวย่อทั่วไป
DOM: โมเดลวัตถุเอกสาร
HTML: ภาษามาร์กอัปไฮเปอร์เท็กซ์ (ภาษามาร์กอัปไฮเปอร์เท็กซ์)
บทความนี้จะสำรวจความมีเหตุผลของผืนผ้าใบ ทำความเข้าใจกับการตั้งค่า DOM เพื่อเปิดใช้งานผืนผ้าใบชั้น การใช้การเพิ่มประสิทธิภาพแบบลำดับชั้นต้องใช้วิธีปฏิบัติต่าง ๆ บทความนี้จะสำรวจแนวคิดและเทคนิคบางอย่างสำหรับกลยุทธ์การเพิ่มประสิทธิภาพที่ขยายวิธีการแบบลำดับชั้น
คุณสามารถดาวน์โหลดซอร์สโค้ดสำหรับตัวอย่างที่ใช้ในบทความนี้
เลือกกลยุทธ์การเพิ่มประสิทธิภาพ
การเลือกกลยุทธ์การเพิ่มประสิทธิภาพที่ดีที่สุดอาจเป็นเรื่องยาก เมื่อเลือกสถานการณ์แบบลำดับชั้นคุณต้องพิจารณาว่าสถานการณ์ประกอบขึ้นอย่างไร การเรนเดอร์ของวัตถุคงที่บนหน้าจอขนาดใหญ่มักจะต้องใช้ส่วนประกอบหลายอย่างซึ่งเป็นตัวเลือกที่ยอดเยี่ยมสำหรับการวิจัย เอฟเฟกต์เช่น Parallax หรือ Animation Entities มักจะต้องใช้พื้นที่หน้าจอที่แตกต่างกันมาก เป็นการดีที่สุดที่จะให้ความสนใจกับสถานการณ์เหล่านี้เมื่อสำรวจกลยุทธ์การเพิ่มประสิทธิภาพที่ดีที่สุดของคุณ แม้ว่าการเพิ่มประสิทธิภาพแบบลำดับชั้นของผืนผ้าใบต้องใช้เทคนิคต่าง ๆ หลายอย่าง แต่ประสิทธิภาพมักจะได้รับการปรับปรุงอย่างมากหลังจากการใช้เทคนิคเหล่านี้อย่างถูกต้อง
เลเยอร์การตั้งค่า
เมื่อใช้วิธีการแบบลำดับชั้นขั้นตอนแรกคือการตั้งค่าผืนผ้าใบบน DOM โดยปกติแล้วนี่เป็นเรื่องง่ายเพียงกำหนดองค์ประกอบผ้าใบและวางไว้ใน DOM แต่เลเยอร์ผ้าใบอาจต้องใช้สไตล์พิเศษ เมื่อใช้ CSS มีสองข้อกำหนดสำหรับการใช้ลำดับชั้นของผืนผ้าใบสำเร็จ:
แต่ละองค์ประกอบของผืนผ้าใบจะต้องอยู่ร่วมกันในตำแหน่งเดียวกันในวิวพอร์ต
ผืนผ้าใบแต่ละอันจะต้องมองเห็นได้ภายใต้ผืนผ้าใบอื่น
รูปที่ 1 แสดงแนวคิดการทับซ้อนทั่วไปที่อยู่เบื้องหลังการตั้งค่าเลเยอร์
รูปที่ 1. ตัวอย่างเลเยอร์
ขั้นตอนในการตั้งค่าเลเยอร์มีดังนี้:
เพิ่มรูปแบบการวางตำแหน่งองค์ประกอบของ Canvas เพื่อรองรับลำดับชั้น
จัดสไตล์องค์ประกอบผ้าใบเพื่อสร้างพื้นหลังที่โปร่งใส
ตั้งค่าซ้อนทับผืนผ้าใบ
การสร้างสแต็คซ้อนทับใน CSS อาจต้องใช้สไตล์เล็กน้อย มีหลายวิธีในการทับซ้อนโดยใช้ HTML และ CSS ตัวอย่างในบทความนี้ใช้แท็ก <div> เพื่อบรรจุผ้าใบ แท็ก <div> ระบุ ID ที่ไม่ซ้ำกันซึ่งใช้สไตล์กับองค์ประกอบของเด็ก HTML5 Canvas ตามที่แสดงในรายการ 1
รายการ 1. รูปแบบการวางตำแหน่ง Canvas
CSS รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด