Làm việc với canvas ở các kích thước màn hình khác nhau

Question

Tôi đang tạo một trò chơi đơn giản bằng cách sử dụng thẻ HTML5 <canvas> và biên dịch mã thành ứng dụng gốc bằng Phonegap, nhưng vấn đề là canvas sử dụng tọa độ không liên quan đến kích thước của nó, vì vậy 20,20 trên màn hình 960x640 khác với màn hình 480x800.

Vì vậy, tôi muốn biết cách làm việc với <canvas> (sẽ ở chế độ toàn màn hình) trên các kích thước màn hình khác nhau.

Answer 1

Vì vậy, tôi muốn biết cách làm việc với (màn hình sẽ ở chế độ toàn màn hình) trên các kích thước màn hình khác nhau.

Đây là sự cố thường gặp có độ phân giải khá dễ dàng. Thường thì điều này được thực hiện bằng cách tách các tọa độ canvas cứng ra khỏi cái mà đôi khi được gọi là tọa độ "mô hình".

Nó thực sự phụ thuộc vào cách mã của bạn được tổ chức, nhưng tôi cho rằng trò chơi có chiều cao và chiều rộng với thế giới chiếm phần lớn hoặc toàn bộ màn hình. Hai tỷ lệ khung hình của màn hình bạn đang nhắm mục tiêu là 1,5 và 1,666, vì vậy bạn sẽ muốn phục vụ cho màn hình nhỏ hơn

Vì vậy, bạn thực sự muốn thực hiện trò chơi của mình trong một tập hợp tọa độ "mô hình" không chịu lực trên màn hình hoặc kích thước canvas. Vì bạn chỉ nhắm mục tiêu hai kích thước màn hình, nên tọa độ mô hình của bạn có thể là 960x640 vì đó là tỷ lệ nhỏ hơn của hai tỷ lệ khung hình. Nó không phải là. Thay vào đó, có thể là 100x50 cho mô hình của bạn. Nhưng ví dụ này, chúng tôi sẽ sử dụng 960x640 làm mô hình của chúng tôi tọa độ.

Nội bộ, bạn không bao giờ sử dụng bất kỳ điều gì ngoài các tọa độ mô hình này. Bạn chưa bao giờ nghĩ đến bất kỳ tọa độ nào khác khi tạo trò chơi của mình.

Khi kích thước màn hình là 960x640, bạn sẽ không phải thay đổi bất kỳ thứ gì kể từ khi ánh xạ 1: 1 của nó thuận tiện.

Khi kích thước màn hình thực sự là 800x480, khi đến lúc vẽ màn hình, bạn sẽ muốn dịch tất cả toạ độ mô hình bằng (3/4), do đó trò chơi sẽ được thực hiện và sử dụng nội bộ 960x480, nhưng nó sẽ được vẽ trong khu vực (720x480). Bạn cũng sẽ muốn lấy bất kỳ con chuột hoặc chạm vào đầu vào và nhân nó bằng (4/3) để biến tọa độ màn hình thành tọa độ mô hình.

Bản dịch này có thể dễ dàng như gọi ctx.scale(3/4, 3/4) trước khi bạn vẽ mọi thứ.

Vì vậy, cả hai nền tảng sẽ có mã được viết tất cả giả định trò chơi có kích thước 960x640. Thời gian duy nhất mà mô hình tọa độ trở thành sự phối hợp màn hình là khi vẽ vào khung hình (kích thước khác) và chuyển đổi các tọa độ chuột/cảm ứng canvas thành mô hình coords.

Nếu điều đó có vẻ khó hiểu với bạn, tôi có thể thử và tạo mẫu.

Answer 2

Vì bạn chỉ có 2 kích thước màn hình, bạn có thể có 2 canvas khác nhau (và logic của chúng đằng sau) với các kích thước khác nhau.
Nếu bạn không thích giải pháp này, tôi nghĩ bạn chỉ có thể sử dụng kích thước bằng% thay vì kích thước tuyệt đối của pixel. Cuối cùng nhưng không kém phần quan trọng, hãy thử đặt các giá trị khác nhau trong thẻ meta.

Answer 3

Sử dụng innerWidth/innerHeight của window đối tượng:

canvas.height = window.innerHeight; 
canvas.width = window.innerWidth; 

Đó sẽ tự điều chỉnh bất kỳ màn hình; bạn phải kiểm tra khả năng tương thích nền tảng/màn hình chéo!

Ngoài ra, thay vì sử dụng được xác định trước x,y tọa độ, sử dụng một cái gì đó như thế này:

var innerWidth = window.innerWidth; 
x = innerWidth/3;