Maniacs Patch nie gryzie #10 – Prosty HUD, wersja alternatywna

Wstęp

Jakiś czas temu Axer napisał poradnik dotyczący rysowania pasków HUDu bez musu korzystania z setek obrazków, który dzięki wykorzystaniu opcji edycji obrazków w pamięci gry pozwala na wiele ciekawych efektów. Mi udało się odkryć metodę, która pozwoli zrobić to jeszcze łatwiej i za pomocą starszej wersji Maniacs Patcha, tej bardziej kompatybilnej ze starszymi systemami.

Przygotowania

Metoda, którą chcę przedstawić, ogranicza wielkość grafik do 32×32 pikseli. No może nie do końca tak, bo jeśli w naszym HUDzie wystarczą nam tylko różnokolorowe paski, to wielkość nie jest ograniczona. Wszystko stanie się jasne później, ale na początek załóżmy, że zmieścimy się w tym ograniczeniu. Użyję więc tych samych grafik, które Axer wykorzystał u siebie, gdyż tak się śmiesznie składa, że idealnie wpasowują się w to ograniczenie.

W takim razie pobierzmy i zapiszmy odpowiednie grafiki:

1. Tło:

Zapiszmy je w folderze Picture

2. Pasek:

Tą grafikę zapiszmy w folderze Ѕystem

Jak łatwo zauważyć druga grafika ma rozmiar idealnie 32×32 piksele i jest odbita lustrzanie w pionie. Różni się więc lekko od tej z poradnika Axera, my jednak tutaj nie będziemy na siłę sprawiać by wszystkie grafiki miały ten sam wymiar, to jest nam niepotrzebne. Samo ograniczenie 32×32 pikseli dotyczy tylko części paska, który będzie się zmieniał w zależności od ilości np. HP naszego bohatera. Tła więc mogą być większe. Powód odbicia lustrzanego wyjaśnię później.

Będziemy też potrzebować 3 zmiennych – aktualnego stanu paska, maksymalnego stanu i szerokości paska.

Skrypcimy

Całość kodu wygląda tak:

Opiszę więc po kolei co robimy.

Zdarzenie jest w Globalnych Zdarzeniach i ustawione jest na Proces Równoległy, żeby HUD mógł się cały czas aktualizować.

W pierwszych dwóch Control Variables zapisujemy aktualną i maksymalną wartość HP bohatera (lub tego, co chcemy, by pasek pokazywał).

Później zmienną przechowującą aktualne HP mnożymy przez długość naszego paska w pikselach, czyli w tym przypadku 32.

Wynik dzielimy przez wartość maksymalną, co daje nam w wyniku ilość wierszy w pikselach paska które powinniśmy wyświetlić.

Kolejno w trzeciej zmiennej ustawiamy szerokość naszego paska w pikselach. Jest to nam potrzebne, ponieważ nie można wyświetlić obrazka z jedną wartością stałą, a drugą zmienną, więc obie musimy podać ze zmiennych.

Następny jest warunek, który na pierwszy rzut oka może wydać się niepotrzebny. Jednak jego celem jest ustawienie zmiennej, która podaje ilość paska do narysowania na wartość ujemną, jeśli wynosi ona 0. Opcja, którą będziemy rysować pasek, źle działa gdy któraś z wartości, którą jej podamy, wynosi 0. Jednak gdy podamy wartość ujemną efekt będzie taki, jakbyśmy tego oczekiwali, więc to jest właśnie rozwiązanie.

No i zostało tylko wyświetlenie obrazków.

Wyświetlanie obrazków

Pierwsze wyświetlamy tło. Moglibyśmy to zrobić raz w innym miejscu, jednak dla potrzeby uproszczenia dałem to wyświetlenie tutaj. Co prawda po pierwszym wyświetleniu jest już wyświetlanie tego tła zbędne, jednak dzięki poprawkom w najnowszych wersjach RM2k3 nie powinno to zbyt źle wpływać na wydajność. Możemy więc tak to zostawić.

U mnie w przykładzie HUD ustawimy w lewym górnym rogu ekranu. Powyżej ustawiłem więc pozycję wyświetlania na lewy dół i współrzędne na 0 i 40. W tym przypadku nie jest to ważne, ale w kolejnym kroku pozycja wyświetlania będzie miała bardzo duże znaczenie. Więc jeśli ustawicie tu inaczej (np górny lewy i współrzędne na 0,0) to nie będzie to miało na nic wpływu.

Zostało nam wyświetlenie jeszcze samego paska. Zrobimy to komendą Show String Picture.

Na pierwszej stronie ważne jest, by ustawić dobrze pozycję wyświetlania i rozmiar obrazka. No i oczywiście numer obrazka musi być wyższy niż poprzedniego.

W pozycji wyświetlania koniecznie musimy dobrze ustawić pozycję wyświetlania. W moim przykładzie pasek będzie malał i rósł od góry, więc muszę go wyświetlić od dołu. Taka jest zasada, jeśli pasek ma rosnąć w lewo to wyświetlamy go względem prawej strony itd.  Ustawiłem więc opcję Btm-Left i współrzędne tak, by pokrywały się dobrze z tłem.

W rozmiarze obrazka odwołujemy się do naszych zmiennych. Szerokość ustawiamy na naszą zmienną, która ją przechowuje, a wysokość na wynik naszych działań, które ostatecznie przechowują ilość wyświetlanych wierszy grafiki.

Na drugiej stronie w naszym przykładzie musimy zaznaczyć w Efektach Flip na Vertical. To jest właśnie powód, dla którego samą grafikę mieliśmy w odbiciu lustrzanym. Jest to potrzebne, bo wielkość naszej grafiki jest zawsze rysowana względem lewego górnego rogu. My jednak chcemy, by to był lewy dolny róg. W ten sposób oszukujemy więc system, który nadal rysuje grafikę względem górnego rogu, a na końcu ją obracamy, co daje nam zamierzony efekt. Podobnie musimy zrobić, jeśli chcielibyśmy, aby nasz pasek rósł w lewą stronę, ponieważ domyślnie powiększa się w prawo. Możecie pobawić się tymi ustawieniami, nie jest to takie do końca oczywiste, ale mam nadzieję, że załapiecie zasadę jak ustawiać wszystko o czym napisałem wyżej.

Opcje czcionki i ogólnie tekstu zostawiamy puste – nie są nam tu kompletnie do niczego potrzebne.

No i najważniejsza – grafika na 3 stronie. Wybieramy więc tu naszą kulę. Jak pewnie zauważycie jest ona mniejsza niż zwykła grafika systemowa, ale na szczęście samo tło wiadomości jest umieszczone w lewym górnym rogu grafiki systemowej, dzięki czemu nie musimy dodawać nieużywanych obszarów do grafik.

Window Background wybieramy na Tiled Pattern, co nie będzie nam niepotrzebnie skalować grafiki, a da nam efekt wymazywania pikseli.

Reszta opcji jest nieistotna.

Jak to działa?

W tym miejscu pewnie dziwicie się, czemu w ogóle używamy opcji Show String Picture i jak to ogólnie działa. Korzystamy tutaj ze sztuczki, jaką są opcje wyświetlania teł w wiadomości. Opcja Show string picture pozwala nam wygenerować obrazek samego okienka wiadomości w jakichkolwiek podanych przez nas wymiarach i w jakimkolwiek miejscu. Wykorzystujemy więc ten fakt dając jej zamiast tła obrazek i generujemy okienko o interesujących nas wymiarach. Niestety, same tła wiadomości mają ograniczony wymiar 32×32 pikseli – dlatego właśnie obrazek o takich wymiarach możemy maksymalnie wyświetlić. Jeśli byśmy chcieli coś większego, to musimy bawić się w łączenie kilku obrazków – co również jest do zrobienia. Jedyny wyjątek to jednokolorowe tła, powtarzalne wzory lub gradienty – takie elementy mogą być skalowane i powtarzane. Można je więc wyświetlić z dowolnymi wymiarami. Przy gradientach polecam wybrać po prostu opcję Stretch to fit w Window Background.

Podsumowanie

Jak widać, dzięki wykorzystaniu sprytnych sztuczek możemy zrobić różne ciekawe rzeczy. Jest to dość prosty sposób, a robi wrażenie. Sama metoda podana przez Axera pozwala na więcej, ale też wymaga więcej pracy. Ta tutaj jest dość prosta i działa w starszych wersjach Maniaca. Nie trzeba też znać TPC, by jej użyć. Ale jeśli ktoś ma potrzebę, to zrobiłem też proste demko do pobrania niżej.

Gdyby były jakieś pytania – komentarze są wasze.

Dragon Kamillo

– Download przykładowego projektu –

Jeden komentarz do “Maniacs Patch nie gryzie #10 – Prosty HUD, wersja alternatywna

  1. Dragon Kamillo jak zwykle na najwyższym poziomie odkrywa przed nami tajniki RPG Makera. Jego wiedza na ten temat jest imponująca, a sposób dzielenia się nią na najwyższym poziomie 🙂

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.