Jak zrobić Tappy Plane (klon Flappy Birds)

Wprowadzenie:

Cześć i witaj w samouczku, jak stworzyć własną grę w stylu "Flappy Birds" w hyperPad.

Nasza wersja jest nieco inna, więc nazywamy ją Tappy Plane.

Ten samouczek jest przeznaczony dla początkujących, którzy chcą zgłębić nasz system zachowań i nauczyć się programowania wizualnego. W trakcie samouczka nauczysz się również poruszać po interfejsie hyperPad.

W tym samouczku stworzymy prostą grę w stylu Flappy Bird. Rozgrywka polega na tym, że gracz dotyka ekranu, aby sterować samolotem, który porusza się w górę i w dół, omijając szereg klifów. Każdy ominięty klif przynosi punkt, a po zdobyciu wystarczającej liczby punktów, gracze zdobędą medal. Medale zwiększają swoją wartość w miarę rosnących wyników, aż do błyszczącego złotego medalu! A kto nie lubi błyszczących rzeczy!?

Jeśli jeszcze nie masz hyperPad, możesz go pobrać z App Store: https://itunes.apple.com/app/apple-store/id886106438?mt=8

Więcej informacji o hyperPad znajdziesz na naszej stronie internetowej pod adresem http://www.hyperpad.com

Zatem bez zbędnych ceregieli, zaczynajmy!

Część 1: Rozpoczęcie

Tworzenie projektu:

Pierwszą rzeczą, którą musimy zrobić, jest rozpoczęcie nowego projektu. Po załadowaniu hyperPad powinieneś zobaczyć ekran projektów. Znajdziesz tutaj wszystkie projekty, które stworzyłeś, a także te, które pobrałeś. Na razie chcemy rozpocząć nowy projekt. Naciśnij przycisk Nowy Projekt w prawym górnym rogu ekranu, jak pokazano poniżej.

Gdy to zrobisz, powinno pojawić się okno pop-up. Tutaj nazwany projekt oraz stworzyć kopię zapasową w chmurze, jeśli chcesz. Dodatkowo możesz nacisnąć przycisk „Rozpocznij od przykładu” aby zaimportować jeden z naszych podstawowych projektów. Na razie tego nie zrobimy. Nazwij projekt Tappy Plane, a następnie naciśnij przycisk 'Dalej'.

Na tym nowym ekranie ustalimy urządzenie, na które projektujemy oraz orientację. W tym projekcie ustaw orientację na poziomą, a wsparcie urządzenia na iPad. Nie martw się, jeśli później musisz coś zmienić. Te ustawienia można dostosować w dowolnym momencie w menu Ustawienia globalne.

W końcu możemy teraz wybrać, jaki typ gry chcemy stworzyć. Obecnie hyperPad obsługuje dwa typy trybów: widok z góry i widok z boku. Widok z góry, znany także jako widok z lotu ptaka, jest zazwyczaj używany w grach takich jak The Legend of Zelda przed przejściem na 3D, grach logicznych jak Bejeweled i strzelankach z widokiem z góry. Widok z boku jest powszechnie używany w grach platformowych, takich jak Super Mario Bros.

Obie wersje działają identycznie z jedną małą różnicą: w przypadku widoku z góry ustawienia grawitacji będą wyłączone (zamiast tego polega na oporze powietrza, aby symulować grawitację w kierunku ekranu), dlatego miej to na uwadze podczas tworzenia projektu. Można to zawsze zmienić później w menu Właściwości globalne.

W tym samouczku użyjemy widoku z boku, więc upewnij się, że jest on zaznaczony. Następnie mamy ustawienia grawitacji i współczynnik PTM. Domyślnie grawitacja ustawi się na 0 i -25.

To są wartości x i y, czyli bardziej po prostu poziome i pionowe części naszego świata gry. X oznacza poziomą wartość, czyli w lewo i w prawo, podczas gdy Y oznacza pionową wartość, czyli w górę i w dół. Domyślne wartości 0 i -25 oznaczają, że nie będzie sił grawitacyjnych ciągnących obiekty w lewo i prawo, ale będą one opadać z prędkością 25 metrów na sekundę. Dla tego samouczka domyślne wartości są w porządku.

Współczynnik PTM oznacza Punkty na Metry, czyli prościej mówiąc, ile pikseli (punktów) jest w 1 metrze hyperPad. Domyślnie jest ustawione na 32 pt/m lub 32 pikseli na metr. Ważne jest, aby wiedzieć to przy tworzeniu zasobów graficznych, a wszystkie zasoby graficzne powinny podążać za tym skala. W tym samouczku będziemy korzystać z bezpłatnych zasobów z biblioteki zasobów hyperPad, więc nie musimy zmieniać skali.

Kiedy to zrobiliśmy, naciśnij przycisk stworzenia i zaczynamy!

Edytor:

Teraz, gdy jesteśmy w projekcie, powinieneś zobaczyć ekran, który wygląda tak:

To jest nasz canvas i tutaj zbudujemy naszą grę. Na środku ekranu powinieneś zobaczyć cienki zielony kontur pudełka. To reprezentuje nasz widok na ekranie. Wszystko, co zostanie umieszczone w tym pudełku, będzie natychmiast widoczne po rozpoczęciu gry, podczas gdy wszystko poza nim nie będzie renderowane. Jeśli chcesz, poświęć chwilę, aby poklikać i zobaczyć, co robią różne rzeczy, zanim przejdziemy do kolejnego kroku.

Gdy będziesz gotowy, kliknij ikonę szuflady w prawym dolnym rogu, aby otworzyć przeglądarkę zasobów.

Biblioteka zasobów:

To jest miejsce, w którym przechowywane będą wszystkie zasoby naszej gry. Domyślnie nowy projekt hyperPad zawiera tylko kilka początkowych zasobów. Musisz zaimportować własne lub pobrać pakiet ze Sklepu Zasobów hyperPad. W tym samouczku skupimy się na korzystaniu z zasobów dostarczanych przez Sklep Zasobów hyperPad. Po lewej stronie będzie pasek z czterema przyciskami. Naciśnij przycisk Uzyskaj zasoby, aby otworzyć Sklep Hyperpad.

Oto znajdziesz darmowe pakiety zasobów przygotowane przez nas w Hyperpad, aby pomóc rozpocząć Twoje projekty. Znajdź i naciśnij Pakiet Zasobów Tappy Plane.

Teraz po prostu naciśnij przycisk "Uzyskaj", aby rozpocząć import (Uwaga: jeśli wystąpi błąd, po prostu naciśnij go ponownie, aby wznowić import.) Kiedy to się skończy, otrzymasz wiadomość informującą, że zasoby zostały pomyślnie zaimportowane. Po prostu naciśnij Zakończ w prawym górnym rogu ekranu, aby wrócić do Hyperpad.

To takie proste. Powinieneś teraz widzieć nowy folder w swojej przeglądarce zasobów o nazwie Downloads. Kliknięcie go ujawni folder Pakiet Zasobów Tappy Plane, a w nim nasze zasoby graficzne.

Teraz zaczniemy montować naszą grę.

Część 2: Rozgrywka

Jeśli jesteś zaznajomiony z Flappy Bird, to rozumiesz styl rozgrywki. Dotknij ekranu, aby utrzymać ptaka, a w naszym przypadku samolot, w powietrzu, starając się nie zderzyć z nadchodzącymi przeszkodami. Te przeszkody będą pojawiały się w losowych konfiguracjach, więc każda gra jest inna niż poprzednia. Punkty są przyznawane za skuteczne unikanie przeszkód, a Twój wynik jest zapisywany.

Dodanie samolotu:

Teraz, gdy rozumiesz podstawową rozgrywkę, możemy zacząć. Pierwszą rzeczą, jaką musimy zrobić, jest umieścić naszą postać gracza na ekranie. Wejdź do przeglądarki zasobów, otwórz folder pobranych i przeszukaj, aż zobaczysz swoje zasoby graficzne. Powinien być folder o nazwie Samoloty.

Otwórz ten folder i wybierz kolor, który najbardziej Ci się podoba. Następnie po prostu wybierz pierwszą grafikę samolotu. To zamknie bibliotekę zasobów i powróci do głównego ekranu edytora, gdzie powinieneś teraz zobaczyć samolot w dolnym doku obiektów. Ta sekcja interfejsu użytkownika nazywa się Dock Obiektów. Wyświetli ostatnie 5 użytych przez Ciebie zasobów. Aby umieścić samolot w obszarze gry, wystarczy przeciągnąć samolot z docka na canvas.

Teraz, gdy nasz samolot znalazł się w grze, musimy dokonać jednej szybkiej regulacji. Naciśnij samolot, aby go zaznaczyć, a następnie otwórz zakładkę właściwości po prawej stronie. Musimy ustawić samolot, aby stał się obiektem muru przejezdnego. Wystarczy znaleźć przełącznik Przejezdny i włączyć go. Robimy to, ponieważ nie chcemy, aby samolot opadł zanim gracz będzie miał szansę rozpocząć grę. Ustawiamy go również jako przejezdny, ponieważ na razie nie chcemy, aby miał jakąkolwiek kolizję.

Kiedy to zrobimy, zanurzmy się w tworzenie gry.

Opadający samolot:

Potrzebujemy sposobu na rozpoczęcie gry. Aby to zrobić, potrzebujemy przycisku. Moglibyśmy użyć prostego graficznego wskaźnika, gdzie należy dotknąć, ale w naszej grze chcemy, aby gracz mógł dotknąć gdziekolwiek na ekranie. Jak to zrobić? Sprawimy, że cały ekran będzie przyciskiem!

Pierwszą rzeczą, którą musimy zrobić, aby to osiągnąć, jest stworzenie nowej warstwy. Ale aby to zrobić, musimy odznaczyć nasz samolot. W tym celu po prostu dotknij dowolnej pustej przestrzeni. Po odznaczeniu właściwości obiektu zamkną się i powinieneś zobaczyć zakładkę warstw po prawej stronie. Jeśli nie, przesuń palcem z prawej strony ekranu w lewo, aby ją odsłonić.

Jak widać, obecnie są trzy warstwy domyślnie. Interfejs globalny, interfejs sceny, a następnie główny po linii separacyjnej. Szybka uwaga, że cokolwiek w warstwie interfejsu globalnego będzie widoczne w każdej scenie w grze. Wszystkie inne warstwy są specyficzne dla ich indywidualnych scen. Aby stworzyć nową warstwę, wystarczy dotknąć ikony + na dole zakładki warstw. To poprosi nas o nadanie nowej warstwie nazwy. Wpisz Przyciski i naciśnij OK.

Domyślnie aktywna warstwa zmieni się na nowo utworzoną. Podczas używania warstw, tylko obiekty w aktywnej warstwie mogą być zaznaczane. To świetny sposób na utrzymanie porządku podczas budowy gry, abyś przypadkowo nie przemieszczał rzeczy, których nie chcesz. Zawsze miej na uwadze, na jakiej warstwie obecnie pracujesz. Pamiętaj też, że warstwy umieszczone nad innymi renderują się na wierzchu tej warstwy. W ten sposób możesz uniknąć zasłaniania obszaru gry przez tło.

Teraz stworzenie naszego przycisku jest bardzo proste. Naciśnij przycisk Obiekty specjalne (ikona probówki) w prawym dolnym rogu Docka Obiektów. To otworzy menu do tworzenia rodzaju obiektu. Chcemy Pustego Obiektu. Naciśnięcie go utworzy mały, pusty kwadrat w centrum naszego projektu. Jednak chcemy, aby ten zajmował cały ekran. Naciśnij wewnątrz kwadratu, aby go zaznaczyć.

Zauważ, że gdy jest zaznaczony, wokół krawędzi obiektu pojawiają się małe zielone kropki. Możemy je użyć do ręcznego skalowania naszego Pustego Obiektu. Po prostu dotknij i przeciągnij róg, aby skalować jednocześnie. Przeciągnij rogi, aż obiekt obejmie canvas. Kropki po bokach można użyć do dostosowania obiektu dla lepszego dopasowania. Ostatecznie powinieneś mieć coś takiego (Uwaga: jeśli masz trudności z skalowaniem obiektu, możesz powiększyć, przesuwając dwa palce w przeciwnych kierunkach, a zredukować, zbliżając je do siebie):

Wracając do głównej warstwy, odznacz pusty obiekt (dotknij dowolnej pustej przestrzeni na canvasie), a następnie dotknij warstwy Głównej i ponownie wybierz samolot. Naciśnij przycisk, który mówi zachowania, aby otworzyć ekran zachowań.

To jest ekran Zachowań i miejsce, gdzie dzieje się magia. Zamiast tradycyjnego kodowania, hyperPad używa wizualnych bloków logiki akcji i zdarzeń do programowania interakcji. Jeśli chcesz, poświęć chwilę, aby przejrzeć kategorie i zobaczyć, jakie opcje są dostępne. Dotknij jednego ze zachowań w lewym panelu, aby otworzyć okno z krótkim opisem zachowania. Możesz także zapoznać się z dokumentacją hyperPad, aby uzyskać wyjaśnienie każdego zachowania.

Co chcemy teraz zrobić, to po prostu rozpocząć naszą grę i zmienić nasz samolot z obiektu muru przejezdnego na obiekt fizyczny. Zrobienie tego zastosuje fizykę do naszego samolotu i sprawi, że opadnie z grawitacją.

Pierwszą rzeczą, którą chcemy zrobić, jest użycie zachowania Rozpoczęto dotyk, które znajduje się w sekcji Interakcja. Po prostu przeciągnij je z menu i umieść w pustej przestrzeni. Gdy tam jest, jest teraz przypięte do naszego obiektu. Możesz dotknąć zachowania, aby otworzyć jego właściwości, ale nie musimy nic zmieniać.

Oczywiście samo to nic nie zmieni, ponieważ nie ma nic, co następnie miałoby miejsce po dotknięciu samolotu. Naprawmy to. Przejdź do kategorii Fizyka i przewiń w dół, aż zobaczysz sekcję zwaną Tryby. Teraz przeciągnij zachowanie Utwórz Fizykę i przeciągnij je pod naszym Rozpoczęto dotyk. Teraz musimy je podłączyć do Rozpoczęto dotyk. Na dole Rozpoczęto dotyk powinieneś zobaczyć mały błyskawicę w kole. Dotknij i przeciągnij to, a zobaczysz linię podążającą za twoim palcem. Przeciągnij linię do zachowania Utwórz Fizykę, aby je podłączyć.

To takie proste. Szybka uwaga, że w hyperPad, zachowania podążają za strukturą Zdarzenie -> działanie. W tym przypadku zdarzeniem jest rozpoczęcie dotykania samolotu, a działaniem jest to, że samolot staje się obiektem fizycznym. Poświęć chwilę, aby przetestować to i upewnić się, że działa prawidłowo. Na górze ekranu naciśnij przycisk odtwarzania, aby rozpocząć testowanie. Gdy skończysz, dotknij trzech pasków w prawym górnym rogu, aby otworzyć menu i wybierz Wyjdź.

Jeśli wszystko działa, samolot powinien opaść z ekranu, gdy go dotkniesz.

Teraz chcemy zakończyć naszą grę, gdy samolot dotknie ziemi. Chociaż obecnie nie mamy ziemi, możemy ją uzupełnić pustym obiektem gry. Wróć do canvas, dotykając strzałki w górnym lewym rogu ekranu.

Odznacz samolot i naciśnij ikonę obiektów specjalnych (probówka) w prawym dolnym rogu docka, aby otworzyć okno i stworzyć kolejny Pusty Obiekt. Teraz ustaw go wzdłuż dolnej krawędzi canvas i rozciągnij go, aby pokrył całą dolną część.

Wybierz samolot i ponownie otwórz okno zachowań. Teraz dodamy nasz warunek „Przegrałeś”. Zastanówmy się, co powiedziałem wcześniej, że zachowania hyperPad działają na zasadzie Zdarzenie -> Działanie. W tym przypadku zdarzeniem będzie kolizja samolotu z ziemią. Ustawimy to. Przejdź do zakładki Obiekty i w sekcji Wykrywanie kolizji, przeciągnij Kolizja na przestrzeń roboczą. Kiedy to zrobisz, dotknij go, aby otworzyć jego właściwości. Zobaczysz dwa pola u góry, jedno wypełnione naszym samolotem, a drugie puste. Dotknij pustego pola, aby otworzyć widok canvas. Dotknij pustego obiektu na dole ekranu, aby go wybrać, a następnie dotknij znacznika, aby zastosować.

Następnie potrzebujemy naszego działania. Chcemy załadować ekran końcowy, gdy samolot zderzy się z naszym obiektem ziemi. Przejdź do kategorii sceny i przewiń w dół do sekcji Nakładka, wybierz zachowanie Ładuj nakładkę i przeciągnij je poniżej zachowania Kolizja.

Podłącz zachowanie Kolizja do Ładuj nakładkę. Teraz dotknij zachowania Ładuj nakładkę na canvasie, aby otworzyć jego właściwości. Właściwości zachowania dotknij w miejscu, które mówi Wybierz nakładkę. Pojawi się lista nakładek. Wybierz Koniec gry, jest to nakładka, która jest automatycznie tworzona domyślnie (możesz dowiedzieć się więcej o nakładkach z dokumentacji hyperPad). Jeśli chcesz, możesz także dodać przejście, aby nadać stylu.

Gdy to zrobisz, naciśnij przycisk odtwarzania, aby przetestować. Kiedy dotkniesz samolotu, powinien opaść i ekran Koniec gry powinien się pojawić.

Logika gry:

Zanim przejdziemy dalej, powinienem szybko wyjaśnić dobry sposób na uporządkowanie zachowań. Aby uniknąć bałaganu i ułatwić przyszłe zmiany, zamierzamy oddzielić logikę gry od samolotu. W zasadzie stworzymy nasze własne zdarzenie i nadamy komunikat, gdy samolot zderzy się z ziemią, zamiast po prostu ładować nakładkę końcową.

Czemu to robimy? Cóż, jak wspomniano, pomaga to utrzymać porządek i znacznie ułatwia późniejsze dostosowywanie. Postarajmy się to zrozumieć w ten sposób, jeśli logika dotyczy tylko obiektu gry, do którego jest przypina, to pozostaw logikę w obiekcie. Jeśli musisz zacząć odnosić się do innych obiektów lub aspektów logiki, które nie są bezpośrednio związane z obiektem, to powinno być oddzielne. Przykład to, kiedy samolot zderzy się z obiektem, odtwarza dźwięk zderzenia. To możemy zachować na samolocie. Ale jeśli przy zderzeniu z obiektem, obiekt zmienia się w jakiś sposób, to powinno być trzymane osobno.

Aby to zrealizować, stworzymy mediator, swoistego pośrednika, który organizuje te działania w jednym łatwo dostępny obszarze.

Wróć do zachowań samolotu i wybierz zachowanie Ładuj nakładkę. Zauważysz, że do właściwości przypisano małą zakładkę. Dotknij kosza, aby usunąć zachowanie Ładuj nakładkę. Robimy to, ponieważ zamiast po prostu załadować nakładkę, zamierzamy nadać komunikat, który nasza logika gry przechwyci i wczyta nasz ekran końcowy.

Aby nadać komunikat, przejdź do kategorii Niestandardowe, a w sekcji Nadawanie przeciągnij Komunikat nadawczy i umieść go pod naszym zachowaniem Kolizja (gdzie wcześniej mieliśmy Ładuj nakładkę). Podłącz Kolizję do Komunikatu nadawczego i otwórz jego właściwości. Pod kluczem zdarzenia wpisz Did Lose. W tej sytuacji możemy pozostawić Wartość nadawania pustą, ponieważ nadajemy tylko stan przegrania. (np. Did lose: Tak/Nie).

Teraz, gdy dodałeś komunikat nadawczy, możesz wrócić do głównego edytora.

Następnie musimy stworzyć coś, aby przechować naszą logikę. Możemy stworzyć inny pusty obiekt, ale chcemy, aby łatwiej było znaleźć naszą logikę, a pusty obiekt może z łatwością zostać zgubiony, w miarę dodawania większej liczby zasobów do naszej sceny. Zamiast tego użyjemy etykiety.

Utworzenie etykiety jest takie samo jak pusty obiekt. Wybierz probówkę i w oknie wybierz Etykieta. Etykieta to po prostu obiekt gry zawierający tekst. Poza tym działa jak każdy inny obiekt. Dotknij, aby ją wybrać i w polu właściwości, gdzie jest napisane Etykieta, wpisz Logika gry. Jeśli chcesz, dostosuj właściwości wyrównania, obramowania i cienia, aby pomóc logice się wyróżnić i być zauważalna. Należy jednak pamiętać, że tekst ograniczy się do rozmiaru pola ograniczającego.

Teraz przesuń Logikę gry poza widoczną przestrzeń ekranu (zielony prostokąt), aby nie była widoczna dla gracza. Pomyśl o Logice gry jako o menedżerze zaplecza. Jeśli dobrze wywiążą się ze swojej pracy, nigdy ich nie zobaczysz, ale wszystko będzie działało płynnie.

Teraz otwórz zachowania Logiki gry. Musimy teraz mieć sposób na odbieranie naszego komunikatu. W sekcji Niestandardowe znajdź zachowanie Odbierz komunikat i przeciągnij je do przestrzeni roboczej. Otwórz właściwości i dotknij pola Klucz zdarzenia. Wpisz Did Lose i upewnij się, że pisownia jest dokładnie taka sama jak w Komunikacie nadawczym. Następnie przejdź do Sceny i przeciągnij Ładuj nakładkę i ustaw ją na Koniec gry. Podłącz je te dwa.

Zachowanie „Odbierz komunikat” jest typem zachowania „Słuchacz”. Będzie czekało, aż otrzyma komunikat, na który czeka. W tym przypadku “Did Lose”. Gdy tylko odbierze ten komunikat, uruchomi podłączoną akcję.

Naciśnij przycisk odtwarzania i przetestuj. Podobnie jak wcześniej, ekran końcowy powinien wyskoczyć, gdy tylko samolot uderzy w ziemię.

Skaczący samolot:

W naszej grze chcemy, aby nasz samolot pozostał nieruchomy na osi poziomej, co oznacza, że nie będzie się poruszał w lewo i prawo, tylko w górę i w dół. Zamiast tego, samolot będzie latał w poziomie przez świat, a sceneria porusza się wokół samolotu, nadając efekt, że samolot porusza się w poziomie. Ma to na celu dostosowanie do naszego stylu gry z jednym przyciskiem. Dotknij ekranu, samolot wznosi się, a następnie zaczyna opadać z powrotem w dół.

Wróć do zachowań samolotu i w kategorii niestandardowej dodaj nowy Zestaw zachowań. Otwórz jego właściwości. W przeciwieństwie do innych działań, zestaw jest całkowicie pusty. Możemy jednak zmienić jego nazwę. Na górze właściwości dotknij nazwy Zestaw zachowań, aby ją zmienić. Wpisz Skok. Następnie chcemy, aby ten zestaw był domyślnie wyłączony. W bocznym panelu połączonym z właściwościami znajdź miejsce, gdzie jest napisane