ไปยัง Canvas หรือไม่ไปยัง Canvas เมื่อสร้างเกมที่ใช้เบราว์เซอร์

14

ที่มา: ฉันมีพื้นฐานการพัฒนาที่กว้างขวาง แต่ครั้งสุดท้ายที่ฉันเขียนเกมเมื่อหลายปีก่อน ทักษะ Javascript ของฉันค่อนข้าง จำกัด และฉันตั้งใจที่จะปรับปรุงพวกเขาโดยการสร้างเกมง่ายๆ - Tetris, Pac-man หรืออะไรบางอย่างในระดับความซับซ้อนนั้น

คำถาม: สำหรับตัวเลือกพื้นฐานที่ฉันจำเป็นต้องทำคือดูเหมือนว่าฉันควรแสดง<canvas>องค์ประกอบหรือไม่

ด้วยผืนผ้าใบฉันมีเครื่องมือพื้นฐานสำหรับการเรนเดอร์จุดเส้นและสิ่งที่ซับซ้อนกว่านั้น สันนิษฐานว่ามีหรือจะมีกรอบต่าง ๆ เพื่อช่วยในเรื่องนี้

หากไม่มีผ้าใบฉันสามารถเก็บวัตถุของฉันไว้ในต้นไม้ DOM ได้เช่นเดียวกับหน้าเว็บทั่วไปที่ค่อนข้างซับซ้อนมีองค์ประกอบที่ทับซ้อนกันมากมาย

วิธีการหนึ่งดีกว่าวิธีอื่นหรือไม่? พวกเขาเป็นพิเศษร่วมกัน? ฉันจะรู้ได้อย่างไรว่าควรเลือกแบบไหน

javascript html5 html-canvas

— Letharion
แหล่งที่มา

13

Canvas และ DOM ไม่ได้เกิดขึ้นพร้อมกันแม้ว่าจะแยกจากกัน วิธีการที่ดีวิธีหนึ่งคือการสร้างพื้นที่เกมหลัก (เช่นชิ้นส่วนที่ตกลงมาใน Tetris) โดยใช้ Canvas และทำ UI ทั้งหมด (เช่นการแสดงคะแนน) ด้วยองค์ประกอบ DOM ที่ทับซ้อนองค์ประกอบผ้าใบ

ที่กล่าวว่าวิธีการดังกล่าวไม่จำเป็นจริงๆสำหรับเกมดั้งเดิมเช่น Tetris Canvas มีประโยชน์สำหรับเอฟเฟกต์กราฟิกขั้นสูง แต่หากไม่จำเป็นต้องใช้การผสานกับ DOM จะให้ความเข้ากันได้ที่กว้างขึ้น ไม่ใช่ทุกเบราว์เซอร์ที่รองรับ HTML5 Canvas

— jhocking
แหล่งที่มา

3

เพื่อความซื่อสัตย์ในการทำงานกับเกม HTML5 สำหรับปีที่แล้วเป็นงานประจำวันฉันจะบอกว่าเบราว์เซอร์ที่ไม่รองรับ Canvas ไม่เร็วพอสำหรับเกมที่ดีแต่ทว่ากลับมาช้ากว่า WebKit บนโทรศัพท์ Android ... :(

— Ivo Wetzel

ขอบคุณ :) ฉันไม่สนใจ "การสนับสนุนเบราว์เซอร์" ตามเวลาที่ฉันเรียนรู้มากพอสำหรับเรื่องนี้ฉันคาดหวังว่าปัญหาจะแก้ไขได้เอง นี่เป็นหลักเพื่อความสนุกสนานและการเรียนรู้

— Letharion

ฉันกำลังทำเช่นนั้น: ตัวเกมวาดบนผืนผ้าใบในขณะที่ GUI ประกอบด้วยองค์ประกอบ DOM ที่โปร่งใสบางส่วนอยู่ด้านบน

— Philipp

@IvoWetzel ฉันรู้สึกเหมือนกัน ... เราทำงานกับเกมบนแพลตฟอร์มมือถือเช่นกันและ Android ก็เล่นไม่ได้ ...

— Vaughan Hilts

12

เกี่ยวกับ DOM
DOM ทำงานได้ดีสำหรับ 2D โรงเรียนเก่านั่นหมายความว่าไม่มีการหมุนภาพหรือปรับขนาด จริงๆแล้วมีเครื่องมือสำหรับงานทั้งสองนี้ แต่คุณไม่สามารถไว้วางใจได้

สำหรับเกมคุณควรพึ่งพาเอ็นจิ้นเลย์เอาต์ของเบราว์เซอร์น้อยที่สุดเท่าที่จะเป็นไปได้นั่นหมายถึงposition:absoluteการวางวัตถุ พยายามเท่าที่จะทำได้เพื่อไม่ให้สร้างและทำลายวัตถุ DOM ตลอดเวลาหากคุณต้องการจำนวนวัตถุที่เปลี่ยนแปลงอย่างมากคุณอาจต้องการกลุ่มขององค์ประกอบที่ไม่ได้ใช้งานของ DOM ตั้งค่าให้display:noneพร้อมสำหรับการฟื้นฟูเมื่อจำเป็น

DOM vs canvas
ด้วยส่วนแบ่งการตลาดของ canvas หดตัว IE8 กำลังกลายเป็นตัวเลือกที่น่าสนใจมากขึ้นเรื่อย ๆ สำหรับเกมส่วนใหญ่อาจเป็นตัวเลือกที่ดี แต่สำหรับงานบางอย่าง DOM เป็นเครื่องมือที่ใช้ง่ายกว่าคุณสามารถใช้โฟลว์เอกสารถ้าจำเป็นคุณสามารถจับการคลิกโดยตรงจากวัตถุที่เรนเดอร์ได้โดยตรงรวมแถบเลื่อนได้ง่าย

มันยากที่จะครอบคลุมความแตกต่างของประสิทธิภาพมันขึ้นอยู่กับงานและจะแตกต่างจากเบราว์เซอร์เบราว์เซอร์

— aaaaaaaaaaaa
แหล่งที่มา

2

ฉันไม่คิดว่าจะพูดถึงposition:absoluteมันเป็นจุดที่ดี

— jhocking

Canvas Canvas ไม่เร่งความเร็วในระดับที่ DOM ไม่ใช่หรือไม่

— โทมัส

1

@Thomas จุดเดียวที่คุณสามารถมั่นใจได้ว่ามีการเร่งความเร็วของ GPU คือ webGL (ในทางเทคนิคสามารถใช้งานได้โดยไม่ต้องมี แต่ไม่มีแนวโน้มที่จะเกิดขึ้น) การใช้ Canvas 2 มิติแรกนั้นเป็นซีพียูอย่างเข้มงวดฟังก์ชั่นบางอย่างในเบราว์เซอร์บางตัวนั้นถูกย้ายไปยัง GPU ไม่ใช่ในทุกกรณีที่มีการเพิ่มประสิทธิภาพอย่างมาก สำหรับการเร่งความเร็ว DOM GPU พวกเขากำลังทำงานอยู่และฉันไม่เห็นเหตุผลใด ๆ ที่ไม่ควรเกิดขึ้น ไม่ว่าในกรณีใด ๆ สิ่งที่สำคัญที่สุดไม่ได้เป็นวิธีที่เบราว์เซอร์ทำ แต่ถ้ามันทำงานได้ดีพอสำหรับความต้องการของคุณ GPU ไม่ได้หมายความว่าเร็ว

— aaaaaaaaaaaa

GPU หมายถึงอะไรเร็วกว่าเสมอ บนพีซีนี่อาจเป็นจริง แต่บนแพลตฟอร์มมือถือฉันอยากให้ GPU ทำเรนเดอร์มากกว่าดังนั้น CPU มี 'รอบ' มากขึ้นในการใช้ลอจิกเกมเช่น AI เป็นต้นวิธีนี้เกมอาจมีความซับซ้อนมากขึ้น .

— โทมัส

1

@ โทมัสมันขึ้นอยู่กับแพลตฟอร์มงานและสิ่งอื่น ๆ มากมาย Old-school 2D เป็นหน่วยความจำส่วนใหญ่การใช้ทรัพยากรในหน่วยความจำหลักและการใช้ CPU สำหรับการดำเนินการเหล่านี้จะทำงานได้ดีเช่นกันบนโทรศัพท์มือถือ แต่การพยายามดำเนินการกับข้อมูลที่อยู่ในหน่วยความจำของโปรเซสเซอร์อื่น ๆ ดังนั้นหากคุณผสมผสานการทำงานที่ไม่สามารถทำได้โดย GPU กับการทำงานของ GPU คุณจะต้องส่งบัฟเฟอร์กลับไปกลับมาขึ้นอยู่กับการใช้งานหรือมีโปรเซสเซอร์ตัวใดตัวหนึ่งเขียนไปยังหน่วยความจำโปรเซสเซอร์อื่น

— aaaaaaaaaaaa

6

สมบูรณ์ขึ้นอยู่กับประเภทของเกมแม้ว่าผ้าใบจะเหมาะกับ "ที่สุด" ของพวกเขา

การจัดการ DOM แย่มากในบางจุดยิ่งมีองค์ประกอบมากเท่าไหร่คุณก็ยิ่งทำงานช้าลงเท่านั้น ยิ่งเคลื่อนไหวได้มากขึ้นเรื่อย ๆ

การจัดการคำสั่งการโหลดเนื้อหาด้วยองค์ประกอบ IMG คือ ... ไม่เป็นข้อผิดพลาด (สกัดกั้นข้อผิดพลาดในโปรโตคอลที่แตกหักโดยเจตนาบนแท็กภาพ: D)

แม้ว่าสำหรับเกมที่มีภาพคงที่เป็นส่วนใหญ่และมีเอฟเฟกต์ต่ำฉันก็ยังคงใช้ DOM ต่อไป ทุกอย่างอื่นผ้าใบเป็นตัวเลือกแรก (ชี้และคลิกสิ่งของแม้ว่า hitmaps เป็นเรื่องราวที่แตกต่าง)

Canvas เร็วมากในทุกวันนี้ (แม้กระทั่งบน iPhone) แทบจะไม่มีเหตุผลที่จะไม่ใช้มัน

— Ivo Wetzel
แหล่งที่มา

ตามความเร็วของการนำเสนอวิดีโอของAves Engineเมื่อคุณมีองค์ประกอบหลายพัน DOM ก็เร็วกว่าการจัดการมากกว่าผ้าใบ คุณไม่เห็นด้วยหรือไม่ สิ่งนี้มีการเปลี่ยนแปลงหรือไม่? ฉันหวังว่าฉันสามารถหาวิดีโอที่อีกครั้ง ...

— Letharion

1

: DI ทำงาน Zynga กับผู้ชายที่สร้าง Aves สิ่งที่มีการเปลี่ยนแปลงไปในปีที่ผ่านมาเชื่อฉัน :)

— Ivo Wetzel

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

— aaaaaaaaaaaa

@eBusiness จากนั้นไปข้างหน้าและแนะนำการสั่ง Z ที่ซับซ้อนและการแปลง 3D ขอให้โชคดีกับ :) :)

— Ivo Wetzel

4

@IvoWetzel ถ้าคุณต้องการทำ 3D Canvas เป็นตัวเลือก แต่นั่นไม่ใช่สิ่งที่คำตอบของคุณพูดดังนั้นประเด็นของคุณคืออะไร

— aaaaaaaaaaaa

2

หากคุณกำลังสร้างเกม HTML5 ผ้าใบจะดีกว่ามาก นี่คือเหตุผล:

ความเร็ว - คิดว่าผืนผ้าใบเป็นภาพ คุณวาดภาพแล้วลืมสิ่งที่คุณวาด ที่เพิ่มประสิทธิภาพอย่างมากเมื่อเทียบกับ DOM หรือ SVG สิ่งที่แอปพลิเคชัน DOM และ SVG ทำคือพวกเขาติดตามทุกวัตถุที่คุณวางบนหน้าจอ ซึ่งหมายความว่าหากคุณมีระดับขนาดใหญ่ที่มีวัตถุจำนวนมากบนหน้าจอโดยเฉพาะอย่างยิ่งหน้าจอที่ปิดบังหรือซ่อนอยู่วัตถุเหล่านั้นจะถูกวาดและติดตามอยู่แล้ว
คุณสมบัติการวาด - ในขณะที่องค์ประกอบ DOM มีการแปลง CSS3 ที่ทรงพลัง แต่ก็ไม่มีอะไรเทียบได้กับคุณสมบัติของผืนผ้าใบ Canvas สามารถวาดวัตถุใดก็ได้รองรับการไล่ระดับสีที่มีประสิทธิภาพปลั๊กอินสำหรับแสดงวัตถุในแบบ 3 มิติตัวกรองและอื่น ๆ
การสนับสนุน - เมื่อใช้ DOM เมื่อคุณต้องการใช้คุณสมบัติทดลองเช่นการแปลงหรือภาพเคลื่อนไหวคุณต้องใช้คำนำหน้า -moz-, -webkit-, -o- และ -ms- ใน CSS ในผืนผ้าใบคุณไม่ต้องกังวลกับสิ่งนั้น เพียงแค่วาดด้วยฟังก์ชั่นเดียวแล้วเสร็จ ข้อดีอีกประการที่เกี่ยวข้องกับการสนับสนุนของ Canvas คือแอปพลิเคชันของคุณแสดงผลอย่างไร ในฐานะนักพัฒนาเว็บไซต์การขาดมาตรฐาน DOM ระหว่างเบราว์เซอร์ทำให้ฉันสับสน พื้นหลังการไล่ระดับสีการแปลง ฯลฯ แสดงแตกต่างกันระหว่างเบราว์เซอร์แม้จะมีข้อกำหนด W3C โดยละเอียด ในผืนผ้าใบฉันแค่วิ่งข้ามสิ่งหนึ่งที่อาจแตกต่างไป - พื้นหลัง เมื่อแสดงพื้นหลังแบบเรียงต่อกันเบราว์เซอร์บางตัวจะใช้ "tile-x" เพื่อจัดกึ่งกลางไทล์ที่ 0px บนแกน x และอื่น ๆ ใช้เป็นไทล์เพียงเรียงตัวต่อลง
ไลบรารีและเอกสารประกอบ - มีห้องสมุดที่ยอดเยี่ยมมากมายสำหรับการทำเกมด้วยผ้าใบ ห้องสมุดบางแห่ง: CreateJS, paper.js, fabric.js, KineticJS, libCanvas, Processing.js, PlotKit, Rekapi, PhiloGL, InfoViz Toolkit, Frame-Engine, Cake, Raphaeljs, Tweenjs และอื่น ๆ อีกมากมาย แต่ ไม่มีประเด็น

Down side - Animation - ในขณะที่มีไลบรารี่มากมายสำหรับการเคลื่อนไหว ง่ายต่อการสร้างจัดการและกระตุ้น มีแฮ็กต่าง ๆ เพื่อให้ภาพเคลื่อนไหว CSS3 ทำงานกับวัตถุที่มีผ้าใบ แต่ฉันคิดว่าคนส่วนใหญ่ไม่ต้องการใช้วิธีการนั้น

ขอให้โชคดีกับเกมของคุณและฉันหวังว่าจะเห็นสิ่งที่คุณทำ!

— Zoyt
แหล่งที่มา

2

หากคุณพิจารณากำหนดเป้าหมายเบราว์เซอร์มือถือโดยเฉพาะ Android และเกมมีกราฟิกเคลื่อนไหวใด ๆ ให้หลีกเลี่ยงการเคลื่อนไหวของ DOM เบราว์เซอร์หุ้นใน Android ไม่มีประโยชน์แม้ว่าจะเป็น webkit ตรวจสอบนี้ด้ายปัญหา Android ก่อนที่คุณจะเริ่มต้น: "การแสดงผลที่น่ากลัวของ CSS3 และ Javascript ภาพเคลื่อนไหวในเบราว์เซอร์และ WebView"

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

— ต่อการค้นหา Aronsson
แหล่งที่มา

2

คำตอบง่ายๆ: WebGL พร้อม Canvas fallback

คำตอบที่เหมาะสมยิ่ง: หากเกมของคุณมีข้อความจำนวนมากให้วางเลเยอร์ข้อความ HTML ซ้อนทับ Pixi.jsเป็นเฟรมเวิร์กจอแสดงผลที่ยากต่อการต่อสู้พร้อมความพิเศษที่มีประโยชน์บางอย่างซึ่งทำงานได้ดี

— D13
แหล่งที่มา

1

จำ DOM หมายถึงโมเดลวัตถุเอกสาร คุณจะต้องการใช้มันสำหรับการทำเกมเฉพาะในสถานการณ์ที่หายากมากและชอบผ้าใบในกรณีส่วนใหญ่

แม้ว่าเกมของคุณมีข้อกำหนดกราฟิกขนาดเล็กการทำใน DOM จะมีประสิทธิภาพไม่ดี อะไรก็ตามที่เกิน Tetris อาจทำงานได้ไม่ดี

ฉันมีตัวอย่างในโลกแห่งความจริง: เมื่อฉันสร้างการใช้งาน Game of Life ของ Conway ฉันเริ่มด้วยตาราง 500x500 เปลี่ยนสีพื้นหลังของเซลล์ ในรุ่นนี้มีGliderไม่ทำงานที่ความเร็วมากกว่า 30 fps, รูปแบบที่ใหญ่กว่าทำให้แทบจะไม่เกิน 1 ในเกม Canvas ของฉันตอนนี้ฉันสามารถรัน patters ที่ใหญ่กว่ามาก (ประชากร 1,000 คนขึ้นไป) ได้อย่างราบรื่นที่ ~ 30 fps

นอกจากนี้ควรเป็นกรณีของ SVG ( กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้) แม้ว่าฉันจะไม่เคยลองในทางปฏิบัติ

แก้ไข : ฉันต้องยอมรับว่าตัวอย่างของฉันไม่ดีมาก (เพราะตาราง = ไม่ดี) แต่ประเด็นหลักยังคงเป็นจริง: การจัดการ DOM สำหรับเอกสาร เบราว์เซอร์จะต้องค้นหา CSS และจัดสรรหน่วยความจำเพิ่มเติมเมื่อคุณทำงานกับองค์ประกอบ มันไม่สมเหตุสมผลเลยที่จะเร็วกว่าผ้าใบ

— สำเนา
แหล่งที่มา

ตั้งแต่เมื่อไหร่ DOM มีประสิทธิภาพต่ำ ไม่ใช่แค่การเร่งด้วยฮาร์ดแวร์นั่นคือความแตกต่างเท่านั้น และโต๊ะ 500x500 ในสีพื้นหลังบนมือถือไม่ได้เป็นการดำเนินงานที่มีประสิทธิภาพ DOM

— Raynos

1

@ Raynos ฉันสังเกตเห็นว่ามันไม่ใช่การนำ DOM ที่มีประสิทธิภาพมาใช้ ไม่มีหากคุณต้องการจัดการพิกเซล

— คัดลอก

1

-1, โต๊ะตัวใหญ่เป็นนักฆ่าประสิทธิภาพ Canvas เป็นเครื่องมือที่ดีกว่าถ้าคุณต้องการจัดการพิกเซลแยกต่างหากแม้ว่าการตั้งค่าให้ตรงกับการใช้งาน DOM ที่ไม่ดีเช่นนี้ทำให้ตัวอย่างของคุณไม่มีประโยชน์ สิ่งที่ดีที่สุดของฉันในการติดตั้ง DOM นั่นคือ 50000 5x1 divs ด้วยภาพพื้นหลัง 32 แบบที่แตกต่างกันตามที่ต้องการ

— aaaaaaaaaaaa

@eBusiness ใช่มีคนบอกฉันแล้ว น่าเสียดายที่ฉันไม่ได้คิดออกเองด้วยซ้ำ: - /

— คัดลอก

@ Raynos, DOM ไม่เคยรวดเร็ว ในความเป็นจริงเหตุผลหนึ่งที่เป็นที่นิยมสำหรับผ้าใบเนื่องจาก DOM ช้า ที่เกี่ยวข้อง: stackoverflow.com/q/6817093/632951

— Pacerier