Categories ProgramowaniePosted on

The Ship Game – (pixel) Grafika

Paweł SołtysiakLeave a Comment on The Ship Game – (pixel) Grafika

Gry składają się z trzech filarów: grafika, dźwięk oraz rozgrywka.

W tym poście poruszę temat pierwszy grafikę.

Zdolności plastycznych nie mam, a grafika w grze musi być.

Postawiłem na jedyny styl używany w grach który:

  • Rozumiem
  • Mogę go samodzielnie tworzyć
  • Wygląda jako-tako

Jak tworzyć taką grafikę?

Można użyć edytorów graficznych takich jak:

  • Gimp
  • Paint.net
  • Photoshop

Ale żaden z nich nie został stworzony z myślą o pixel artcie. Jednym z takich edytorów jest Aseprite.

Jest to płatny, ale open-source. Zapłacić trzeba za skompilowaną wersję przez autora. Jeżeli jesteśmy samodzielni programistami i mamy dostęp do kompilatora Visual Studio C++ możemy zbudować program z źródeł dostępnych na Githubie

Proces kompilacji jest opisany w pliku INSTALL.MD

W chwili pisania tego postu, można wybrać jaki backend UI będzie użyty w programie. Allegro lub Skia. Różnica między Allegro a Skia to kwestia czy chcemy mieć łatwiejszy proces kompilacji i mieć aplikacje która laguje przy przeciąganiu okienek aplikacji (backend Allegro)

Osobiście polecam skorzystanie z Skia, gdyż autor zamierza odejść od Allegro zupełnie.

Zgodnie z warunkami licencji na oprogramowanie Aseprite, nielegalne jest dzielenie się samodzielnie skompilowaną wersja.

Podstawy pixel artu

Jest parę prostych zasad których należy się trzymać podczas tworzenia grafiki pixel artowej.

Występują 4 rodzaje linii.

  1. Pionowa
  2. Skos ostry 1-1
  3. Skos ostry 2-1
  4. Pozioma

lines

Dzięki nim linie są ostre i lepiej wyglądają gdy patrzymy na nasz grafikę przy dużym powiększeniu lub pomniejszeniu.

Kolory

Stare gry takie na NESa miały bardzo małą gamę kolorów. Dzisiejsze komputery obsługują miliony różnych kolorów. Jednak polityka ograniczania ilości użytych kolorów nadal istnieje. Z dwóch powodów

  • Spójność – Mniej kolorów oznacza, że będzie potrzeba używania tych samych kolorów w całej grze. Dzięki czemu drzewa lub kamienie nie zdobędą nowego odcienia koloru za każdym razem, gdy „artysta” czyli ja siądzie do rysowania.
  • Większa kontrola – Mniejsza paleta kolorów, to też mniejszy problem do zarządzania, zmiana pojedynczego koloru nie jest tak dużym problemem jak przy palecie 200 kolorów. Nie ma potrzeby aktualizować wszystkich odcieni danego koloru.

Zdecydowałem się na paletę o Dawn Bringer 32 – nazwa pochodzi od forumowicza – Pixel Joint

color_pal

Więcej o Pixel Art

http://pixeljoint.com/forum/forum_posts.asp?TID=11299

Co tam panie w projecie słychać?

Nowości:

  • Zmieniłem wygląd statku, pod nową paletę kolorów.
  • Pojawiły się monety do zbierania
  • Nowa opcja ukrycia licznika FPS-ów (nie działa 🙂 )
  • Dodałem Babela – gra działa pod FireFox i MS Edge. Zastanawiam się czy nie porzucić wsparcia dla IE11.
  • Poprawiłem logikę sprawdzania kolizji, większa wydajność gdy na ekranie jest więcej przedmiotów.
  • Wprowadziłem nowe standardy dla kodu w TSLint.

Do zrobienia:

  • Naprawić hit-boxy statku
  • Zmienić Game-Loop na wzór, MainLoop.js
  • Zmienić zachowanie Timerów (strzelanie i pojawianie się monet) – powiązać go mocnej z game loopem.

Gra oraz Kod