Tốc độ một số lượng lớn bitmap hoạt hình trong EaselJS

Question

Tôi dường như có một chút rắc rối với việc sử dụng một lượng lớn bitmap hoạt hình (tất cả đều dựa trên cùng một spritesheet) khi sử dụng EaselJS. Khi tôi chạy một vài trong số này cùng một lúc trên sân khấu của tôi, không có vấn đề gì cả, nhưng khi chạy một số lượng cao hơn của họ cùng một lúc (bắt đầu từ 30 đến 40) trong khi di chuyển chúng xung quanh tôi bắt đầu có chúng " nhấp nháy "khá một chút, ngay cả ở khoảng fps khoảng 10.

Tôi không sử dụng bất kỳ bóng đổ hay bất kỳ thứ gì khác dọc theo các đường đó. Chỉ cần sử dụng bitmap hoạt hình và di chuyển chúng xung quanh.

Có ai có lời khuyên nào tốt về việc tăng hiệu suất này không?

Answer 1

thử sử dụng một số đối tượng Stage cùng một lúc.

Answer 2

Nếu không thấy mã của bạn, thật khó để biết chính xác vị trí nút cổ chai. Nhưng đây là một vài nơi để bắt đầu tìm kiếm (bắt đầu với các bản sửa lỗi nhỏ hơn):

1. Hãy chắc chắn rằng bạn đang sử dụng một trình duyệt hiện đại. Ít nhất, hãy kiểm tra một vài trình duyệt/nền tảng khác để xem liệu có bất kỳ thay đổi đáng kể nào trong hiệu suất hay không. Từ những gì tôi hiểu, hiệu suất EaselJS tồi tệ hơn đáng kể trên các triển khai canvas tăng tốc không phải phần cứng.

2. Nếu có thể, hãy sử dụng phiên bản TweenJS của createJS trên các thư viện tweening khác. TweenJS sẽ tự gắn bó với lớp học Ticker của EaselJS, hiệu quả hơn.

3. Không gọi stage.update() trừ khi thật cần thiết. Vì stage.update() là một cuộc gọi đắt tiền, bạn nên càng keo kiệt càng tốt. Trong thực tế, bạn không nên thực sự gọi nó ở tất cả nếu bạn đang sử dụng Ticker để thường xuyên cập nhật sân khấu.

4. Bộ nhớ cache một cách khôn ngoan và mạnh mẽ. Nếu bạn có các phần tử tĩnh phức tạp trên vùng hiển thị, lưu vào bộ nhớ đệm sẽ lưu một số chu kỳ. Tuy nhiên, có một chi phí để lưu bộ nhớ đệm để lưu nó cho các thùng chứa với rất nhiều phần tử tĩnh hoặc các hình dạng được vẽ phức tạp.

5. Giảm tần suất mà EaselJS kiểm tra chuột di chuột. Nếu bạn đã kích hoạt chuột trên sân khấu, hãy vượt qua tần số thấp hơn (documentation). Nếu bạn không cần nó (nếu bạn chỉ đang nghe nhấp chuột), đừng kích hoạt nó. Giám sát chuột overs là khá dang đắt tiền, đặc biệt là nếu bạn có rất nhiều yếu tố trên sân khấu.

6. Đặt stage.snapToPixelsEnabled thành true. Điều này có thể hoặc có thể không hữu ích. Về mặt lý thuyết, việc hiển thị bitmap trên toàn bộ pixel hiệu quả hơn nhiều, tuy nhiên điều này có thể khiến một số hoạt ảnh bị lởm chởm và tôi chưa chơi đủ để biết những ưu điểm và nhược điểm khác.

Tôi có thể đạt được hiệu suất tốt với khoảng 600-800 spritesheets tại 30FPS và tweening cơ bản bằng Chrome trên iMac 4 năm (chỉ là một bài kiểm tra nhanh).