Lekce 1 - Úvod do tvorby iOS her s frameworkem SpriteKit

Vítejte v tutoriálu, který vám ukáže, jak lze pomocí šikovného frameworku SpriteKit vyvíjet 2D hry v jazyce Swift pro Apple zařízení. Vaše tvorba potom může běžet na počítačích Mac, mobilních telefonech iPhone, tabletech iPad nebo třeba na televizi díky zařízení Apple TV.

Úvodní lekce nás seznámí se SpriteKit a motivací proč si zkusit vyvíjet hry. Řekneme si, co byste měli znát a vytvoříme první projekt. Popíšeme si šablonu a trošku ji vyčistíme od zbytečných věcí.

Proč vyvíjet hry?

Protože je to zábava a trh zejména pro iOS je plný lidí ochotných za originální hru zaplatit. Pokud jste hráči, tak jste určitě přemýšleli, že by bylo zajímavé si něco vlastního zkusit naprogramovat nebo vás možná zajímalo, jak hry na pozadí vlastně fungují. Osobně nevím proč a je mi to kapku trapné přiznat, ale vždy jsem si myslel, že hry jsou něco velmi komplikovaného a vůbec se mi do nich nechtělo. A to i v době, kdy jsem za sebou měl již pár let programování aplikací. Pak jsem ale díky SpriteKit zjistil, že to není tak těžké. Tím samozřejmě neříkám, že jsou hry jednoduché - potřebujete textury, hudbu, zvuky pro efekty, navrhnout dobře gameplay, úrovně... Ale samotné programování již není takový problém. Doufám tedy, že si něco málo zkusíte i v případě, že se jinak nemáte v plánu hrám věnovat.

Hello SpriteKit

Proč vlastně používat pro hry framework? No hlavně z důvodu, že se od tradičních aplikací hry podstatně liší. Pomocí UIKit hru vytvoříte, ale bude to dost náročné, pokud nejde o speciální případ hry, jako je třeba Hangman (Šibenice). Framework za vás vyřeší kolize, simulaci gravitace a další fyzikální oříšky a mnoho a mnoho dalšího.

V tutoriálu budeme využívat SpriteKit, což je oficiální framework od Apple pro vývoj 2D her. Dvourozměrné hry představují skvělý start pro začátek vývoje, řešíte jen dvě osy a vaše herní objekty mohou být jednoduché 2D obrázky, nemusíte tedy shánět 3D modely.

SpriteKit je optimalizovaný pro Apple zařízení a i na starších z nich vám poběží hry bez problémů na 60 FPS. Nabízí skvělé možnosti pro akce, kterými hru rozpohybujete, vyřešené kolize či třeba částicové efekty, takže dostat do hry hezký výbuch nebo třeba sníh je otázkou několika minut.

Co je potřeba?

Xcode - ideálně nejnovější verze (v době psaní Xcode 11)
Ideálně iPhone nebo iPad na testování
Pokročilé znalosti Swiftu (OOP, kolekce)
Chuť se něco nového naučit

Vytvoření projektu

Zapneme Xcode a na úvodní obrazovce zvolíme vytvořit nový projekt. To byste již měli důkladně znát. Vybereme platformu iOS a Game jako šablonu:

Template hry v Xcode - SpriteKit - Tvorba iOS her ve Swift

Jako název zvolíme GalaxyInvaders, jazyk samozřejmě Swift a jako herní technologii SpriteKit:

Vytvoření SpriteKit projektu v Xcode - SpriteKit - Tvorba iOS her ve Swift

Pak už si jen vyberete, kam na disku nový projekt uložit a máme vytvořeno. Teď je třeba provést úvodní konfiguraci. Abychom si vývoj hry zjednodušili, tak budeme programovat pouze pro jeden typ zařízení a orientaci displeje. Já preferuji iPad, ale hádám, že iPhone bude mít větší část z vás, takže vybereme iPhone a necháme zaškrtnuté pouze "Portrait" v orientaci.

Je to v nastavení projektu, záložka "General" a část "Deployment Info". Měli byste to mít po založení projektu automaticky otevřené:

Pročistění šablony

Vytvořený projekt obsahuje z nějakého důvodu spoustu extra kódu a dalších věcí, které nevyužijeme a projekt by znepřehledňovaly. V prvním kroku tedy projekt pročistíme.

Smažeme soubor Action.sks, otevřeme GameScene.sks a smažeme label hlásající "Hello, World!". Jako poslední k uklizení máme soubor GameScene.swift. Jeho pročištěná verze by měla vypadat takto:

import SpriteKit
import GameplayKit

class GameScene: SKScene {

    override func didMove(to view: SKView) {
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    }

    override func update(_ currentTime: TimeInterval) {
        // Called before each frame is rendered
    }
}

Prohlídka strukturou projektu

Když se podíváte, jaké soubory náš projekt obsahuje, měla by vám struktura přijít dost povědomá. Máme tu AppDelegate.swift, Main.storyboard a další. Dokonce tu je i GameViewController.swift. Když si tento poslední soubor otevřete, všimnete si, že tu máme starý známý UIKit a jedná se vlastně o obyčejný UIViewController, který načítá objekt herní scény GameScene.sks a ten zobrazuje.

Nás bude zajímat primárně GameScene.swift, protože téměř nebudeme využívat vizuální editory. Kód nám umožní přesně vidět, co se ve hře děje a je mnohem méně náchylný na změny v Xcode. Hlavní metoda v GameScene.swift je didMove(to: ). Je to vlastně takový ekvivalent viewDidLoad(). Zavolána je vždy ve chvíli, kdy je daná scéna zobrazená, takže právě zde voláme metody, které celou hru připraví a načtou. Další je update(), která je volána před každým vykreslením snímku. Zde se např. kontroluje, aby se hráč nedostal mimo obrazovku nebo odstraňujeme objekty, které již nejsou vidět.

touchesBegan() je zavolána vždy, když se hráč dotkne displeje. Dostaneme sadu "dotyků" a můžeme třeba zjistit, jestli se uživatel dotkl protivníka nebo např. nějakého textu v menu. Smazané touchesMoved() a touchesEnded() bychom použili v případě, že by hráč měl za úkol "tahat" prstem po displeji. Třeba kdybychom dělali něco ve stylu Fruit Ninja.

Příprava grafiky

Naše budoucí hra potřebuje nějaké ty textury. Minimálně potřebujeme vesmírnou loď pro hráče, nějaké ty nepřátele a hezké pozadí. Později vytvoříme tzv. parallax scroll, který ve 2D hrách dodává efekt hloubky, kdy se jedna část pozadí hýbe rychleji než druhá.

Skvělým zdrojem materiálů je Kenney.nl, kde najdete přes 40 000 obrázků, 3D modelů či audio souborů pro vaše hry. Jsou zdarma s licencí CC0 1.0 Universal, takže je můžete svobodně používat i v komerčních projektech a nemusíte uvádět zdroj.

Tvůrce můžete podpořit přes donate nebo si koupit jeden z Game Assets balíčků, stojí zhruba $10 a najdete v něm více něž 20 000 položek pro tvorbu her. To je prostě a jednoduše super výhodné a skoro zdarma vzhledem k tomu, co vše dostanete.

Potřebné textury

Pojďme si shrnout, co zatím potřebujeme:

Obrázek pro loď hráče
Vesmírné pozadí (nejlépe 750 x 1334 pixelů)
Nepřátele (alespoň jeden obrázek, klidně více)

Vybrat si můžete takové, co se líbí vám, je to přeci jen vaše hra :-) V kódu se bude s obrázky pracovat stejně a ukážeme si, jak náhodně vybrat nepřátele, pokud budete mít více textur.