f·p·p · p·r·o·d·u·c·t·i·o·n·s   GRY | SERWERY GIER | BANNERY
 



 
 


redfaction.fpp.pl
Podłącz nasz
baner
 





  f·p·p · r·e·d · f·a·c·t·i·o·n | Tworzenie HUD'a krok po kroku

Poradniki

Tworzenie HUD'a krok po kroku



Dla znudzonych standardowym HUD’em nasz serwis przygotował tutorial, jak zrobić sobie go według twojego pomysłu. Rozbudźmy więc swoją wyobraźnię i zabierzmy się za wykonanie swojego wymarzonego HUD’a, który uprzyjemni nam grę. Zaczynamy…


Zanim weźmiemy się do roboty, upewnijmy się czy posiadamy:

  • Program graficzny (np. Photoshop)
  • Edytor tekstu (np. Notatnik, Wordpad)
  • VPP Builder (można ściągnąć tutaj)


    Najpierw założymy katalog, w którym przechowywane będą pliki robocze - np. "C:HUD". Uruchamiamy VPP Builder i otwieramy nim plik „ui.vpp” który znajduje się w katalogu gry. Zaznaczamy teraz następujące pliki:

    health0_0.tga, health10_0.tga, health20_0.tga, health30_0.tga, health40_0.tga, health50_0.tga, health60_0.tga, health70_0.tga, health80_0.tga, health90_0.tga, health100_0.tga

    enviro0_0.tga, enviro10_0.tga, enviro20_0.tga, enviro30_0.tga, enviro40_0.tga, enviro50_0.tga, enviro60_0.tga, enviro70_0.tga, enviro80_0.tga, enviro90_0.tga, enviro100_0.tga



    Pliki „health” są odpowiedzialne za energię, natomiast „enviro” za pancerz. Liczby przy tych nazwach oznaczają odpowiedni ich poziom. Mając je zaznaczone, dajemy “Extract” i wskazujemy nasz wcześniej założony katalog roboczy.

    Teraz uruchamiamy program graficzny i otwieramy "health100_0.tga" i "enviro100_0.tga" – przyjrzyjmy się jak wyglądają:



    Należy zwrócić uwagę na to, że ich tło jest przezroczyste (transparent) i takie powinno pozostać. Teraz przerabiamy je według swojego pomysłu, na przykład tak:


    Zapiszmy oba obrazki pod tymi samymi nazwami, oczywiście dalej w formacie targa (tga). Przetestujmy teraz jak wygląda dotychczasowa praca, ale wcześniej warto sobie zrobić kopię pliku ui.vpp aby można było powrócić do orginalnej wersji HUD'a.


    Po zrobieniu kopii, otwieramy VPP Builder'em plik ui.vpp, klikamy "Add", znajdujemy na dysku te nasze 2 zrobione przed chwilą obrazki i dodajemy je w ten sposób do ui.vpp. Zapisujemy i wychodzimy a następnie uruchamiamy grę. Zaznaczam, że aby zobaczyć efekt naszej pracy musimy zebrać 100 energii i 100 zbroi !!!

    Oceniając naszą pracę, decydujemy czy jest tak jak sobie życzyliśmy - jeżeli nie, to edytujemy te pliki aż uzyskamy odpowiedni rezultat. Warto się do tego przyłożyć bo to najważniejszy etap tworzenia HUD'a.


    OK! 2 obrazki mamy zrobione, 20 do zrobienia ;p Jednak to wbrew pozorom pójdzie już łatwo, po prostu edytując te pliki które już stworzyliśmy, ujmujemy odpowiednio pancerzu otrzymując kolejne obrazki:



    Zapisujemy je kolejno odpowiednio do zmniejszającego się poziomu posiadanej zbroi: enviro100_0.tga, enviro90_0.tga itd., również w formacie targa (tga). Analogicznie robimy z plikami dotyczącymi poziomu energii, akurat w tym przykładowym HUD'zie energia jest przedstawiona w postaci krwi w oczach, gdzie wraz ze zmniejszającą się jej ilością maleje jej poziom w oczach:




    Możemy również zmieniać kolory cyfr, w tym celu użyjemy jakiegoś edytora tekstu, choćby wbudowanego w windows „Notatnika”.

    Uruchamiamy VPP Builder i otwieramy nim plik tables.vpp a następnie wyodrębniamy z niego do naszego katalogu plik hud.tbl. Po jego otwarciu zobaczymy m. in. takie pozycje:

  • $HUD full color: { 0, 255, 0, 105}
  • $HUD mid color: {255, 255, 0, 150}

    Pierwsza pozycja (full color) oznacza pancerz, a druga (mid color) odpowiada za energię.
    Używa się tutaj zapisu dziesiętnego koloru RGB. Przypomnę, że dowolny kolor składa się z trzech barw podstawowych: czerwonej (pierwsza cyfra), zielonej (druga cyfra) i niebieskiej (trzecia cyfra). Do dyspozycji mamy 256 odcieni każdego z tych kolorów i poprzez ich mieszanie otrzymujemy dowolny inny kolor. Czwarta cyfra w tym wypadku to przezroczystość.
    Skalą koloru posługujemy się w następujący sposób: 0 oznacza że brak danego koloru a 256 oznacza pełny kolor - przykładowo {52,255,57} to kolor zielony.


    Można się wspomóc tworząc odpowiedni kolor programem HexaColor, który można pobrać tutaj



    Jak widać na przykładowym HUD'zie zmieniło się położenie obu pozycji cyfr, które możemy regulować za pomocą następujących ustawień w pliku hud.tbl:


  • // health value ul corner - położenie (X, Y) górnego lewego rogu wartości odpowiadającej za energię
  • // envirosuit value ul corner - położenie (X, Y) górnego lewego rogu wartości odpowiadającej za pancerz

    Należy jednak pamiętać, aby zmienić te wartości we wszystkich działach odpowiadających za różne rozdzielczości w których może być uruchamiana gra - 640x480, 800x600, 1024x768 i 1280x1024. W przeciwnym wypadku będzie to różnie wyglądało przy różnych rozdzielczościach gry, a tego przecież nie chcemy ;)
    Na koniec zapisujemy plik hud.tbl i dołączamy go do pliku ui.vpp.


    Aby dopieścić naszego HUD'a, niektórzy mogą się jeszcze pokusić o zmianę wyglądu części odpowiadającej za amunicję. Za to są odpowiedzialne pliki "Ammo_signal_red_0.tga", "Ammo_signal_greeen_0.tga", "Ammo_bar_power_0.tga" i "Amm_bar_0.tga" z którymi postępujemy analogicznie jak wcześniej, oczywiście wg swojego pomysłu, który już zapewne po przeczytaniu artykułu macie w głowie :]




    Informacje o Autorze







     + DODAJ NOWY TEMAT 




    --------------------------------------
    Autor: M@rO
    Aktualizacja: 01·11·2004 - 23:01



     : DRUKUJ 

  •      




       


    f·p·p · p·r·o·d·u·c·t·i·o·n·s © 2000-2005 f·p·p productions. Skontaktuj się z nami w celu uzyskania dodatkowych informacji.
    Przeczytaj reklama z nami, aby dowiedzieć się jak ukierunkować swoje produkty i usługi do graczy.


    Dzisiaj jest Piątek · 26 Kwietnia · 2024
    Strona wygenerowana w 0.073392 sek.