Swobodny przepływ w izometrycznej grze opartej na kafelkach

Czy istnieje rozsądny łatwy sposób na wdrożenie swobodnego przepływu w izometrycznej grze opartej na kafelkach? Oznacza to, że gracz nie po prostu od razu przeskakuje z jednego kafelka na drugi lub nie zostanie „przyciągnięty” do siatki (na przykład, jeśli ruch między kafelkami był animowany, ale nie można nic zrobić przed zakończeniem animacji). Jestem naprawdę początkującym z czymkolwiek związanym z programowaniem gier, ale z pomocą tej strony i niektórych innych zasobów dość łatwo było zrobić podstawowe rzeczy, ale nie byłem w stanie znaleźć żadnych przydatnych zasobów dla tego konkretnego problemu .

Obecnie improwizowałem coś podobnego: http://jsfiddle.net/KwW5b/4/ (ruch WASD). Ideą tego ruchu było użycie mapy myszy, aby wykryć, kiedy gracz przesunął się na inny kafelek, a następnie odwrócić przesunięcia, i w większości działa poprawnie (każdy róg powoduje przesunięcie gracza do niewłaściwej lokalizacji: patrz http: //www.youtube.com/watch?v=0xr15IaOhrI , co prawdopodobnie wynika z faktu, że nie udało mi się uzyskać pełnej mapy myszy działającej poprawnie), ale nie mam złudzeń, że jest ona nawet blisko dobrego / rozsądnego rozwiązania. Zresztą to głównie po to, żeby zademonstrować, co chciałbym wdrożyć.

html5 movement isometric html-canvas xtr486
źródło

Ten kod wygląda świetnie, na czym dokładnie polega problem? Jesteś dość skromny (w dobrym sensie), twój kod wydaje się raczej dobry, jakiej funkcji brakuje w wersji demo?

AturSams,

Przez problemy z narożnikami rozumiałem takie zachowanie: youtube.com/watch?v=0xr15IaOhrI . Nie byłem w stanie wymyślić żadnego innego rozwiązania niż wykonanie wielu sprawdzeń pod kątem problematycznych przesunięć, a nawet wtedy istnieją specjalne przypadki, w których gracz wypacza się w niewłaściwą lokalizację. Ale, jak powiedziałem, zastanawiałem się, w jaki sposób ten rodzaj ruchu jest zwykle realizowany, ponieważ nigdzie indziej nie widziałem metody, którą wymyśliłem.

xtr486,

Odpowiedzi:

Przede wszystkim sugeruję zmianę kierunków z: W - góra-lewo S - dół-prawo A - dół-lewo D - góra-prawo

na bardziej intuicyjne: W - góra S - dół A - lewy D - prawy

Jeśli chodzi o twoje obawy, sugeruję, abyś zrobił dwie funkcje, jedną tłumaczącą izometryczne współrzędne kafelków na współrzędne siatki, a drugą na odwrót. W ten sposób możesz po prostu oddzielić MVC, a to ułatwi ci życie przy obliczaniu aktywnego kafelka: wprowadź opis zdjęcia tutaj

Markus von Broady
źródło

Twoja odpowiedź wygląda naprawdę obiecująco, ale przyznaję, że większość z nich wychodzi mi z głowy. Spróbuję jednak kontynuować trawienie twojego rozwiązania przez kilka następnych dni. Czy jest to gdzieś blisko tego, czego szukałeś? jsfiddle.net/Sd4ZP/18 Ma pewne błędy logiczne (wyłączone przez jeden itd.) i tym podobne, ale o ile wiem, mapy odgórne i izometryczne mają ten sam ruch. Nie udało mi się nawet przełożyć przesunięcia

kafelka

Jak dotąd wygląda dobrze! Zajrzę do niego wieczorem. Chodzi o to, aby zastosować transformacje w izometrycznej metodzie rysowania kafelków do funkcji translacji positionToUser () i odwrotnie w metodzie positionFromUser ().

Markus von Broady,

Widzę problem: rysujesz widok izometryczny, umieszczając obrazy zamiast za pomocą interfejsu API rysowania na płótnie. Jest to dość logiczne, ponieważ ostatecznie płytki izo będą miały znacznie więcej niż jednolity kolor. Jednak do debugowania powinieneś również rysować linie między płytkami, co znacznie ułatwi ci życie. W każdym razie rozwidliłem twój kod i utworzyłem funkcję tłumaczącą positionToUser (x, y). Przetestuj go, centrując czarny kwadrat na kafelku (ponieważ w widoku ISO jest zawsze wyśrodkowany) i przesuwając mysz nad dolnym płótnem - przetłumaczona kropka pojawi się na płótnie izo: jsfiddle.net/tZTXS/1

Markus von Broady

Dzięki! Właściwie udało mi się wydedukować (cóż, w pewnym sensie) coś, mianowicie przesunięcie izometryczne w funkcji drawIsometric. Teraz wygląda to tak: jsfiddle.net/P2eKF/4 , który wydaje się robić to, co zadałem w pierwotnym pytaniu, więc zaznaczę twoją odpowiedź. :)

xtr486

Cieszę się, że to zrobiłeś! Podoba mi się, jak kombinacje klawiszy WA, WD, AS, SD wyrównują ruch do osi izometrycznych zamiast kątów 45 stopni. Dobra robota.

Markus von Broady

Jeśli rozumiem, chcesz, aby gracz przesuwał kafelki na kafelki, ale bez skakania. Możesz:

1- Zacznij od płytki t0 i przesunięcia 0

2- Gdy gracz przejdzie na pole t1, ustaw przesunięcie = - (t1 - t0)

3- W aktualizacji odtwarzacza, jeśli przesunięcie nie jest równe 0, zmniejszanie przy użyciu czasu aktualizacji i prędkości odtwarzacza.

amount = deltatime * playerSpeed
deltaoff = sqrt(offsetX*offsetX + offsetY*offsetY)
total = min( amount, deltaoff )
offsetX = offsetX - (total * offsetX / deltaoff)
offsetY = offsetY - (total * offsetY / deltaoff)

4- Możesz użyć przesunięcia == 0, aby sprawdzić, kiedy gracz jest na kafelku.

Dzięki temu otrzymujesz gracza, który porusza się swobodnie na mapie, ale trzyma się płytek.

Zhen
źródło