Po pierwsze, oto kod. Wyjaśnienie nastąpi:
/*
* tw, th contain the tile width and height.
*
* hitTest contains a single channel taken from a tile-shaped hit-test
* image. Data was extracted with getImageData()
*/
worldToTilePos = function(x, y) {
var eventilex = Math.floor(x%tw);
var eventiley = Math.floor(y%th);
if (hitTest[eventilex + eventiley * tw] !== 255) {
/* On even tile */
return {
x: Math.floor((x + tw) / tw) - 1,
y: 2 * (Math.floor((y + th) / th) - 1)
};
} else {
/* On odd tile */
return {
x: Math.floor((x + tw / 2) / tw) - 1,
y: 2 * (Math.floor((y + th / 2) / th)) - 1
};
}
};
Pamiętaj, że ten kod nie będzie działać po wyjęciu z pudełka mapy pokazanej w pytaniu. Dzieje się tak, ponieważ nieparzyste kafelki są przesunięte w lewo, podczas gdy nieparzyste kafelki są zwykle przesunięte w prawo (tak jak ma to miejsce w edytorze map kafelkowych ). Powinieneś być w stanie łatwo temu zaradzić, modyfikując wartość x zwróconą w przypadku nieparzystych kafelków.
Wyjaśnienie
Może się to wydawać nieco bardziej brutalną metodą realizacji tego zadania, ale ma tę zaletę, że jest idealna pod względem piksela i nieco bardziej elastyczna.
Sztuczka polega na tym, aby oglądać mapę nie jako pojedynczą naprzemienną siatkę, ale jako dwie siatki nakładające się na siebie. Istnieje siatka nieparzystych wierszy i siatka nieparzystych wierszy, ale nazwijmy je czerwonymi i zielonymi, abyśmy mogli stworzyć ładny diagram ...
Zauważ, że po prawej stronie tego obrazu zaznaczyłem punkt fioletową kropką. Jest to przykładowy punkt, który spróbujemy znaleźć w naszym oryginalnym polu kafelków.
Należy zwrócić uwagę na każdy punkt na świecie, że zawsze będzie on leżeć dokładnie w dwóch regionach - czerwonym i zielonym (chyba że jest na krawędzi, ale prawdopodobnie i tak przycinamy w granicach poszarpanej krawędzi). Znajdźmy te regiony ...
Teraz wybierz, który z dwóch regionów jest właściwy. Zawsze będzie dokładnie jedna odpowiedź.
Stąd możemy wykonać prostszą arytmetykę i obliczyć kwadratową odległość od naszego punktu próbnego do każdego punktu środkowego dwóch regionów. Cokolwiek będzie najbliższe, będzie nasza odpowiedź.
Istnieje jednak alternatywny sposób. Dla każdego regionu testowego próbkujemy mapę bitową, która dokładnie odpowiada kształtowi naszych płytek. Próbkujemy to w punkcie przetłumaczonym na lokalne współrzędne dla tego pojedynczego kafelka. W naszym przykładzie wyglądałoby to mniej więcej tak:
Po lewej stronie sprawdzamy zielony region i otrzymujemy trafienie (Czarny piksel). Po prawej testujemy czerwony region i otrzymujemy brak (biały piksel). Drugi test jest oczywiście zbędny, ponieważ zawsze będzie dokładnie jeden lub drugi, nigdy oba.
Następnie dochodzimy do wniosku, że trafiliśmy w nieparzystą płytkę przy 1,1. Ta współrzędna powinna być łatwa do odwzorowania na oryginalne współrzędne kafelków przy użyciu innej transformacji dla nieparzystych i parzystych wierszy.
Ta metoda pozwala również mieć proste właściwości poszczególnych pikseli na bitmapach testowych pikseli. Np. Biały jest pozbawiony kafelków, czarny jest hitem, niebieski to woda, czerwony jest jednolity.