Tôi đã tạo một trò chơi HTML5 Canvas và JS chạy tuyệt vời trên máy tính để bàn hoặc máy tính xách tay trong Chrome (30 khung hình / giây), nhưng trên Safari di động, tôi chỉ nhận được khoảng 8 khung hình / giây. Có bất kỳ mẹo hoặc thủ thuật đơn giản để tăng tốc độ khung hình?
Câu trả lời:
Thật không may, câu trả lời là vẽ ít hơn. Tôi đã tìm thấy nút cổ chai với các ứng dụng dựa trên canvas (trên bất kỳ nền tảng nào, thực sự) là thời gian cần thiết để thực sự vẽ pixel.
Dưới đây là một số điều cần thử:
Sử dụng một vài lớp vải. Vẽ nền của bạn thành một lớp trong khi vẽ các đối tượng của bạn sang một lớp khác (vị trí tuyệt đối trên đỉnh của lớp nền). (Lưu ý: Tôi chưa thử cái này trên safari di động, nhưng nó có thể giúp trên các nền tảng khác)
Chỉ vẽ lại các họa tiết đã thay đổi. Điều này là khó khăn nhưng chắc chắn làm tăng hiệu suất. Ý tưởng là để lưu trữ xem một sprite có cần được vẽ lại hay không và chỉ vẽ lại các sprite cần nó cùng với nền phía sau chúng. (Điều này cũng cần xếp tầng cho các đối tượng khác mà sprite có thể bị chồng chéo.)
Điều phát triển trên Chrome là a) công cụ JavaScript (V8) của nó nhanh như địa ngục và b) các phiên bản mới nhất (7,8,9) đều có một số khả năng tăng tốc GPU khi kết xuất canvas. Điều đó kết hợp với thực tế là phần cứng di động không mạnh bằng máy tính để bàn / máy tính xách tay của bạn có nghĩa là sẽ rất khó để có được bất cứ nơi nào gần hiệu suất tương tự trên safari di động.
Tôi nghĩ, hiện tại, cách tiếp cận tốt nhất có thể là nhắm mục tiêu trò chơi của bạn tại safari trên thiết bị di động ngay từ đầu và thử và xây dựng một trò chơi không được vẽ lại chuyên sâu.
Đây là một chút của một cú sút xa, nhưng trò chơi của bạn có thể hoạt động trên các sprite DIV với các biến đổi CSS thay thế không? Tôi nói điều này bởi vì tôi đang nhận được một số hiệu suất tuyệt vời với việc di chuyển mọi thứ trên thiết bị iOS với các chuyển đổi và chuyển đổi CSS.
Chúng dường như được tăng tốc phần cứng một cách chính xác, với sự cảnh báo kỳ lạ rằng bạn phải sử dụng hình thức 3D cho các biến đổi (ví dụ, dịch3D, thay vì dịch) để tăng tốc để khởi động. Nó thực sự rất mượt mà và việc triển khai trình duyệt iOS hỗ trợ hình thức mà bạn chỉ cần đặt một ma trận float 16 phần tử trực tiếp, rất thuận tiện cho tôi.
Tôi rất ấn tượng với việc nó kết thúc suôn sẻ đến mức nào, tôi đã có ý định thử một dự án trò chơi đơn giản được viết theo cách này.
Trong trường hợp vẽ đường thẳng, kết hợp càng nhiều lệnh lineTo trước khi gọi đột quỵ.
Điều này và một số mẹo khác: http://dt.deviantart.com/blog/38471599/
tất cả mọi thứ @Gosub nói cộng:
nhìn vào bất cứ toán học nào bạn đang làm, xem liệu có cách nào để sử dụng các thuật toán hiệu quả hơn không.
sử dụng hình ảnh nhỏ hơn. hãy thử làm cho kích thước của sức mạnh hình ảnh của 2
hãy xem liệu bạn có thể thoát khỏi pha trộn alpha trên khung vẽ hay không sử dụng thuộc tính độ mờ của CSS.
xin vui lòng gửi lại kết quả của bạn. sẽ rất thú vị để biết những gì giúp đỡ nhất.
Tôi ghét phải thêm một câu trả lời cho một chủ đề cũ - nhưng tôi ngạc nhiên không ai đề cập đến điều này.
Khi bạn đang viết các trò chơi đầu tiên của mình, chỉ cần viết chúng như thế nào bạn sẽ mong đợi chúng hoạt động hiệu quả một cách khôn ngoan. Các kỹ thuật trên là điểm khởi đầu tốt để giữ hiệu suất cao - nhưng mẹo thực sự là trình lược tả. Nếu bạn cấu hình ứng dụng của mình trong Chrome hoặc Firefox (gợi ý: sử dụng nhiều phương pháp để bạn có thể thấy các tắc nghẽn chính xác; vì vậy bạn không phải di chuyển công cụ sau - dù sao bạn cũng nên làm điều này.), Bạn sẽ nhận được lợi ích bổ sung khi nhìn thấy kết quả thời gian chính xác. Trong trường hợp của tôi, tôi thấy việc vẽ lại nền liên tục chiếm 80% thời gian của trình duyệt. Sau khi tôi chuyển nó ra khỏi đường đi, tôi thấy các cuộc gọi khác chiếm lần lượt 40% trở lên. Sau một hoặc hai giờ, tôi đã thấy mức tăng FPS đáng kể.
Tôi cũng muốn nghe từ kết quả của bạn. Tôi đã cố gắng làm điều tương tự. Tôi thấy rằng làm nhiều phép toán là tốt nhưng ngay khi bạn đặt một bức tranh vào đó thì tốc độ khung hình và tinh thần sẽ giảm.
Tôi đã có một lớp phủ nền trước hiển thị các hiệu ứng. Đó là một hình ảnh chất lượng rất cao nhưng các công cụ alpha làm chậm nó đến mức tôi đã bỏ nó hoàn toàn để đổi lấy nhiều khung hình hơn mỗi giây.
Một điều khác tôi đã làm là sử dụng PHP để giải một số bài toán nặng. Tôi đã có bộ dữ liệu lớn nhưng thay vì để JavaScript tính toán và hiển thị dữ liệu, tôi quyết định để PHP thực hiện công việc và để JavaScript hiển thị kết quả. Điều này đã không tiết kiệm nhiều thời gian vì JavaScript là "sehr gut" với toán học.
Tôi cho rằng toàn bộ trang web của bạn là trong HTML5, vì vậy hãy thử chơi với nhân viên nền.
Hy vọng tôi đã giúp và xin vui lòng chia sẻ kết quả của bạn.