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:
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