microgeek.eu

Witam wszystkich 
Dziś mnie natchnęło na zrobienie prostej gierki – sapera, ale nie o samą grę tu chodzi, a o to, ze przy okazji przedstawię krok po kroku z przykładami jak taką grę napisać pokazując swoją metodę podchodzenia do czegoś takiego.

Założenia projektu:
- kod na tyle „uniwersalny”, żeby można było go dostosować do innych rzeczy
- wynikiem ma być w pełni funkcjonalna gra
- wyświetlanie pozostałej ilości bomb
- randomowe plansze – to w późniejszej wersji – wjedzie pewnie szum z ADC jako mechanizm generowania liczb pseudolosowych (czy wtedy już będą losowe?)

Jest to dość spory projekt – potrzebujemy więc plan działania co i jak.
1. wybór platformy sprzętowej
2. pierwotny wygląd planszy – funkcja rysująca
3. funkcje umożliwiające „zapełnienie” poszczególnej kratki jaką chcemy
4. funkcje umożliwiające przechodzenie pomiędzy poszczególnymi kratkami
5. sposób zapisu danych odnośnie planszy + funkcje
6. sposoby wyświetlania danych na planszy + funkcje
7. interakcje - czyli ogólnie gra - zaznaczanie pól, odkrywanie, wygrana/przegrana + funkcje
7. sposób przedstawienia wyniku/ilości pozostałych bomb itp. + funkcje


Roboty jest sporo więc zaczynamy.
1. wybór platformy sprzętowej

Tutaj w moim przypadku najlepszym wyborem jest płytka z projektu SUDOKU STM32 – zawiera mikrokontrolerek STM32F030C8T6, kolorowy wyświetlacz ILI9341 + przyciski. Dzięki temu też podstawowe funkcje miałem już napisane – teraz je poprzerabiałem na bardziej uniwersalne – więc nawet jakby ktoś chciał zrobić szachy na tej podstawie – nie ma problemu!

2. Pierwotny wygląd planszy – funkcja rysująca

Wszyscy zapewne wiemy jak wygląda saper. Plansza z kwadratami, jednak jej rozmiar nie jest do końca zdefiniowany. Pamiętając o założeniu z uniwersalnością najpierw zadeklarujmy sobie kilka rzeczy z których najważniejsze to ile pikseli ma mieć bok kratki, ile kratek ma być w osi X i ile w osi Y. Czyli prosty sposób:


Możemy teraz napisać funkcję, która rysuje obramowania:


Efekt widzimy na zdjęciu:



Efekt dla ustawień:

Jest taki:



Czyli ten punkt już ogarnięty!

3. funkcje umożliwiające „zapełnienie” poszczególnej kratki jaką chcemy

Co chcemy uzyskać – funkcje, która po podaniu numeru kratki i zawartości – zadba nam o jej wypełnienie. Dla ułatwienia wpiszmy teraz do niej jakąś cyferkę.
Wjeżdzaja kolejne definy – potrzebne do umiejscowienia liteki w kratce – czyli przesunięcie w osi X i Y od piksela z „początkiem” kratki:

Najwygodniej będzie, jeśli nasza funkja będzie przyjmować numer kratki, jej zawartość i kolor tła. Wygląda ona następująco:

Komentarze z kodu mówią same za siebie.

Przetestujmy teraz jej działanie za pomocą funkcji testowej:

Efekt – na filmiku:

https://youtu.be/M6DcSE_EoiE

Jak widać – wszystko działa ok! nawet dla różnych rozmiarów planszy.
4. funkcje umożliwiające przechodzenie pomiędzy poszczególnymi kratkami
Co chcemy uzyskać – możliwość przechodzenia pomiędzy kolejnymi kratkami za pomocą „strzałek na płytce”. Wiadomo strzałka w górę – do góry itp.
Wprowadźmy kilka zmiennych globalnych (globalnych dla wygody):

Zróbmy jedną funkcję ruchu, która jako parametr pobierze kierunek ruchu. Ułatwmy sobie sprawę enumem:

enum{ruch_lewo, ruch_prawo, ruch_gora,ruch_dol};

I tak wygląda nasza funkcja:

Teraz kwestia pożenienia tego ze sprzętem – akurat ja stosuję bibliotekę do obsługi przycisków, która wywołuje podpięte callbacki do eventów przycisków. Musimy więc dla każdego przycisku napisać osobną funkcję:

I podpiąć je do przycisków:


Wyżej użyliśmy funkcji “zamaluj_pola_po_ruchu();” – co ona robi – dla pozycji ze zmiennej „wybrana_kostka” wpisuje cyferkę „1”, natomiast dla poprzedniej wpisuje cyferkę „0” – wtedy ładnie przetestujemy działanie.
Tak ona wygląda:

Uruchamiamy całość i oto efekt:

https://youtu.be/S8M40DbdZ1Y

W sumie mamy już nasz „silnik gry” dalej skupimy się bardziej na logice gry.

CDN... komentarze uwagi itp mile widziane kody udostępnie na samym końcu

no no - z zainteresowaniem czytam ....

No to kolejna część:
Jednocześnie działamy nad:
5. sposób zapisu danych odnośnie planszy + funkcje
6. sposoby wyświetlania danych na planszy + funkcje

Czas na przemyślenie zasady logiki gry, zaczynając od sposobu przechowania informacji.
W saperze najważniejsze są bomby – musimy jakoś ładnie przechować ich pozycję. Proponuję tu zwykłą tablicę o rozmiarze ilości pól. Jeśli jest tak „1” – to jest mina, „0” oznacza „czystą”. Oczywiście trochę to nadmiarowe, ale uprości inne funkcje, a RAMu mamy sporo.

Zrobiłem ją jako dwuwymiarową tablicę – tu spoiler – dzięki temu łatwiejsza będzie funkcja licząca “bomby w sąsiedztwie”. Czasem przyda się też dostęp jednowymiarowy i mam do tego osobny wskaźnik:

Zróbmy sobie kilka testowych funkcji, które zapełnią nam tablicę bomb:

Teraz czas na wyświetlenie tego, też w formie testowej:

Tak to wygląda:

Dobrze. Mamy zapisane pozycje bomb, ale same w sobie nam nic nie dają. Pomyślmy jakie są możliwości zawartości pól w grze typu saper:
- zwykła kratka niekliknięta
- kratka z kursorem
- MINA
- kratka ze znakiem zapytania
- kratka z rozbrojona miną
- kratka z numerkiem oznaczającym ilość bomb w sąsiedztwie
Te informacje też warto przechować sobie w tablicy. Przyjmijmy taką metodę zapisu, że każda komórka ma 1 bajt danych.
- cztery najmłodsze bity – „numer bomb w sąsiedztwie” tu uwagi małe – „0” oznacza pustą kratkę, „f” – wykorzystamy jako oznaczenie bomby w tym miejscu
- następnie informacja, czy kratka jest odkryta, czy nie
- czy jest znakiem zapytania
- czy jest rozbrojona bomba
Został nam 1 bit – chciałem dać tu właściwość „czy dana kratka jest wybrana”, ale mamy to w zmiennej „wybrana_kostka” więc nie potrzebujemy redundancji.
Tablica z naszymi danymi oraz makra dla wyłuskania stanów pól:

Teraz musimy napisać funkcję, która utworzy nam tablicę_kratek z tablicy bomb, wypełniając ją np. liczbami bomb w sąsiedztwie…
Aaale jeszcze nie mamy wyznaczonych tych liczb – zajmie się tym osobna funkcja:

Jak w komentarzu – pisałem ja jako zadanie w codefights.com.
Czyli dopiero teraz – konwerter tablicy bomb na tablicę kratek:

Przy okazji zasłaniamy wszystkie pola. Wyświetlmy sobie to i zobaczmy jak działa:

Efekt:


Miodek. Tutaj przyznam się szczerze nie miałem do końca pomysłu co najlepiej ruszyć dalej. Skupiłem się na funkcji, która rysuje poszczególne kratki. W jej środku sprawdzamy, czy jest to znak zapytania, numer, czy coś innego.
AAAA – kwestia grafik w grze – to zostawiamy na koniec! Teraz znak zapytania to znak zapytania, mina to „M”, rozbrojona to „R”.

Sprawdźmy, czy działa. Pamiętajmy, ze trzeba „odsłonić” wszystkie komórki + dla testu kilka dałem jako rozbrojone i znaki zapytania. Możemy napisać główna funkcję wyświetlającą planszę:

Po niej otrzymamy cały ekran zamalowany + zaznaczony kursor.
Żeby lepiej przetestować używamy czegoś takiego:

Efekt:


Dodajmy kilka rozbrojonych i znaków zapytania:

Efekt:

Względem poprzedniego obrazka - zmieniło się w pierwszych 4 kratkach - są 2 miny i 2 znaki zapytania.

Teraz możemy sobie stworzyć funkcje „nowa gra” która przygotowuje wszystko dla nas:

Czyli dodaliśmy:
- system zapisywania informacji o bombach i o kratkach
- funkcje przeliczającą ilość sąsiednich bomb
- prototypowe wyświetlanie pobranych z komórek
- funkcje odpalającą naszą grę i wykonującą komplet niezbędnych funkcji - kod główny programu będzie "czystszy"

Trochę już zrobione i nie było wcale trudno - ale już wiem co będzie najtrudniejsze - motyw, gdy "klikniemy" na pole z numerkiem 0 czyli tzn "puste" i wtedy trzeba odsłonić wszystkie pola do niego przyległe z cyferkami. Będzie to zdecydowanie najtrudniejsze, ale nie jakieś ogólnie mega trudne pewnie jakaś ładna rekurencja wjedzie

No to lecimy dalej dziś robimy:

7. interakcje - czyli ogólnie gra - zaznaczanie pól, odkrywanie, wygrana/przegrana + funkcje
Temat mega do wcześniejszego przemyślenia, żeby potem nie poprawiać funkcji itp.
Chodzenie po planszy już mamy załatwione. Teraz czas na inne interakcje użytkownika. Wypiszmy jakie są możliwe:
- odsłonięcie komórki
- zaznaczenie jako mina „rozbrojona”
- zaznaczenie jako znak zapytania
- skoro jakoś można je zaznaczyć to też trzeba je odznaczyć

Co mamy do dyspozycji z hardware – przycisk OK – musimy go wykorzystać do kilku funkcji. Oczywiście można to zrobić na mnóstwo sposobów – moja propozycja jest taka:

Poruszamy się normalnie po planszy strzałkami, a za pomocą „OK” wchodzimy w „tryb edycji” danej komórki. Musimy ten tryb jakoś oznaczyć – jakiś inny kolorek wybranego pola + zmienna z informacją o tym. Gdy jesteśmy w trybie edycji przyciski strzałek będą miały inne funkcje:
- up – odsłonięcie komórki
- down – wybranie komórki jako „rozbrojona mina”
- left – znak zapytania
- prawo – wyjście z tego trybu edycji

Dodatkowo jeśli wjedziemy na komórkę ze znakiem zapytania no to możemy ją zmienić na „rozbrojoną minę” albo odsłonić. Nie będę tego jakoś blokował – użytkownik musi sam się pilnować w tej kwestii.

Generalnie oznaczanie jako znak zapytania i rozbrojenie to trywialne kwestie. Chociaż – zaznaczanie min jako rozbrojonych powinno zmniejszać licznik min – trzeba go zaimplementować jak również jego dekrementację i wyświetlanie.

Pomyślmy co się może stać po odsłonięciu kratki:
- jeśli jest tam cyfra 1-8 – wyświetlamy ją ładnie
- jeśli jest tam mina – wyświetlamy ją i kończymy grę – potem możemy zrobić jakąś ładną animację na koniec itp.
- teraz najbardziej problematyczna sprawa – odsłaniamy pole z numerem 0 – wtedy w saperze odsłaniają się wszystkie przyległe do tego pola kratki z tą samą liczbą.

W sumie teraz „tylko” przemyśleliśmy działanie, ale jest to bardzo ważne. W następnym wpisie przystąpimy do okodzenia tego - czyli podpunkt "+ funkcje"

Jakieś sugestie odnośnie działania?

No to lecimy dalej dziś robimy:
7. interakcje - czyli ogólnie gra - zaznaczanie pól, odkrywanie, wygrana/przegrana + funkcje
Temat mega do wcześniejszego przemyślenia, żeby potem nie poprawiać funkcji itp.
Chodzenie po planszy już mamy załatwione. Teraz czas na inne interakcje użytkownika. Wypiszmy jakie są możliwe:
- odsłonięcie komórki
- zaznaczenie jako mina „rozbrojona”
- zaznaczenie jako znak zapytania
- skoro jakoś można je zaznaczyć to też trzeba je odznaczyć

Co mamy do dyspozycji z hardware – przycisk OK – musimy go wykorzystać do kilku funkcji. Oczywiście można to zrobić na mnóstwo sposobów – moja propozycja jest taka:
Poruszamy się normalnie po planszy strzałkami, a za pomocą „OK” wchodzimy w „tryb edycji” danej komórki. Musimy ten tryb jakoś oznaczyć – jakiś inny kolorek wybranego pola + zmienna z informacją o tym. Gdy jesteśmy w trybie edycji przyciski strzałek będą miały inne funkcje:
- up – odsłonięcie komórki
- down – wybranie komórki jako „rozbrojona mina”
- left – znak zapytania
- prawo – wyjście z tego trybu edycji
Dodatkowo jeśli wjedziemy na komórkę ze znakiem zapytania no to możemy ją zmienić na „rozbrojoną minę” albo odsłonić. Nie będę tego jakoś blokował – użytkownik musi sam się pilnować w tej kwestii.
Generalnie oznaczanie jako znak zapytania i rozbrojenie to trywialne kwestie. Chociaż – zaznaczanie min jako rozbrojonych powinno zmniejszać licznik min – trzeba go zaimplementować jak również jego dekrementację i wyświetlanie.
Pomyślmy co się może stać po odsłonięciu kratki:
- jeśli jest tam cyfra 1-8 – wyświetlamy ją ładnie
- jeśli jest tam mina – wyświetlamy ją i kończymy grę – potem możemy zrobić jakąś ładną animację na koniec itp.
- teraz najbardziej problematyczna sprawa – odsłaniamy pole z numerem 0 – wtedy w saperze odsłaniają się wszystkie przyległe do tego pola kratki z tą samą liczbą.
W sumie teraz „tylko” przemyśleliśmy działanie, ale jest to bardzo ważne. W następnym wpisie przystąpimy do okodzenia tego

Czyli działamy:
Ustawiliśmy, ze po kliknięciu „ok” na komórce mamy przejść do menu edycji – zróbmy sobie zmienną z trybem w jakim jesteśmy:

teraz funkcja dla przycisku OK:

Czyli zwykłe przełączenie trybu, powrót zrobimy trochę inaczej. Na logikę teraz – dla funkcji przycisków sterujących powinniśmy w środku też zrobić takie rozróżnienie, czyli w praktyce poprzerabiać ich funkcje, ale one już działają, nie chcemy tam grzebać… Wykorzystajmy callbacki!
Więc – mieliśmy funkcje typu:

Dodajmy teraz takie:

A gdzie będziemy podmieniać te callbacki? W kodzie od przycisku OK:

Zróbmy to jeszcze ładniej:

Takie moje TODO na potem – przerobić bibliotekę do przycisków tak, żeby można było podać też samą funkcję, bez ustawień dotyczących dobouncingu.
Czyli teraz napiszmy sobie zestawik funkcji do odsłaniania kratek, znakowania znakiem zapytanie i oznaczania jako mine (te funkcje są typowo „saperowe” więc maja taki przedrostek w nazwach, wcześniejsze są bardziej „ogólne”):

Teraz funkcje przyciskow:

Do przejścia w tryb poruszania wykorzystałem taką prostą funkcję:

Ok więc co teraz mamy – dodaliśmy możliwość zaznaczania/odkrywania poszczególnych kratek obecnie jeszcze bez żadnego dodatkowego efektu tzn. przegranej itp. Sprawdźmy, czy to działa tak jak chcieliśmy:
// filmik dodam potem :p
Co widzimy: działa nam ustawianie rozbrojeń, i znaków zapytania, odkrywanie oczywiście też i to liczb i to min. Widać jedną wadę – gry jesteśmy w trybie edycji – przydałaby się jakaś informacja o tym – ustalmy, że będzie to kolor kratki zaznaczenia inny.