Wyświetlanie określonego duszka z arkusza sprite za pomocą Phasera

Próbuję stworzyć grę karcianą przy użyciu Phaser, frameworka JS HTML5. Ponieważ jestem okropnym artystą i nie mogę zaprojektować własnego, korzystam z darmowego arkusza z obrazami do gry, które znalazłem w Internecie. Problem polega na tym, że nie potrafię wymyślić sposobu wyświetlania poszczególnych kart za pomocą Phasera.

W poprzednim frameworku, z którego korzystałem, mogłem tworzyć pojedyncze mniejsze duszki z większego arkusza, z którego korzystałem. Ale nie mogę wymyślić, jak to zrobić w Phaserze, jeśli w ogóle jest to możliwe.

Więc pomyślałem o ładowaniu obrazu jako arkusza sprite, ale wygląda na to, że arkusze sprite są używane tylko do animacji i nie można tak naprawdę wyświetlić konkretnej „ramki” arkusza sprite (popraw mnie, jeśli się mylę).

Myślę, że to, co muszę zrobić, to załadować obraz jako mapę tilem, jednak konkretny obraz, którego używam, nie zawiera pliku json określającego układ (ani nie mogłem znaleźć takiego, który to zrobił). Jako nowy w javascript mam problem z odczytaniem kodu źródłowego Phaser, aby zobaczyć, jak należy sformatować plik json.

Podsumowując, jaki jest najlepszy sposób wyświetlania pojedynczej karty arkusza z kartami do gry w programie Phaser, biorąc pod uwagę, że nie mam pliku json określającego dane mapy?

var sprite = game.add.sprite(x, y, 'spritesheet_name');
sprite.frame = 0;

Arkusze sprite nie są ograniczone do animacji, to tylko jeden sposób na ich użycie. Animacja to tylko sposób wyświetlania różnych klatek w różnych momentach. Przez ręczne ustawienie ramki duszka możesz wyświetlić określoną część arkusza duszka.

Phaser obsługuje dwa typy arkuszy sprite: „klasyczne”, w których każda klatka ma dokładnie taki sam rozmiar, oraz „atlasy tekstur”, które są tworzone za pomocą aplikacji innej firmy, takiej jak Texture Packer, Shoebox lub Flash CC i są dostarczane z powiązanym plikiem json.

Ładujesz te „klasyczne”, w game.load.spritesheetktórych musisz określić szerokość i wysokość ramek oraz opcjonalnie ilość, tj .:

game.load.spritesheet('uniqueKey', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);

Aby załadować atlas tekstur, możesz użyć game.load.atlas. Wiele przykładów tego znajdziesz w repozytorium Phaser Examples.

Po załadowaniu utwórz duszka:

var sprite = game.add.sprite(x, y, 'spriteSheetKey');

Mówi to Phaserowi, aby używał obrazu z kluczem spriteSheetKeyjako teksturą. Domyślnie przeskoczy do ramki 0 arkusza duszków, ale możesz go zmienić sprite.framena dowolną inną prawidłową liczbę.

Jeśli duszek używał atlasu tekstur, łatwiej jest zmienić ramkę na podstawie nazwy ramki: sprite.frameName = 'card4'gdzie nazwa ramki jest dokładnie taka, jak określono w pliku json atlasu tekstur (otwórz ją i spójrz na nią, aby zobaczyć!).