Witajcie. Chciałbym wam zaprezentować mój artykuł pokazujący jak zacząć swoją przygodę z tworzeniem gier w javascript z użyciem biblioteki Phaser.
Pisanie to moja nie najmocniejsza strona, ale zawsze chciałem się w to bawić.
Oryginalny wpis można znaleźć pod adresem http://codetogame.pl...ki-phaser-cz-1/
Na blogu http://codetogame.pl/ będę publikował swoje inne wpisy dotyczące programowania gier. Oraz znajdą się tam też wpisy innego autora, np. poradniki dotyczące tworzenia gier w Unity.
Zapraszam do krótkiej lektury części pierwszej:
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/p...hive/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
Aha. I pytanie. Czy uważacie, że ten tekst jest dobry do zrozumienia dla początkujących?