Jak stworzyć prostą grę w przeglądarce internetowej? Część 1 (teoretyczna).

Dla kogo jest ten wpis?

Wpis został przygotowany z myślą o osobach dopiero zaczynających przygodę z tworzeniem gier internetowych (lub stron internetowych). Główne zasady tej lekcji:

  • wiedza zrozumiała dla wszystkich;
  • każdy skrót i trudne pojęcie wyjaśnione;
  • gra jest prosta, a co za tym idzie długość kodu gry jest krótsza. Pozwoli to na przygotowanie optymalnej długości lekcji;
  • rozwiązania zastosowane w kodzie gry są dostosowane do użytkowników początkujących. Bardziej zaawansowane rozwiązania będą prezentowane w kolejnych lekcjach.

Materiał dotyczy głównie języka Javascript. Opanowanie tego języka jest podstawą w zawodzie programisty stron internetowych. Z efektami pracy Javascriptu możemy się spotkać:

  • w niektórych grach w przeglądarce internetowej (pod koniec tej lekcji będzie przykład działającej gry 🙂 );
  • w niektórych animacjach na stronie, np. wysuwane menu (kliknij „szukaj w serwisie” na Portalu Funduszy Europejskich, strona dostępna 20 czerwca 2016 r.);
  • podczas dodawania nowego elementu/treści na stronie bez przeładowywania strony przez Internautę, np. utworzenie nowej wiadomości w Gmailu powoduje dodanie formularza do wysłania e-maila (zaloguj się do poczty gmail i kliknij „utwórz”);
  • w niektórych komunikatach na stronie, np. informacja że musisz się zalogować na Facebooku, żeby zobaczyć więcej materiałów (wejdź na profil bloga i przewijaj stronę w dół).

Co będziesz potrafiła/potrafił po skończeniu lekcji?

Lekcja pozwoli Ci zrozumieć jak są tworzone proste gry w przeglądarce internetowej. Nauczysz się:

  • jak tworzyć obszar gry (czyli jak powiedzieć komputerowi, gdzie ma wyświetlać grę);
  • jak dodawać obrazki do gry;
  • jak wprawić w ruch obrazki (czyli podstawowa animacja postaci);
  • jak wykryć jaki klawisz był wciśnięty;
  • jak wyświetlić tekst w grze;
  • jak tworzyć funkcję (czyli jak dzielić kod na mniejsze porcje, które wykonują zadania);
  • jaki jest podstawowy mechanizm wykrywania kolizji ze ścianą lub innym obiektem (czyli jak wytłumaczyć komputerowi, gdzie są bariery w wirtualnym świecie).

Co musimy przygotować zanim zaczniemy tworzyć kod?

Przed programowaniem warto opracować dokument opisujący grę, który będzie zawierał informacje:

  • do kogo chcemy skierować grę lub dlaczego ją robimy (w naszym przypadku jest to nauka programowania);
  • jaką chcemy wykorzystać technikę (gra w przeglądarce internetowej, zrobiona w technice 2d. Czyli możemy zawsze poruszać się góra-dół, lewo-prawo, ale nigdy blisko-daleko czyli bez trzeciego wymiaru);
  • jaka jest mechanika gry – czyli co robi się w grze (rybka ucieka przed rekinem poprzez ruch w górę i dół, natomiast rekin pojawia się w losowym miejscu i porusza się z prawej strony do lewej);
  • jaki jest świat gry (w naszym przypadku to ocean).

To są podstawowe informacje o naszej grze, ale ze względu na cel (nauka) jest ona uproszczona. W przyszłości tworząc grę musisz zwrócić szczególną uwagę na etap projektowania, bo on jest kluczowy w osiągnięciu sukcesu gry. Należy pamiętać, aby gra:

  • miała czynnik sprawiający przyjemność (np. możliwość wcielenia się w strażaka itd.);
  • miała realne cele do osiągnięcia (misje nie powinny być super ciężkie);
  • nagradzała za sukcesy (np. dodatkowa broń);
  • była zróżnicowana (nowe poziomy i nowi przeciwnicy, dobrze jest zaskakiwać czymś nowym);
  • miała spójny świat (postacie i lokalizacje tworzą całość);
  • miała ciekawy scenariusz (gra powinna opowiadać historie i prowadzić przez różne punkty).

Więcej na ten temat można znaleźć szukając stron internetowych i książek „o projektowaniu gier”.

Tworzymy prosty szkic gry, bo życie jest za krótkie, aby iść w ślady Leonarda da Vinci ;-). A tak poważnie to na tym etapie testujemy pewne pomysły, dlatego skupiamy się na pomyśle gry, a nie jej prezentacji (rysunku). Często w trakcie tworzenia gry zmieniane są początkowe założenia.

Obrazek (kliknij, aby powiększyć):

Na obrazku morze, a w nim rybka i rekin. Rybka może poruszać się w górę i w dół, a rekin wypływa z prawej strony i znika po lewej

Nasza gra będzie polegała na ucieczce rybki przed rekinem. Potrzebujemy trzech grafik: rybki, rekina, oceanu. Nie możemy pobrać przypadkowych zdjęć z Internetu, ponieważ grafika może być chroniona na mocy prawa autorskiego (więcej o tym będzie w innym wpisie). Rozwiązaniem naszego problemu jest skorzystanie ze zdjęć, które są udostępnione w oparciu o licencje Creative Commons (licencje często pozwalają na kopiowanie/edytowanie zdjęć). Zwróć uwagę, że są różne rodzaje licencji Creative Commons i w zależności od niej możesz (np. edytować zdjęcie) i musisz różne rzeczy (np. poinformować o autorze).

Wikipedia uruchomiła projekt Wikimedia Commons. Zawiera on zdjęcia, które często są oparte o te licencje. Nasze zdjęcia to:

  • rekin (autor Tery Gross);
  • rybka (autorka Elma from Reykjavík);
  • ocean (autor WiLPrZ from Rabat, Maroc). Nie mam pewności czy zdjęcie zostało zrobione w morzu czy w oceanie, ale na potrzeby gry przyjmujemy, że jest to ocean :).

Każde zdjęcie w grze będzie tworzyło oddzielną warstwę na ekranie komputera. Co to oznacza? Wyobraź sobie, że masz wydrukowane 3 zdjęcia w różnych rozmiarach.

Ocean tworzy tło dla rekina i rybki, dlatego powinien być największym zdjęciem (kładziesz je na podłodze, powstaje pierwsza warstwa). Rybka i rekin powinny być wydrukowane jako mniejsze zdjęcia, które mieszczą się w oceanie. Kładziesz rybkę na oceanie (zasłania ona część oceanu, druga warstwa). Następnie kładziesz rekina i on zasłania też część oceanu, ale może też zasłonić część rybki (3 warstwa). Rekin może zjeść rybkę, więc to on zawsze powinien zasłaniać rybkę ;-). Efekt (kliknij, aby powiększyć):

Obrazek skłąda się z trzech zdjęć, które są w różnych rozmiarach i są ułożone jeden pod drugim. Największe zdjęcie to ocena, a na nim zdjęcie rybki i rekina

Zdjęcia w internecie mają kształt prostokąta lub kwadratu. Można stworzyć iluzję, że zdjęcie rybki nie ma kształtu prostokąta, jeśli pozbawimy zdjęcie tła. Dlaczego jest to iluzja? Zdjęcie nadal będzie prostokątne tylko tło wokół rybki będzie przezroczyste. Na zdjęciu z oceanem pływa człowiek, aby się go pozbyć należy wyciąć fragment zdjęcia z człowiekiem. 

W podobny sposób powstawały kreskówki (polskie, amerykańskie itd.). Oddzielnie rysowano tło, a następnie nakładano na to narysowane postaci z przezroczystym tłem. Dobrze obrazuje to film „Jak powstawał film Bolek i Lolek” (film dostępny 20 czerwca 2016 r.), należy oglądać od 3 minuty 11 sekundy:

Przezroczyste tło na zdjęciu rybki i rekina spowoduje, że będą one pływały w oceanie.  Efekt (kliknij, aby powiększyć:)

Zdjęcie z gry, rybka i rekin pływają w oceanie.

 Edycję zdjęć można zrobić w darmowym programie graficznym Gimp. Wymagały one:

  • zmniejszenia wysokości i szerokości (rekin musi być większy od rybki), 
  • usunięcia tła i zapisania w formacie png (pozwala on na przezroczystość);
  • wycięcia fragmentu oceanu;
  • manipulacja wyglądem rybki i rekina (zmiana kształtu rekina, zmiana koloru rybki i rekina).

Ten wpis ma się skupić na tworzeniu gier, dlatego program graficzny Gimp będzie omówiony w innym wpisie. Przygotowałem grafikę do gry, która posłuży do nauki (wybacz jakość, ale grafika jest tylko dla nauki 🙂 ):

  • rybka:
    rybka
  • rekin:
    rekin
  • ocean:
    ocean

Jak stworzyć miejsce do wyświetlenia gry?

Proszę utwórz na pulpicie folder o nazwie „gra” i zapisz w nim wszystkie zdjęcia (kliknij prawym przyciskiem myszy, a następnie wybierz z menu „zapisz element docelowy jako”) :

Otwieramy teraz notatnik i zapisujemy plik „gra_rybka.html” we wcześniej utworzonym folderze o nazwie „gra” (jeśli masz problem z tym krokiem proszę zajrzyj do lekcji „Jak stworzyć swoją pierwszą stronę internetową?„).

Musimy teraz przygotować szablon strony (strona internetowa będzie wyświetlała naszą grę). Szablon strony to gotowiec, który wykorzystujemy przy każdej tworzonej stronie. Do otwartego notatnika wklej podany niżej kod strony (szablon strony omówiony jest w lekcji „Jak stworzyć swoją pierwszą stronę internetową?„):

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title>Gra rybka</title>

    </head>
    <body>
    </body>
</html>

Teraz musimy wyznaczyć miejsce na stronie, gdzie będzie się wyświetlać gra (obszar gry). Do tego celu służy znacznik <canvas> (ang. płótno) i znacznik zamykający </canvas>.  Dlaczego płótno? W rzeczywistości to miejsce, gdzie rysujemy obrazki (podobnie jak na kartce). Mamy możliwość wyczyszczenia tego co narysowaliśmy, a także narysowania na nim nowego rysunku. Efekt animacji uzyskujemy przez narysowanie, wyczyszczenie i narysowanie kolejnego ruchu (przy tworzeniu kreskówek jest podobna zasada, ale tam nie czyści się kartki tylko używa nowej ;-)). 

Musimy określić wymiary naszego płótna (obszaru gry), a także nadać mu nazwę (identyfikator). To ostatnie jest konieczne, abyśmy mogli przeglądarce internetowej powiedzieć, gdzie coś ma zmieniać (np. gdzie ma rysować). Byłoby dobrze też pokazać obramowanie płótna („canvas”). Użyjemy takiego kodu (wprowadzamy go pomiędzy znaczniki <body> i </body>):

        <canvas id="tu_rysuj" width="700" height="700" style="border: 1px solid black;">
            Niestety Twoja przeglądarka nie obsługuje gier HTML 5. Zaktualizuj przeglądarkę internetową.
        </canvas>

Zwróć uwagę, że pomiędzy znacznikami <canvas> i </canvas> pojawiła się informacja dla starszych przeglądarek internetowych, które nie rozumieją (nie obsługują) naszego kodu. Płótno (canvas) zostało wprowadzone w 2014 r. wraz z nową wersją języka (HTML 5), dlatego nie wszystkie starsze przeglądarki radzą sobie z tym rozwiązaniem. Przeanalizujmy teraz kod:

  • nazwa naszego płótna (identyfikator) to „tu_rysuj”, a prawidłowy kod to: id="tu_rysuj";
  • wymiary naszego płótna to 700 pikseli na 700 pikseli. Najpierw podajemy szerokość (ang. width), a następnie wysokość (ang. height). Kod odpowiedzialny za wymiary: width="700" height="700".
  • obramowanie naszego płótna w postaci czarnej ramki osiągamy za pomocą języka CSS. Nie przejmuj się, że do gry są stosowane 3 języki (HTML, CSS, Javascript). Z czasem będzie to coraz łatwiejsze i bardziej intuicyjne. Obramowanie płótna uzyskujemy za pomocą słowa „border” (ang. obramowanie), grubość 1 piksel za pomocą „1px”, ciągłe obramowanie (wygląd) to „solid”, a kolor czarny to „black” (angielski wszędzie angielski). Wszystko przypisujemy do „style”, dzięki temu przeglądarka wie że będzie miała do czynienia z kodem CSS.  Oto kod: style="border: 1px solid black;";

Pomiędzy znaczniki <body> </body> wklej cały kod, a następnie zapisz. Przeciągnij (lewym przyciskiem myszy) do przeglądarki plik „gra_rybka.html” z folderu „gra”. Powinieneś zobaczyć duży kwadrat z czarnym obramowaniem.

Cały kod wygląda teraz tak:

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title>Gra rybka</title>

    </head>
     <body>

         <canvas id="tu_rysuj" width="700" height="700" style="border: 1px solid black;">
            Niestety Twoja przeglądarka nie obsługuje gier HTML 5. Zaktualizuj przeglądarkę internetową.
        </canvas>
    </body>
</html>

Jak zaplanować kod gry?

Przed napisaniem kodu gry musimy zajrzeć do dokumentu opisującego grę (mówiliśmy o nim wcześniej). Pozwoli to nam zastanowić się co musi robić kod, aby gra działała. Najlepiej rozpisać to na kartce. Gra musi:

  • pokazać (wczytać) obrazki (rekin, rybka, ocean);
  • wprawić w ruch rekina (w losowym miejscu) i wykryć krawędzie (koniec obszaru) gry;
  • wprawić w ruch rybkę (sprawdzić jaki klawisz jest wciśnięty) i wykryć krawędzie gry.
  • wykryć złapanie rybki przez rekina (kolizje obu obrazków).

To są zadania gry, które mogą składać się z jeszcze mniejszych zadań. Wkrótce się nimi zajmiemy. Na typ etapie nie musisz programować, ale mimo tego jest to ważny etap. Musisz logicznie ułożyć zadania, aby gra działa prawidłowo. O co chodzi?

  • musisz starać się przewidzieć problemy, np. co zrobić z rekinem jak popłynie za obszar gry (rekin nie wie, gdzie kończą się krawędzie gry)?
  • musisz zaplanować odpowiednią kolejność działania kodu, np. przed wprawieniem w ruch rekina najpierw trzeba wczytać obrazek z rekinem.

Początkujący programiści często posługują się w tym celu pseudokodem. Każdy kod ma logikę i to ona jest kluczowa. W pseudokodzie zapisujesz co wykonuje kod i od czego zależy, np.:

  • jeśli rekin dotknie rybkę przerwij grę i wyświetl komunikat „koniec gry”.

W tym wpisie pominiemy tworzenie pseudokodu, ale zachęcam Cię do używania tego sposobu przy kolejnych grach.

UWAGA: druga część lekcji jest dostępna pod linkiem: Jak stworzyć prostą grę w przeglądarce internetowej? Część 2 (praktyczna).

Podsumowanie

  • Dla kogo jest ten wpis? – Gra jest prosta i jej stworzenie ma być łatwe dla początkujących. Główny język wykorzystany do stworzenia gry to Javascript.
  • Co będziesz potrafiła/potrafił po skończeniu lekcji? – Lekcja dotyczy wykorzystania obrazków, animacji, klawiatury, wykrywania kolizji.
  • Co musimy przygotować zanim zaczniemy tworzyć kod? – Dobrze jest stworzyć dokument opisujący grę, który zawiera jej najważniejsze założenia. Kolejnym etapem są proste szkice gry. Ostatnim jest pozyskanie grafiki do gry (istotne jest przestrzeganie praw autorskich).
  • Jak stworzyć miejsce do wyświetlenia gry? – Używamy do tego znacznika canvas (płótno). Określamy w nim rozmiar płótna i identyfikator.
  • Jak zaplanować kod gry? Używając pseudokodu opisujemy zadania, które musi wykonać kod. W ten sposób projektujemy strukturę (rozmieszczenie) kodu.

 

 

  • Podziel się na:

Zobacz również:

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *