Własny CMS #2 - Projektowanie menu

Spis treści

W ostatniej lekcji stworzyliśmy chipset, którego będziemy używali do przygotowywania tła do menu. Dziś zaprojektujemy wstępnie nasze menu oraz przygotujemy pierwsze grafiki, których będziemy używać.

Co powinno zawierać menu?

Z uwagi na szkoleniowy charakter naszego kursu, będę stosował pewne uproszczenia. Gwarantuję jednak, że jeśli prawidłowo przyswoicie wszystkie przygotowane lekcje, będziecie mogli dowolnie modyfikować stworzone wspólnie menu.

Umówmy się, że w naszym menu chcemy mieć następujące karty:

Status – zawiera grafikę twarzy bohatera, imię, klasę, HP, MP, poziom i punkty doświadczenia;
Przedmioty – lista przedmiotów w plecaku, których możemy użyć (zrobimy tylko jedną stronę z przedmiotami, ale modyfikując skrypt można stworzyć ich więcej);
Umiejętności – lista umiejętności poszczególnych bohaterów, przy czym części można użyć na mapie;
Ekwipunek – rzeczy założone na bohatera, które można zmieniać;
Dziennik – strona z dziennikiem zadań;
Zapis gry;
Wyjście z gry.

Projektując menu już na tym etapie powinniśmy ustalić, co znajdzie się w każdej z planowanych kart. Od tego zależy, czy przygotowane przez nas pliki graficzne spełnią swoją rolę.

Przygotowanie tekstu

Na początek musimy przygotować tekst zawierający nazwy wszystkich kart w menu. Pamiętacie, jak braliśmy fragmenty pliku System, by stworzyć chipset? Ten sam System proponuję zaimportować teraz do naszego projektu i ustawić go w bazie danych.

Tekst można przygotować na różne sposoby, ale że ja nie jestem już od lat na bieżąco z programami graficznymi, wykorzystuję do tego RPG Makera. Tworzę dowolne zdarzenie, ustawiam na autostart i w komendzie Show Text wklepuję wszystko, czego potrzebuję. Następnie odpalam projekt, ustawiam rozmiar okienka na 320×240 (służy do tego klawisz F5) i robię screena (pamiętając, by w ustawieniach ekranu Windowsa powiększenie ustawić na 100%). Następnie screena wklejam do Painta, a wygląda to tak:

Dzięki takiej metodzie mam czysty, pikselowy tekst, dostosowany do stylu tła mojego menu.

Przygotowanie grafiki

Gdy mamy już screena z tekstem, należałoby go nałożyć na tło. Można to robić ręcznie, ale na tym etapie polecam po prostu wrzucić teksty do pliku z chipsetem. Pamiętajcie, by napisy umieścić z prawej strony odpowiadającej za górną warstwę w edytorze (żeby nie zasłaniały tła).

Bardzo ważna informacja – tworząc dowolne pliki tekstu lub umieszczając go na chipsecie warto zadbać o to, by napis zawsze miał taką samą odległość od góry i od dołu końca kratki oraz od lewej strony. Ja robię w ten sposób, że z lewej strony zostawiam jeden piksel odstępu, a z dołu – cztery piksele od białej podstawy zwykłych liter (j, y i inne zawijasy się nie liczą).

Działając w ten sposób i trzymając się ściśle wyznaczonych reguł, bardzo szybko nabierzemy wprawy i kolejne elementy menu będziemy tworzyć jeszcze bardziej efektywnie. Napisy wrzucone do chipsetu prezentują się następująco:

Przygotowanie planszy z menu

Po zaimportowaniu nowej wersji chipsetu do programu możemy w szybki sposób stworzyć pierwszą wersję głównego okna menu.

Przydałoby się jednak nieco urozmaicić nasz projekt. Dlatego dorabiamy napis „Menu”, który znajdzie się u góry. Dodatkowo przygotowujemy także w chipsecie elementy ramki sąsiadującej z inną ramką. Pozwoli nam to zaoszczędzić trochę miejsca. Nowy plik chipset wygląda zatem tak:

Teraz przy pomocy nowego pliku tworzymy finalną wersję naszego prototypowego menu:

Tworzenie pierwszych obrazków

By otrzymać obrazki gotowe do użycia, odpalamy projekt i robimy screena, tak jak w przypadku tekstu. Tworzymy dwa obrazki o wielkości 320×240 pikseli – na jednym będzie wyłącznie tło, a na drugim – wyłącznie tekst. To ważna w kontekście dalszych lekcji informacja.