Rysowanie dużego terenu z poziomym przesuwem bocznym 2D


12

Jestem względnie dobrym programistą, ale teraz, gdy chodzi o dodanie kilku podstawowych poziomów do mojej gry 2D, trochę utknąłem.

Co chcę zrobić: akceptowalny, duży (8000 * 1000 pikseli) poziom testowy „zielonych wzgórz” dla mojej gry.

  • Jak najlepiej to zrobić?

Nie musi wyglądać świetnie, po prostu nie powinno wyglądać, jakby został wykonany w farbie MS za pomocą narzędzia linii i wiadra z farbą.

Zasadniczo powinien po prostu błoto z trawą na nim, ukształtowane w jakiejś formie wzgórz.

Ale jak mam to narysować, nie mogę po prostu wyciągnąć narzędzia ołówka i zacząć rysować piksel na piksel, prawda?


2019, pytanie jest nadal aktualne :)
Город

Odpowiedzi:


20

Program Photoshop ma efekty warstw, które można wykorzystać do szybkiego rysowania dobrze wyglądających poziomów. Nie wiem, czy to zadziała z GIMP, ale oto kilka kroków, jak szybko uzyskać coś na ekranie za pomocą Photoshopa:

Instrukcje

  1. Zdobądź trochę brudu i tekstur trawy. Ten, którego używam w moim przykładzie, pochodzi z tego zestawu dowolnych tekstur .
  2. Otwórz teksturę brudu w Photoshopie. Wybierz wszystko Ctrl-Ai skopiuj Ctrl-C. Następnie wybierz Edit > Define Pattern...z menu. Nazwij swój wzór „Brud”.
  3. Zrób to samo z teksturą trawy, nazwij ją „trawa”.
  4. Utwórz nową warstwę w Photoshopie i zastosuj efekt Pattern Overlayi Strokena swojej warstwie. Wybierz wzór „Brud” dla nakładki i wzór „Trawa” dla swojego Obrysu (patrz zdjęcia poniżej).
  5. Maluj dowolnym pędzlem na warstwie ... zamiast nudnego jednego koloru, powinien on renderować się jako krajobraz, dzięki efektom warstwy. Piękno tego polega na tym, że możesz swobodnie dodawać / usuwać części swojego krajobrazu za pomocą zwykłych narzędzi do rysowania, takich jak pędzel lub gumka.
  6. (opcjonalnie) Narysuj gradient od ciemnoniebieskiego (u góry) do jasnoniebieskiego (u dołu) na warstwie tła nieba (możesz także użyć do tego efektów warstw).
  7. (opcjonalnie) Dodaj więcej efektów warstw, takich jak gradient i cień do warstwy „poziomej”, aby uzyskać lepszy wygląd.

Obrazy

Ustawienia nakładki wzoru

Ustawienia nakładki wzoru Photoshop

Ustawienia obrysu

Ustawienia obrysu w Photoshopie

Ostateczny wynik

Z kilkoma efektami warstw i tłem.

ostateczny obraz

Możesz również pobrać plik PSD tutaj, aby go obejrzeć.


1
i masz tylko jeden duży obraz dla całego poziomu?
Spooks

1
Tak, możesz przechowywać go dla całego poziomu; Oddzieliłbym tło, przedmioty itp. Od rzeczywistych wzgórz. Do wykrywania kolizji możesz użyć warstwy alfa. +1 za niesamowitą sztukę techniczną :)
ashes999

4

Wiele platformówek i wszelkiego rodzaju gier korzysta z systemu poziomów opartego na kafelkach, w którym każdy poziom składa się z siatki kafelków, czasem w wielu warstwach. Możesz mieć kilka płytek „powierzchni trawy”, kilka płytek błota i tak dalej. Następnie zamiast rysować ogromny obraz, układasz kafelki na mapie. Oszczędza między innymi miejsce na teksturę.

Bardziej zaawansowane gry 2D mają podobne podejście, ale z dużymi „znaczkami”, które można dowolnie przesuwać, obracać i / lub skalować, aby uzyskać poziom, i nie przykleja się do siatki, jak w technice opartej na kafelkach. Aquaria używa tej metody.


2

Jeśli nie masz nic przeciwko temu, że wygląda trochę nudno, możesz po prostu narysować kilka kółek o różnych rozmiarach wzdłuż płaskiej linii (twojej płaszczyzny podłoża) i wypełnić je. Następnie możesz wrócić i narysować brązowe pudełko zakrywające „podziemną” część mapy, a następnie dodać niewielkie akcenty ziemi, aby spełnić górne zakręty koła. Następnie możesz wykonać szczegółową przepustkę, aby dodać trawę lub cokolwiek innego (bardzo łatwe, jeśli masz Photoshopa z różnymi pędzlami).

Ta pomoc?


2

Gorąco polecam pobrać kopię Paint.NET za darmo i 100 razy lepiej niż MS Paint - ma kilka podstawowych narzędzi ułatwiających generowanie sztuki w sensie, którego szukasz.

Umożliwi to na przykład dokonanie wyboru i wypełnienie całego zaznaczenia danym kolorem / gradientem, dzięki czemu nie będziesz korzystać z narzędzia Pióro i rysowania piksel po pikselu.

Nie jest nawet zbliżony do Photoshopa, ale jest doskonały do ​​tego rodzaju przypadków użycia, w których szukasz podstawowej sztuki.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.