Prosta gra we Flashu

Wykorzystaj ActionScript 2.0 do stworzenia porywającej wersji jednej z kultowych gier lat 80., Breakouta, znanego również pod nazwą Arkanoid.

Sposób, w jaki Flash został przystosowany do operowania grafiką oraz rosnące możliwości języka skryptowego ActionScript sprawiają, że jest to idealne narzędzie do tworzenia w sposób szybki i łatwy niewielkich internetowych gier.

Pisanie gier to coś, czego spróbował chyba każdy webdesigner pracujący we Flashu. I prawie każdy popełniał te same błędy. A to dlatego, że tworzenie gier może być trudniejsze, niż to się z pozoru wydaje. Nie twierdzimy, że jest to wyjątkowo trudne zadanie – tak nie jest.

Główny problem polega na tym, że większość gier nie działa w sposób liniowy, w odróżnieniu od stron internetowych: tam użytkownik przechodzi od jednego dokumentu do drugiego.

Jasne reguły

Gry są inne. Oddajesz pełną kontrolę użytkownikom, to właśnie im pozostawiasz wybór obranej drogi. W wielu przypadkach masz jednocześnie do czynienia z wieloma typami wprowadzanych danych i wartościami, co tworzy podatny grunt dla wszelkiego rodzaju błędów.

W tym przewodniku przygotujemy prostą wersję gry Breakout, w której rozgrywka przebiega w sposób znacznie bardziej nieliniowy niż na przykład w szachach. W przypadku tej starożytnej gry silnik programu może poczekać na dane wprowadzone przez gracza, wstrzymać rozgrywkę podczas ich przetwarzania i wprowadzić niezbędne korekty. Lecz w grze takiej jak Breakout ruch odbywa się nieprzerwanie, nie ma tur i gracz może cały czas wykonywać nowe ruchy.

Taki scenariusz wymusza oparcie się na jasnych regułach gry, która musi działać poprawnie sama z siebie.

Czas na plan

Kluczową rolę odgrywa tutaj ostrożne planowanie – trzeba zastanowić się nad sposobem, w jaki reguły gry zostaną przetłumaczone na język kodu. W takich przypadkach ujawnia się potęga języka ActionScript i jego prostota. Firma Macromedia dostarczyła bowiem zbiór gotowych klas i metod, które zostały dostosowane do takiego zestawu interakcji, na jakich bazują gry.

Tak więc dobre rozplanowanie gry to kwestia zanalizowania poszczególnych niezbędnych elementów, a następnie wyszukania skryptów ActionScript, które niosą ze sobą taką funkcjonalność. Np. dla kulki odbijającej się od innych przedmiotów możemy użyć metody {stala}hitTest(){/stala} wykrywającej kolizję pomiędzy poszczególnymi klipami.

Pomimo że ten przewodnik zawiera instrukcje krok po kroku, wymaga znajomości podstaw Flasha. Jeżeli natomiast masz już za sobą pierwsze doświadczenia z ActionScript, tym lepiej.

Prosta gra we Flashu krok po kroku

{tlo_1}

1. Utwórz nową animację

Po uruchomieniu Flasha, w którym zrobisz nową animację, wybierz opcję Modify > Document. W nowym oknie dialogowym ustanów rozmiar sceny na 400×300 pikseli (taki rozmiar będzie miała nasza gra), a Frame rate na 41 fps (klatek na sekundę, taka wartość zapewni płynne odtwarzanie).

{/tlo}

{tlo_0}

2. Wyeksportuj plik

Wybierz opcję File > Publish Settings. W nowym oknie dialogowym będziesz mógł określić, w jaki sposób oraz do jakiego formatu animacja zostanie wyeksportowana. Nie interesuje nas HTML, zatem możesz odznaczyć to pole. Wszystkie pozostałe opcje powinny być wystarczające. Możesz ewentualnie zaznaczyć pole Protect from import w zakładce Flash, aby zabezpieczyć swój plik .SWF.

{/tlo}{tlo_1}

3. Rozpocznij animację

Kiedy wszystko zostało już ustawione, możemy przejść do tworzenia animacji. Zmień nazwę pierwszej warstwy na głównej osi czasu na bg (aby to zrobić, kliknij na niej dwa razy), a następnie wybierz opcję File > Import > Import to Stage. Wskaż plik bg.png (w załączniku) i wybierz opcję Import as Single Flattened Bitmap.

{/tlo}

{tlo_0}

4. Utwórz mur

Dysponujesz teraz grafiką tła, ograniczonej z każdej strony murem. To oczywiście tylko efekt wizualny, zatem powinieneś teraz przygotować MovieClip z murem, który zostanie nałożony na tło. Wybierz opcję Insert > Symbol > MovieClip i stwórz klip z przezroczystym prostokątem o wymiarach 5×300 pikseli.

{/tlo}

{tlo_1}

5. Przygotuj instancje

Mając gotowy mur, możesz zamieścić w edytowanej scenie cztery instancje. Stwórz nową warstwę i umieść warianty nad właściwymi elementami tła. Zmodyfikuj ich rozmiar tak, aby pasowały, a w panelu Properties nadaj im odpowiednie nazwy: tw (top wall), rw, lw i bw.

{/tlo}

{tlo_0}

6. Dodaj platformę

Stwórz nową warstwę o nazwie bat, czyli naszą platformę do odbijania piłki. Przygotowaliśmy dla ciebie gotową grafikę platformy, zatem wybierz opcję File > Import > Import to Stage i wskaż plik bat.png. Następnie wybierz polecenie Modify > Convert to symbol i nadaj instancji nazwę bat, wyznaczając pozycję na osi Y równą 240.

{/tlo}

{tlo_1}

7. Czas na piłeczkę

Piłeczkę możesz wstawić w sposób identyczny, jak miało to miejsce w poprzednim punkcie. Skorzystaj z pliku ball.png. Zaimportuj go i przekształć w MovieClip o nazwie ball. Następnie w panelu Properties nadaj mu nazwę instancji ball i umieść nad platformą.

{/tlo}

{tlo_0}

8. Wprowadź na scenę pierwszy blok

Ostatnia grafika, którą powinieneś dodać, to ilustracja przedstawiająca blok do zbijania (plik block.png). Postępuj z nią tak, jak miało to miejsce w poprzednich dwóch krokach. Bloki trzeba będzie powielić, lecz na razie umieść na scenie tylko jeden, podając następujące współrzędne: X 31, Y 25.

{/tlo}

{tlo_1}

9. Reakcja na działania gracza

Kiedy wszystkie elementy są już na swoim miejscu, można skoncentrować się na opracowaniu reakcji na działania gracza. Jak pewnie zauważyłeś, obszar poniżej dolnej granicy muru został ustanowiony właśnie w tym celu. Używając do tego narzędzia Text tool, utwórz pozycje hits, games i lives. Jako że nie ulegną one zmianie, mogą pozostać polami statycznymi.

{/tlo}{tlo_0}

10. Stwórz dynamiczne pola

Niezbędne będzie jednak ustanowienie obok tych statycznych, trzech dynamicznych pól, aby możliwe było aktualizowanie informacji na temat postępów gracza. W celu dodania dynamicznego pola, wybierz odpowiednią pozycję z rozwijanego menu w panelu Properties. Twoje dynamiczne pola powinny zawierać następujące zmienne: hits, games i lives.

{/tlo}

{tlo_1}

11. Osadź czcionki

Następnie powinieneś upewnić się, że osadziłeś czcionki w polach tekstowych. Aby to zrobić, kliknij na przycisku Characters w polu TextField w panelu Properties i wybierz pozycję basic latin. Aby napisać nasz ActionScript, stwórz trzy nowe warstwy nad dotychczasowymi, nazywając je kolejno: config, gameplay i util.

{/tlo}

{tlo_0}

12. Pierwszy kod

Warstwa util to odpowiednie miejsce na umieszczenie kodu, który co prawda nie pełni żadnej określonej funkcji w grze, ale będzie przydatny na dalszym etapie programowania. Dla przykładu ta warstwa posiada funkcję {stala}randomBetween{/stala}. To przydatne rozwiązanie, które umożliwia wygenerowanie liczby całkowitej z przedziału określonego dwoma wartościami (jak np. funkcja {stala}deprecated random(){/stala} we Flashu).

{/tlo}

{tlo_1}

13. Funkcje gry

Możemy teraz przejść do omówienia funkcji związanych z samą grą. Pierwsza funkcja to {stala}newGame{/stala}. Jej zadaniem jest najpierw ukrycie kursora myszy, a następnie użycie {stala}startDRag{/stala} do przesunięcia platformy. Wreszcie, wykorzystuje {stala}onMouseMove{/stala} do położenia piłeczki na platformie. Zwróć uwagę na to, w jaki sposób użyliśmy {stala}updateAfterEvent{/stala} do odświeżania ekranu po każdym ruchu.

{/tlo}

{tlo_0}

14. Wypuść piłeczkę

Następna część tworzy funkcję {stala}onMouseDown{/stala}, wywoływaną poprzez kliknięcie myszy. Odpala ona funkcję {stala}releaseBall{/stala}. Usuwa ono zdarzenie {stala}onMouseDown{/stala} i wywołuje funkcję {stala}createNewBlocks{/stala}. Następnie czyścimy interval dla funkcji drop i deklarujemy go ponownie za pomocą funkcji {stala}setInterval{/stala}.

{/tlo}

{tlo_1}

15. Stwórz nowe funkcje bloków

Funkcja {stala}createNewBlocks{/stala} odpowiada za dodanie nowych bloków. Zamieszcza ona w grze właściwą ich liczbę, tak aby użytkownik mógł zbijać je za pomocą piłeczki. Zwróć uwagę na to, jak tworzona jest jednolita siatka poprzez pobranie liczby rzędów dla danej gry i pomnożenie ich poprzez stałą liczbę bloków w rzędzie – która w tym przypadku wynosi siedem.

{/tlo}

{tlo_0}

16. Tworzenie nowego rzędu

Kolejna część funkcji {stala}createNewBlocks{/stala} używa znaku modulo (%) do określenia, jak powinien się zaczynać nowy rząd. W jaki sposób? Otóż modulo zwraca resztę z dzielenia. Zatem kiedy liczba rzędów podzielona przez limit rzędów równa się zero, należy zacząć nowy rząd.

{/tlo}{tlo_1}

17. Wpraw piłeczkę w ruch

Funkcja {stala}releaseBall{/stala} odpowiada za ruch piłeczki. Tworzymy wartości yspeed i xspeed. Yspeed jest na stałe równa -6 (zatem piłeczka najpierw zacznie poruszać się do góry). Z kolei xspeed nadajemy charakter przypadkowości, stosując do tego funkcję {stala}randomBetween{/stala}. Następnie tworzymy funkcję {stala}onEnterFrame{/stala}, która odpowiada za aktualizację pozycji piłeczki oraz śledzi kolizje.

{/tlo}

{tlo_0}

18. Wykrywanie kolizji

Część skryptu odpowiedzialna za śledzenie kolizji jest długa i nużąca, ale to nie znaczy, że jest trudna. W skrócie, stale wywołuje zapytania {stala}hitTest{/stala} w odniesieniu do ścian i bloków. Jeżeli któreś z nich zwróci wartość true, wprowadzana jest odpowiednia akcja. Aby zmienić kierunek poruszania się piłeczki, odwracamy jedną z prędkości x lub y.

{/tlo}

{tlo_1}

19. Sprawdzanie uderzeń

W poprzednim kroku wykrywaliśmy kolizje za pomocą funkcji {stala}hitBlock{/stala}. Teraz użyjemy pętli {stala}for{/stala} do sprawdzenia stanu każdego bloku w grze i ustalenia momentu, kiedy piłka któryś z nich strąci. Gdy tak się stanie, otrzymamy wartość true oraz wzrost zmiennych hitCount i hits. Gdy zestrzelone zostaną wszystkie bloki, zostanie uruchomiona nowa gra, a wynik podwyższony.

{/tlo}

{tlo_0}

20. Strącanie bloków

Końcowa funkcja, {stala}dropBlocks{/stala}, jest wywoływana poprzez rutynę {stala}setInterval{/stala}. Przy każdym interwale (tutaj jest to jedna sekunda), każdy blok jest opuszczany o pięć pikseli. Stosując standardową pętlę {stala}for{/stala}, przechodzimy przez wszystkie bloki, zwiększając wartość y o pięć. W ten sposób zakończyliśmy prace nad funkcjami gry. Teraz potrzebujemy tylko ją uruchomić.

{/tlo}

{tlo_1}

21. Konfiguracja

Nazwa akcji {stala}config{/stala} mówi sama za siebie. Ustanawiają one wartości startowej dla gry i rozpoczynają rozgrywkę za pomocą funkcji {stala}newGame(){/stala}. Dostęp do warstwy konfiguracyjnej zawsze bywa pomocny, ponieważ za ich pomocą możesz w prosty sposób zmieniać początkowe wartości. Ich obecność sprawia również, że nie trzeba wcale zamieszczać we wszystkich funkcjach stałych wartości.

{/tlo}

{tlo_0}

22. Ostatnie testy i wielka premiera

Wreszcie nadeszła ta chwila! Aby przetestować swoją animację, wybierz polecenie File > Publish Preview > Flash. Jeżeli wszystko poszło zgodnie z planem, poruszenie myszą spowoduje wyzwolenie piłeczki. Jeżeli chcesz opublikować grę w sieci, możesz automatycznie wygenerować kod HTML poprzez zaznaczenie pola HTML w menu Publish Settings.

{/tlo}

Projektowanie interfejsów do gier

Tworzenie interfejsu użytkownika to temat rzeka. W skrócie polega na sprawieniu, aby dany obiekt (niezależnie od tego czy jest to strona internetowa, gra, zegarek lub mikrofalówka) był intuicyjny w użyciu. Ta idea \”prostoty obsługi\” może wyglądać dziwnie w zestawieniu z grami – ale czy gry nie powinny być \”łatwe\”?

W rzeczywistości gra może być tak trudna, jak tylko sobie tego zażyczysz, ale zrozumienie jej zasad musi pozostawać dla użytkownika czymś prostym. Jeżeli gra zawiedzie pod tym względem, gracz szybko stanie się sfrustrowany i przestanie grać.

Oznacza to, że niezbędne jest trzymanie się kilku ważnych reguł:

• bądź konsekwentny (np. zachowaj ten sam sposób sterowania wszędzie tam, gdzie to możliwe),
• spraw, aby miejsca interakcji prezentowały się w sposób oczywisty (np. w co można kliknąć, a w co nie),
• stale informuj gracza o jego postępie w grze (punktacja, status, pozycja itd.),
• unikaj łamania ustalonych konwencji (użytkownicy są zaznajomieni z przewijaniem okien, przyciskami, przesuwaniem rzeczy, nie zaskakuj ich zbyt mocno).