Czas powoli ucieka, ale wciąż jest szansa, że uda mi się ukończyć czerwcową grę na czas. Na szczęście, dzięki ostatniej aktualizacji, dodawanie do gry nowych elementów jest bardzo proste. Dowodem na to jest temat dzisiejszego posta.
Tym razem do projektu dodałem obiekty drzwi. Elementy te automatycznie otwierają się gdy gracz się do nich zbliży. Natomiast, gdy gracz się oddali, drzwi zamkną się. Niektóre z nich nie otworzą się dopóki nie zostanie znaleziony odpowiedni klucz 🙂
Opisywaną dziś wersję gry można przetestować klikając w obrazek powyżej. Aktualizowany na bieżąco kod gry dostępny jest w tym repozytorium na github. Wersja przedstawiona w poście dostępna jest po zajrzeniu w źródło strony gry 🙂 .
tak jak pisałem wyżej, w tej aktualizacji dodałem do gry drzwi 🙂 . Tak jak w przypadku elementów dodanych dotychczas, stworzenie nowych drzwi wiąże się z użyciem metody fabryki przypisanej do głównego namespaca. Metoda ta znajduje się w osobnym pliku doors.js. Tak wygląda jego zawartość:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
Robot.createDoor = function(game,x,y,locked){ var door = game.add.sprite(x, y, 'door'); game.physics.arcade.enable(door); door.body.immovable = true door.locked = locked; door.open = false; door.doorSFX = game.add.audio('door'); door.doorLockedSFX = game.add.audio('doorLocked'); door.openZone = game.add.sprite(x-64, y); game.physics.arcade.enable(door.openZone); door.openZone.body.setSize(door.width, door.height); door.openZone.width = 160; door.openDoor = function(){ if(!this.locked){ this.doorSFX.play() if(this.tween && this.tween.isRunning){ this.tween.stop(); } this.tween = game.add.tween(this) this.open = true; this.tween.to({height: 0}, 500); this.tween.start(); } else { this.doorLockedSFX.play() this.open = true; } } door.closeDoor = function(){ if(!this.locked){ this.doorSFX.play() if(this.tween && this.tween.isRunning){ this.tween.stop(); } this.tween = game.add.tween(this) this.open = false; this.tween.to({height: 128}, 500); this.tween.start(); } else { this.open = false; } } return door; } |
Funkcja createDoor, tworząca obiekty drzwi, przyjmuje cztery argumenty. Pierwszy to referencja do obiektu game, dwa kolejne to współrzędne nowych drzwi. Ostatni argument to wartość boolowska zawierająca informację o tym czy drzwi są zamknięte na klucz czy nie.
Wewnątrz funkcji, tworzę phaserowy obiekt i przypisuję mu wszystkie potrzebne informacje. Warto zwrócić uwagę, że ustawiam wartość pola immovable obiektu body na true. Bez tego, gracz mógłby przesuwać drzwi podczas kolizji z nimi. Oczywiście jest to efekt niepożądany 🙂
Dodaję też dwie zmienne określające stan drzwi i przypisuję je do tworzonego obiektu. Są to locked czyli „zakluczone”, i open czyli otwarte. Pierwsza zmienna przechowuje informacje o tym czy gracz posiada klucz do danych drzwi, druga, czy drzwi są fizycznie otwarte. Oczywiście drzwi mogą być zamknięte ale nie „zakluczone”. Powinno stać się to bardziej jasne, gdy przejdę do opisu mechanizmu zamykania i otwierania drzwi.
W kolejnych paru linijkach kodu definiuję kolejny sprite i przypisuję go do pola openZone obiektu do zwrócenia. Sprite ten nie ma przypisanego żadnego obrazka, ponieważ nie ma być widoczny. Ma on wysokość drzwi ale zaczyna się o 64 pixele przed drzwiami. Jego szerokość natomiast, jest równa pięciu szerokościom obiektu drzwi. Dzięki temu „wystaje” przed i za drzwiami. Na podstawie tego obiektu będę wykrywał kiedy drzwi powinny zacząć się otwierać a kiedy zamykać.
Na koniec powstają dwie metody przypisane do głównego obiektu drzwi. Są to openDoor i closeDoor. jak wskazują nazwy, służą one do otwierania i zamykania drzwi. Bazują na bardzo przydatnych operacjach tween phasera. Jeżeli drzwi nie są „zakluczone” (locked równe false) metody uruchamiają tween, który zmniejsza wysokość drzwi do zera, lub rozwija ją do maksymalnej wysokości. Na początku zatrzymuje wszystkie trwające tweeny na wypadek jakby drzwi właśnie się otwierały / zamykały.
Skoro mam drzwi, to muszę dodać klucz 🙂 . To będzie kolejny ‚moduł’ dodany do gry. Znajduje się w pliku key.js. Tutaj oczywiście znajduje się fabryka tworząca obiekty potrzebne do otwarcia ‚zakluczonych’ drzwi. Oto zawartość tego pliku:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Robot.createKey = function(game,x,y,door){ var key = game.add.sprite(x, y, 'key'); game.physics.arcade.enable(key); key.getKeySFX = game.add.audio('getKey'); key.door = door; key.anchor.setTo(0.5, 0.5); key.update = function(){ this.rotation += 0.01; } return key; } |
Metoda createKey, tworząca obiekty kluczy, również przyjmuje cztery argumenty. Trzy pierwsze mają te same działanie co w przypadku metody createDoors. Ostatni argument to referencja do drzwi, które dany klucz otwiera.
Nowy obiekt klucza tworzę tak jak każdy inny sprite w phaser. Dodaję do niego jeszcze funkcję update, której każde wywołanie obraca trochę klucz. Będzie ona wywoływana w metodzie aktualizującej stanu gry. Dzięki temu klucz będzie powoli obracał się w okół swojego środka.
Teraz wystarczy złożyć to do kupy. Potrzebuję do tego dwóch metod. Jednej do obsługi interakcji pomiędzy robotem a drzwiami a drugiej do obsługi kolizji pomiędzy robotem a kluczami. Obie te metody umieszczam w „module” config. Wyglądają one tak:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
handleDoor: function(robot,door){ var boundsR = robot.getBounds(); var boundsD = door.openZone.getBounds(); if(Phaser.Rectangle.intersects(boundsR, boundsD) && !door.open){ door.openDoor(); } if(!Phaser.Rectangle.intersects(boundsR, boundsD) && door.open){ door.closeDoor(); } }, checkKeys: function(robot,keys){ for (var i = 0; i < keys.length; i++) { var key = keys[i]; var boundsR = robot.getBounds(); var boundsK = key.getBounds(); if(Phaser.Rectangle.intersects(boundsR, boundsK)){ key.door.locked = false; if(key.alive){ key.getKeySFX.play(); } key.kill(); } else { } } } |
jak widać, działanie obu metod jest bardzo proste. Pierwsza z nich, handleDoor. Sprawdza czy robot koliduje ze strefą otwierania drzwi. Jeżeli tak, a drzwi nie są otwarte, uruchamiana jest metoda openDoor drzwi. Jeżeli gracz nie koliduje z drzwiami a są one otwarte, uruchamiana jest metoda closeDoor.
Druga metoda, checkKeys, Działa bardzo podobnie. Jeżeli zostanie wykryta kolizja pomiędzy, którymś z kluczy a robotem, sprite klucza jest usuwany z gry a wartość locked drzwi, którym jest on przypisany, zmienia się na true.
Wszystko to łącze w stanie gry, znajdującym się w pliku level.js. Nie będę już opisywał kodu z tego stanu (można go obejrzeć w źródle strony). Wszystko powinno być w miarę jasne. Jeżeli jednak coś będzie niezrozumiałe, daj znać w komentarzach, chętnie odpowiem na wszelkie pytania.
I to wszystko jeśli chodzi o dzisiejszą aktualizację. Gra zaczyna nabierać coraz ciekawszych kształtów. W kolejnej aktualizacji pojawią się przeciwnicy 🙂
Na koniec, jak zawsze, zachęcam do polubienia mojej strony na facebooku. Zawsze na bieżąco zamieszczam tam informacje o nowościach, więc warto polubić aby nie przegapić żadnego nowego wpisu.