Wyszukiwanie Ścieżki oparte na Siatce | hyperPad Documentation

Loading...

Logo

W tym samouczku stworzymy symulację znajdowania ścieżek opartą na dwuwymiarowej siatce tablicowej. To da nam podstawowy pomysł na tworzenie działań związanych z znajdowaniem ścieżek w naszych grach. Wizualizujemy siatkę, używając pustych kwadratowych obiektów jako kafelków oraz okrągłego obiektu jako naszego awatara, który może poruszać się po tym obszarze siatki w naszym poleceniu.

Video_2019-07-30__2_32_01_PM.gif

I. Ustawienie obiektów

W naszym projekcie użyjemy tylko czterech obiektów. Nasz zielony awatar, niebieski kafelek, biały blokad, oraz etykieta siatki do konfigurowania i wizualizacji naszej siatki.

Photo_2019-07-29__1_50_10_PM.png

Awatar

Nasz awatar to pusty obiekt, który ma skalę x i y równą 50%. Ustaw jego kolizję na okrągły kształt, aby wyglądał jak na poniższym obrazie. Ten obiekt będzie miał trzy zdefiniowane atrybuty: na kafelku, poprzedni kafelek i kafelek docelowy. Ustaw domyślne wartości tych atrybutów na zero, aby nie miały wartości null, gdy spróbujemy je później pobrać.

Photo_2019-07-29__1_53_38_PM.png

Obiekt Kafelek

Stwórz inny pusty obiekt, który będzie używany do wizualizacji kafelków w naszej siatce. Jego skala również wynosi 50% i ma tylko jeden zdefiniowany atrybut: na kafelku. Ustaw także tę wartość na zero.

Photo_2019-07-29__1_53_51_PM.png

Obiekt Blokady

Stwórz kolejny pusty obiekt, który będzie służył jako blokady w naszej siatce. Jest to biały pusty obiekt o skali 40%. Nasz awatar nie będzie mógł przemieszczać się na kafelek, który ma na sobie blokadę.

Etykieta Siatki

To tylko etykieta, która będzie miała zachowania, które pozwolą na konfigurację i wizualizację naszej siatki. Ma zdefiniowane atrybuty: start x z wartością 4 oraz start y z wartością 3. Te wartości to przesunięcia, które będą używane jako odniesienia przy spawnowaniu naszych kafelków, aby poprawnie umieścić naszą siatkę na środku.

Photo_2019-07-29__1_56_01_PM.png

Zdefiniowane atrybuty Awatara/Kafelka:

Zdefiniujemy kafelek jako tablicę 2D, która będzie miała wartości x i y na podstawie naszej siatki.

  • na kafelku - to jest wartość kafelka, na którym obecnie znajduje się nasz obiekt w naszej siatce
  • poprzedni kafelek - kafelek, na którym nasz awatar wcześniej stąpał
  • kafelek docelowy - kafelek, na który nasz awatar się uda

II. Ustawienie siatki

Wewnątrz etykiety siatki zdefiniujemy naszą tablicę 2D oraz spawnowanie naszej siatki. Istnieją 2 główne punkty kluczowe w tym obiekcie: ustawienie tablicy i wizualizacja tablicy. Na początku zróbmy zestaw tablicy.

Photo_2019-07-29__3_05_10_PM.png

Ustaw tablicę - zestaw

Najpierw utwórz pustą tablicę o nazwie 'Siatka'. Ta tablica będzie zawierać naszą dwuwymiarową tablicę. Będziemy mieli pudełko pojemnikiowe o nazwie 'liczba wierszy x', które ma wartość 24, oraz inną pustą tablicę o nazwie 'wiersz y', która ma 18 pustych wartości.

Photo_2019-07-29__1_55_28_PM.png

Pierwszym zachowaniem w naszym zestawie jest pętla z powtórzeniem razy 'liczba wierszy x'. W każdym kroku tej pętli dodamy pusty wiersz y do 'tablicy Siatka'. To stworzy tablicę w tablicy o wymiarach 24x18.

Zauważ, że na początku naszego zestawu połączyliśmy nieaktywny komentarz, aby uniknąć automatycznego wykonania tego zachowania głównego. Główne zachowanie to zachowanie, które nie uruchamia się na podstawie żadnego wydarzenia i jest umieszczane otwarcie w interfejsie.

Wizualizuj siatkę - zestaw

Główną rzeczą, którą tutaj zrobimy, jest przeszukiwanie każdej wartości w naszej 'tablicy Siatka' i spawnowanie obiektu kafelka. Dodamy również warunek w naszej pętli, który pozwoli na spawnowanie białej blokady na szczycie obiektu kafelka.

Photo_2019-07-29__3_56_37_PM.png

Pierwszym krokiem jest pobranie liczby elementów w tablicy 'wiersz y', wartości atrybutu 'start x' tego obiektu i wartości 'start y'.

Utwórz pętlę, która ma powtórzenia 'liczba wierszy x', a dla każdego kroku tej pętli dodamy wartość indeksu tej pętli i wartość atrybutu 'start x'. To da nam absolutną pozycję x, którą wykorzystamy do późniejszego umiejscowienia naszych spawnowanych kafelków. Następnie mamy 'pętlę wiersza y', która ma powtórzenia 'liczba wierszy y'. Dla każdego kroku tej pętli dodamy wartość indeksu tej pętli i wartość atrybutu 'start y', co teraz da nam absolutną pozycję y.

Photo_2019-07-29__4_03_51_PM.png

Pozostaje nam dodanie wartości pod 'pętlą wiersza y' i spawnowanie obiektu niebieskiego. Ustaw liczbę aktywnych obiektów na 999, ponieważ potrzebujemy ich dużo do naszej siatki, z czasem trwania 0. Następnie przesuń ten spawnowany obiekt do punktu x z wartością z 'dodanych wartości pętli x' i punktem y z wartości z 'dodanych wartości pętli y'.

Następnie dodajemy tablicę z 2 pustymi wartościami o nazwie 'Na kafelku', która będziemy używać tylko jako miejsce na tablicę. Po przeniesieniu obiektu kafelka, modyfikujemy tablicę 'Na kafelku', zastępując jej wartość pod indeksem 0 wartością z pętli 'wiersz x'. Następnie dodajemy kolejną modyfikację tablicy, która zastępuje wartość pod indeksem 1 wartością z indeksu wiersza 'y'. To są współrzędne x i y naszej siatki, które obiekt będzie miał jako atrybut 'na kafelku'.

Teraz ustaw atrybut spawnowanego obiektu z dynamicznym kluczem, 'na kafelku', i wartością 'Na kafelku - tablica'.

Photo_2019-07-29__4_41_55_PM.png

Wciąż, pod pętlą wiersza y, mamy warunek spawnowania białego obiektu blokady. Będziemy mieć 2 na 5 szans na wykonanie tego zestawu, co doda randomizacji do naszej siatki. Następnie oznaczymy wartość 1 dla współrzędnych x i y w naszej tablicy 'Siatka', co oznacza, że dana współrzędna ma spawnowaną blokadę.

Pierwszym krokiem jest uzyskanie losowej liczby od 1 do 5. Jeśli ta liczba jest mniejsza lub równa 2, spawnowujemy blokadę. Ustaw jej liczbę aktywnych obiektów na 999 i przesuń ten obiekt do tego samego punktu, co wcześniej spawnowany niebieski kafelek, również z czasem trwania 0.

Następnie przechowujemy informacje, że ta współrzędna była zajęta przez blokadę, jeśli została spawnowana. Robimy to, oznaczając tę współrzędną wartością 1. Najpierw pobieramy wartość pod indeksem 'pętli wiersza x' z tablicy 'Siatka'. Ta wartość da nam tablicę 'wiersza y'. Modyfikujemy ten 'wiersz y', zastępując jego wartość pod indeksem 'pętli wiersza y' wartością 1, która jest oznaczona. Ponieważ ta modyfikacja wartości dotyczy tylko tej wartości, a nie samej 'Siatki', nadal musimy zmodyfikować tablicę 'Siatka'. Zastępujemy wartość pod indeksem 'pętli wiersza x' tablicy 'Siatka' wartością 'zmodyfikuj wiersz y - tablica'.

Kiedy jest już uruchomione, powinno to dać taki rodzaj formy.

Photo_2019-07-29__4_45_18_PM.png

III. Naciśnij Kafelek

Aby móc wchodzić w interakcję z samą siatką, będziemy potrzebować zestawu zachowań, gdy tylko naciśniemy niebieski kafelek. Pierwsze naciśnięcie sprawi, że nasz awatar pojawi się w naszej siatce, a każde kolejne naciśnięcie po tym wydarzeniu uruchomi jego znajdowanie ścieżki.

Wewnątrz niebieskiego obiektu znajduje się zestaw zachowań, który ma 3 główne punkty: zresetować poprzedni kafelek naszego awatara, ustawić jego na kafelku/ustawić kafelek docelowy, a następnie ustawić animację koloru, aby wizualizować wydarzenie dotyku na ekranie.

Photo_2019-07-29__5_00_44_PM.png

Pierwszym krokiem jest uzyskanie atrybutu 'na kafelku' obiektu kafelka. Ustaw atrybut 'poprzedni kafelek' naszego awatara na 0. Nasz awatar zostanie ustawiony na unikanie powrotu do 'poprzedniego kafelka', dlatego resetujemy 'poprzedni kafelek' przy każdym naciśnięciu kafelka.

Następnie uzyskuję atrybut 'na kafelku' naszego awatara. Pierwszy warunek if to, czy wartość 'na kafelku' jest równa zeru. To oznacza, że jeśli awatar jeszcze się nie pojawił, to wynik ten będzie prawdziwy. Jeśli jest to prawda, to ustawiamy atrybut 'na kafelku' na wartość atrybutu 'na kafelku' obiektu kafelka. Następnie przesuwamy położenie naszego awatara, uzyskując położenie obiektu kafelka, wskazując jego wartości x i y do tego punktu z czasem trwania 0.

Jeśli wartość 'na kafelku' nie jest równa zero, ustawiamy atrybut 'kafelek docelowy' naszego awatara na wartość atrybutu 'na kafelku' obiektu kafelka. To oznacza, że nasz awatar już znajduje się w naszej siatce, a więc możemy wykonać zestaw zachowań, 'znajdź ścieżkę'. Jeszcze nie mamy tego zachowania, ale naprawimy to po zakończeniu tego samouczka dla zestawu 'znajdź ścieżkę'.

Teraz, gdy prawidłowo ustawiliśmy naszego awatara w naszej siatce, wystarczy zwizualizować to wydarzenie naciśnięcia. Pierwszym krokiem jest, aby mieć główne zachowanie 'pobierz kolor', aby uzyskać jego pierwotny kolor. Następnie po wydarzeniu naciśnięcia ustawiamy kolor obiektu kafelka na czarny z czasem trwania 0, a następnie przywracamy jego kolor do wartości pierwotnej z czasem trwania 0.2.

Naciśnięcie na niebieski kafelek powinno dać taki rezultat.

Photo_2019-07-30__1_04_42_PM.png

IV. Wykonaj Zestaw Znajdź Ścieżkę

W tej ostatniej części naszego samouczka stworzymy algorytm, który pozwoli nam znaleźć najbliższy kafelek, który nasz awatar może zająć, aby dotrzeć do swojego celu. Ten zestaw będzie wykonywany powtarzalnie za każdym razem, gdy nasz awatar przemieszcza się po naszej siatce.

Ustawimy algorytm wewnątrz obiektu naszego awatara i będzie miał trzy główne punkty: znajdowanie sąsiednich kafelków, znajdowanie najbliższego sąsiedniego kafelka oraz ruch do tego sąsiedniego kafelka.

Photo_2019-07-29__5_39_25_PM.png

Znajdowanie sąsiednich kafelków

W tej części zbierzemy wszystkie sąsiednie kafelki, do których nasz awatar może przejść. Sprawdzimy cztery sąsiednie kafelki w jednym kierunku i zobaczymy, czy te kafelki mają blokadę na szczycie lub czy były wcześniej stąpnięte.

Photo_2019-07-29__5_40_24_PM.png

Pierwszym krokiem jest dodanie naszej tablicy 'Sąsiednie kafelki'. Tablica 'Kierunek' z 2 pustymi wartościami oraz cztery kierunkowe tablice, które mają po 2 wartości każda: N (0,1), S (0,-1), E (1,0), W( -1,0).

Pierwszym zachowaniem w naszym zestawie jest wyczyszczenie naszych sąsiednich kafelków. Ponieważ ten zestaw będzie wykonywany mnogokrotnie, musimy za każdym razem resetować zebrane 'sąsiednie kafelki'. Następne cztery zachowania to modyfikacje do tablicy 'Kierunek'. Ustalamy wartość tablicy 'Kierunek' cztery razy dla czterech kierunkowych tablic, a następnie wykonujemy zestaw poniżej. Robimy to, aby utworzyć pętlę z różnymi wartościami tablicy 'Kierunek' za każdym razem.

Photo_2019-07-29__6_04_42_PM.png

Teraz, gdy mamy kierunek, musimy tylko połączyć ich wartości x i y z atrybutem 'na kafelku' naszego awatara. Następnie będziemy mogli uzyskać naszą wartość docelową w tablicy 'Siatka', aby wiedzieć, czy ten kafelek był oznaczony jako blokowany.

'Kierunek x' to wartość tablicy 'Kierunek' o indeksie 0, 'uzyskany na kafelku' x to wartość 'uzyskany na kafelku' o indeksie 0. Wartość docelowa x to sumaryczne wartości 'kierunek x' i 'uzyskany na kafelku x'. To samo dotyczy wartości y, ale z indeksem docelowym 1.

'Docelowy wiersz y' to wartość w tablicy 'Siatka' pod indeksem 'Docelowego x'. A 'Wartość docelowa w wierszu y' będzie wartością w tablicy 'Docelowego wiersza y' pod indeksem 'Docelowy y'. To jest współrzędna w naszej siatce, która powie nam, czy była oznaczona jako blokowana.

Photo_2019-07-29__6_17_41_PM.png

Jeśli wartość w 'Wartości docelowej w wierszu y' wynosi 1, to wtedy kafelek docelowy oznaczony był jako zablokowany. Ale jeśli ta wartość nie wynosi 1, wtedy możemy kontynuować nasz zestaw.

Ponieważ nasze Wartości docelowe x i y przeszły nasz warunek, dodaliśmy nową pustą tablicę kafelka o nazwie 'Nowy sąsiedni kafelek'. To będzie przechowywać wartości Wartości docelowej x i y jako tablicę kafelka. Ustalamy wartość Wartości docelowej x na indeksie 0 'Nowego sąsiedniego kafelka' i Wartości docelowej y na jej indeksie 1.

Teraz uzyskujemy atrybut 'poprzedni kafelek' naszego awatara. Jeśli 'poprzedni kafelek' nie jest równy 'nowemu sąsiedniemu kafelkowi', to oznacza, że nowy kafelek nie był wcześniej przebywany. Następnie możemy bezpiecznie dodać 'Nowy Sąsiedni kafelek' do tablicy 'Sąsiednie kafelki', dołączając go. Ustawimy wartość 'poprzedni kafelek' później, po pomyślnym przeniesieniu naszego awatara do innego kafelka.

"Możesz rozszerzyć ten zestaw zachowań, tworząc 8 kierunkowych tablic, co pozwala twojemu awatarowi poruszać się w kierunkach diagonalnych."

Znajdowanie najbliższego sąsiedniego kafelka

Teraz, gdy zebraliśmy solidne sąsiednie kafelki, potrzebujemy tylko znaleźć sąsiedni kafelek, który jest najbliżej docelowego kafelka naszego awatara. Obliczymy to, korzystając z formuły odległości, która wykorzystuje wartości x i y naszego docelowego kafelka i sąsiednich kafelków.

W tym zestawie są dwa kluczowe punkty: inicjalizacja zmiennych do obliczeń oraz obliczenie odległości kafelków wewnątrz pętli.

a. Inicjalizacja zmiennych

Pierwszym krokiem jest uzyskanie liczby elementów w naszej tablicy sąsiednich kafelków. Następnie uzyskujemy atrybut 'kafelek docelowy' naszego awatara i sprawdzamy jego wartości x i y. Dodajemy 2 nowe pudełka pojemnikowe: 'Min odległość' i 'Indeks kafelka docelowego'. Ustalamy początkową wartość 'Min odległości' na 9999, a wartość 'Indeks kafelka docelowego' na 0. Minimalna odległość jest ustawiona na wysoką wartość, ponieważ potrzebujemy najmniejszej odległości od początku. Indeks kafelka docelowego to nasz indeks odniesienia w tablicy 'Sąsiednie kafelki', który ma najmniejszą odległość do naszego 'docelowego kafelka'.

Naszym głównym celem jest uzyskanie indeksu kafelka w tablicy 'Sąsiednie kafelki', który jest najbliżej naszego 'kafelka docelowego'.

Photo_2019-07-29__6_47_43_PM.png

b. Obliczenie odległości kafelków

W tym zestawie wykonamy obliczenia w pętli, którą wykonamy dla każdego sąsiedniego kafelka. Pętla powtarza się według 'liczby sąsiednich kafelków', a my uzyskujemy wartość kafelka z tablicy 'Sąsiednie kafelki' używając indeksu tej pętli.

Pobieramy wartości x i y tego sąsiedniego kafelka, a następnie obliczamy odległość pomiędzy naszym 'kafelkiem docelowym' a 'kafelkami sąsiednimi' za pomocą tej formuły:

odległość = sqrt((x2 - x1)^2+(y2 - y1)^2)
x1 = Kafelek docelowy x
x2 = Kafelek sąsiedni x
y1 = Kafelek docelowy y
y2 = Kafelek sąsiedni y

Najpierw odejmujemy ich wartości x i y, mnożymy je przez siebie, aby uzyskać ich wartości wykładnicze, dodajemy te wartości, a następnie wyciągamy pierwiastek kwadratowy z dodanych wartości, aby uzyskać wartość odległości.

Photo_2019-07-29__6_46_04_PM.png

Jeśli wartość 'Odległość' jest mniejsza niż wartość w naszym pojemniku 'Min odległość', to ustawiamy wartość 'indeks kafelka docelowego' na aktualny indeks pętli, który jest indeksem naszych pobranych kafelków w tablicy 'Sąsiednie kafelki'. Ustawiamy również wartość pojemnika 'Min odległość' na wartość 'Odległość', aby porównać ją z następnym kafelkiem w naszej pętli.

Po zakończeniu pętli porównaliśmy każdy z naszych sąsiednich kafelków i zdobyliśmy indeks kafelka sąsiedniego, który jest najbliżej naszego 'kafelka docelowego'.

Ruch do sąsiedniego kafelka

W tej ostatniej części naszego samouczka, przeniesiemy naszego awatara do najbliższego kafelka sąsiedniego i powtórzymy cały zestaw 'Znajdź ścieżkę', jeśli jeszcze nie przenieśliśmy się do naszego 'kafelka docelowego'.

Photo_2019-07-30__1_23_31_PM.png

Pierwszą rzeczą do sprawdzenia jest, czy nasza 'liczba sąsiednich kafelków' jest większa niż 0. To zapewnia, że będziemy się poruszać tylko wtedy, gdy na pewno uzyskaliśmy przynajmniej jeden zaufany kafelek sąsiedni.

Następnie 'Uzyskaj najbliższy kafelek' używając wartości 'indeks kafelka docelowego' z poprzedniego zestawu, aby uzyskać wartość tablicy 'Sąsiednie kafelki'.

Aby uzyskać dokładny punkt, do którego nasz awatar się przeniesie, będziemy potrzebować wartościach kafelka x i y, a także wartości atrybutów 'start x' i 'start y' naszej etykiety 'Siatka'. Następnie dodajemy wartość x naszego 'najbliższego kafelka' i wartość 'start x', a także to samo z wartościami y. Te dodane wartości to nasze punkty x i y, do których nasz awatar się przeniesie.

Przed przemieszczeniem się do tego punktu, ustawiamy 'poprzedni kafelek' naszego awatara na aktualną wartość atrybutu 'na kafelku'. Możemy uzyskać tę wartość 'na kafelku' z poprzednich zestawów. Następnie przesuwamy naszego awatara do naszych punktów docelowych, z czasem trwania 0.2.

Po zakończeniu zachowania 'Przenieś do punktu', ustawiamy wartość atrybutu 'na kafelku' naszego awatara na wartość tablicy 'Uzyskaj najbliższy kafelek'. Jeśli wartość tablicy 'Uzyskaj najbliższy kafelek' nie jest równa naszemu 'kafelkowi docelowemu', wtedy wykonamy zestaw 'Znajdź ścieżkę', tym samym powtarzając cały zestaw. Wartość atrybutu 'kafelek docelowy' możemy uzyskać z poprzedniego zestawu.

Naciskając na jakikolwiek niebieski kafelek, po pojawieniu się naszego awatara na siatce, zestaw 'Znajdź ścieżkę' zostanie uruchomiony. To spowoduje poruszanie się awatara z kafelka na kafelek.

Podsumowanie

W tym samouczku nauczyliśmy się tworzyć działania związane z odnajdywaniem ścieżek za pomocą obiektu opierającego się na tablicy, którą nazwaliśmy 'Siatką', która służy do przechowywania informacji, czy dany kafelek jest zajęty, czy nie. Możesz rozszerzyć ten pomysł, używając identyfikatorów obiektów jako informacji zamiast po prostu cyfr w naszej tablicy 'Siatka'. To da nam bardziej niezawodne informacje, które możemy wykorzystać podczas znajdowania ścieżki. Na przykład, możemy zdobyć atrybuty tego identyfikatora obiektu, aby sprawdzić, czy jest aktywny, czy nie, oraz czy pozwoli nam stąpać po swoim kafelku, czy nie.

Ten samouczek miał tylko służyć jako podstawowy pomysł na temat znajdowania ścieżek. Jedną z wad tego rozwiązania jest to, że nie tworzy najkrótszej możliwej ścieżki do kafelka docelowego i tylko sprawdza obecne sąsiednie kafelki. To może spowodować pętlę ruchu, która nigdzie nie prowadzi.

Niemniej jednak, można to rozwiązać, rozszerzając nasz algorytm znajdowania ścieżek. Możemy to zrobić, powtarzając poszczególne sąsiednie kafelki, aby uzyskać ich sąsiednie kafelki, aż znajdziemy nasz kafelek docelowy. Każdy znaleziony najbliższy kafelek sąsiedni zostanie dodany do listy. Aby zapobiec nieskończonej pętli, dodaj warunek, że jeśli ten sąsiedni kafelek został już sprawdzony, kafelek ten nie zostanie dodany do naszej listy. Dodaj również limit maksymalnej liczby powtórzeń, aby zapobiec nieskończonej pętli spowodowanej kafelkiem docelowym, jeśli jest zbyt daleko lub niemożliwe do znalezienia. Gdy ta iteracja znajdzie kafelek docelowy, opuszczamy iterację i zaczynamy przesuwać awatara z kafelka do kafelka, używając listy kafelków.