Część 5 - Pierwszy gracz
Mamy już kuszące platformy ale nikogo do biegania po nich. Naprawmy to.
Stwórz nową zmienną player
i dodaj taki kod do funkcji create
. Możesz to zobaczyć w pliku part5.html
:
player = this.physics.add.sprite(100, 450, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 });
Dzieją się tutaj dwie rzeczy: stworzenie Physics Sprite (sprite z fizyką) i dodanie do niego animacji.
Physics Sprite
Pierwsza część kodu tworzy sprite:
player = this.physics.add.sprite(100, 450, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true);
Ten frgment tworzy sprite player
i umieszcza go we współrzędnych 100x450 pikseli od dołu gry. Ten konkretny sprite został stworzony za pomocą Physics Game Object Factory (this.physics.add
) co oznacza, że standardowo posiada on ciało Dynamic Physics (fizyka dynamiczna).
Po stworzeniu sprite'a nadajemy mu właściwość bounce (odbijanie) o wartości 0.2. Oznacza to, że gdy obiekt ląduje na podłożu odbije się od niego nieznacznie. Sprite jest zaadelkarowany jako taki, który zderza się z krawędziami świata. Krańce świata standarodowo są ustawione na wielkość okna gry. Jeżeli ustawiliśmy szerokość i wysokość na 800x600, gracz nie będzie mógł się przemieścić poza ten obszar. Zostanie on automatycznie przed tym powstrzymany.
Animacje
Jeżeli zerkniesz spowrotem na funkcje preload
, zobaczysz jak został załadowany sprite gracza (czyli 'dude'). Zwróc uwagę na to, że jest to arkusz sprite'ów. Zrobiliśmy tak ponieważ zawiera on klatki animacji. Oto jak wygląda plik z arkuszem sprite'ów w tym przypadku:
Znajduje się w nim 9 klatek, 4 dla biegania w lewo, 1 do patrzenia w przód i 4 do biegania w prawo. Uwaga: Phaser wspiera odwracanie sprite'ów żeby ograniczyć liczbę klatek. Dla uproszczenia tego poradnika zrobimy to jednak po staremu.
Definiujemy dwie animacje zwane kolejno 'left' i 'right'. Oto definicja animacji ruchu w lewo:
this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 });
Animacja 'left' używa klatek 0, 1, 2 oraz 3 i jest wyświetlania w prędkości 10 klatek na sekundę. Ustawienie 'repeat -1' mówi, że ma być ona wyświetlana w nieskończonej pętli.
Tak wygląda standardowy cykl klatek do biegania. Powtarzamy go dla biegania w prawo, zmieniamy jedynie klucz na 'right', a na koniec dodajemy 'turn' dla ostatniej klatki.
Informacje dodatkowe: W Phaserze 3 Animation Manager (menedżer animacji) jest globalnym systemem. Animacje stworzone za jego pomocą są dostępne dla wszystkich obiektów w grze. Dzielą one ze sobą klatki i specyfikę animacji ale każdy z nich ma oddzielną linię czasu. To pozwala na stworzenie jednej animacji i przypisanie jej do wielu obiektów. Jest to zasadnicza różnica w stosunku do drugiej wersji Phasera gdzie animacje należały do obiektów i nie były między nimi współdzielone.