SpriteKit Advanced - Jak zbudować grę 2,5D (część I)

Wprowadzenie

Ten artykuł dotyczy graficznej ewolucji Raft Challenge od prototypu do produktu końcowego. Jest przeznaczony dla osób, które myślą o stworzeniu własnej gry z grafiką taką jak Raft, ale nie wiedzą dokładnie, jak zacząć.

Sam początek Raft Challenge

Raft Challenge narodził się podczas pierwszego hakatonu organizowanego przez All In Mobile. Pomysł polegał na stworzeniu gry, w której gracz unika przeszkód. Chcieliśmy, aby wszystko było jak najprostsze.

Po weekendzie mieliśmy prototyp wyglądający tak:

Raft Challenge wygrał hackathon. Firma ogłosiła, że ​​zgromadzi środki na ulepszenie gry.

Zróbmy to 2,5D!

Na początku projektu Raft miał najprostszą możliwą grafikę. Widok był bezpośrednio na płaską teksturę ziemi, z kolorowymi kółkami wskazującymi gracza i wrogów. To było piękne i tak proste, jak kod poniżej. Potem przyszedł nasz grafik i wszystko zepsuł. Powiedział: „Zróbmy to 2,5D!”. Wyzwanie zostało przyjęte, a powyższa animacja była wynikiem.

Po hackathonie pojawił się ponownie. Tym razem było to coś więcej niż jedno zdanie.

To był zły uśmiech i ten film:

Wyjaśnienie perspektywy

Ok, porzućmy akt :-). Chciałem dać mu poczucie, że to on kieruje. Ale tu jestem szefem! Perspektywa jest łatwa do zaimplementowania w kodzie, niezależnie od używanego silnika 2D.

Najpierw musimy ustalić, gdzie chcemy umieścić punkt zbiegu. Poniższy przykład pokazuje ten punkt na środku płótna.

Raft Challenge ma ten punkt w górnej połowie ekranu, ponieważ niebo i wszystko nad głową nie jest tak ważne jak przeszkody na rzece.

Jak powstają same duszki? Chociaż może to być oczywiste dla kogoś z wykształceniem artystycznym, dla osoby technicznej niekoniecznie jest jasne.

Istnieją dwie zasady:

  • Części ruchome należy narysować wzdłuż linii pomocniczych, jak pokazano powyżej
    Wszystkie te linie przecinają się w punkcie zbiegu

Uwaga: część wybrzeża nie osiąga punktu zbiegu. Zatrzymuje się gdzieś na środku, pozostawiając przezroczysty obszar za sobą.

  • Ten pusty obszar między grafiką a punktem zbiegu ma ważny cel
    Będzie trzymał elementy, które są dalej.

Części te są wykonywane przez zastosowanie dwukrotnie mniejszej skali dla każdego kroku. Powstały obraz powinien być bezproblemowy, jeśli tekstura jest dobrze wykonana.

Montaż sceny

Po przygotowaniu wszystkich naszych zasobów musimy je wszystkie umieścić na scenie.

Zobaczmy, jak to wygląda w Raft Challenge.

Zaczynając od dołu:

  1. Warstwy tła
    tło
    Trawa
    Dno mgły
    Słońce
    Góry
    Linia horyzontu
  • Wszystkie te warstwy są statyczne, nie ruszają się
  • Tło działa zarówno na niebo, jak i na wodę
  • Tło jest zwykłym gradientem
    Jest rozciągnięty, aby wypełnić cały ekran urządzenia
    Proporcje obrazu są ignorowane
  • Możemy łączyć warstwy inne niż Tło w celu zwiększenia wydajności, chyba że chcemy zmienić niektóre właściwości
  • Możemy przesunąć słońce podczas gry
     lub zamienić góry na coś innego

2. Warstwy perspektywiczne
Drzewa z odbiciami
Wybrzeże
Przeszkody

  • Dla przejrzystości powyższego obrazu pogrupowano warstwy o podobnej zawartości
    Byli:
    2 warstwy przeszkód
    8 warstw wybrzeża
    8 warstw drzew z odbiciami
  • Te warstwy są powiększane o 2, gdy gracz porusza się do przodu
  • Kolejność tych warstw zależy od
    dystans
    bliższe są na górze
    priorytet
    Przeszkoda> Wybrzeże> Drzewa

3. Charakter

  • Jeśli Przeszkoda znajduje się w najbliższej możliwej pozycji, może mieć pozycję Z wyższą niż sama Postać
    W tym przypadku Przeszkoda obejmuje Postać, co jest pożądane

4. GUI

  • Dobra grafika powinna zależeć od złudzeń i sztuczek zamiast sprzętu

streszczenie

Ten artykuł powinien dać nam pomysł, jak podejść do problemu tworzenia zasobów w grze 2,5D i organizowania ich w scenę.

Możesz przeczytać część 2 tej serii tutaj.

O autorze: Kamil Ziętek jest programistą iOS na www.allinmobile.co