2011-08-02 33 views
7

Vì vậy, tôi đã quản lý bản thân mình để viết phần đầu tiên (thuật toán) để tính toán vị trí của mỗi gạch, nơi nó sẽ được đặt trong khi vẽ bản đồ này (xem dưới đây). Tuy nhiên tôi cần để có thể chuyển đổi vị trí chuột vào ô thích hợp và tôi đã gần như kéo tóc của tôi ra vì tôi không thể tìm ra cách để có được các tế bào từ vị trí con chuột. Mối quan tâm của tôi là nó liên quan đến một số toán học khá cao hoặc một cái gì đó tôi chỉ là một cái gì đó dễ dàng tôi không có khả năng để thông báo.
Ví dụ: nếu vị trí chuột là 112, 35 làm cách nào để tính/chuyển đổi nó thành để nhận được ô đó là 2; 3 tại vị trí đó? Có thể có một số lập trình viên toán học thực sự giỏi ở đây, ai sẽ giúp tôi về điều này hoặc ai đó biết cách thực hiện hoặc có thể cung cấp một số thông tin?Làm thế nào để chuyển đổi vị trí chuột trong bản đồ ốp lát isometric?

enter image description here

var cord:Point = new Point(); 
cord.x = (x - 1) * 28 + (y - 1) * 28; 
cord.y = (y - 1) * 14 + (x - 1) * (- 14); 

Nói về bản đồ, mỗi tế bào (trong suốt ngói 56x28 pixel) được đặt ở trung tâm của tế bào trước đó (hoặc ít zero vị trí cho các tế bào 1; 1), trên là mã tôi sử dụng để chuyển đổi vị trí từ ô sang vị trí. Tôi đã thử rất nhiều thứ và tính toán cho vị trí-to-cell nhưng mỗi người trong số họ thất bại.

Edit: Sau khi đọc rất nhiều thông tin có vẻ như rằng việc sử dụng tắt màn hình bản đồ màu sắc (trong đó màu sắc được ánh xạ tới gạch) là giải pháp nhanh nhất và hiệu quả nhất?

+0

những gì bạn đang sử dụng để vẽ? Nhiều khung công tác đồ họa (như OpenGL) có các phương thức trợ giúp để thực hiện chuyển đổi giữa các con chuột với bạn. – AShelly

+0

Flash BitmapData. – Rihards

+0

xem Q: [nhấn-phát hiện-trong-một-2d-isometric-lưới] (http://stackoverflow.com/questions/5611982/click-detection-in-a-2d-isometric-grid) – AShelly

Trả lời

6
(1) x` = 28x -28 + 28y -28 = 28x + 28y -56 
(2) y` = -14x +14 +14y -14 = -14x + 14y 

bảng chuyển đổi:

[x] [28 28 -56 ] = [x`] 
[y] [-14 14 0 ] [y`] 
[1] [0 0 1 ] [1 ] 

[28 28 -56 ]^-1 
[-14 14 0 ] 
[0 0 1 ] 

Tính rằng với một plotter (Tôi thích wims)

[1/56 -1/28 1 ] 
[1/56 1/28 1 ] 
[0  0 1 ] 

x = 1/56*x` - 1/28y` + 1 
y = 1/56*x` + 1/28y` + 1 
+0

Bạn có thể cho một số ánh sáng về những gì nó làm và cách hoạt động? – Rihards

+0

http://en.wikipedia.org/wiki/Transformation_matrix .. Về cơ bản nếu bạn biết một mặt của sự chuyển đổi, thật dễ dàng để có được phía bên kia .. Vì vậy, bạn có V * A = V' .. Nhân A (- 1) trên cả hai mặt và bạn nhận được V * 1 = V' * A (-1) –

+0

Những gì tôi đang chuyển đổi? Toàn bộ hình ảnh bản đồ để làm cho nó hình chữ nhật dựa và sau đó dễ dàng tính toán các tế bào? – Rihards

0

Một cách sẽ được để xoay nó trở lại một chiếu vuông:

Dịch y lần đầu tiên để t ông kích thước có liên quan đến nguồn gốc:

x0 = x_mouse; 
y0 = y_mouse-14 

Sau đó mở rộng theo quy mô ngói của bạn:

x1 = x/28; //or maybe 56? 
y1 = y/28 

Sau đó xoay theo góc chiếu

a = atan(2/1); 
x_tile = x1 * cos(a) - y1 * sin(a); 
y_tile = y1 * cos(a) + x1 * sin(a); 

tôi có thể bị thiếu một dấu trừ, nhưng đó là ý tưởng chung.

+0

Quay lại toàn bộ hình ảnh bản đồ có? Để làm cho nó hình chữ nhật dựa? – Rihards

+0

bạn sẽ không thực sự phải xoay toàn bộ bản đồ. Chỉ cần áp dụng vòng xoay cho vị trí chuột và bạn sẽ có được vị trí tương đương trong các tọa độ như thể bản đồ đã được xoay. Tuy nhiên, tôi nghĩ câu trả lời của @ yochai là một giải pháp thực tế hơn. – AShelly

+0

Tính năng này cũng chỉ áp dụng xoay vòng đối với vị trí chuột trong ví dụ của @ yochai không? Hay không? Bởi vì tôi không thấy làm thế nào tôi có thể nghiêng hoặc xoay vị trí chuột, ví dụ, (112,35). – Rihards

0

Mặc dù bạn đã không đề cập đến nó trong câu hỏi ban đầu của bạn, trong các ý kiến ​​tôi nghĩ bạn nói rằng bạn đang lập trình điều này trong Flash. Trong trường hợp này, Flash có chức năng chuyển đổi Ma trận. (. Ví dụ để tọa độ isometric) Cách tốt nhất để chuyển đổi giữa các hệ tọa độ được sử dụng biến đổi Matrix:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html

Bạn muốn xoay và quy mô các ma trận trong nghịch đảo của cách bạn xoay và quy mô đồ họa .

1

Tôi đã tìm thấy thuật toán trên trang web này http://www.tonypa.pri.ee/tbw/tut18.html. Tôi không thể làm cho nó hoạt động tốt cho tôi, nhưng tôi đã thay đổi nó bằng cách dùng thử và lỗi cho biểu mẫu này và nó hoạt động cho tôi bây giờ.

int x = mouse.x + offset.x - tile[0;0].x; //tile[0;0].x is the value of x form witch map was drawn 
int y = mouse.y + offset.y; 
double _x =((2 * y + x)/2); 
double _y= ((2 * y - x)/2); 
double tileX = Math.round(_x/(tile.height - 1)) - 1; 
double tileY = Math.round(_y/(tile.height - 1)); 

Đây là thế hệ bản đồ của tôi

for(int x=0;x<max_X;x++) 
for(int y=0;y<max_Y;y++) 
map.drawImage(image, ((max_X - 1) * tile.width/2) - ((tile.width - 1)/2 * (y - x)), ((tile.height - 1)/2) * (y + x)); 
2

enter image description here

tôi trả lại gạch như trên.

quá trình xử lý rất đơn giản!

Điều đầu tiên:

rộng Ngói tôi và chiều cao đều = này có nghĩa là theo quan điểm isometric, chiều rộng = 32 và height = 16! mapheight Ghép trong trường hợp này là 5 (tối đa Y giá trị.)

y_iso & x_iso == 0 khi y_mouse = mapheight Ghép/tilewidth/2 và x_mouse = 0

khi x_mouse + = 1, y_iso - = 1

nên trước hết tôi tính toán "chuyển đổi mỗi pixel"

TileY = ((y_mouse * 2) - ((mapheight Ghép * tilewidth)/2) + x_mouse)/2;

TileX = x_mouse-TileY;

để tìm tọa độ ô vuông mà tôi chỉ chia đều theo tilewidth

TileY = TileY/32; TileX = TileX/32;

XONG !! chưa bao giờ gặp bất kỳ sự cố nào!

5

Tôi biết đây là một bài đăng cũ, nhưng tôi muốn cập nhật điều này vì một số người vẫn có thể tìm câu trả lời cho vấn đề này, giống như tôi đã sớm hơn hôm nay. Tuy nhiên, tôi đã tự tìm ra điều này. Ngoài ra còn có một cách tốt hơn để làm điều này, do đó bạn không nhận được các vấn đề chồng chéo gạch.

Mã này cũng đơn giản như thế này:

mouse_grid_x = floor((mouse_y/tile_height) + (mouse_x/tile_width)); 
mouse_grid_y = floor((-mouse_x/tile_width) + (mouse_y/tile_height)); 

mouse_xmouse_y là tọa độ màn hình chuột.

tile_heighttile_width là kích thước lát thực tế chứ không phải chính hình ảnh đó. Như bạn thấy trên hình ảnh ví dụ của tôi tôi đã thêm bụi bẩn dưới ngói của tôi, đây chỉ là để vẽ dễ dàng hơn, kích thước thực tế là 24 x 12. Các tọa độ cũng được "sàn" để giữ cho lưới kết quả x và y làm tròn xuống.

Cũng lưu ý rằng tôi hiển thị các ô này từ y = 0 và x = tile_with/2 (dấu chấm đỏ). Điều này có nghĩa là 0,0 của tôi thực sự bắt đầu ở góc trên cùng của ngói (nghiêng) và không ra ngoài trời. Xem các ô này dưới dạng hình vuông xoay, bạn vẫn muốn bắt đầu từ 0,0 pixel.

Gạch sẽ được hiển thị bắt đầu bằng Y = 0 và X = 0 cho kích thước bản đồ. Sau khi hàng đầu tiên được hiển thị, bạn bỏ qua một vài pixel xuống và sang trái. Điều này sẽ làm cho các dòng gạch tiếp theo chồng lên nhau, là một cách tuyệt vời để giữ cho các lớp chồng lên nhau một cách đồng bộ. Bạn nên vẽ các ô, sau đó chọn bất kỳ thứ gì trên ô đó trước khi chuyển sang ô tiếp theo.

Tôi sẽ thêm một ví dụ làm cho quá:

for (yy = 0; yy < map_height; yy++) 
{ 
    for (xx = 0; xx < map_width; xx++) 
    { 
      draw tiles here with tile coordinates: 
      tile_x = (xx * 12) - (yy * 12) - (tile_width/2) 
      tile_y = (yy * 6) + (xx * 6) 

      also draw whatever is on this tile here before moving on 
    } 
} 

Isometric Image

Các vấn đề liên quan