Để canvas, hoặc không canvas, khi xây dựng các trò chơi dựa trên trình duyệt?

Bối cảnh: Tôi có nền tảng phát triển rộng lớn, nhưng lần cuối cùng tôi mã hóa một trò chơi là nhiều năm trước. Kỹ năng Javascript của tôi khá hạn chế và tôi dự định cải thiện chúng bằng cách xây dựng một trò chơi đơn giản - Tetris, Pac-man hoặc một cái gì đó ở mức độ phức tạp đó.

Câu hỏi: Dường như với tôi rằng một lựa chọn cơ bản mà tôi cần đưa ra là liệu tôi có nên kết xuất trên một <canvas>phần tử hay không.

Với một khung vẽ, tôi có các công cụ cơ bản để hiển thị các điểm, đường thẳng và những thứ phức tạp hơn trên đó. Có lẽ có, hoặc sẽ có, cũng có nhiều khung khác nhau để giúp với điều này.

Không có khung vẽ, tôi có thể giữ các đối tượng của mình trong cây DOM, giống như một trang web thông thường, chỉ khá phức tạp, với nhiều yếu tố chồng chéo.

Là một cách tiếp cận tốt hơn so với cách khác? Họ loại trừ lẫn nhau? Làm thế nào để tôi biết chọn cái nào?

Canvas và DOM không loại trừ lẫn nhau, mặc dù chúng khá tách biệt. Một cách tiếp cận tốt là kết xuất khu vực trò chơi chính (ví dụ: các mảnh rơi trong Tetris) bằng Canvas và thực hiện tất cả giao diện người dùng (ví dụ: hiển thị điểm số) với các phần tử DOM chồng lên phần tử canvas.

Điều đó nói rằng, một cách tiếp cận như vậy không thực sự cần thiết cho một trò chơi nguyên thủy như Tetris. Canvas rất hữu ích cho các hiệu ứng đồ họa nâng cao hơn, nhưng nếu những thứ đó không bắt buộc thì việc gắn bó với DOM sẽ cho bạn khả năng tương thích rộng hơn; không phải tất cả các trình duyệt đều hỗ trợ HTML5 Canvas.

Giới thiệu về DOM
DOM hoạt động khá tốt đối với 2D trường học cũ, điều đó có nghĩa là không sử dụng xoay hoặc thu nhỏ hình ảnh. Thực tế, có những công cụ cho cả hai công việc này, nhưng bạn không thể tin tưởng vào chúng hoạt động tốt.

Đối với một trò chơi, bạn nên dựa vào công cụ bố trí trình duyệt càng ít càng tốt, điều đó có nghĩa là sử dụng position:absoluteđể đặt các đối tượng. Cố gắng hết sức có thể để không tạo và hủy các đối tượng DOM mọi lúc, nếu bạn cần số lượng đối tượng biến đổi cao, bạn có thể muốn một nhóm các phần tử DOM nhàn rỗi được đặt thành display:none, sẵn sàng để được phục hồi khi cần.

DOM vs canvas
Với thị phần của IE8- canvas thu nhỏ đang trở thành một lựa chọn ngày càng hấp dẫn hơn, đối với hầu hết các trò chơi, đây có lẽ là một lựa chọn tốt. Nhưng đối với một số công việc, DOM là công cụ dễ sử dụng hơn, bạn có thể sử dụng một số luồng tài liệu nếu cần, bạn có thể bắt các nhấp chuột trực tiếp bởi đối tượng được kết xuất, thật dễ dàng để tích hợp các thanh cuộn.

Thật khó để che giấu sự khác biệt về hiệu suất, nó phụ thuộc vào công việc và sẽ thay đổi tùy theo từng trình duyệt.

Hoàn toàn phụ thuộc vào loại trò chơi, mặc dù canvas phù hợp với "hầu hết" chúng.

Quản lý DOM trở nên khủng khiếp tại một thời điểm nhất định, càng nhiều yếu tố bạn càng chậm, thì càng có nhiều yếu tố bạn di chuyển xung quanh THE EXTREMELY SLOWER.

Quản lý thứ tự tải tài sản với các phần tử IMG là ... không phải là bộ ba (chặn lỗi trên các giao thức bị phá vỡ có chủ ý trên các thẻ hình ảnh: D).

Mặc dù, đối với các trò chơi có hình ảnh tĩnh chủ yếu và hiệu ứng thấp, tôi vẫn sẽ sử dụng DOM. Mọi thứ khác, canvas là lựa chọn đầu tiên (Điểm và nhấp vào công cụ, mặc dù hitmap là một câu chuyện khác).

Canvas rất nhanh trong những ngày này (ngay cả trên iPhone), hầu như không có lý do gì để không sử dụng nó.

Nếu bạn đang tạo một trò chơi HTML5, thì khung vẽ sẽ tốt hơn nhiều. Đây là lý do tại sao:

1. Tốc độ - Hãy nghĩ về bức tranh như một hình ảnh. Bạn vẽ vào hình ảnh, và sau đó nó quên những gì bạn đã vẽ. Điều đó làm tăng đáng kể hiệu năng, so với DOM hoặc SVG. Những gì ứng dụng DOM và SVG làm là chúng theo dõi mọi đối tượng bạn đặt trên màn hình. Điều đó có nghĩa là nếu bạn có một mức độ lớn với nhiều đối tượng trên màn hình, đặc biệt là ngoài màn hình hoặc ẩn, chúng sẽ được vẽ và theo dõi mọi cách.
2. Các tính năng vẽ - Mặc dù các phần tử DOM có các phép biến đổi CSS3 mạnh mẽ, nhưng không có gì so với các tính năng của khung vẽ. Canvas có thể vẽ bất kỳ đối tượng nào, có hỗ trợ gradient mạnh mẽ, plugin để hiển thị các đối tượng ở chế độ 3D, bộ lọc, v.v.
3. Hỗ trợ - Khi sử dụng DOM, khi bạn muốn sử dụng các tính năng thử nghiệm như biến đổi hoặc hoạt hình, bạn phải sử dụng các tiền tố -moz-, -webkit-, -o- và -ms- trong CSS. Trong khung vẽ, bạn không cần phải lo lắng về điều đó. Chỉ cần vẽ với một chức năng, và bạn đã hoàn thành. Một ưu điểm khác liên quan đến hỗ trợ của canvas là cách ứng dụng của bạn hiển thị. Là một nhà phát triển trang web, việc thiếu tiêu chuẩn hóa DOM giữa các trình duyệt khiến tôi phát điên. Hình nền, độ dốc, biến đổi, vv hiển thị khác nhau giữa các trình duyệt, mặc dù thông số kỹ thuật chi tiết của W3C. Trong khung vẽ, tôi chỉ chạy qua một thứ có thể khác - nền. Khi hiển thị nền lát gạch, một số trình duyệt sẽ lấy "ô-x" làm trung tâm ô ở 0px trên trục x và các trình duyệt khác lấy nó làm gạch chỉ xuống.
4. Thư viện và tài liệu - Có TẤN các thư viện tuyệt vời trên các tài liệu để tạo trò chơi với khung vẽ. Một số thư viện: CreateJS, paper.js, Fabric.js, KineticJS, libCanvas, Treatment.js, PlotKit, Rekapi, PhiloGL, InfoViz Toolkit, Frame-Engine, CAKE, Raphaeljs, Tweenjs, v.v. không có điểm nào

Mặt trái - Hoạt hình - Mặc dù có nhiều thư viện tuyệt vời cho hoạt hình, tôi yêu hoạt hình CSS3. Rất dễ dàng để tạo, thao tác và kích hoạt. Có nhiều cách hack khác nhau để làm cho hoạt hình CSS3 hoạt động với các đối tượng với khung vẽ, nhưng tôi nghi ngờ hầu hết mọi người không thích sử dụng phương pháp đó.

Chúc may mắn với trò chơi của bạn, và tôi hy vọng sẽ thấy những gì bạn làm!

Nếu bạn xem xét nhắm mục tiêu các trình duyệt di động, đặc biệt là Android và trò chơi có chứa bất kỳ đồ họa chuyển động nào, hãy tránh hoạt hình DOM. Trình duyệt chứng khoán trong Android là vô dụng, mặc dù đó là webkit. Kiểm tra chuỗi sự cố Android này trước khi bạn bắt đầu: "Kết xuất khủng khiếp các hoạt ảnh CSS3 và Javascript trong Trình duyệt và WebView" .

Bản thân Canvas có thể không nhanh hơn, nhưng có các khung để gọi tăng tốc phần cứng cho hoạt ảnh canvas, ví dụ như CocoonJS . Có một liên kết đến một video trên trang web, cho thấy mức tăng hiệu suất bạn có thể đạt được bằng cách sử dụng khung (nhưng tôi không được phép đăng nhiều hơn hai liên kết, vì một số lý do).

Câu trả lời đơn giản: WebGL với dự phòng canvas.

Câu trả lời được đề cập: Nếu trò chơi của bạn có nhiều văn bản, hãy phủ một lớp văn bản HTML. Pixi.js là một khung hiển thị chiến đấu cứng với một số tính năng bổ sung hữu ích, hoạt động tốt cho việc này.

Hãy nhớ DOM là viết tắt của mô hình đối tượng tài liệu . Bạn sẽ muốn sử dụng nó để làm game chỉ trong những tình huống rất hiếm và thích canvas trong hầu hết các trường hợp.

Ngay cả khi trò chơi của bạn có các yêu cầu đồ họa nhỏ, thực hiện nó trong DOM sẽ có hiệu suất kém; bất cứ điều gì nhiều hơn Tetris có thể sẽ chạy kém.

Tôi có một ví dụ trong thế giới thực: Khi tôi tạo một triển khai Trò chơi cuộc sống của Conway, tôi bắt đầu với một bảng 500x500, thay đổi màu nền của các ô. Trong phiên bản này, một tàu lượn không chạy quá 30 khung hình / giây, các mẫu lớn hơn dẫn đến khó hơn 1. Trong phiên bản canvas của trò chơi này, giờ đây tôi có thể chạy các patters lớn hơn nhiều (dân số 1000 trở lên) một cách trơn tru ~ 30 khung hình / giây.

Ngoài ra, đây cũng là trường hợp của SVG ( Đồ họa vectơ có thể mở rộng ), mặc dù tôi chưa bao giờ thử điều đó trong thực tế.

Chỉnh sửa : Tôi phải thừa nhận rằng ví dụ của tôi không tốt lắm (vì bảng = xấu). Nhưng điểm chính vẫn đúng: Thao tác DOM là dành cho tài liệu. Trình duyệt phải tra cứu CSS và phân bổ thêm bộ nhớ khi bạn làm việc trên các phần tử. Nó không thực sự có ý nghĩa để nhanh hơn vải.