Nie będę wywoływał pieprzonego API, czyli ładowanie plansz w JSON

Powracam do Phasera, próbuję zrobić w nim teraz grę. Ale tak - API niby proste, ale i tak trzeba napisać trochę kodu inicjalizującego, zanim cokolwiek się pokaże na ekranie, co jest upierdliwe.

Niby jest to prosty kod i ogranicza się do wywoływania metod w stylu

• game.load.image(...),
• game.add.sprite(....)

etc.

ale i tak, jeśli muszę ładować ileś sprajtów, to ten kod staje się brzydki i w stylu copy-pastego.

	game.load.image('zolnierz', 'img/zolnierz.png');
	game.load.image('bandzior', 'img/bandzior.png');
	game.load.image('czolg', 'img/czolg.png');
	game.load.image('ulica', 'img/ulica.png');
	...
	game.add.sprite(10, 100, 'zolnierz');
	game.add.sprite(10, 150, 'zolnierz');
	game.add.sprite(10, 200, 'zolnierz');
	game.add.sprite(0, 0, 'ulica');
	var czolg = game.add.sprite(0, 50, 'czolg');
	game.physics.enable(czolg, PHYSICS);
	czolg.body.velocity.x = 3;
	var bandzior = game.add.sprite(200, 200, 'bandzior');
	game.physics.enable(bandzior, PHYSICS);
	bandzior.body.velocity.x = 10;
	bandzior.body.velocity.y = 1;

view raw phaser-dumb.js hosted with ❤ by GitHub

Trochę bez sensu, prawda (a tak jest w tutorialach, więc tak się chyba tam robi)? Dlatego więc zrobiłem sobie własny loader do sprajtów:
i zamiast kodować ręcznie game.add.sprite, to piszę sobie JSONa, który zawiera wszystkie sprajty i definicje:

	{
	"images": [
	["zolnierz", "/img/bandzior.png"],
	["bandzior", "/img/bandzior.png"],
	["czolg", "/img/czolg.png"],
	["ulica", "/img/ulica.png"]
	],
	"levels": [
	{
	"objects": [
	{"x" 10, "y":100, "zolnierz"},
	{"x" 10, "y":150, "zolnierz"},
	{"x" 10, "y":200, "zolnierz"},
	{"x" 0, "y":50, "czolg", "vx": 3},
	{"x" 0, "y":0, "ulica"},
	{"x" 200, "y":200, "bandzior", "vx": 10, "vy": 1}
	]
	}
	]
	}

view raw level-json.js hosted with ❤ by GitHub

Prawda, że wygląda dość prosto? ;)

No więc tym sposobem mam w zasadzie całą planszę w postaci struktury danych w pliku JSON. Strukturę tę później ładuję do skryptu i w pętli przechodzę przez wszystkie obiekty i obrazki i robię automatyczne ich ładowanie.

Co mi to daje?

• mniej bezsensownego pisania. Jak chcę, żeby jednostka w grze się poruszała, dodaję po prostu właściwości vx i vy (prędkość pozioma, pionowa)
  {........ "vx": 10, "vy": 1}
  a nie piszę za każdym razem sprite.body.velocity.x = 10; sprite.body.velocity.y = 1, co swoją drogą jest dość błędo-genne
• mogę (i taki mam zamiar w niedalekiej przyszłości) zrobić własny edytor plansz. Tym sposobem mam już załatwiony format pliku z levelami, który będę mógł sobie od ręki załadować.
• jestem niezależny od frameworka. Jak będę chciał przejść na inny javascriptowy framework (albo nawet jakiś framework w innym języku programowania) też będę mógł to zrobić prosto. Wystarczy, że napiszę kod ładujący mi levele w moim formacie
• proste ładowanie plansz przez internet, wgram sobie JSONa, mam kolejną planszę.

itp.

Oczywiście, Ameryki nie odkrywam, jestem pewien że jak ktoś robi na poważnie grę z ilomaś levelami, też ma jakiś swój format plików albo korzysta z gotowych.

Nawet PhaserJS pozwala ładować plansze z programu Tiled (w formacie TMX). No ale jest to format oparty o kafelki, co mnie obecnie nie interesuje.

Więc postanowiłem stworzyć własny format i własny loader plansz. Możecie zerknąć:
https://github.com/hex13/phaser-loader
chociaż na razie jest to bardzo wczesna wersja i póki co dość chaotyczna (w zasadzie obecnie część ładowania odbywa się w pliku phaser-loader.js, a część w skrypcie w index.html, co jest nie do końca dobre).