Jak vytvořit Tappy Plane (klon Flappy Birds)

Úvod:

Ahoj a vítejte v tutoriálu, jak si vytvořit vlastní hru ve stylu "Flappy Birds" v hyperPadu.

Naše verze je mírně odlišná, takže ji nazýváme Tappy Plane.

Tento tutoriál je určen pro začátečníky, kteří chtějí proniknout hlouběji do našeho systému chování a naučit se o vizuálním kódování. Během tutoriálu se také naučíte orientovat v uživatelském rozhraní hyperPadu.

V tomto tutoriálu vytvoříme jednoduchou hru ve stylu Flappy Bird. Hra bude spočívat v tom, že hráč ťuká na obrazovku, aby ovládal letadlo, které se pohybuje nahoru a dolů a naviguje kolem řady útesů. Každý útes, který projdete, vám udělí bod a s dostatkem bodů si hráči vyslouží medaili. Medaile se zvyšují na hodnotě, čím vyšší je skóre hráče, až po lesklou zlatou medaili! Kdo by neměl rád lesklé věci!?

Pokud ještě nemáte hyperPad, můžete si ho stáhnout z App Store: https://itunes.apple.com/app/apple-store/id886106438?mt=8

O hyperPadu se můžete dozvědět více na našem webu http://www.hyperpad.com

Tak bez dalšího váhání, pojďme začít!

Část 1: Začínáme

Vytvoření projektu:

První věc, kterou musíme udělat, je začít nový projekt. Po načtení hyperPadu byste měli vidět obrazovku projektů. Zde najdete všechny projekty, které jste vytvořili, stejně jako jakékoli, které jste stáhli. Prozatím chceme začít nový projekt. Klepněte na tlačítko Nový projekt v pravém horním rohu obrazovky, jak je znázorněno níže.

Až to dokončíte, měla by se objevit vyskakovací okno. Zde pojmenujeme projekt a vytvoříme cloudovou zálohu, pokud si přejete. Kromě toho můžete klepnout na tlačítko „Začněte místo toho s ukázkovým projektem“ pro import jednoho z našich základních projektů. Ale prozatím to dělat nebudeme. Pojmenujte projekt Tappy Plane a potom klepněte na tlačítko 'Další'.

Na této nové obrazovce určíme zařízení, pro které navrhujeme, a orientaci. Pro tento projekt nastavte orientaci na landscape a podporu zařízení na iPad. Nebojte se, pokud budete muset něco později změnit. Tyto nastavení lze kdykoli upravit v menu Globální nastavení.

Konečně si nyní můžeme vybrat, jaký typ hry chceme vyrobit. V současnosti hyperPad podporuje dva typy režimů, pohled shora a boční pohled. Pohled shora, nebo pohled ptáka, se obvykle používá pro hry jako Legend of Zelda, než přešla na 3D, logické hry jako Bejeweled a hry s pohledem shora. Boční pohled se běžně používá pro plošinové hry, jako je Super Mario Bros.

Obě verze fungují identicky s jedním malým rozdílem, pohled ptáka bude mít vypnutá nastavení gravitace (na místo toho spoléhá na odpor vzduchu, aby simuloval gravitaci směřující do obrazovky), tak na to pamatujte při vytváření vašeho projektu. To můžete kdykoli změnit později v menu Globální vlastnosti.

Pro tento tutoriál budeme používat boční pohled, takže se ujistěte, že je vybrán. Další máme nastavení gravitace a PTM poměr. Výchozí hodnota gravitace bude nastavena na 0 a -25.

Toto jsou hodnoty x a y, nebo jednodušeji horizontální a vertikální náš svět hry. X představuje horizontální, nebo vlevo a vpravo, zatímco Y představuje vertikální, nebo nahoru a dolů. Výchozí hodnoty 0 a -25 znamenají, že na objekty nebude působit žádná gravitační síla směrem vlevo a vpravo, ale budou padat dolů rychlostí 25 metrů za sekundu. Pro tento tutoriál jsou výchozí hodnoty v pořádku, tak jak jsou.

Poměr PTM znamená body na metry, nebo jednoduše řečeno, kolik pixelů (bodů) je v 1 hyperPad metru. Výchozí hodnota je nastavena na 32 pt/m nebo 32 pixely na metr. To je důležité vědět při vytváření uměleckých prvků a všechny umělecké prvky by měly dodržovat tuto škálu. V tomto tutoriálu budeme používat volně dostupné prvky z knihovny hyperPad, takže nemusíme měnit měřítko.

Po dokončení klepněte na tlačítko vytvořit a začneme!

Editor:

Nyní, když jsme v projektu, měli byste vidět obrazovku, která vypadá takto:

Toto je naše plátno, kde budeme stavět naši hru. Uprostřed obrazovky byste měli vidět tenký zelený obrys rámečku. To reprezentuje náš pohled obrazovky. Cokoli umístěné v tomto rámečku bude okamžitě viditelné při spuštění hry, zatímco cokoli mimo něj nebude zobrazeno. Pokud máte chuť, chvíli si klepněte kolem a zjistěte, co věci dělají, než přejdeme na další krok.

Až budete připraveni, klepněte na ikonu zásuvky v pravém dolním rohu, abyste otevřeli prohlížeč aktiv.

Knihovna aktiv:

To je místo, kde budou uloženy všechny prvky pro naši hru. Výchozí novému projektu hyperPad obsahuje pouze několik úvodních aktiv. Musíte importovat svá vlastní, nebo stáhnout balík z Obchodu s aktivy hyperPad. V tomto tutoriálu se zaměříme na používání prvků poskytovaných Obchodem s aktivy hyperPad. Na levé straně bude panel se čtyřmi tlačítky. Klepněte na tlačítko Získat aktiva a otevřete obchod Hyperpad.

Zde najdete bezplatné balíčky aktiv připravené námi v Hyperpadu, aby vám pomohly začít vaše projekty. Najděte a klepněte na balíček aktiv Tappy Plane.

Nyní stačí klepnout na tlačítko 'Získat', abyste zahájili import (Poznámka: pokud dojde k chybě, jednoduše na něj klikněte znovu, abyste import restartovali). Jakmile to bude hotové, dostanete zprávu, že byly aktiva úspěšně importována. Jednoduše klepněte na Zavřít v pravém horním rohu obrazovky, abyste se vrátili zpět do Hyperpadu.

A je to tak jednoduché. Nyní byste měli vidět nový složku ve svém prohlížeči aktiv pod názvem Stahování. Jejím klepnutím se otevře složka Tappy Plane Pack a uvnitř naší umělecké prvky.

Nyní začneme sestavovat naši hru.

Část 2: Hratelnost

Pokud znáte Flappy Bird, pak budete obeznámeni s herním stylem. Klepněte na obrazovku, abyste udrželi ptáka, nebo v našem případě letadlo, ve vzduchu, zatímco se snažte nenarazit do přicházejících překážek. Tyto překážky se objeví v náhodných konfiguracích, takže každé hraní je jiné než to předchozí. Body jsou udělovány za úspěšné vyhýbání se překážkám a vaše skóre je zaznamenáno.

Přidání letadla:

Takže nyní, když chápete základní hratelnost, můžeme začít. První věc, kterou musíme udělat, je dostat na obrazovku naši postavu hráče. Přejděte do svého prohlížeče aktiv a otevřete složku Stažení a navigujte, dokud neuvidíte své umělecké prvky. Měla by tam být složka s názvem Letadla.

Otevřete tuto složku a vyberte libovolnou barvu, která se vám líbí. Pak jednoduše vyberte první grafiku letadla. To uzavře knihovnu aktiv a vrátí vás na hlavní editační obrazovku, kde byste nyní měli vidět letadlo v dolním dokovacím objektu. Tato část uživatelského rozhraní se nazývá Dokovací panel objektů. Bude zobrazovat posledních 5 aktiv, která jste použili. Nyní, abychom dostali letadlo do hrací oblasti, jednoduše přetáhněte letadlo z doku na plátno.

S naším letadlem nyní ve hře potřebujeme provést jednu rychlou úpravu. Klepněte na letadlo, abyste jej vybrali, a otevřete záložku vlastností vpravo. Co chceme udělat, je nastavit letadlo jako průchozí objekt. Jednoduché, najděte přepínač Průchozí a klepněte na něj, abyste jej zapnuli. Děláme to, protože nechceme, aby letadlo spadlo, než hráč dostane šanci začít hru. Také jej nastavíme jako průchozí, protože prozatím nechceme, aby mělo jakoukoli kolizi.

Jakmile to bude hotovo, pojďme se dostat k tomu, co je hratelné.

Padající letadlo:

Takže potřebujeme způsob, jak hru začít. K tomu budeme potřebovat tlačítko. Nyní bychom mohli použít jednoduchou grafiku, abychom naznačili, kde klepnout, ale pro naši hru chceme dát hráči možnost ťukat kdekoli na obrazovce. Jak to uděláme? Celou obrazovku uděláme tlačítkem!

První věc, kterou musíme udělat, abychom toho dosáhli, je vytvořit novou vrstvu. Ale pro to musíme odznačit naše letadlo. Chcete-li to udělat, jednoduše klepněte kdekoli, kde je prázdné místo. Jakmile bude odznačeno, vlastnosti objektu se zavřou a měli byste vidět záložku vrstev vpravo. Pokud tomu tak není, jednoduše přejeďte prstem z pravé strany obrazovky k levé, abyste ji odhalili.

Jak vidíte, v současnosti jsou tři vrstvy výchozí. Globální uživatelské rozhraní, uživatelské rozhraní scény a pak Hlavní po oddělovací čáře. Rychlá poznámka, že cokoli na vrstvě globální uživatelské rozhraní se zobrazuje ve všech scénách vaší hry. Všechny ostatní vrstvy jsou specifické pro jednotlivé scény. Chcete-li vytvořit novou vrstvu, jednoduše klepněte na ikonu + v dolní části panelu vrstev. Tím se zobrazí výzva k pojmenování nové vrstvy. Zadejte tlačítko a klikněte na OK.

Ve výchozím nastavení se aktivní vrstva změní na nově vytvořenou. Při používání vrstev mohou být vybrány pouze objekty v aktivní vrstvě. To je skvělý způsob, jak si při stavění hry uspořádat, abyste omylem nepřesunuli věci, které nechcete. Vždy si dejte pozor, na které vrstvě právě pracujete. Také si pamatujte, že vrstvy umístěné nad jinými se budou renderovat na vrchol té vrstvy. Tímto způsobem se můžete vyhnout tomu, aby vaše pozadí zakrývalo herní oblast.

Teď k vytvoření našeho tlačítka, to je velmi jednoduché. Klepněte na tlačítko Speciální objekty (ikona baňky) v pravém dolním rohu Dokovacího panelu objektů. Tím se vyvolá menu k vytvoření typu objektu. Chceme prázdný objekt. Jeho klepnutím se ve středu našeho projektu vytvoří malý prázdný čtverec. Avšak to chceme, aby zaujalo celou obrazovku. Klepněte dovnitř čtverce, abyste jej vybrali.