Tworzenie gier komputerowych to fascynujące zajęcie, które pozwala wcielić w życie najśmielsze pomysły i daje ogromną satysfakcję z tworzenia interaktywnej rozrywki. Dzięki postępowi technologii tworzenie gier stało się o wiele łatwiejsze niż kiedyś. Obecnie nie trzeba już znać skomplikowanych języków programowania ani posiadać dużego budżetu, aby stworzyć wciągającą grę. Jednym z najpopularniejszych i najłatwiejszych w obsłudze narzędzi do tworzenia gier jest biblioteka Phaser.js. Korzysta z niej wiele małych studiów i entuzjastów. Phaser pozwala tworzyć gry 2D na przeglądarki internetowe oraz urządzenia mobilne przy użyciu JavaScript. Dzięki bogatej funkcjonalności i prostemu interfejsowi programistycznemu można szybko osiągnąć zadowalające efekty. W tym poradniku przedstawione zostaną krok po kroku podstawy pracy z Phaser.js i tworzenia gier od podstaw. Omówione zostaną zagadnienia od instalacji, poprzez dodawanie grafiki, dźwięku i logiki, aż po finalną publikację gotowej gry. Dzięki temu każdy entuzjasta będzie mógł samodzielnie stworzyć prostą, ale w pełni funkcjonalną grę i zaznać satysfakcji z programowania.
Wprowadzenie do Phaser.js
Phaser.js to lekka biblioteka JavaScript stworzona z myślą o tworzeniu gier typu arcade i 2D. Jej główne zalety to:
- Prosta obsługa i nauka
- Szybki rozwój gier
- Bogactwo gotowych elementów
- Wsparcie dla WebGL i Canvas
- Łatwa optymalizacja wydajności
- Export do różnych platform
Dzięki Phaser można tworzyć gry działające w przeglądarce internetowej oraz jako aplikacje mobilne (iOS, Android). Biblioteka zawiera wszystko, co potrzebne do stworzenia podstawowej gry - grafikę, dźwięk, fizykę, detekcję kolizji i wiele więcej. Powstało na jej bazie już wiele tytułów od prostych gier arcade po zaawansowane gry akcji. Największą zaletą Phaser jest prosty i intuicyjny interfejs programistyczny. Nawet bez głębokiej znajomości JavaScriptu można stworzyć wciągającą rozgrywkę. Dzięki temu nadaje się świetnie dla początkujących programistów i hobbystów.
Instalacja i konfiguracja środowiska
Wymagania systemowe
Do pracy z Phaser.js wystarczy prosty edytor tekstowy i przeglądarka internetowa. Dodatkowo należy zainstalować:
- Node.js - środowisko uruchomieniowe JavaScript
- Menedżer pakietów npm
Zalecane jest użycie edytora kodu z podświetlaniem składni np. Visual Studio Code. Ułatwi to pisanie kodu i znajdowanie ewentualnych błędów. Całość działa na Windows, Linux oraz macOS.
Instalacja edytora tekstu
Visual Studio Code to darmowy, rozbudowany edytor tekstu przeznaczony głównie dla programistów. Oprócz podświetlania składni obsługuje debugowanie, podgląd git oraz rozszerzenia. Aby go zainstalować należy:
- Pobrać instalkę ze strony vscode.dev
- Uruchomić instalator i postępować zgodnie z instrukcjami
- Opcjonalnie zainstalować wtyczki np. Live Server do podglądu stron
Instalacja Node.js i npm
Node.js można pobrać ze strony nodejs.org. Zawiera on w sobie także menedżer pakietów npm. Aby zainstalować Node.js należy:
- Pobrać instalator dla swojego systemu z nodejs.org
- Uruchomić go i podążać za instrukcjami instalatora
- Sprawdzić poprawność instalacji uruchamiając komendę node -v w terminalu/konsoli
Po zainstalowaniu można przystąpić do tworzenia pierwszego projektu w Phaser.js.
Czytaj więcej: Dobre praktyki pisania kodu w zespole programistów
Podstawy pracy z Phaser.js
Struktura projektu
Podstawowa struktura projektu Phaser składa się zazwyczaj z następujących elementów:
- Plik index.html - główny plik HTML
- Folder /js - zawiera pliki JavaScript
- Folder /assets - na zasoby gry: grafiki, dźwięki itp.
- Plik /js/game.js - główny plik logiki gry
- Plik /js/config.js - ustawienia konfiguracyjne
W folderze /js znajdują się zazwyczaj pliki odpowiadające za poszczególne elementy gry np. sceny, poziomy, menu itd. Strukturę można dowolnie rozbudowywać wraz z rozwojem projektu.
Uruchamianie gry
Aby uruchomić grę wystarczy otworzyć plik index.html w przeglądarce internetowej. Można to zrobić na dwa sposoby:
- Klikając dwukrotnie na plik index.html
- Otwierając go z poziomu edytora kodu np. Visual Studio Code
Podczas developmentu warto korzystać z opcji automatycznego odświeżania przeglądarki np. wtyczki Live Server w VS Code. Pozwoli to zaoszczędzić czas przy testowaniu gry.
Scena i stan gry
Sercem każdej gry napisanej w Phaser.js jest obiekt Phaser.Game. Przechowuje on konfigurację gry oraz kontroluje jej stan. Stan gry z kolei zarządzany jest przez obiekty Phaser.State. Każdy stan to inny ekran np. menu, poziom, koniec gry. Phaser udostępnia system scen, które ułatwiają zarządzanie stanami i przejścia między nimi.
Dodawanie elementów do gry
Tekstury i spritesy
Podstawowymi elementami gry są tekstury, z których składają się spritesy. Tekstury to pojedyncze obrazy, natomiast sprites to obiekty wyświetlające teksturę na ekranie. W Phaserze tworzy się je następująco:
- Załadowanie tekstury: var texture = loader.load("obraz.png");
- Utworzenie spritesa: var sprite = game.add.sprite(x, y, texture);
Tekstury można ładować pojedynczo lub w postaci atlasów - plików zbiorczych. Gotowe spritesy można następnie skalować, obracać i animować.
Animacje postaci
Aby nadać obiektom w grze wrażenie życia tworzy się dla nich animacje. W Phaserze obsługuje się je za pomocą klatek animacji i generatorów animacji. Aby utworzyć animację należy:
- Przygotować atlas z klatkami
- Utworzyć generator animacji i dodać do niego klatki
- Podpiąć generator do spritesa
Generator animacji pozwala sterować prędkością odtwarzania i przejściami między animacjami. Pozwala to np. animować chodzenie, skakanie i inne ruchy postaci.
Efekty dźwiękowe
Oprawa dźwiękowa jest kluczowym elementem gier. Phaser obsługuje odtwarzanie plików dźwiękowych w formatach mp3, ogg i wav. Aby dodać efekty dźwiękowe należy:
- Załadować pliki: var sound = game.load.audio("efekt", "plik.mp3");
- Odtworzyć dźwięk: sound.play();
Możliwe jest odtwarzanie dźwięków w pętli, zmiana głośności i inne opcje. Efekty dźwiękowe można przypisać do różnych zdarzeń w grze np. skok postaci czy strzał.
Programowanie logiki gry
Wykrywanie kolizji
Istotną częścią każdej gry są interakcje między obiektami np. wykrywanie kolizji. W Phaserze możliwe jest wykrywanie kolizji na dwa sposoby:
- Arcade Physics - prosty, szybki system fizyki
- Matter.js - bardziej rozbudowana fizyka z symulacją ciał sztywnych
W obu przypadkach wystarczy dodać obiektom odpowiednie komponenty fizyczne, aby zaczęły oddziaływać między sobą realistycznie.
Sterowanie postaciami
Do poruszania się postaci służą kontrolery. Można zaimplementować własny system kontroli lub skorzystać z gotowych klas:
- Arcade Physics - proste sterowanie fizyką
- Tween - animacje i sekwencje ruchu
Typowe kontrolery obsługują ruch za pomocą strzałek, myszy i dotyku. Możliwe jest też dodanie sztucznej inteligencji do sterowanych postaci.
System punktowy
Aby dodać do gry system punktów lub poziomów można skorzystać z obiektów Phaser.Score i Phaser.Timer. Pozwalają one na:
- Zliczanie punktów i poziomów
- Wyświetlanie wyników na ekranie
- Obsługę limitu czasu
- Zapis najlepszych wyników
Dzięki temu gra staje się bardziej wciągająca i może mieć element rywalizacji. Wyniki można przesyłać do internetowych tabel lub zapisywać lokalnie.
Optymalizacja i publikacja gry
Poprawa wydajności
Aby gra działała płynnie nawet na słabszych urządzeniach, warto zadbać o jej optymalizację. Możliwe techniki to:
- Zmniejszanie liczby draw calls poprzez atlasy
- Wyłączanie niewidocznych obiektów
- Ograniczanie wykrywania kolizji
- Usuwanie niepotrzebnych obiektów
Phaser udostępnia narzędzia do profilowania wydajności gry, dzięki czemu łatwo zidentyfikować wąskie gardła.
Eksport do różnych platform
Gotową grę można łatwo eksportować do różnych platform dzięki wsparciu Phaser dla:
- Przeglądarek internetowych (HTML5)
- Urządzeń mobilnych (iOS, Android, Windows Phone)
- Desktop (Windows, Mac, Linux)
Wystarczy skonfigurować odpowiedni typ builda w
Tagi
Udostępnij
