Rozpoczął się ostatni tydzień kwietnia a to oznacza, że najwyższy czas przysiąść do projektu ‚gra co miesiąc’. Wbrew pozorom nie zostało mi wiele pracy. Nie licząc dzisiejszej, przewiduję jeszcze dwie większe aktualizacje i gra będzie gotowa.
Tym razem zmiany są niewielkie, ale potrzebne zanim zabiorę się za konkretniejsze rzeczy.
Co tak właściwie dziś doszło? Opracowałem ‚system’ zmiany poziomów. Tak jak pisałem w poprzednim poście, dane poziomów przechowywać będę plikach wygenerowanych przez Tiled. Na podstawie tych danych renderowany będzie jeden stan gry wyrenderuje aktualny poziom.
Wyżej użyłem cudzysłowia, bo ten ‚system’ to tak naprawdę bardzo prosty mechanizm. Mimo prostoty działa, a to najważniejsze 🙂 Efekt zobaczyć można klikając w obrazek powyżej. Dodałem do gry drugą planszę, której definicja znajduje się w pliku swamp.json. Aby przejść na drugi etap, gracz musi przekroczyć górną granicę zdefiniowanego świata. Wystarczy, że będzie podążać znajdującą się na planszy dróżką 🙂 .
Zacznę właśnie od tych ścieżek. Musiałem dodać na mapie obiekty, które w odróżnieniu od drzew nie będą wywoływały kolizji z graczem. Przede wszystkim dodałem nowe kafelki do mojego zestawu. Obecnie plik wygląda tak. W stanie renderującym poziomy, w metodzie create musiałem też zaznaczyć, które kafle na nowym secie generują kolizje:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
this.map.addTilesetImage('tileset'); this.map.setCollisionBetween(1,15); this.map.setCollisionBetween(20,21); this.map.setCollisionBetween(25,26); this.map.setCollisionBetween(30,31); this.map.setCollisionBetween(35,36); this.map.setCollisionBetween(40,41); this.map.setCollisionBetween(45,46); this.map.setCollision(50); this.map.setCollision(71); this.map.setCollision(81); this.map.setCollision(82); this.map.setCollision(86); |
Kolejny krok to zmiana zawartości plików z danymi o poziomach czyli forest.json oraz swamp.json. Teraz w zawartej w nich tablicy layers znajdują się dwa obiekty, reprezentujące dwie warstwy kafli. Jedna warstwa będzie generowała kolizje, druga nie. Oczywiście w Tiled bardzo łatwo wygenerować te struktury. Teraz wystarczyło tylko zdefiniować odpowiednie warstwy w stanie gry:
1 2 |
this.forest = this.map.createLayer('Tile Layer 1'); this.road = this.map.createLayer('Tile Layer 2'); |
Ten kod również umieszczam w metodzie create. Następnie w metodzie update zaznaczam, że kolizje generować ma tylko jedna z warstw:
1 |
game.physics.arcade.collide(this.hero, this.forest); |
I gotowe 🙂 .
Czas przejść do sedna wpisu, czyli ładowanie nowych plansz w jednym stanie. Tak jak pisałem na początku, mechanizm ten nie jest zbyt skomplikowany. Pierwsza zmiana znalazła się w metodzie create stanu inicjalizacyjnego:
1 2 |
game.levels = ['forest','swamp']; game.currLevel = 0; |
W głównym obiekcie gry definiuję dwa nowe pola. Pierwsze to tablica zawierająca łańcuchy znaków odpowiadające nazwom dostępnych w grze map. Drugie pole to indeks początkowej planszy.
Teraz w stanie gry mogę wykorzystać te zmienne do załadowania odpowiedniej mapy:
1 |
this.map = game.add.tilemap(game.levels[game.currLevel]); |
Voilà! Na początku gry wczyta się mapa forest. Teraz wystarczy że zmienię wartość pola currLevel i załaduję stan gry jeszcze raz. To właśnie się dzieje, gdy gracz spełni odpowiednie warunki. Póki co jedynym warunkiem jest dojście do końca mapy 🙂 W kodzie wygląda to tak:
1 2 3 4 |
if(this.hero.y <= 10 && !this.hero.leavingMap){ this.hero.leavingMap = true; this.heroLeave(); }; |
Jeżeli wartość y obiektu gracza będzie mniejsza niż 10 zostaje uruchomiona odpowiednia metoda. Ustawiam też flagę na postaci, dzięki której po przekroczeniu granicy nie będzie można już poruszać bohaterem.
Reszta kodu to tweeny, które animują wychodzącą z mapy postać oraz pokazują na ekranie odpowiednie powiadomienia tekstowe. Fragment kodu, który faktycznie ma znaczenie uruchamiany jest wewnątrz metody heroLeave. Nie będę przytaczał całej treści metody, zachęcam do przestudiowania jej na własną rękę. Najważniejszy kawałek, który odpalany jest po tweenach wygląda tak:
1 2 |
game.currLevel++; game.state.start('level'); |
Tak jak pisałem, bardzo prosty zabieg. Zwiększam wartość pola currLevel i uruchamiam stan na nowo. Póki co w grze są tylko dwa poziomy, więc gdy gracz ‚przejdzie’ drugi, gra wywali błąd i trzeba będzie odświeżyć stronę. Ale spokojnie, to spodziewane działanie.
Ponownie zachęcam do zbadania kodu na własną rękę. Można go obejrzeć na moim gicie. Jeżeli coś nie jest jasne, zachęcam do zadawania pytań w komentarzu, postaram się na wszystkie odpowiedzieć.
Co dalej z grą? Następna aktualizacja będzie pewnie najbardziej ekscytująca. Dodam w niej przeciwników 🙂 Następnie dorzucę kilka nowych etapów, poprawie błędy i gotowe. Jeszcze nie zająłem się błędami w animacji ataku (dzięki za zwrócenie uwagi Borys) ale do końca tygodnia wszystko powinno działać jak w zegarku :).
To wszystko na dziś. Jak zawsze zachęcam do polubienia mojej strony na facebooku. Na bieżąco zamieszczam tam informacje o nowościach na blogu, więc jeśli nie chcesz nic przegapić warto zostawić lajka.