Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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.

SpriteKit logo - SpriteKit - Tvorba iOS her ve Swift

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é:

SpriteKit - Tvorba iOS her ve Swift

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.

Níže vidíte textury, co jsem si vybral já. Pozadí jsem našel na www.pexels.com a trošku upravil, aby bylo tmavší a hvězdy nebyly tak výrazné:

SpriteKit - Tvorba iOS her ve Swift

Obrázek lodi použiji následující:

SpriteKit - Tvorba iOS her ve Swift

A dále použiji tyto obrázky nepřátel:

SpriteKit - Tvorba iOS her ve Swift SpriteKit - Tvorba iOS her ve Swift SpriteKit - Tvorba iOS her ve Swift

Na příští lekci, Pozadí, ovládání hráče a částicové efekty ve SpriteKit, si připravte obrázky a začneme vytvářet naši hru.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 22x (97.11 kB)
Aplikace je včetně zdrojových kódů v jazyce Swift

 

Všechny články v sekci
SpriteKit - Tvorba iOS her ve Swift
Přeskočit článek
(nedoporučujeme)
Pozadí, ovládání hráče a částicové efekty ve SpriteKit
Článek pro vás napsal Filip Němeček
Avatar
Uživatelské hodnocení:
1 hlasů
Autor se věnuje vývoji iOS aplikací (občas macOS)
Aktivity