Là sử dụng nhiều đối tượng vải là một thực hành tốt?

Chúng tôi đang phát triển một trò chơi nhảy và chạy với HTML5 và JavaScript và phải xây dựng một khung trò chơi riêng cho việc này. Ở đây chúng tôi có một số khó khăn và muốn hỏi bạn một lời khuyên:

Chúng tôi có một đối tượng "Giai đoạn", đại diện cho gốc của trò chơi của chúng tôi và là một trình bao bọc div toàn cầu. Sân khấu có thể chứa nhiều "Cảnh", cũng là các yếu tố div. Chúng tôi sẽ triển khai Cảnh cho tác vụ phát, tạm dừng, v.v. và chuyển đổi giữa chúng. Do đó, mỗi cảnh có thể chứa nhiều "Lớp", đại diện cho một khung vẽ. Các lớp này chứa "ObjectEntities", đại diện cho hình ảnh hoặc các hình dạng khác như hình chữ nhật, v.v ... Mỗi Objectentity có tạm thời riêng của mình, để có thể vẽ hình ảnh cho một thực thể, trong khi một đối tượng khác chứa hình chữ nhật.

Chúng tôi đã đặt activeScene trong Giai đoạn của mình, vì vậy khi trò chơi được chơi, chỉ có cảnh hoạt động được vẽ. Gọi activeScene.draw(), gọi tất cả các lớp con để vẽ, vẽ các thực thể của chúng (gọi drawImage(entity.canvas)). Nhưng đây có phải là một loại thực hành tốt? Có nhiều bức tranh để vẽ? Mỗi vòng lặp trò chơi mỗi bối cảnh lớp được xóa và vẽ lại. Ví dụ: chúng ta chỉ có một Lớp nền tĩnh, thì sẽ không hữu ích hơn khi vẽ cái này một lần và không xóa nó mỗi lần và vẽ lại nó? Hoặc chúng ta nên sử dụng một bức tranh toàn cầu chẳng hạn trong Giai đoạn và chỉ sử dụng khung vẽ này để vẽ? Nhưng chúng tôi nghĩ rằng điều này sẽ đắt ...

Trang này chứa một danh sách tối ưu hóa tuyệt vời có thể được thực hiện trên canvas. Trong phần có nhãn "Sử dụng nhiều khung vẽ nhiều lớp cho các cảnh phức tạp", nó mô tả lý do tại sao có nhiều đối tượng canvas thực sự tốt hơn trong nhiều trường hợp vì bạn không phải vẽ lại các đối tượng đắt tiền lớn (ảnh nền) thường xuyên như các đối tượng nhỏ hơn, di chuyển nhanh ( đạn). Đây là một hướng dẫn để giúp bạn bắt đầu. Tóm lại, chỉ cần tạo một số bức tranh cho những thứ yêu cầu vẽ khác nhau và sắp xếp chúng với vị trí tuyệt đối:

position:absolute;
left:0px;
top:0px;

Mỗi đối tượng canvas có thể được đặt tên và xếp lớp bằng chỉ mục z:

<canvas id="layer1" style="z-index: 1;" />
<canvas id="layer2" style="z-index: 2;" />

Cuối cùng, vẽ theo các bối cảnh khác nhau:

function draw1() {
    context1... // draw background
}

function draw2() {
    context2... // draw character
}

function draw3() {
    context3... // draw bullets
}

Contre Jour làm điều này, trên thực tế. Tôi không biết nhiều chi tiết, nhưng bạn có thể tìm thấy nhiều ghi chú kỹ thuật hơn từ họ. Nếu bạn chơi trò chơi của họ, tôi tin rằng mỗi nhân vật mà nhân vật của bạn tương tác đều là những bức tranh vẽ.

Nó có vẻ là một ý tưởng tốt để tách các phần hoạt động của trò chơi của bạn thành các bức tranh. Ví dụ, nếu bạn đang tạo RTS, thanh lệnh có thể có ý nghĩa là một khung vẽ riêng biệt để chỉ vẽ lại một lần trong một thời gian.