[TuT] Tworzenie gier w JavaScript z pomocą biblioteki Phaser CZ.1

Writen · 24 Lipca 2014

Witajcie. Chciałbym wam zaprezentować mój artykuł pokazujący jak zacząć swoją przygodę z tworzeniem gier w javascript z użyciem biblioteki Phaser.

Jakby kto jeszcze nie klikał w moją sygnature to mówię, że wpis pochodzi z bloga http://idea-center.pl

http://gamedevcity.pl/

Wstęp

Biblioteka Phaser to bardzo rozbudowane narzędzie do tworzenia gier działających w przeglądarce internetowej. Posiada niezliczoną ilość gotowych funkcji pozwalających na stworzenie niemalże każdego typu gry. Jest to największa tego typu biblioteka.

W serii artykułów poświęconej tej bibliotece postaram się pokazać wam jak zacząć z niej korzystać oraz jak tworzyć proste gry.

Pierwsze kroki

W pierwszej kolejności należy przygotować swoje środowisko do pracy. Będziemy potrzebować edytora tekstu, np. Notepad++, Brackets lub jeżeli macie, wasze ulubione IDE.

Kolejnym krokiem będzie stworzenie katalogu roboczego, w którym będziemy przechowywać nasz projekt.

Ważną czynnością jest ściągnięcie biblioteki Phaser. W tym celu przechodzimy na stronę http://phaser.io/, a następnie klikamy przycisk Download & Get Started. Zostaniemy przekierowani na stronę repozytorium Github, z której powinniśmy pobrać archiwum zip. https://github.com/photonstorm/phaser/archive/master.zip
Po rozpakowaniu archiwum, w katalogu build znajdziemy plik phaser.js. Plik ten należy skopiować do wcześniej utworzonego katalogu naszego projektu.
W katalogu z naszym projektem musimy jeszcze utworzyć dwa pliki:

index.html, który będzie odpowiedzialny za wyświetlenie naszej gry w przeglądarce oraz
game.js, w którym będziemy pisać kod naszej gry

Struktura dokumentu HTML5

Przed przystąpieniem do pracy nad samą grą powinniśmy jeszcze wypełnić odpowiednio plik index.html, dzięki czemu nasza gra będzie poprawnie wyświetlać się w przeglądarce. Aby gra działała nasza strona musi być napisana w najnowszym standardzie HTML5. Jest to ważne, ponieważ gra będzie rysowana na tak zwanym płótnie, tj. elemencie Canvas, który jest dostępny od wersji piątej html’a.

Poprawna struktura pliku html wygląda następująco:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="phaser.js"></script>
<script src="game.js"></script>
</head>
<body>
</body>
</html>

Charakterystycznym dla tego kodu jest skrócony doctype, który określa że korzystamy z HTML5. W sekcji <head> dołączyliśmy naszą bibliotekę phaser oraz plik game.js. Ciało dokumentu może pozostać puste.

Wyświetlanie okna i podstawowe funkcje

Przyszedł czas na rozpoczęcie pisania kodu naszej gry. Od tej pory będziemy operować na pliku game.js.

Zacznijmy od utworzenia obiektu typu Phaser.Game

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload: preload, create: create, update: update, render: render});

Pierwsze dwa parametry ustalają kolejno szerokość i wysokość okna gry.

Trzeci parametr to kontekst renderowania, można ustawić automatyczny tak jak to widać powyżej lub Phaser.CANVAS oraz Phaser.WEBGL w zależności z czego chcemy korzystać.

Czwarty parametr jest pusty, możemy tam wpisać id elementu html, do którego chcemy wstawić naszą grę. Zostawiając to miejsce puste nasza gra będzie działać po prostu w ciele naszej strony.

Ostatnim parametrem jest obiekt, w którym ustalamy nazwy funkcji potrzebnych do działania gry.

Są to:

preload - wczytuje wszystkie zasoby takie jak grafika i dźwięki przed uruchomieniem gry

create - tworzy i wyświetla obiekty

update - aktualizuje obiekty oraz wychwytuje zdarzenia

render - służy głównie do renderowania tekstu, figur geometrycznych oraz debugowania gry

Teraz trzeba tylko zadeklarować powyższe funkcje. A więc całość będzie wyglądała tak:

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload: preload, create: create, update: update, render: render});
function preload() {}
function create() {}
function update() {}
function render() {}

Po otworzeniu w przeglądarce pliku index.html powinno ukazać się nam okno gry, będzie to na razie czarny prostokąt o wymiarach takich jak ustaliliśmy w pierwszej funkcji (800, 600).

Wyświetlanie grafiki

Aby wyświetlić grafikę najpierw musimy ją załadować w funkcji preload(). Możemy to zrobić dwoma funkcjami, w zależności czy:

wyświetlany ma być zwykły obrazek:

function preload() {
game.load.image('obrazek', 'obrazek.jpg');
}

wyświetlany ma być sprite, czyli część większego obrazka (arkusza sprite'ów):

function preload() {
game.load.spritesheet('sprite', 'sprite.png', 32, 32);
}

W funkcji load.image() mamy dwa parametry, które oznaczają kolejno identyfikator obrazka i adres obrazka. W drugiej funkcji load.spritesheet() dwa pierwsze parametry są takie same, a dwa kolejne określają wymiary pojedynczego sprite'a (szerokość i wysokość).

Wyświetlanie grafiki odbywa się w funkcji create().

Zwykły obrazek, który nie jest sprite'm:

function create() {
game.add.image(100, 100, 'obrazek');
}

Sprite będący częścią arkusza sprite'ów:

function create() {
game.add.sprite(100, 100, 'sprite', 1);
}

Obie funkcje są podobne i przyjmują takie same parametry. Dwa pierwsze to pozycja x i y, w jakiej ma zostać wyświetlony obrazek. Kolejny to identyfikator nadany w funkcji ładującej. Czwarty i piąty parametr są opcjonalne. Czwarty określa klatkę, czyli numer sprite'a. Piąty to grupa, do której ma należeć obiekt. O grupach powiemy sobie kiedy indziej, dlatego parametr ten został pominięty.

Podsumowanie części pierwszej

W następnych artykułach zostaną przedstawione kolejne funkcje niezbędne do zbudowania gry. Wyświetlanie tekstu, ładowanie dźwięków i manipulowanie stworzonymi obiektami to już w drugiej części. W trzeciej i czwartej zajmiemy się tworzeniem prostej gry platformowej, włączymy fizykę, dodamy kamerę oraz stworzymy pierwszych przeciwników.

Autor: Writen

Novante · 24 Lipca 2014

Jak na pierwszą część bardzo fajnie się zapowiada, czekam na więcej.

BlackPanda · 24 Lipca 2014

Zachęca do skorzystania.

Like It

Czekam na kolejne części.

Mr Fan · 24 Lipca 2014

Świetnie opisane Dzięki Tobie @Written może ten dział nie będzie tylko zlepkiem próśb i kłótni na temat php + 1% ciekawej dyskusji przez poważne osoby

BTW. Muszę zobaczyć co Pharser ma pod klapą, bo chcę ogarnąć na czysto Canvas

Writen · 25 Lipca 2014

Phaser korzysta rowniez z webgl.

Prosze o wiecej komentarzy.

Nygol · 27 Lipca 2014

Właśnie zainteresowałem sie Phaser'em. Dzięki temu możę powoli go ogarne Czekam na kolejne wpisy.

@PS rób jak najszybciej

Writen · 27 Lipca 2014

Drugą część piszę już miesiąc i nie mogę skończyć, bo ciągle coś mi wypada.

Nygol · 27 Lipca 2014

Trzymam kciuki aby wypaliło, Może wkońcu ktoś niektórzy zrozumieją że PHP sie nie nadaje. :-) (chociaż i tak wiem ze tutaj tylko względy silnika graficznego niż back-end)

Decisivee · 14 Sierpnia 2014

Poradnik przydatny:)

Writen · 29 Grudnia 2014

Dzisiaj został otworzony Polski Support Biblioteki Phaser http://phaser-polska.pl/

Support ten jest bardzo eksperymentalnym przedsięwzięciem mającym na celu utworzeniu polskiej społeczności twórców gier wykorzystujących tą bibliotekę. Każdego zainteresowanego zapraszamy.

Na chwilę obecną jest to tylko forum, ale planowana jest jego rozbudowa.

PS. Nie napisałem drugiej części, chociaż zabierałem się kilka razy to i tak wyszedł z tego stek bzdur. Postanowiłem ulepić z tego wiele mniejszych poradników, które na pewno znajdą się na forum supportu biblioteki Phaser w dziale FAQ.

Igorqqq · 25 Stycznia 2015

Super, czekam na więcej

Zaloguj się

👋 Witaj na MPCForum!

[TuT] Tworzenie gier w JavaScript z pomocą biblioteki Phaser CZ.1

Rekomendowane odpowiedzi

Writen

Writen

Novante

Novante

BlackPanda

BlackPanda

Mr Fan

Mr Fan

Writen

Writen

Nygol

Nygol

Writen

Writen

Nygol

Nygol

Decisivee

Decisivee

Writen

Writen

Igorqqq

Igorqqq

Zarchiwizowany