Witaj w pierwszym tutorialu dotyczącym tworzenia gier w Phaserze 3. Nauczysz się z niego jak stworzyć małą grę, w której gracz będzie biegał i skakał po platformach, kolekcjonował gwiazdki i unikał przeciwników. Podczas nauki przeprowadzimy Cię przez podstawowe funkcje frameworka.
Czym jest Phaser?
Phaser jest opartym na HTML5 frameworkiem s┼éu┼╝─àcym do tworzenia gier. Jego celem jest usprawnienie i przy┼øpieszenie procesu pisania zaawansowanych, przeno┼ønych gier. Zosta┼é on stworzony po to by wykorzysta─ç zalety nowoczesnych przegl─àdarek, zar├│wno tych mobilnych jak i desktopowych. Jedynym wymaganiem Phasera jest obs┼éuga znacznika canvas.
Wymagania
Pobierz ten plik zip ÔÇô zawiera on ka┼╝dy krok tego poradnika w postaci kodu oraz wymaganych plik├│w.
Wymagana jest bardzo podstawowa wiedza na temat j─Özyka JavaScript.
Pami─Ötaj r├│wnie┼╝ by przeczyta─ç Przewodnik wprowadzaj─àcy, poka┼╝e Ci on jak pobra─ç framework, skonfigurowa─ç lokalne ┼ørodowisko, a tak┼╝e pozwoli rzuci─ç okiem na struktur─Ö projektu w Phaserze oraz jego podstawowe funkcje.
Je┼╝eli przebrn─à┼ée┼ø ju┼╝ przez Przewodnik wprowadzaj─àcy, masz skonfigurowane ┼ørodowisko testowe i mo┼╝esz rozpocz─à─ç kodowanie. Pobierz pliki tego tutoriala i wypakuj je w g┼é├│wnym folderze Twojego serwera WWW.
Otwórz plik part1.html w Twoim ulubionym edytorze. Przyszedł czas na zapoznaniem się z kodem. Po linijkach dołączających Phaser oraz zawierających podstawowy HTML5 znajdziesz:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload ()
{
}
function create ()
{
}
function update ()
{
}Obiekt config zawiera ustawienia Twojej gry. Istnieje wiele opcji, kt├│re mo┼╝esz deklarowa─ç w tym obiekcie. Dowiesz si─Ö o nich stopniowo powi─Ökszaj─àc wiedz─Ö o Phaserze. W tym poradniku ustawimy jedynie spos├│b renderowania, wymiary i domy┼øln─à scen─Ö.
Instancja objektu Phaser.Game jest przypisana do lokalnej zmiennej nazwanej po prostu game i obiekt zawierający konfigurację jest do niej przekazywany. Tak rozpoczyna działanie framework.
W wersji drugiej Phasera obiekt game zachowywał się jak interfejs udostępniający wszystkie wewnętrzne systemy i często wykorzystywany był poprzez globalną zmienną. Phaser 3 nie działa w taki sposób i nie udostępnia już globalnej instancji gry.
W┼éa┼øciwos─ç┬átype mo┼╝e przyj─à─ç warto┼øci Phaser.CANVAS, Phaser.WEBGL albo Phaser.AUTO. Opcja ta okre┼øla metod─Ö renderowania grafiki. Rekomendowana warto┼ø─ç Phaser.AUTO sprawia, ┼╝e Phaser spr├│buje uruchomi─ç si─Ö w trybie WebGL i automatycznie zmieni spos├│b renderowania na canvas je┼╝eli tryb ten nie jest obs┼éugiwany przez przegl─àdark─Ö. Element canvas, w kt├│rym renderowana jest gra, zostanie dodany do dokumentu w miejscu wywo┼éania skryptu lub mo┼╝na go umiejscowi─ç za pomoc─à odpowiedniej konfiguracji w innym elemencie nadrz─Ödnym dokumentu.
W┼éa┼øciwo┼øci width i height odpowiadaj─à za rozmiar tworzonego przez Phaser elementu canvas. W tym przypaddku b─Ödzie to 800 na 600 pikseli. ┼Üwiat gry mo┼╝e skalowa─ç si─Ö do dowolnych rozmiar├│w ale zostanie wygenerowany w┼éa┼ønie w takiej rozdzielczo┼øci.
Parametr scene zostanie dok┼éadniej opisany w dalszej cz─Ö┼øci tego poradnika.