Własny CMS #4 – Nawigacja

W dzisiejszej lekcji nauczymy się tworzyć podstawową nawigację oraz sprawimy, że gracz będzie mógł wyjść z przygotowanego przez nas menu.

Myślenie o pozycjach

Każda nawigacja (i nie tylko ona), którą będziesz tworzyć, sprowadza się do weryfikacji tego, w której pozycji znajduje się kursor (czyli, mówiąc bardziej technicznie, jaką wartość przyjmuje zmienna odpowiedzialna za kursor). Spójrzmy na nasz projekt.

Gracz będzie mógł poruszać się po siedmiu polach w górę i w dół kursorem, który przygotujemy za chwilę. Te cyfry to nic innego jako wspomniana już wartość wybranej przez nas zmiennej. Jeśli, przykładowo, gracz znajduje się kursorem na polu Przedmioty, zmienna powinna mieć wartość 2. Gdy gracz kliknie strzałkę w dół, kursor powinien przesunąć się o jedno pole w dół, a wartość zmiennej wzrosnąć o 1 i wynieść 3.

Prawda jest taka, że te siedem pół moglibyście ponumerować dowolnie, zupełnie bez kolejności, a i tak dałoby radę zrobić na nich nawigację. My jednak chcemy, by nasze skrypty nie tylko działały, ale też były jak najkrótsze. Dlatego zalecam, by wszystkie pola, po których gracz ma się poruszać, zawsze numerować rosnąco lub malejąco.

Kursor

Grafiki kursorów są bardzo różnorodne. Czasami to dłoń w białej rękawiczce, miecz lub grot strzały. Innym razem to ramka okalająca cały tekst lub kolorowe pole. Ze względów estetycznych ja preferuję ten ostatni rodzaj, ale poniższe rady spokojnie można zastosować do każdego typu.

Dzięki temu, że budujemy CMS na kratkach z chipsetu o rozmiarze 16×16 pikseli, bardzo łatwo możemy policzyć, jak duży musi być obrazek naszego kursora. 5 kratek x 1 kratka to 80×16 pikseli. Tworzymy zatem taki obrazek wykorzystując ciemnoczerwony kolor z pliku System.

Na tym etapie bardzo ważne jest, byście ustalili sobie jakiś zrozumiały dla was sposób nazywania plików. Za chwilę obrazków zrobi się w programie masa i jeśli teraz nie podejmiecie poważnych decyzji, szybko się w nich pogubicie. Ja przyjąłem technikę, że nazwa moich obrazków składa się z pierwszego członu oznaczającego główne miejsce przeznaczenia, myślnika i bardziej szczegółowego opisu.

Koordynaty obrazka

Piękno nowszych wersji RPG Makera 2003 polega na tym, że korzystając z komend wywołujących obrazki nie musimy w każdym z nich wpisywać pozycji na osi X i Y – możemy posłużyć się do tego zmiennymi! Już teraz warto dokładnie zapoznać się z pojęciami pozycji X i Y, ponieważ praca z tymi osiami to niemała część tworzenia CMS-a. Przyjmuję bowiem założenie, że chcemy menu estetycznego, gdzie wszystko jest na swoim miejscu.

No dobrze, dość gadania, czas przejść do czynów. Nasze założenie jest takie, że razem z wywołaniem menu, z lewej strony od razu pojawia się kursor gotowy do działania. Dlatego komendy związane z wywołaniem kursora znajdą się zaraz pod wywołaniami obrazków tła w common evencie 0001:Wywołanie menu.

Zanim wywołamy obrazek kursora, musimy stworzyć zmienne odpowiadające za jego cechy. Poniżej lista przygotowanych przeze mnie zmiennych:

• 0002:Menu – X kursora – odpowiada za miejsce kursora w poziomie;
• 0003:Menu – Y kursora – odpowiada za miejsce kursora w pionie;
• 0004:Menu – Poz. kursora – odpowiada za pozycję kursora w menu (to są te cyferki, które na początku lekcji nanieśliśmy na grafikę menu).

Wywoływanie obrazka

No dobrze, przechodzimy do działania. Po komendach wyświetlających obrazki tła, wstawiamy komendy, które ustawią wartość zmiennej Menu – Poz. kursora na 1 (bo odpalając menu, kursor znajdował będzie się na jego początku), zmiennej Menu – X kursora na 160, a Y kursora na 120.

Następnie wstawiamy komendę pokazującą obrazek przygotowanego przed chwilą kursora. Pamiętacie, jaką wagę przykładałem do porządkowania numerów obrazków? Żeby kursor pojawił się nad czerwonym tłem, a pod napisami, nie potrzeba żadnych magicznych sztuczek – wystarczy ustawić mu numer 14 lub 15 (wybierzmy 14). W Display Position klikamy pole Variable i ustawiamy odpowiednio nasze zmienne X kursora i Y kursora. Z Picture Graphic wybieramy właściwą grafikę. Pamiętajcie, by zaznaczyć No w Use Transparent Color – w przeciwnym razie grafika kursora, która sama składa się z jednego koloru, nie pojawi się na ekranie. Resztę rzeczy zostawiamy bez zmian.

Całość naszych zabiegów powinna wyglądać tak:

Teraz, gdy odpalimy projekt i nasze menu, okaże się, że kursor nie jest dopasowany miejscem do reszty grafiki.

Wszystko dlatego, że źle dobraliśmy wartości X i Y dla obrazka. Istnieje oczywiście matematyczne wyjaśnienie jak to robić, ale mi nigdy nie chciało się go uczyć – wolę metodę prób i błędów, dzięki której szybko zaczniecie oceniać piksele na oko.

Zmniejszenie wartości X przesuwa obrazek w lewo, a wartości Y – w górę. Po kilku próbach okazało się, ze właściwe wartości to X = 56 oraz Y = 56 (zbieżność przypadkowa). Dlatego te właśnie wartości ustawiamy w Common Evencie 0001. Po ustawieniu kursora zauważyłem, że napisy w menu są trochę zbyt blisko krawędzi. Z tego powodu postanowiłem przesunąć je o jeden piksel w prawo. Po modyfikacjach odpalone menu wygląda tak:

Nawigacja

Wreszcie możemy przejść do nawigacji, czyli poruszania naszym kursorem przy pomocy strzałek. Jak zapewne pamiętacie, wywołanie menu prowadzi do ustawienia przełącznika 0002:Włączono menu na ON, a ten uruchamia Common event 0002:Menu nawigacja działający na autorunie. W tym też evencie będzie znajdować się skrypt odpowiadający za poruszanie.

Pierwsze, co należy zrobić, to usunąć znajdujące się tam dwie komendy i wstawić znane nam już Key Input Processing. Z pole Variable wybieramy nową zmienną 0005:Menu – klaw naw, zostawiamy Wait for Key Input, a z Allowed Keys wybieramy pola od 1 do 6 (czyli wszystkie strzałki, klawisz akcji i anulacji). Następnie wstawiamy po kolei sześć warunków sprawdzających, czy powyższa zmienna ma wartości od 1 do 6. Wewnątrz tych warunków będziemy mówili programowi, co ma zrobić po wciśnięciu danego klawisza.

Dźwięk

Zanim przejdziemy dalej, tworzymy trzy nowe common eventy i nazywamy je SOUND ENTER, SOUND ESC, SOUND MOVE. W każdym z nich wstawiamy tylko jedną komendę – odtworzenie dźwięku, który chcemy mieć przy klikaniu klawisza akcji, klawisza anulacji i podczas poruszania się.

Teraz możecie uważać to za niepotrzebne kombinowanie, ale gdy w waszym menu będziecie mieli kilkadziesiąt komend wywołujących dźwięk, lepiej mieć je w jednym common evencie, który można łatwo zmodyfikować.

Zamknięcie menu

Najpierw zajmiemy się klawiszem ESC w naszym nawigacyjnym common evencie. Chcemy, by po jego wciśnięciu MENU uległo zamknięciu, tj. by wszystkie obrazki zostały usunięte, a gracz odzyskał kontrolę nad postacią.

W warunku z numerem 6 najpierw zerujemy zmienną 0005, następnie komendą Call Event wywołujemy common event SOUND ESC. Kolejna komenda to Erase Picture usuwająca obrazki. Możemy to robić pojedynczo, ale lepiej użyć pola Batch i wskazać zakres numerów, które należy usunąć. Zaczynaliśmy od obrazka 10, więc ustawiamy przedział 10-300. Nie wiemy jeszcze, ile obrazków będziemy musieli usuwać, ale lepiej ustawić górną granicę na 300 i się teraz nie przejmować. Na koniec włączamy przełącznik odpowiedzialny za wywołanie menu (0001), a wyłączamy ten, który odpala nawigację (0002). Gotowe, teraz możemy zamykać menu!

Wybór pola

Dla każdego z pól w menu będzie odrębna lekcja, poza dwoma ostatnimi. Wewnątrz warunku z numerem 5 wstawiamy siedem nowych warunków sprawdzających, czy zmienna 0004:Menu – Poz. kursora jest równa 1, 2, 3 itd. Dzięki temu, gdy wciśniemy w menu klawisz ENTER, w zależności od miejsca, w którym będzie znajdował się kursor, dziać się będą różne rzeczy.

Jeśli wrócicie na początek naszej lekcji zobaczycie, że kursor na pozycji 6 to zapis gry, a na pozycji 7 – wyjście. Dlatego gdy zmienna 0004 będzie miała wartość 6, wstawiamy komendę Open Save Menu.

W przypadku warunku z liczbą 7 najpierw pytamy gracza, czy naprawdę chce zamknąć grę, a jeśli wybierze „Tak” – odsyłamy go do title screena. Pamiętajcie, by zarówno w jednym, jak i drugim warunku wywołać na początku common event SOUND ENTER.

Poruszanie kursorem

Teraz przechodzimy do poruszania się kursorem. Nie interesują nas warunki z liczbami 2 i 3, ponieważ odpowiadają za strzałki w lewo i prawo. Strzałka w dół przypisana jest do liczby 1, dlatego nią najpierw się zajmiemy.

Na obrazku powyżej z lewej strony zaznaczyłem, jak zachowuje się kursor po kliknięciu w dół, gdy znajduje się na polach od 1 do 6. Jego wartość wzrasta o 1 (czyli zmienna 0004 wzrasta o 1). W związku z tym, że teksty są oddalone o jedną kratkę w RM, pozycja Y kursora wzrasta o 16 pikseli. Na osi X kursor się nie przesuwa.

Tylko gdy kursor znajduje się na pozycji nr 7, dzieją się inne rzeczy – wartość zmiennej 0004 nie powinna rosnąć, a spaść z powrotem do 1. Tak samo pozycja Y powinna zostać zmniejszona o 96 pikseli (16 x 6).

Mówię o tym dlatego, ponieważ zamiast tworzyć siedem warunków dla każdej pozycji, wystarczy stworzyć jeden z opcją ELSE.

Dlatego w warunku sprawdzającym, czy zmienna 0005:Menu – klaw naw równa się 1 najpierw wywołujemy common event SOUND MOVE, a następnie tworzymy nowy warunek sprawdzający, czy pozycja kursora jest na polu nr 7 (czyli ostatnim na dole) – zaznaczamy opcję Set handling when conditions do not apply (dalej nazywam to ELSE)! Jeśli warunek jest spełniony:

1. ustawiamy wartość zmiennej 0004:Menu – Poz. kursora na 1 (czyli powrót do początku menu);
2. ustawiamy wartość zmiennej 0003:Menu – Y kursora na 56 (także wracamy do początku);
3. wywołujemy obrazek kursora dokładnie taką samą komendą, jak przy odpalaniu menu (można ją sobie skopiować).

Z kolei w opcji ELSE opisywanego warunku:

1. zwiększamy wartość zmiennej 0004:Menu – Poz. kursora o 1
2. zwiększamy wartość zmiennej 0003:Menu – Y kursora o 16
3. także wywołujemy obrazek kursora dokładnie taką samą komendą jak przy odpalaniu menu.

Dzięki temu zabiegowi po wciśnięciu klawisza w dół, kursor będzie przesuwał się w dół o 16 pikseli, a wartość zmiennej odpowiadającej za jego pozycję będzie zwiększała się o 1. Tylko gdy kursor będzie na samym dole menu, wartości te będą wracały do początku.

Analogicznie postępujemy z warunkiem sprawdzającym, czy zmienna 0005:Menu – klaw naw jest równa 4, tj. czy gracz wcisnął strzałkę w górę. Tutaj sprawdzać będziemy, czy pozycja kursora jest równa 1 (a nie 7, jak wcześniej), ponieważ po kliknięciu strzałki w górę na początku menu, kursor musi przeskoczyć na sam dół. Analogicznie zmienne odpowiadająca za pozycję kursora i wartość Y będą zmniejszane. Wygląda to tak:

Teraz, gdy odpalicie menu z poziomu gry, będziecie mogli swobodnie nawigować w górę i w dół. Gdy najedziecie na „Wyjście z gry” i klikniecie ENTER, faktycznie pokaże się przygotowana wcześniej opcja wyjścia. To dlatego, że po kliknięciu klawisza akcji program stwierdził, że zmienna odpowiadająca za pozycję w menu wynosi 7, a doprowadziliśmy do tego poruszając się strzałkami!

ŚCIĄGNIJ PROJEKT Z LEKCJI

Michał „Michu” Wysocki