บัฟเฟอร์สองเท่าในเกม HTML5 Canvas หรือไม่


23

เกม Canvas ที่เรียบง่ายของฉันดูเหมือนจะทำงานได้ดีบน Chrome และ FF บน Mac / Linux ฉันยังไม่มีโอกาสทดสอบบนสมาร์ทโฟนหรือ Windows มันไม่ได้ใช้การบัฟเฟอร์คู่ แต่ฉันได้เห็นตัวอย่าง JS Canvas บางส่วนที่ใช้

การใช้บัฟเฟอร์คู่แนะนำเมื่อใด มันสร้างความแตกต่างสำหรับเบราว์เซอร์เฉพาะเท่านั้นหรือไม่ มีผลการดำเนินงานที่สำคัญหรือไม่

ขอบคุณ!


2
OT: เกมนี้กฎก็มากมีแนวโน้มในการทำงานที่ดี (Ofc คุณต้องทำงานมากขึ้นในการเชื่อมต่อบางสิ่งบางอย่างไม่ชัดเจน ฯลฯ )
o0'

มันหวานจริง ๆ สวย แต่ข้อเสนอแนะ: สลับระดับแผนที่เป็นอย่างอื่นที่ไม่ใช่พื้นที่ ชนิดที่น่ารำคาญเมื่อเลื่อนหน้าต่างเบราว์เซอร์ของฉันไป
michael.bartnett

ยังไม่ได้ใช้ปุ่มลูกศรสำหรับการขับขี่ .. ฉันกำลังในเซฟโหมดและหน้าจอขนาดเล็กจะช่วยให้การเลื่อนทั่วทุกสถานที่ ... FYI: p
Tor Valamo

ฉันคิดว่าเป็นไปได้ที่จะจับคีย์เพื่อให้หน้าต่างเบราว์เซอร์ไม่ทำงาน
AttackHobo

ขอบคุณ! A, W, D และกลับมาทำงานเช่นกันในขณะนี้ ส่งทวีตไปที่ momentumracer หรืออีเมล petteri@momentumracer.com สำหรับความคิดเห็นหรือไอเดียเพิ่มเติมดังนั้นสิ่งนี้จะไม่กลายเป็นกระดานสนทนา :-)
Petteri Hietavirta

คำตอบ:


15

การบัฟเฟอร์สองเท่าของเกมบนผืนผ้าใบจะทำให้ได้รับความนิยมอย่างแน่นอน คุณจะวาดจำนวนพิกเซลพิเศษเท่ากับขนาดผืนผ้าใบของคุณทุกเฟรม ในเกมที่ใช้ Canvas เป็นภาพวาดไปยัง Canvas เป็นคอขวดที่ใหญ่ที่สุดในกรณีส่วนใหญ่และคุณต้องการ จำกัด ให้มากที่สุดโดยเฉพาะบนอุปกรณ์มือถือ

Chrome มีการเร่งความเร็ว GPU (เวอร์ชั่นล่าสุด) รวมถึงเครื่องมือจาวาสคริปต์ที่รวดเร็ว (V8) ที่คุณจะไม่เห็นตรงกันในสภาพแวดล้อมอุปกรณ์พกพา แม้แต่ใน Chrome คุณจะเห็นการชะลอตัวโดยการใช้การบัฟเฟอร์คู่

เรื่องสั้นสั้น ๆ ประโยชน์ของการบัฟเฟอร์สองเท่า (การจัดการกับ "การฉีกขาด") นั้นไม่คุ้มกับประสิทธิภาพที่คุณจะได้รับ


1
อย่างไรก็ตามเมื่อคุณสังเกตเห็นการกะพริบหรือบางสิ่งบางอย่างที่เหมือนกันบัฟเฟอร์สองเท่ามักจะแก้ไขปัญหานี้ได้ เพื่อตอบคำถามของคุณ: หากคุณสังเกตเห็นการกะพริบฉันขอแนะนำให้ใช้บัฟเฟอร์คู่ ไม่อย่างนั้นก็ไม่มีเหตุผลเหมือนกัน โปรดทราบว่าบัฟเฟอร์คู่สามารถนำไปใช้หรือนำออกได้ง่าย (ในกรณีที่คุณสังเกตเห็นว่าประสิทธิภาพการทำงานลดลงเมื่อเทียบกับการกะพริบ)
user8363

6

ไม่จำเป็นต้องเพิ่มบัฟเฟอร์ของเกม html5 เป็นสองเท่า เบราว์เซอร์จัดการสิ่งนี้ให้คุณแล้วโดยการอัปเดตวัตถุผ้าใบหลังจากสคริปต์ของคุณทำงานแล้ว http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html


1

ฉันสังเกตเห็นว่าการใช้การบัฟเฟอร์คู่แบบนี้

  1. วาดทุกอย่างบนผืนผ้าใบที่มองไม่เห็น
  2. คัดลอกผืนผ้าใบที่มองไม่เห็นไปยังผืนผ้าใบจริง

ที่จริงแล้วชะลอการเรนเดอร์ (fps ที่ต่ำกว่า) แทนที่จะเร่งความเร็ว

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.