Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

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


11 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 17 czerwca 2014 - 22:19

#1

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ć. :P

 

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:
  1. index.html, który będzie odpowiedzialny za wyświetlenie naszej gry w przeglądarce oraz
  2. 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?


  • 2

logo-green-dark.png


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 18 czerwca 2014 - 23:01

#2

Super opisane :) Nawet ja, bez większej znajomości JS rozumiem, co tam się dzieje :) 

Czekamy na więcej i na jakieś demo (być może z downloadem? :) )


  • 0

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 18 czerwca 2014 - 23:28

#3

Nawet ja, bez większej znajomości JS rozumiem, co tam się dzieje

 

To własnie nazywamy "początkami" :D Wiele rzeczy z początku takie jest, później to tylko to: https://i.imgflip.com/1bgs.jpg

 

@autor: Generalnie jestem fanem JS'a i bardzo chętnie bedę czytał Twoje wpisy na ten temat ;)


  • 0

2ed58r7.png


writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 21 czerwca 2014 - 20:08

#4

Artykuł ten to była taka zajawka. Efekt lekkiego niedosytu był zamierzony. :-)
Już niedługo następny artykuł, w którym zostaną przedstawione kolejne funkcje niezbędne do zbudowania gry.
To będzie naprawdę niezbędne minimum, bo biblioteka posiada masę funkcji. Opisywanie wszystkich wiązałoby się z przepisywaniem dokumentacji. A nie o to mi chodzi. Dlatego w jeszcze kolejnych artykułach postaram się pokazać jak zrobić prostą grę platformową krok po kroku.

Moim celem też jest zbudowanie polskiego forum wsparcia tej biblioteki. Ale żeby to miało sens muszą się znaleźć też inni zainteresowani tą biblioteką.

Wysyłane z mojego LG-E400 za pomocą Tapatalk 2


  • 0

logo-green-dark.png


writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 03 stycznia 2015 - 12:10

#5
Pragnę wszystkich poinformować, że kilka dni temu miało miejsce uruchomienie forum Polskiego Supportu Biblioteki Phaser, które znajdziecie pod adresem:
 
 
Forum to ma być miejscem wsparcia polskich twórców gier korzystających z biblioteki Phaser.

 

Support ten został utworzony ze względu na zbyt małe wsparcie dla polskich developerów korzystających z Phaser'a. Od tej pory każda osoba tworząca lub chcąca stworzyć grę uzyska u nas pomoc.
 
Jako założyciele tego serwisu chcemy, aby Phaser (Polska) stał się cały czas rozrastającą społecznością developerów, twórców jak i projektantów gier. Mile widziani są tutaj początkujący programiści, tacy którzy dopiero zaczynają swoją przygodę z tworzeniem gier - to właśnie do nich, w głównej mierze, przeznaczony jest ten serwis. Zapraszamy również osoby bardziej zaawansowane, które tak jak my, kochają programować w JavaScript oraz tworzą lub chcą zacząć tworzyć gry działające w przeglądarce internetowej.
 
Serdecznie zapraszamy do korzystania z serwisu Phaser (Polska), do udzielania się w odpowiednich działach oraz pomagania w rozwiązywaniu problemów.

 

 

 
Zapraszam wszystkich zainteresowanych tworzeniem gier w JavaScript. Phaser to na prawdę godna uwagi biblioteka, która umożliwia w prosty sposób pisanie gier działających w przeglądarce internetowej. Każdy kto choć trochę zna JavaScript może zacząć pisać proste gry! W razie problemów chętnie pomogę na forum Phaser (Polska).

  • 0

logo-green-dark.png


Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 03 stycznia 2015 - 12:36

#6

Czy to Twoje forum ?


  • 0

2ed58r7.png


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 03 stycznia 2015 - 13:02

#7

Czy to Twoje forum ?

Na to wygląda :)


  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 03 stycznia 2015 - 15:37

#8

Czy to Twoje forum ?

A no moje. :P


  • 1

logo-green-dark.png


CarpeDiem

    Nowy użytkownik

  • 10 postów
    • Czas spędzony online: 30m 57s
1
Neutralna

Napisano 16 lutego 2015 - 15:04

#9

Wykorzystam w przyszłości, + za przejrzystość i estetykę :)


  • 0

przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 20 lutego 2015 - 13:12

#10

Korzystając z okazji, że ktoś używa Phasera zadam pytanie:)
Czy Phaser umożliwia interakcję z innymi elementami DOM poza canvas? Próbuję wymusic zmianę stanu gry przez klikniecie buttona. Używam do tego addEventListener ale coś jest nie tak. O ile sam event zostaje poprawnie przechwycony to game.state.start() zwraca mi bez przerwy "undefined". Stany gry inicjuję tak:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'canvas');
game.state.add('Boot', Boot);
game.state.add('Level_1', Level_1);
game.state.start('Boot');

natomiast tutaj uruchamiam planszę powitalną i próbuję tym nieszczęsnym buttonem uruchimć instancję "Level_1"

var button;
var Boot = function(game) {};

Boot.prototype = {
preload: function() {
	this.load.image('logo','img/logo_white.png');
	this.load.image('welcome','img/welcome.png');
	this.load.image('gradient','img/gradient.png');
},

create: function() {
	this.add.sprite(0,0,'gradient');
	this.stage.backgroundColor = '#ffffff';
	this.add.sprite(20,20,'logo');
	var cutters = this.add.tileSprite(0, 0, this.game.width, this.game.height,'welcome');
	cutters.autoScroll(-20,0);
	button = document.getElementById('startbtn');
	button.addEventListener('click',this.updateButton);
},

updateButton: function() {
this.game.state.start('Level_1');
}
};

Ma ktoś pomysł czemu to nie chce zadziałać?


  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 20 lutego 2015 - 21:05

#11

Musisz wywołać to po prostu tak: 

game.state.start('Level_1');

Słówko this wskazywało tutaj na kliknięty element, a nie na główny obiekt Boot.


  • 0

logo-green-dark.png


przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 21 lutego 2015 - 09:50

#12

Dzięki mistrzu działa elegancko:) Eh ten javascript nigdy się go chyba nie nauczę :D


  • 0





Podone tematy Collapse

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych