Mặc dù phương pháp được mô tả bởi sws và MarkR cũng là điều tôi thích, tôi muốn trình bày một cách tiếp cận khác.
Tùy chọn hackish để tạo giao diện đẳng cự với nỗ lực tối thiểu là thực sự sử dụng các khối trực giao và sử dụng bối cảnh.transform để đặt ma trận chiếu làm cho bản đồ trông giống hình học (hoặc kết hợp bối cảnh.rotate và bối cảnh.scale khi bạn không ' t biết ma trận chiếu hoạt động như thế nào).
Xem đặc điểm kỹ thuật cho các phương pháp chuyển đổi canvas để biết chi tiết.
Hình ảnh ngói:
Vẽ mã:
for (var x = 0; x < 5; x++) {
for (var y = 0; y < 5; y++) {
ctx.drawImage(img, x * img.width, y * img.height);
}
}
Kết quả trước khi áp dụng ma trận:
Cùng một mã với cùng một hình ảnh xếp sau khi áp dụng ma trận biến đổi này:
ctx.transform( 1, 0.5,
-1, 0.5,
160, 0 );
Với lưới nét đứt được loại bỏ khỏi hình ảnh gạch và thay đổi phần bù của ô trong mã bản vẽ thành img.width - 1và img.height - 1để loại bỏ các khoảng trống gây ra bởi phép biến đổi. Đột nhiên, cái ngói trông xấu xí một nửa:
Hạn chế chính của phương pháp này là khi bạn thiết kế các ô của mình trong trình chỉnh sửa đồ họa, chúng sẽ không thực sự là những gì bạn thấy - là - những gì bạn nhận được. Bạn cũng sẽ gặp phải vấn đề khi bạn muốn vẽ bất kỳ vật nào không nằm trên sàn mà đứng thẳng. Đối với những điều này, bạn có thể tắt ma trận biến đổi trước khi vẽ chúng, nhưng sau đó bạn sẽ phải tự tính toán vị trí. Bạn có thể sử dụng các công thức này cho điều đó:
var xScreen = xWorld * 1 + yWorld * -1 + 160;
var yScreen = xWorld * 0.5 + yWorld * 0.5 + 0;
(lưu ý cách các số từ ma trận biến đổi xuất hiện lại trong các công thức này - bạn đang tự thực hiện phép nhân ma trận ở đây).
Vậy tại sao tôi phải làm điều này?
Phương pháp này tốt khi bạn:
- không có kinh nghiệm với việc thiết kế gạch isometric, nhưng bạn có gạch trực giao
- không muốn dành nhiều thời gian để phát triển một công cụ đồ họa đẳng cự, điều này hơi khó hơn một công cụ trực giao.
Một tính năng thú vị khác là khi bạn biết cách tính toán ma trận, bạn có thể sửa đổi ma trận chiếu giữa các khung thành thu phóng, nghiêng và xoay bản đồ trong thời gian thực để có một số hiệu ứng giả-3d đẹp mắt (thử thực hiện THAT với các ô đẳng cự) .
Nhưng khi bạn biết cách xử lý gạch isometric, cả về mặt nghệ thuật và kỹ thuật, và bạn không cần bất kỳ mánh khóe giả mạo nào, tôi muốn khuyên bạn nên sử dụng gạch có hình kim cương với độ trong suốt.
