Paper 2D Game: Sprites oraz Camera

Paper 2D to system silnika Unreal Engine 4 służący do tworzenia gier 2D opartych na Sprites. Sprite to obraz przedstawiający obiekt w grze 2D.

Główne elementy wchodzące w skład Paper 2D to Sprite, Flipbook i TileSet / TileMap. Aby dodać te elementy do projektu, kliknij przycisk „Dodaj nowy” z przeglądarki treści i szukać „Paper2D”  kategorii : 

Flipbooki służą do sterowania animacją 2D opartą na sprite’ach. Mapy kafelkowe służą do tworzenia scenariuszy 2D przy użyciu zestawów kafelków.
Paper 2D może być używany na różne sposoby:

  • W tworzeniu czystej gry 2D; 
  • W grze 2D z trójwymiarowym tłem; 
  • Jako elementy 2D w grach 3D; 

W nadchodzących artykułach stworzymy przykład czystej gry 2D, używając tylko Sprites. Następnie pojawi się artykuł o kineografie i artykuł o TileSet / TileMap.


W tej grze gracz kontroluje czerwony samochód i musi unikać innych samochodów na ulicy. Poniższy obrazek pokazuje, jak będzie wyglądała gra.

Utwórz nowy pusty projekt bez korzystania ze “Starter Content:

Utwórz nowy poziom (New level) i wybierz „Empty Level”:

Zapisz poziom pod nazwą „Paper2dLevel”. Wejdź do menu „Edycja-> Ustawienia projektu…”, a następnie wybierz opcję „Mapy i tryby”. W „Default Maps” wybierz poziom „Paper2dLevel”.

Teraz zaimportujmy obrazy, które będą używane w grze. Pierwszy to obraz tła poniżej. Ten obraz ma wymiary 640×480 pikseli.

Zapisz obraz na swoim komputerze. Następnie kliknij przycisk „Importuj” w Wyszukiwarce bibliotek i wybierz obraz. Edytor utworzy teksturę, umieści nazwę tekstury jako „Tło”.


Kliknij teksturę prawym przyciskiem myszy i wybierz opcję „Utwórz Sprite” znajdującą się w podmenu „Działania Sprite”:

Zostanie utworzony Sprite o nazwie „Background_Sprite”. Kliknij dwukrotnie utworzony duszek, aby otworzyć edytor sprite:

Kliknij, aby powiększyć

Poszukaj właściwości „Piksele na jednostkę” i sprawdź, czy jest to „1,0”. Jeśli tak nie jest, zmień to. Zapisz, a następnie zamknij edytor duszków.
Poniższy obrazek posłuży do stworzenia dwóch Sprite’ów reprezentujących samochody w grze. Zapisz obraz i zaimportuj do edytora.

Kliknij prawym przyciskiem myszy utworzoną teksturę i wybierz opcję „Zastosuj ustawienia tekstury Paper2D” z podmenu „Sprite Actions”:

Następnie wybierz opcję „Wyodrębnij sprites” z podmenu „Działania spriteów”:

Redaktor spróbuje zidentyfikować Sprite na podstawie przejrzystości obrazu. Jeśli jest poprawny, po prostu kliknij przycisk „Wyodrębnij” w oknie pokazanym poniżej. Jeśli jest to niepoprawne, możesz zmienić właściwość „Tryb wyodrębniania spriteów” na „Siatka” i ręcznie skonfigurować rozmiar sprite’ów.

Zmień nazwę duszka czerwonego samochodu na „PlayerCar_Sprite”, a sprite’a niebieskiego samochodu na „EnemyCar_Sprite”. Otwórz te duszki w Edytorze sprite’ów i potwierdź, że właściwość „Piksele na jednostkę” ma wartość „1,0”.

Tło wzdłuż osi X i Z umieścimy w następujący sposób:

Rozmiar obszaru gry jest równy rozmiarowi tła, które ma 640×480. Granice ulic określają wartości X = 160 i X = 480.

Przeciągnij „Background_Sprite” i upuść w dowolnym miejscu w oknie roboczym edytora. Edytor automatycznie tworzy „PaperSpriteActor”. Zmień wartość „Lokalizacja” tła na (X = 320, Y = 0, Z = 240). Ta pozycja reprezentuje środek Sprite, tak że lewy dolny róg Tła pozostaje na początku (X = 0, Y = 0, Z = 0), jak na powyższym obrazku.
Kliknij prawym przyciskiem myszy w rzutni i wybierz opcję „Umieść aktora -> Aktor kamery”, aby dodać kamerę:

Ta kamera ustawi widok gry. Zmień wartość „Lokalizacja” kamery na (X = 320, Y = 500, Z = 240). Obróć kamerę o -90º w osi Z, tak aby wskazywała na Tło. Poniższy obrazek przedstawia kamerę w edytorze z podglądem sceny przechwytywanej przez kamerę.

We właściwościach kamery zmień „Tryb projekcji” na „Ortograficzny”. Ustaw „Szerokość orto” na 640 iw polu „Współczynnik proporcji” kliknij pole kombi i wybierz 640×480. We właściwości „Automatycznie aktywuj dla gracza” kliknij pole kombi i wybierz „Gracz 0”, aby była to kamera używana w grze. Ten obraz przedstawia właściwości aparatu.

W następnych artykułach stworzymy schematy, które są częścią gry.


Źródło:https://romeroblueprints.blogspot.com/2015/06/paper-2d-game-sprites-and-camera.html