Trộn các phần tử canvas và CSS3

Question

Tôi đang triển khai trò chơi HTML5 bằng canvas. Bây giờ tôi đang nghĩ đến việc tạo ra tất cả các lớp phủ văn bản như các chú giải công cụ, các mẩu đối thoại, các thông tin và vv bằng cách sử dụng các phần tử HTML với vị trí tuyệt đối trên canvas. Vì vậy, tôi có thể sử dụng nhiều hiệu ứng và chuyển tiếp CSS3 cung cấp.

Nhưng tôi không chắc chắn về hiệu suất. Những lớp phủ này phải được thêm vào và loại bỏ một cách dứt khoát (là một cái gì đó MMORPG thích, vì vậy sẽ có rất nhiều bài phát biểu và vân vân).

Có lẽ 2 câu hỏi liên quan đến hiệu suất:

1. DOM traversal để Add/Remove. Có lẽ một bộ nhớ cache có thể giúp đỡ?

2. Chính HTML và CSS3.

Tùy chọn khác là quản lý các yếu tố này trong chính khung vẽ, vẽ từng khung. Nhưng có lẽ tôi đã có một lần nữa một hình phạt hiệu suất, vì thêm mã, timeouts và những thứ tôi sẽ phải thêm, để đạt được hiệu ứng tương tự như trong CSS3. Và cần phải đi ngang qua một số cấu trúc dữ liệu.

Bất kỳ lời khuyên, ý kiến, trải nghiệm nào?

Xin cảm ơn trước.

Answer 1

Cân nhắc chỉ sử dụng một trong hai công nghệ được đề cập. Có thể bạn có thể phát hành ứng dụng đó trong thiết bị di động hoặc máy tính bảng. Tôi nghĩ rằng trên các thiết bị này sẽ là vấn đề với xử lý cả hai cùng một lúc. Và một điều nữa: nếu bạn ở trong vải sẽ không có lo lắng về khả năng tương thích. Nó không phải là một techy nhưng là một câu trả lời kích thích tư duy.

Answer 2

Một cách để tiếp cận điều này là sử dụng bản đồ hình ảnh "động" phía sau đối tượng canvas của bạn. Sau đó, bạn có thể sử dụng dom theo yêu cầu. Lưu ý rằng bạn sẽ cần phải chuyển các nhấp chuột trên canvas đến bản đồ hình ảnh.

Answer 3

Lý do tốt nhất duy nhất để sử dụng DOM cho phần tử giao diện người dùng trong trò chơi HTML5 là xử lý sự kiện.

Nếu bạn vẽ mọi thứ trên canvas, bạn sẽ cần phải viết logic của riêng mình để xử lý các nhấp chuột và quyết định những gì đã được nhấp vào, có thể sớm trở nên rất phức tạp, đặc biệt nếu bạn có nhiều lớp giao diện.

Với các phần tử DOM (đặc biệt là khi sử dụng thư viện như jQuery) điều này là tầm thường và bạn có thể tạo giao diện người dùng phong phú và tương tác với nỗ lực tối thiểu.

Nhược điểm duy nhất tôi có thể nghĩ đến là bạn có thể gặp phải sự mâu thuẫn trong trình duyệt, đặc biệt là nếu sử dụng CSS3, nhưng jQuery lại sẽ giúp với điều này.

Tôi cho rằng một nhược điểm khác là khi bạn đi xuống tuyến đường DOM, trò chơi của bạn sẽ luôn là trò chơi trình duyệt, trong khi đó là canvas 100%, sẽ luôn có khả năng chuyển mã sang ngôn ngữ khác và làm cho nó có nguồn gốc, nhưng tôi đoán đó sẽ chỉ là một nhược điểm đối với một số người.