Tworzenie HUD'a

Szukając kiedyś ciekawych "tutków" dotyczących napisów natrafiłem na kilka stronek o gimp'ie (http://www.gimpuj.info/index.php?action=tutoriale)

Każdy z tutoriali zawierał jakąś ciekawostkę dotyczącą programu która przydała mi się w późniejszym czasie do stworzenia czegoś bardziej rozbudowanego -> hud'a

Tak więc chciałem się dziś tą wiedzą z wami podzielić.

Opisałem wszystko w punktach aby łatwiej można było się w tym odnaleźć.


Tworzenie HUD'a

Specyfikacja - pomysł , analiza schematów i wzorów na rynku

Nadarzyła się akurat okazja iż mogę przedstawić cały proces na konkretnym przykładzie Anhalora, już dłuższy czas gryzą mnie te liczniki na polu gry bez jakichkolwiek grafik i postanowiłem coś z tym zrobić.
Nie dostałem żadnych wytycznych ale stylistyka powinna być "erpegowa" , miałem w głowie jakiś ogólny zarys tego co chcę wykonać , miałybyć dwa miejsca jedno na życia drugie na manę oraz jeszcze okienko na obiekty , ewentualnie parę ikon wokół , wszystko powinno być w miarę przejrzyste i proste (czy intuicyjne to dopiero się okaże w praktyce).



Później zostało tylko przeglądnięcie sieci w poszukiwaniu przykładów grafik ,aby przyjrzeć się bliżej panującym standardom graficznym oraz dla podpatrzenia zastosowanych efektów.


Pierwszy jest bardzo prosty ale czytelny drugi natomiast wylewny w efektach , postanowiłem więc połączyć obie idee aby stworzyć coś własnego.



Szkic
Zrobiłem zrzut ekranu z anhalora i wkleiłem grafikę do painta , używając wypełniania kółek i kwadratów wyszedł mi taki wstępny szkic hud'a 3.png


Kształt
Patrząc na hud'y z perspektywy czasu można zauważyć że dążą one w kierunku minimalizacji , podkreślenia tego co istotne czyli ikon , stosowania w tym celu półprzeźroczystości, zaokrąglania kształtów dodawania drobnych graficznych elementów do ukazania spójności z grą.


Wypełnienie - tło
Początkowym elementów który nie rzuca się zbytnio w oczy pozostaje tło,niejako jest ono elementem spójnym z grą i łączy z nią wyświetlane obiekty.


Rozmieszczenie obiektów według ważności
nie chciałem by wyglądało to jak kopia diablo więc ułożyłem je na środku zostawiając puste narożniki. Wszystko opiera się na 3 obiektach głównych , 2 licznikach żyć i many oraz ikonach stworzonych w późniejszym czasie.


Stylistyka podobna do gry
Kolory raczej mdłe , dominujący brąz , można dodać odrobinę zieleni , oraz metalicznego połysku.


Drobne szczegóły
Mógłbym się pokusić i wykonać jakieś drobne szczegóły jak siatkę oplatającą liczniki albo bohatera trzymającego ikony.


Podświetlanie - animacja elementów
Niektóre obiekty takie jak ikony czy liczniki posiadają zmienną animację którą także trzeba wziąść pod uwagę.


Podczas tworzenia grafiki korzystałem wyłącznie z tego programu (nie licząc szkicu) jest on darmowy i nie ustępuje pshopowi.

Wczytuję zrzut grafiki z gry (Anhalor)

Plik -> Otwórz -> ścieżka do pliku

Mamy teraz nasz zrzut w tle.



Następnie tworzymy warstwę na której wykonamy czarny obiekt hud.

Warstwa -> Nowa warstwa... ->(typ wypełnienia warstwy - przeźroczystość) i klikamy ok

Teraz mając wybraną naszą nową warstwę zaczynamy tworzyć na niej wstępny kształt hud'a.

Zaznaczenie eliptyczne - klawisz E , tworzymy zaznaczenie , wybieramy wypełnienie Shift+B i wypełniamy obszar na czarno (przytrzymując shift klikamy lewym klawiszem myszki)

tworzymy 3 obiekty na nowej warstwie,tak jak na obrazku poniżej


Na razie nie jest ważne by były w odpowiednich odległościach gdyż cały hud odbijemy później względem środka.

Teraz tym samym sposobem wypełniamy kolejny obszar
całość powinna wyglądać jak na obrazku.


Teraz wybierając zaznaczenie obszarów prostokątnych zaznaczamy połowę huda i klikamy crtl+x by ją wyciąć.


Następnie zaznaczamy pozostałą część hud'a kopiujemy (crtl+c) i wklejamy (crtl+v) oraz obracamy w poziomie (shift+f). Dosuwamy do prawego dolnego rogu.




Będąc na warstwie z czarnym kształtem hud'a wybieramy :
Warstwa -> Duplikuj warstwę

W okienku warstw (aktywujemy jecolor=blue] Plik -> okna dialogowe -> warstwy[/color]) klikamy prawym przyciskiem i wybieramy "Kanał alfa na zaznaczenie". Zaznaczyło nam cały obszar który wypełniliśmy czarnym kolorem.


Teraz zaczniemy zabarwiać go różnymi deseniami.

Wybieramy ikonkę wypełniania w oknie głównym i klikamy opcję "deseń" , później z listy wybieramy "walnut"


Zmieniamy przeźroczystość wypełnienia na 25%

i klikamy na zaznaczeniu naszego hud'a.

Tym samym sposobem wybieramy deseń "wood" i "wood2" oraz wypełniamy nimi wybrany obszar.
Całość powinna wyglądać tak :


Klikamy na Pędzel i wybieramy uprzednio wgrany wzór (InsaneFractalSet1-01) oraz ustawiamy przeźroczystośćkrycie na 20%



Klikamy kilka razy na zaznaczonym obszarze hud'a uzyskując podobny efekt do tego poniżej



Teraz aby zwiększyć efekt tła i nasycić barwy posłużymy się krzywymi.

Warstwa -> Kolory -> Krzywe

Ustawienie punktów powinno być podobne do tego z obrazka , gdyż niewielkie przesunięcie może całkowicie zmodyfikować kontrast,barwę oraz strukturę tła.



Po takiej operacji nasz hud powinien być podobny do tego poniżej





Teraz kopiujemy naszą warstwę

Warstwa -> Duplikuj warstwe...

Klikamy E i za pomocą crtl-x wycinamy w kopii naszego hud'a odpowiednie miejsca tak jak na obrazku.



Ułożenie i ilość warstw po operacji



Zaznaczamy naszą wyciętą warstwę:




Wybieramy opcję :

Zaznaczenie -> powiększ -> 1 pix



Klikamy teraz na warstwie z hud'em wypełnionym na czarno

i wciskamy crtl+x

Powinniśmy otrzymać coś takiego jak na obrazku

(wyłączyłem tło Anhalora dla lepszej widoczności)



Klikamy teraz na naszą wycięta brązową warstwę i powtórnie zaznaczamy kanał alfa

Znów wybieramy : Zaznaczenie -> powiększ -> 1 pix



Tworzymy nową warstwę : Warstwa -> Nowa warstwa... i wypełniamy ją czarnym kolorem (Shift+B)

Całość powinna wyglądać tak

Postanowiłem dodać odrobinę metalicznego połysku więc

Zaznaczenie -> Zmniejsz -> 1 pix


Wybieramy teraz "Wypełnianie gradientem koloru"(klawisz -L)

i szukamy wypełnienia z listy o nazwie "Rounded edge"



Przeciągamy kursor z góry w dół (czerwona strzałka na obrazku) aby uzyskać taki efekt :



Chcemy uzyskać tylko drobne metaliczne obramowanie więc :

Zaznaczenie -> Zmniejsz -> 2 pix

Teraz wypełniamy zaznaczony obszar czarnym kolorem




Zmniejszamy obszar jeszcze raz i za pomocą gumki usuwamy pozostały kawałek (Shift +E)



Razem z włączonym tłem całość powinna wyglądać następująco :



Jeszcze drobna zmiana nasycenia :

Wybieramy warstwę z czarnym hud'em i zmieniamy Tryb na "Nasycenie" oraz przesuwamy suwak na wartość 65%.

Wszystkie warstwy powinny wyglądać tak jak na obrazku





Wybieramy warstwę z czarnym hud'em i

Klikamy "Kanał alfa na zaznaczenie"

Tworzymy nową warstwę

Warstwy -> Nowa warstwa...



Wybieramy wypełnienie gradientem koloru - (klawisz L)
, kolor pierwszoplanowy w tym wypadku czarny 100%
oraz kształt "promienisty"



Teraz przeciągając od środka koła do jego krawędzi wypełniamy go czarnym kolorem.



Na koniec Zmniejszamy krycie warstwy do 50%



Ta ciemna głębia środka pozwoli nam wprowadzić większy kontrast z połyskującym efektem szkła które teraz stworzymy.


(Mając wciąż zaznaczony obszar według kanału alfa)

Tworzymy nową warstwę

Warstwy -> Nowa warstwa...

Wybieramy eliptyczne zaznaczenie (klawisz E)

I przytrzymując crtl+shift zaznaczamy górny obszar jednego z kół



Po puszczeniu klawisza powinien zaznaczyć się taki obszar



Teraz wybieramy

-Wypełnienie gradientem koloru - (klawisz L)
oraz kolor pierwszoplanowy w tym wypadku biały 100% z Kształtem : "Liniowa"

i przeciągamy z góry w dół kursor na zaznaczonym obszarze

otrzymujemy taki efekt



Podobnie zaznaczamy eliptyczny obszar na dole i wypełniamy go białym gradientem



W ten sam sposób wypełniamy wszystkie pozostałe obszary .






Jak w każdej (prawie) grze rpg przyszedł czas na stworzenie dwóch pasków , a raczej wypełnienia istniejących kolorem.
Najpierw potrzebujemy warstwę z czarnym tłem tych dwóch liczników aby uzyskać lepszy kontrast a później wypełnimy każdy z osobna odpowiednim gradientem (czerwony,niebieski)
Więc do dzieła.

(Mając zaznaczony obszar hud'a według kanału alfa)

Tworzymy nową warstwę :

Warstwa -> Nowa warstwa...

I wypełniamy ją czarnym kolorem (shift+B), na koniec usuwamy zbędne obiekty (shift+E)



i ustawiamy krycie na 65%

Teraz z naszej warstwy dwóch pasków wybieramy "Kanał alfa na zaznaczenie"

Tworzymy nową warstwę : Warstwa -> Nowa warstwa...

Wypełniamy je czarnym kolorem (Shift+B)

i usuwamy jeden z pasków gumką (Shift+E)



Wybieramy gradient "Kolor pierwszoplanowy" o kolorze czerwonym



I przeciągamy go z góry w dół , by uzyskać podobny efekt jak na obrazku.



Te same kroki wykonujemy w przypadku many wybierając tylko kolor niebieski.

Ustawienie wszystkich warstw powinno być podobne do tego z obrazka by efekt szkła nakładał się na liczniki.





Wykonamy teraz prostą ikonkę do gry którą będzie można dowolnie wypełnić jakąś grafiką.

Zbliżamy widok do 400%

Widok -> Zbliżenie -> Powiększenie 4:1 (400%)

Tworzymy nową warstwę : Warstwa -> Nowa warstwa...

Wybieramy "Tworzenie i modyfikowanie ścieżek" (klawisz - B)

I tworzymy punkty ustawiając je podobnie jak na obrazku (klikając lewym klawiszem myszki)



Klikamy Enter i utworzyliśmy zaznaczony obszar , wypełniamy go na czarno (shift+B)

tworząc sobie podkład pod dalsze modyfikacje.

Duplikujemy warstwę : Klikamy prawym przyciskiem na warstwę -> Duplikuj warstwę...

Mając wciąż zaznaczony obszar ,zostawimy czarną obwódkę na około ikony więc:

Zaznaczanie -> Zmniejsz -> 1pix

Teraz wybieramy "Wypełnianie gradientem koloru" (klawisz - L)

Gradient - > Default
Kształt -> Promienisty
Kolory -> czarny - biały




Wypełniamy nim wnętrze ikony rozjaśniając je trochę



Tworzymy jeszcze jedną obwódkę w tym celu:

Klikamy na warstwę ikony i wybieramy "Kanał alfa na zaznaczenie"

Zaznaczenie -> powiększ -> 1pix

Tworzymy nową warstę :

Warstwa -> Nowa warstwa...

Wypełniamy ją białym kolorem i przesuwamy poniżej warstwy ikony

Nie będziemy się zbytnio rozdrabniać więc połączmy obwódkę z ikonką opcją "Połącz w dół"



Klikamy na warstwę ikony i wybieramy "Kanał alfa na zaznaczenie"

Zaznaczenie -> Zmniejsz -> 2pix

Wybieramy "Zaznaczanie obszarów eliptycznych" (klawisz-E)

i przytrzymując Crtl wycinamy dolną część zaznaczenia



Teraz pozostałą część wypełniamy gradientem



Od góry do dołu



Aby dodać odrobinę głębi wstawimy pod ikoną cień

Script Fu -> Cień -> Rzucanie Cienia

Ustawienia powinny być takie jak na obrazku



Teraz łączymy warstwę cienia z ikoną opcją "Połącz w dół"



Teraz pozostaje tylko Skopiowanie warstwy i ustawienie odpowiednio ikon. "Przesuwanie warstw i zaznaczeń (klawisz - M)






Kolejna ważna rzecz która powinna rozjaśnić sprawę tworzenia obiektów. Otóż znalazłem w sieci bardzo dobry przykład potiona , został on stworzony jak wszystkie według pewnego utartego schematu który teraz pokażę.


Możemy od razu zauważyć jakie efekty tutaj zastosować.



Jak widać prócz tych wszystkich detali liczą się 3 strefy :

-ciemna

-nasycenia koloru

-blasku odbijanego światła

To właśnie one tworzą głębię flakonika i podkreślane są za każdym razem w każdej grze w podobny sposób.

Tym razem rozdrobnimy warstwy na flakonik i barwy aby później móc łatwiej stworzyć inne kolory mikstur.

Jako że flakonik powinien mieścić się w obszarze "okna" tak więc będziemy go od razu malować w nim.

Ważne aby zostawić odpowiednio dużo miejsca na czcionkę - liczby potionów którą umieścimy poniżej flakonika

Tworzymy więc kształt flakonika za pomocą "Zaznaczanie obszarów eliptycznych" (klawisz - E) oraz "Tworzenie i modyfikowanie ścieżek" (klawisz - B)



Wypełniamy obszar białym kolorem (Shift+B)

Zmniejszamy zaznaczenie o jeden piksel

Zaznaczenie -> Zmniejsz -> 1pix

Tworzymy nową warstwę

Warstwa -> Nowa warstwa...

Wybieramy "Wypełnianie gradientem koloru" (klawisz -L)

i Ustawiamy opcje podobnie jak na obrazku



Wypełniamy gradientem wnętrze flakonika



Tworzymy nową warstwę

Warstwa -> Nowa warstwa...

Wybieramy "Zaznaczenie obszarów eliptycznych" i zaznaczamy środek fiolki tak jak na obrazku



Teraz wybieramy ciemnoczerwony kolor i wypełniamy zaznaczenie



Tworzymy nową warstwę

Warstwa -> Nowa warstwa...

Zaznaczenie -> Zmniejsz -> 1 pix

Wybieramy "Wypełnianie gradientem koloru" (klawisz -L)



I przeciągamy tak jak na obrazku



Tworzymy nową warstwę

Warstwa -> Nowa warstwa...

Wybieramy warstwę z ciemnoczerwonym wypełnieniem i zaznaczamy "Kanał alfa na zaznaczenie"

Tworzymy nową warstwę

Warstwa -> Nowa warstwa...

"Zaznaczanie obszarów eliptycznych" (klawisz - E)

I przytrzymując Crtl+Shift zaznaczamy górną część cieczy



I wypełniamy ciemnoczerwonym kolorem


Ponownie wybieramy warstwę w ciemnoczerwonym wypełnieniem i zaznaczamy "Kanał alfa na zaznaczenie"

Zaznaczenie -> Zmniejsz -> 1 pix



Teraz będziemy tworzyć efekt szkła na flakoniku .

Więc : Warstwa -> Nowa warstwa...

"Zaznaczanie obszarów eliptycznych" (klawisz - E)


I przytrzymując Crtl zaznaczamy górną część cieczy



Teraz wybieramy gradient tak jak na obrazku



i wypełniamy zaznaczony obszar



Kolejny połysk flakonika u góry

wybieramy warstwę w ciemnoczerwonym wypełnieniem i zaznaczamy "Kanał alfa na zaznaczenie"

Zaznaczenie -> Zmniejsz -> 1 pix

Przechodzimy do warstwy na której stworzyliśmy pierwszy połysk

"Zaznaczanie obszarów eliptycznych" (klawisz - E)


I przytrzymując Crtl + Shift zaznaczamy górną część cieczy



Wybieramy wypełnienie gradientem (klawisz- L)

Opcje jak na obrazku



I przeciągamy od środka zaznaczenia po jego krańce



I ostatni połysk

wybieramy wartswę z białym obrysem flakonka"Kanał alfa na zaznaczenie"

Zaznaczenie -> Zmniejsz -> 2 pix

Przechodzimy do warstwy na której stworzyliśmy połyski

"Zaznaczanie obszarów eliptycznych" (klawisz - E)


I przytrzymując Crtl + Shift zaznaczamy górną część cieczy



Wybieramy opcje gradientu jak w obrazku



I przeciągamy na zaznaczony obszar



Jeszcze drobny dodatek do połysku który wykonamy pędzlem



Białym kolorem poprawiłem

to co zostało zaznaczone



Stworzymy jeszcze jedno obramowanie flakonika - czarne o 50% kryciu

Tworzymy nową warstwę

Warstwa -> Nowa warstwa...

Którą przenosimy pod warstwę z białym obrysem flakonika

Zaznaczamy pierwszą białą warstwę flakonika i

"Kanał alfa na zaznaczenie"

Zaznaczenie -> Powiększ -> 1 pix



wypełniamy je czarnym kolorem oraz zmniejszamy krycie do 50%



Jeszcze pozostało zamknięcie flakonika jakimś korkiem w tym celu
tworzymy nową warstwę Warstwa -> Nowa warstwa...
wybieramy "Tworzenie i modyfikowanie ścieżek" (klawisz- B)

I tworzymy taki kształt



I wypełniamy jasnym odcieniem brązu oraz podkreślamy krągłość obiektu cieniujac go odpowiednio



Warstwę z korkiem przesuwamy pod warstwę z blaskiem szkła

Na koniec pozostaje dodać nam cień

wybieramy wartswę z białym obrysem flakonika"Kanał alfa na zaznaczenie"

Script-Fu -> Cień -> Rzucanie cienia



Ostateczny wygląd naszego flakoniku z miksturą życia wygląda tak



Teraz wystarczy tylko zmienić barwę odpowiednich warstw aby uzyskać inny kolor potionu.





Jeden z najprostszych elementów a zarazem często źle wykonanych jest czcionka.
Powinna być niewielkich rozmiarów ale na tyle duża aby była dobrze czytelna.
Nie może też być jednolitego koloru , gdyż mogłaby się pokrywać barwą z tłem.

Wybieramy więc "Umieszczanie tekstu na obrazie" (kto wymyślił te nazwy??) klawisz - T

Ustawienia jak na obrazku


I wypisujemy cyfry od 0 - 9



Teraz wybieramy "Kanał alfa na zaznaczenie"



oraz Zaznaczenie -> Powiększ -> 1 pix
Tworzymy nową warstwę Warstwa -> Nowa warstwa...

I wypełniamy obszar czarnym kolorem

Warstwę tą przesuwamy pod warstwę naszego białego tekstu



Oraz łączymy obie warstwy w jedną "Połącz w dół"



i takim oto sposobem otrzymujemy cyfry które wyglądają dobrze na każdej powierzchni i są czytelne




A oto jak prezentuje się nasz Hud po tych 9ciu długich punktach.



Tworznie Hud'a to rozdział z poradnika "Tworzenie gry" by Grzesiek