Tworzenie gry Mazer – Rozdział 2: Przedstawienie gry

Tak jak zapowiedziałem tydzień temu, dzisiaj opowiem Ci o mojej grze.

Tworzenie gry Mazer (czyt. Mejzer) było nie lada wyzwaniem i bardzo ciekawą przygodą – dlatego postanowiłem napisać ten artykuł. Chcę się z Tobą podzielić wieloma interesującymi problemami, które napotkałem, opisać rozwiązania, na jakie wpadłem, przedstawić jak wygląda proces tworzenia gry i co jest potrzebne, aby ją napisać. W pierwszej kolejności opowiem Ci o Mazerze – założenia i zasady gry przydadzą się w kolejnych rozdziałach.

Zasady gry

Mazer to gra logiczna, w której zadaniem gracza jest znalezienie drogi przez labirynt, z uwzględnieniem zasad wszystkich elementów, które się w tym labiryncie znajdują.

Chociaż w najprostszej postaci labirynty w Mazerze wyglądają jak prostokątne plansze do gry, to nie są one ograniczone do tego kształtu:

Przedstawienie dwóch zagadek z gry Mazer: o regularnym i nieregularnym kształcie — Po lewej „regularna” zagadka w kształcie prostokątnej planszy do gry, a po prawej – zagadka o „nieregularnym” kształcie

Prostokątne labirynty będę określał jako „regularne”, a pozostałe jako „nieregularne”. Ponadto, niektóre „korytarze” w labiryntach mogą być „przerwane”, tzn. nie można po nich przejść:

Zagadka z gry Mazer, w której niektóre przejścia są niedostępne — Labirynt z dwoma „przerwanymi” korytarzami,
którymi nie można poprowadzić ścieżki

Nazwa gry pochodzi właśnie od kształtu zagadek, które przypominają labirynty – maze to po angielsku labirynt. Pomysł na nazwę wpadł mi niedługo po rozpoczęciu pracy nad grą – dodałem na końcu jeszcze literę „r” i nazwa była gotowa – od razu mi się spodobała i już dalej nie szukałem. Zmieniłem wtedy nazwę mojego projektu w IntelliJ IDEA (środowisko developerskie, którego używam) z „BezNazwy” na „Mazer” i tak zostało do dzisiaj.

Start i meta

Tworzenie ścieżki przez labirynt należy rozpocząć w określonym miejscu, które wyznaczane jest przez okrąg:

Symbol o kształcie koła oznaczający miejsce w labiryncie, od którego należy rozpocząć ścieżkę — Symbol oznaczający miejsce w labiryncie, od którego należy rozpocząć ścieżkę

Cel wyznaczany jest przez następujący romb:

Romb symbolizujący miejsce w labiryncie, do którego ścieżkę należy wyznaczyć — Romb symbolizuje miejsce w labiryncie, do którego ścieżkę należy wyznaczyć

Zagadka nie musi zawierać dokładnie jednego elementu startowego i docelowego – może ich być wiele. Dzięki temu w prosty sposób mogłem zwiększyć poziom trudności niektórych zagadek, ponieważ gracz nie jest na początku pewien, gdzie powinien „wejść” do labiryntu i do której „mety” się kierować. Dopiero metodą prób i błędów oraz poprzez analizę innych elementów i kształtu labiryntu można wywnioskować gdzie ścieżka powinna się zaczynać, a gdzie kończyć.

Po lewej zagadka z pojedynczym startem (lewy, dolny róg) i jednym miejscem docelowym (prawy, górny róg). Po prawej zagadka z trzema startami i dwoma miejscami docelowymi.

Tworzenie ścieżek

Rozwiązując zagadki w Mazerze gracz próbuje znaleźć odpowiednią drogę przez labirynt. Zależało mi na tym, aby grało się jak najwygodniej, a skoro granie sprowadza się do wyznaczania ścieżki przez labirynt, to musiałem temu aspektowi gry poświęcić dużo uwagi.

Podstawowym sposobem na wyznaczanie ścieżki w zagadkach Mazera jest dotknięcie palcem (na urządzeniach mobilnych) lub kliknięcie lewym przyciskiem myszy (na komputerach stacjonarnych) elementu startowego i, nadal naciskając palcem/trzymając przycisk myszki przejechanie po ekranie w wybranym kierunku:

Animacja pokazuje sposób tworzenia ścieżki w zagadkach w grze Mazer — Podstawowe tworzenie ścieżki odbywa się poprzez naciśnięcie lewego przycisku myszki, gdy kursor jest nad elementem startowym, i kontynuowanie ruchu kursorem przez labirynt. Na urządzeniach mobilnych kursor myszki zastępuje palec gracza.

W ten sam sposób można się cofnąć – wystarczy przejechać palcem/kursorem myszy wstecz po już utworzonej ścieżce, aby ją usunąć:

Animacja prezentuje sposób na cofanie się w zagadce — Cofanie się w labiryncie

Jeżeli oderwiemy od ekranu palec/puścimy przycisk myszki, to tworzenie ścieżki zostanie przerwane w aktualnym miejscu. Ścieżkę można kontynuować po naciśnięciu na jej koniec:

Animacja prezentuje sposób na kontynuowanie tworzenia ścieżki przez labirynt — Kontynuowanie tworzenia ścieżki

Główną zasadą Mazera jest to, że nie można przecinać ścieżki, po której się idzie. Ma to bardzo duży wpływ na rozgrywkę oraz sposób myślenia o rozwiązywaniu zagadek, ponieważ trzeba brać pod uwagę tylko takie ścieżki przez labirynt, które się nie przetną.

Testując podstawową wersję tworzenia ścieżek zauważyłem, że czasem byłoby mi wygodniej, gdybym mógł nacisnąć palcem/kursorem myszy na fragment labiryntu, aby w ten sposób utworzyć ścieżkę. Jak pomyślałem, tak zaimplementowałem – jeżeli naciśniemy palcem/kursorem myszy punkt w labiryncie, do którego można dotrzeć w linii prostej albo z elementu startowego, albo z końca tworzonej ścieżki, to zostanie ona przedłużona do tego miejsca:

Animacja prezentuje tworzenie ścieżki przez wskazywanie kolejnych miejsc w labiryncie, do których można w linii prostej dotrzeć z elementu startowego lub końca ścieżki — Tworzenie ścieżki przez wskazywanie kolejnych miejsc w labiryncie, do których można w linii prostej dotrzeć z elementu startowego lub końca ścieżki

Cofanie się w labiryncie po utworzeniu długiej ścieżki zajmuje chwilę czasu – stwierdziłem więc, że warto będzie dodać możliwość szybkiego powrotu do danego miejsca po naciśnięciu go palcem/kursorem myszki – w ten sposób można się także cofnąć do samego początku:

Animacja prezentuje sposób na szybkie cofanie się do danego miejsca na ścieżce — Szybkie cofanie się do danego miejsca na ścieżce

Tak w praktyce wygląda tworzenie ścieżek przez labirynt w Mazerze, a tym samym – rozwiązywanie zagadek. Byłyby one nudne, gdyby nie dodatkowe elementy, które mogą być w nich zawarte. Zanim je jednak przedstawię, omówię jeszcze jedną ważną cechę zagadek Mazera.

Więcej technicznych detali dotyczących tworzenia ścieżek przedstawię w rozdziale o interfejsie użytkownika.

Obszary

Jedną z najważniejszych mechanik w Mazerze są obszary.

Obszary to fragmenty labiryntu, na które został on podzielony po wyznaczeniu w nim ścieżki. Są one tak istotne, ponieważ reguły związane z różnego rodzaju elementami, które gracz znajduje w zagadkach, są rozpatrywane „lokalnie” w obszarze, w którym danym element się znajduje.

Spójrz na poniższy przykład – ten labirynt został podzielony na trzy odseparowane obszary – na rysunku po prawej zaznaczyłem je kolorami:

Labirynt podzielony ścieżką na trzy odseparowane obszary – zaznaczyłem je kolorami po prawej stronie

Rozwiązywanie zagadek w Mazerze sprowadza się do podziału go na takie obszary, by spełnione były reguły wszystkich elementów, o których teraz Ci opowiem.

Elementy w labiryntach

Zagadki w Mazerze zawierają różnego rodzaju elementy, które wpływają na sposób wyznaczania ścieżki przez labirynt. W momencie wydania gry jest ich siedem rodzajów.

Diamenty

Diamenty jako jedyne elementy znajdują się na ścieżce, którą gracz wyznacza przez labirynt. Zadaniem gracza jest „zebranie” wszystkich diamentów, tzn. znalezienie takiej drogi, która przez nie przechodzi. Przykładowa zagadka z kilkoma diamentami:

Mała zagadka z diamentami i jej rozwiązanie

Gwiazdki

Gwiazdki to elementy, które muszą być odseparowane od innych gwiazdek, jeżeli różnią się kolorami. Tutaj z pomocą przychodzi dzielenie labiryntu na obszary, które opisałem w poprzednim podrozdziale. Istnieją cztery kolory gwiazdek: zielone, niebieskie, różowe, oraz pomarańczowe. Oto przykładowa zagadka:

Figury geometryczne

Figury geometryczne mogą występować w obszarze z innymi figurami geometrycznymi tylko w przypadku, gdy mają one ten sam kształt lub kolor. Oznacza to, że w jednym obszarze mogą być np. dwa trójkąty w tym samym lub innym kolorze, lub trójkąt i koło, o ile mają ten sam kolor. W grze występują trzy figury geometryczne: trójkąt, koło, oraz kwadrat, w czterech kolorach: zielonym, niebieskim, różowym, oraz pomarańczowym.

Przykładowa zagadka z figurami geometrycznymi oraz jej dwa możliwe rozwiązania:

Zagadki z figurami geometrycznymi — Przykładowa zagadka z figurami geometrycznymi. Pierwsze rozwiązanie (pośrodku) jest poprawne, ponieważ w obszarze po prawej stronie figury geometryczne mają ten sam kolor. Drugie rozwiązanie (na dole) jest poprawne, ponieważ w obszarze po lewej stronie są dwie takie same figury geometryczne – trójkąty.

Karty do gry

Karty tego samego koloru nie mogą być od siebie odseparowane, tzn. muszą być w tym samym obszarze. W grze są cztery pary kart: dama i król kier, dama i król karo, dama i król trefl, oraz dama i król pik. Przykładowa zagadka z parą kart:

Zagadka z kartami do gry i diamentami – wyznaczona w labiryncie ścieżka przechodzi przez oba diamenty, pozostawiając obie karty w tym samym obszarze

Kształty

Kształty (oraz ich „obrotowe” wersje) to, moim zdaniem, najciekawsze elementy, jakie występują w Mazerze, nie tylko ze względu na zasadę, jaka ich dotyczy w grze, ale także na algorytm dopasowywania kształtów, który musiałem wymyślić i zaimplementować.

Jeżeli w zagadce występuje jeden z kształtów, to zadaniem gracza jest poprowadzenie ścieżki przez labirynt w taki sposób, by obszar go zawierający miał taki sam kształt jak ten kształt-element. Obrazuje to poniższa zagadka:

Przykładowa zagadki z jednym kształtem i jej rozwiązanie — W rozwiązaniu zagadki kształt wyglądający jak litera „s” jest zamknięty w obszarze, który wygląda jak ten kształt. Na ostatnim obrazku zakolorowałem ten obszar, by to uwypuklić.

Zaprezentowana zagadka ma dwa rozwiązanie – zawierający ją kształt można „otoczyć” w obszar o odpowiednim kształcie na jeszcze jeden sposób:

Zagadki stają się dużo ciekawsze, gdy kształtów jest więcej – szczególnie, że dotyczy ich jeszcze jedna zasada – jeżeli kilka kształtów jest w tym samym obszarze, to mogą one być dowolnie „przestawiane”, by utworzyć większy kształt:

Rozwiązanie tej zagadki jest następujące (zwróć uwagę na drugi obrazek, na którym zakolorowałem fragmenty obszaru, które odpowiadają każdemu z kształtów):

Rozwiązanie zagadki z dwoma kształtami – obszar, w którym się znajdują, to połączony kształt obu tych elementów. Ta zagadka ma jeszcze jedno poprawne rozwiązanie – spróbuj je znaleźć!

W rozwiązaniu tej zagadki kształty zostały przemieszczone – płaski kształt został przeniesiony na górę, a kształt przypominający odwróconą piramidę znajduje się pod nim. Rozwiązanie jest poprawne, ponieważ obszar, w którym te elementy się znajdują, ma taki kształt, jak połączony kształt obu tych elementów. Istotne jest tutaj także to, że tylko kształty mogą się „przemieszczać” w obszarach – inne elementy, takie jak gwiazdki, zawsze zostają na swoim miejscu.

Z kształtami związana jest jeszcze jedna dodatkowa zasada – inne elementy znajdujące się w zagadkach także „zajmują” miejsce:

W rozwiązaniu tej zagadki gwiazdka wchodzi w skład obszaru, w którym znajduje się kształt wyglądający jak litera L:

Rozwiązanie zagadki z kształtem wyglądającym jak litera L i dwoma gwiazdkami – rozwiązanie jest poprawne, ponieważ niebieska gwiazdka „zajmuje” fragment obszaru

Rozwiązanie jest poprawne, ponieważ niebieska gwiazdka „zajmuje” fragment obszaru.

W Mazerze występuje osiem rodzajów kształtów w kilku wersjach – obróconych o 90, 180, oraz 270 stopni, oczywiście w przypadkach, w których ma to sens:

Wszystkie kształty występujące w Mazerze

Obrotowe kształty

Obrotowe kształty działają podobnie, jak zwykłe kształty, które omówiłem w poprzednim podrozdziale, jednak mogą one być obrócone o 90, 180, lub 270 stopni, aby „wpasować się” w obszar, który je zawiera. Spójrzmy na przykładową zagadkę:

Prosta zagadka z jednym obrotowym kształtem

Obrotowe kształty wyglądają jak zwykłe kształty, ale są lekko pochylone w lewo. Zaprezentowana zagadka ma dwa rozwiązania:

Dwa możliwe rozwiązania zaprezentowanej zagadki z obrotowym kształtem przypominającym piramidę

W rozwiązaniu po lewej stronie obszar, w którym znajduje się obrotowy kształt-piramida, ma taki sam kształt jak ten nieobrócony element, natomiast w rozwiązaniu po prawej stronie obszar wygląda jak piramida obrócona o 180 stopni.

Zwykłe i obrotowe (pochylone) kształty mogą występować w tej samej zagadce:

Zagadka z trzema kształtami – pochylony może zostać obrócony o 90, 180, lub 270 stopni

Rozwiązanie tej zagadki jest następujące – zwróć uwagę, że kształty się „przemieściły” i że element wyglądający jak pochylona litera L został obrócony o 90 stopni w prawo. W rozwiązaniu zaznaczyłem kolorami, gdzie w obszarze znajduje się odwzorowanie danego kształtu:

Rozwiązanie zaprezentowanej zagadki z trzema kształtami — Rozwiązanie zaprezentowanej zagadki – kształty „przemieściły” się w obszarze, w którym się znajdują, a kształt wyglądający jak litera L został dodatkowo obrócony o 90 stopni w prawo

Zagadki zawierające kształty i obrotowe kształty okazały się na tyle interesujące, że przygotowałem zbiór zagadek, który zawiera tylko elementy tych dwóch rodzajów. O tworzeniu zagadek do Mazera opowiem Ci w jednym z kolejnych rozdziałów.

Obecnie w Mazerze jest 6 obrotowych kształtów:

Wszystkie obrotowe kształty znajdujące się w zagadkach Mazera

Liczby

Jeżeli labirynt zawiera liczby i zostanie on podzielony, to w każdym oddzielnym obszarze, który zawiera liczby, ich suma musi być taka sama. Spójrzmy na przykład:

Prosta zagadka z liczbami i jej rozwiązanie – w każdym obszarze suma liczb jest identyczna i wynosi 2

Labirynt po prawej stronie został podzielony na dwa obszary – suma liczb w każdym z tych obszarów jest taka sama i wynosi 2, więc rozwiązanie jest poprawne.

Zagadki liczbowe spodobały mi się tak bardzo, że podobnie jak w przypadku kształtów, przygotowałem osobny zbiór zagadek, który zawiera głównie liczby. Głównie, a nie jedynie, ponieważ labirynt nie podzielony na obszary zawiera tylko jeden obszar i liczby przestają mieć znaczenie – jeżeli w zaprezentowanej powyżej zagadce nie byłoby diamentu, to mogłaby ona zostać rozwiązana w następujący sposób:

Pokazanie, że poprzednia zagadka bez diamentu może zostać rozwiązana w taki sposób, że labirynt nie zostanie podzielony na dodatkowe obszary – w takim przypadku liczby nie mają znaczenia — Poprzednia zagadka bez diamentu może zostać rozwiązana w taki sposób, że labirynt nie zostanie podzielony na dodatkowe obszary – w takim przypadku liczby nie mają znaczenia

W tym rozwiązaniu labirynt nie został podzielony na obszary – jest tylko jeden obszar całego labiryntu.

Dlatego w zagadkach z liczbami musiałem wymyślić jakiś sposób aby gracz sam podzielił labirynt na obszary, w których będą liczby, albo by labirynt miał już zdefiniowaną, z góry odseparowaną liczbę. Do pierwszego rozwiązania posłużyły mi diamenty, a do drugiego – nieregularne kształty zagadek. Oto dwie przykładowe zagadki z Mazera, które obrazują to zagadnienie:

Zagadka po lewej stronie jest tak skonstruowana, że gracz musi „otoczyć” jedynkę w lewym, dolnym rogu, aby zebrać diamenty. Spowoduje to, że rozwiązanie tej zagadki będzie musiało dzielić ten labirynt na obszary, w których jest co najwyżej jedna jedynka.

W zagadce po prawej, trójka jest odseparowana od reszty labiryntu – powoduje to, że pozostały fragment labiryntu musi zostać podzielony na takie obszary, by w każdym suma liczb wynosiła 3.

Oznaczanie poprawnych i niepoprawnych rozwiązań

Jeżeli gracz znajdzie poprawne rozwiązanie zagadki, to wyświetlona zostanie animacja zmieniająca kolor ścieżki na zielony:

Animacja wyświetlana po znalezieniu poprawnego rozwiązania zagadki

W przypadku nieprawidłowego rozwiązania zaznaczane są te elementy, których zasada nie została spełniona. Dla przykładu – w przedstawionej poniżej animacji gwiazdki o różnych kolorach nie zostały od siebie odseparowane oraz ścieżka „nie biegnie” przez jeden z diamentów:

Animacja nieprawidłowego rozwiązania zagadki — Gdy rozwiązanie zagadki jest nieprawidłowe, podświetlane są elementy, których reguła nie została spełniona

Dzięki zaznaczeniu elementów, których reguły nie zostały spełnione, gracz ma pojęcie „co poszło nie tak”.

Przykładowe zagadki

Skoro zapoznałeś(aś) się już z zasadami Mazera, to może spróbujesz znaleźć ścieżkę przez dwa poniższe labirynty, biorąc pod uwagę zasady dotyczące znajdujących się w nich elementów?

Dla przypomnienia:

Okrąg określa punkt startowy, a romb – cel, do którego należy dotrzeć.
Należy przejść przez wszystkie diamenty znajdujące się w labiryncie.
Gwiazdki różnych kolorów muszą być od siebie odseparowane, tzn. być w innych „obszarach”, na które ścieżka przez labirynt go podzieli.
Karty do gry tego samego koloru muszą być w tym samym obszarze.
Obszar musi mieć taki sam kształt jak element-kształt, który się w nim znajduje. Inne elementy, takie jaki karty do gry, „zajmują” miejsce w obszarach.
Nie można przecinać ścieżki, po której się idzie.

Rozwiązania obu zagadek znajdziesz na końcu wpisu w przyszłym tygodniu, który będzie dotyczył procesu developmentu Mazera. Zapraszam za tydzień!