1. diel - Úvod do tvorby iOS hier s frameworkom SpriteKit

Vitajte v tutoriálu, ktorý vám ukáže, ako možno pomocou šikovného frameworku SpriteKit vyvíjať 2D hry v jazyku Swift pre Apple zariadení. Vaša tvorba potom môže bežať na počítačoch Mac, mobilných telefónoch iPhone, tabletoch iPad alebo napríklad na televíziu vďaka zariadenia Apple TV.

Úvodná lekcia nás zoznámi sa SpriteKit a motiváciou prečo si skúsiť vyvíjať hry. Povieme si, čo by ste mali poznať a vytvoríme prvý projekt. Popíšeme si šablónu a trošku ju vyčistíme od zbytočných vecí.

Prečo vyvíjať hry?

Pretože je to zábava a trh najmä pre iOS je plný ľudí ochotných za originálnu hru zaplatiť. Ak ste hráči, tak ste určite rozmýšľali, že by bolo zaujímavé si niečo vlastného skúsiť naprogramovať alebo vás možno zaujímalo, ako hry na pozadí vlastne fungujú. Osobne neviem prečo a je mi to kvapku trápne priznať, ale vždy som si myslel, že hry sú niečo veľmi komplikovaného a vôbec sa mi do nich nechcelo. A to aj v čase, keď som za sebou mal už pár rokov programovanie aplikácií. Potom som ale vďaka SpriteKit zistil, že to nie je tak ťažké. Tým samozrejme nehovorím, že sú hry jednoduché - potrebujete textúry, hudbu, zvuky pre efekty, navrhnúť dobre gameplay, úrovne ... Ale samotné programovanie už nie je taký problém. Dúfam teda, že si niečo málo skúsite aj v prípade, že sa inak nemáte v pláne hrám venovať.

Hello SpriteKit

Prečo vlastne používať pre hry framework? No hlavne z dôvodu, že sa od tradičných aplikácií hry podstatne líšia. Pomocou UIKit hru vytvoríte, ale bude to dosť náročné, pokiaľ nejde o špeciálny prípad hry, ako je potrebné Hangman (Šibenica). Framework za vás vyrieši kolízie, simuláciu gravitácie a ďalšie fyzikálne oriešky a mnoho a mnoho ďalšieho.

V tutoriále budeme využívať SpriteKit, čo je oficiálny framework od Apple pre vývoj 2D hier. Dvojrozmerné hry predstavujú skvelý štart pre začiatok vývoja, riešite len dve osi a vaše herné objekty môžu byť jednoduché 2D obrázky, nemusíte teda zháňať 3D modely.

SpriteKit je optimalizovaný pre Apple zariadenia a aj na starších z nich vám pobeží hry bez problémov na 60 FPS. Ponúka skvelé možnosti pre akcie, ktorými hru rozpohybujete, vyriešené kolízie či trebárs časticové efekty, takže dostať do hry pekný výbuch alebo napríklad sneh je otázkou niekoľkých minút.

Čo je potrebné?

Xcode - ideálne najnovšia verzia (v čase písania Xcode 11)
Ideálne iPhone alebo iPad na testovanie
Pokročilé znalosti Swiftu ( OOP, kolekcia)
Chuť sa niečo nové naučiť

Vytvorenie projektu

Zapneme Xcode a na úvodnej obrazovke zvolíme vytvoriť nový projekt. To by ste už mali dôkladne poznať. Vyberieme platformu iOS a Game ako šablónu:

Template hry v Xcode - Tvorba iOS hier vo Swift

Ako názov zvolíme GalaxyInvaders, jazyk samozrejme Swift a ako herné technológiu SpriteKit:

Vytvorenie SpriteKit projektu v Xcode - Tvorba iOS hier vo Swift

Potom už si len vyberiete, kam na disku nový projekt uložiť a máme vytvorené. Teraz je potrebné vykonať úvodné konfiguráciu. Aby sme si vývoj hry zjednodušili, tak budeme programovať len pre jeden typ zariadenia a orientáciu displeja. Ja preferujem iPad, ale hádam, že iPhone bude mať väčšiu časť z vás, takže vyberieme iPhone a necháme zaškrtnuté iba "Portrait" v orientácii.

Je to v nastavení projektu, záložka "General" a časť "Deployment Info". Mali by ste to mať po založení projektu vyskakovacie:

Prečisteniu šablóny

Vytvorený projekt obsahuje z nejakého dôvodu množstvo extra kódu a ďalších vecí, ktoré nevyužijeme a projekt by znepřehledňovaly. V prvom kroku teda projekt prečistíme.

Zmažeme súbor Action.sks, otvoríme GameScene.sks a zmažeme label hlásajúce "Hello, World!". Ako posledný k uprataní máme súbor GameScene.swift. Jeho prečistená verzia by mala vyzerať 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
    }
}

Prehliadka štruktúrou projektu

Keď sa pozriete, aké súbory náš projekt obsahuje, mala by vám štruktúra prísť dosť povedomá. Máme tu AppDelegate.swift, Main.storyboard a ďalšie. Dokonca tu je aj GameViewController.swift. Keď si tento posledný súbor otvoríte, všimnete si, že tu máme starý známy UIKit a jedná sa vlastne o obyčajný UIViewController, ktorý načíta objekt hernej scény GameScene.sks a ten zobrazuje.

Nás bude zaujímať primárne GameScene.swift, pretože takmer nebudeme využívať vizuálne editory. Kód nám umožní presne vidieť, čo sa v hre deje a je oveľa menej náchylný na zmeny v Xcode. Hlavné metóda v GameScene.swift je didMove(to: ). Je to vlastne taký ekvivalent viewDidLoad(). Zavolaná je vždy vo chvíli, keď je daná scéna zobrazená, takže práve tu voláme metódy, ktoré celú hru pripravia a načítajú. Ďalšia je update(), ktorá je volaná pred každým vykreslením snímky. Tu sa napr. Kontroluje, aby sa hráč nedostal mimo obrazovku alebo odstraňujeme objekty, ktoré už nie sú vidieť.

touchesBegan() je zavolaná vždy, keď sa hráč dotkne displeja. Dostaneme sadu "dotykov" a môžeme potrebné zistiť, či sa užívateľ dotkol protivníka alebo napr. Nejakého textu v menu. Zmazané touchesMoved() a touchesEnded() by sme použili v prípade, že by hráč mal za úlohu "ťahať" prstom po displeji. Trebárs keby sme robili niečo v štýle Fruit Ninja.

Príprava grafiky

Naša budúca hra potrebuje nejaké tie textúry. Minimálne potrebujeme vesmírnu loď pre hráčov, nejaké tie nepriateľov a pekné pozadie. Neskôr vytvoríme tzv. Parallax scroll, ktorý v 2D hrách dodáva efekt hĺbky, kedy sa jedna časť pozadí hýbe rýchlejšie ako druhá.

Skvelým zdrojom materiálov je Kenney.nl, kde nájdete cez 40 000 obrázkov, 3D modelov či audio súborov pre vaše hry. Sú zadarmo s licenciou CC0 1.0 Universal, takže ich môžete slobodne používať aj v komerčných projektoch a nemusíte uvádzať zdroj.

Tvorca môžete podporiť cez donnate alebo si kúpiť jeden z Game Assets balíčkov, stojí zhruba $ 10 a nájdete v ňom viac ako 20 000 položiek pre tvorbu hier. To je proste a jednoducho super výhodné a skoro zadarmo vzhľadom na to, čo všetko dostanete.

Potrebné textúry

Poďme si zhrnúť, čo zatiaľ potrebujeme:

Obrázok pre loď hráčov
Vesmírne pozadie (najlepšie 750 x 1334 pixelov)
Nepriateľov (aspoň jeden obrázok, kľudne viac)

Vybrať si môžete také, čo sa páči vám, je to predsa len vaša hra :-) V kóde sa bude s obrázkami pracovať rovnako a ukážeme si, ako náhodne vybrať nepriateľov, ak budete mať viac textúr.