Wprowadzenie do SpriteKit

13 Listopada 2017

SpriteKit

Wstęp

Kolejny wpis na tym blogu miał dotyczyć podstaw SpriteKit, czyli framwework’a od Apple do tworzenia gier na urządzenia po kontrolą systemu iOS. Jednak po głębszym zastanowienia doszedłem do wniosku, że taki wpis byłby nie tylko bardzo długi, ale jednocześnie przeładowany informacjami. Nie da się przecież w jednym wpisie rzetelnie przekazać wiedzy dotyczącej choćby podstaw pisania gier na iOS… c’nie?😅

Właśnie! Dlatego postanowiłem uczynić z tego… serię! Raz w tygodniu będę dodawał kolejne wpisy dotyczące procesu tworzenia mobilnej gierki w oparciu właśnie o framework SpriteKit.

Niniejszy wpis będzie swoistym wprowadzeniem, bo nim zaczniesz bawić się sprite’ami, warto zaczerpnąć nieco teorii. Natomiast przyszłym tygodniu będzie już mocno technicznie i będziesz miał szanse ubrudzić sobie ręce kodem po łokcie!

Zatem zapinamy pasy i 🚀.

Czym jest SpriteKit

SpriteKit to w zasadzie nie tyle framework, jak przyjęło się potocznie mówić, a raczej infrastruktura wspomagająca renderowanie i animowanie grafiki, używana do tworzenia tekstur elementów graficznych. Tutaj też pojawia się wyjaśnienie nazwy – tekstury elementów graficznych są nazywane przez Apple sprite’ami (Sprite).

Dlaczego powinieneś używać SpriteKit?
Ponieważ posiada on wbudowany system optymalizacji animacji systemowych oraz symulacji fizyki elementów graficznych. Jak sam zobaczysz w kolejnych częściach tej serii, SpriteKit dostarcza szereg naprawdę przydatnych funkcji, których implementacja mogłaby bardzo zniechęcić już na początku 😁, jak np. Podatność elementów na grawitację itp.

SpriteKit dostarcza również szereg protokołów i funkcji umożliwiających tzw. event-handling, czyli wyłapywanie zdarzeń mających miejsce w programie, np. Zachowania przeciwników czy kolizje z innymi elementami.

Najważniejsze Klasy w SpriteKit

Jeśli tworzyłeś już wcześniej aplikację na iOS, zapewne na początku większości plików z klasami importowałeś bibliotekę UIKit. Dostarczała ona klasy i typy elementów graficznych dla twojej aplikacji. Ze SpriteKit jest podobnie – dostarcza ona klasy, przy pomocy których jesteś w stanie stworzyć swoją grę.

Najważniejsze klasy dostępne w SpriteKit, to:

  • SKView
  • SKScene
  • SKNode
  • SKSpriteNode
  • SKAction
  • SKPhysicsBody

Na początek omówię cztery pierwsze, natomiast dwa ostatnie omówię w dalszej części tej serii, kiedy przejdziemy do programowania zachowań i zdarzeń poszczególnych elementów. Zatem, po krótce:

1) SKView – reprezentuje obiekt, który wyświetla zawartość SpriteKit. Natomiast owa zawartość jest przekazywana do widoku poprzez obiekt SKScene.

2) SKScene – jest to podstawowy (root) element SpriteKit wyświetlany w widoku (SKView). Scenę (SKScene) tworzy się bezpośrednio w edytorze wbudowanym w środowisko Xcode -> tak jak na obrazku poniżej.
SKScene definiuje rozmiar i widoczność elementów na ekranie.

Note: SKScene definiuje również element, które znajdują się poza ekranem. Warto dodać że samo renderowanie elementów następuje dopiero w momencie pojawiania się ich na ekranie.

SKScene posiada również automatyczne skalowanie i dopasowanie do ekranu, zatem inaczej niż w przypadku autolayout’u, tutaj nie ma potrzeby używania constraints’ów itp. Do określania pozycji elementu na ekranie służy wbudowany w SpriteKit system koordynatów i pozycji. Działa on na podobnej zasadzie co wszystkie znane systemy tego typu, z tą różnicą że punkt (0, 0) znajduje się nie w górnym lewym rogu, a w dolnym lewym rogu.

3) SKNode – dostarcza omawiany wyżej system koordynatów dla swoich potomków (podwidoków – children).

4) SKSpriteNode – podklasa SKNode. Sprite to blok reprezentujący elementy na ekranie. Sprite może być elementem teksturowanym (nawet nie wiem czy jest takie słowo 😅) czyli takim, który jest przedstawiony jako grafika dostarczona przez programistę w postaci pliku .png, albo nieteksturowany, wygenerowanym przez system (np. pokolorowany prostokąt).

Tworzenie projektu

W Xcode stworzenie projektu w SpriteKit jest bardzo proste, gdyż w zasadzie poprawną konfiguracje robi za nas środowisko. Aby stworzyć projekt tworzymy nowy projekt:

Tworzenie projektu

Z dostępnych schematów wybieramy opcję Game. A następnie ↘️

Tworzenie projektu - wybór biblioteki

Konfigurujemy projekt i w opcji Game Technology wybieramy SpriteKit.
I już. Projekt jest odpowiednio skonfigurowany.

Jednakże…
Aby najlepiej zrozumieć budowę projektu napisanego w SpriteKit, warto przeprowadzić ten proces samodzielnie zaczynając od pustego projektu. Nie jest to bardzo trudne, ale za to bardzo pomaga później odnaleźć się w strukturze projektu i uczy co do czego.

Wobec tego na koniec przeprowadźmy ten proces ręcznie 🤗.

Na początek utwórz projekt w Xcode, wybierając jako schemat Single View App.

Jak pamiętasz z części omawiającej poszczególne klasy w SpriteKit, bazową klasą jest tutaj SKView. Zatem jako punkt pierwszy – wejdź w plik Main.storyboard i zmień klasę widoku głównego z UIView na SKView.

SpriteKit-klasa widoku

Teraz potrzebujemy SKScene. Dodajemy zatem nowy plik, w wyszukiwarce wpisujemy „scene” i dodajemy go do projektu:

SpriteKit-dodawanie SKScene

Na liście ze strukturą naszego projektu pojawił się nowy plik z rozszerzeniem .sks. To jest właśnie plik SKScene, świat naszej gry. To tutaj będziemy dodawać wszystkie elementy widoku, świata etc. Skoro mamy już plik w edytorze, wypadałoby jeszcze stworzyć plik do obsługi widoku – podobnie jak w przypadku każdej aplikacji w UIKit. Zatem stwórz nowy plik, dodaj nazwę (konwencjonalnie o tej samej nazwie co plik z SKScene) i dowiąż stworzoną klasę do widoku:

SpriteKit-dowiazanie klasy sceny do widoku

Pamiętaj również o zaimportowaniu SpriteKit do swojego projektu.

Note: Do obsługi swojej aplikacji będzie Ci również potrzebny GameplayKit (o czym później).

Twoja klasa powinna zatem wyglądać o tak ⬇️


    import SpriteKit
    import GameplayKit
    
    class MyScene: SKScene {
    
    }

Prawie koniec 😅…
Teraz możesz na próbę dodać jakiś element, np Color Sprite na swoją scenę i odpalić projekt w symulatorze. Element do SKScene dodajesz tak samo jak elementy layoutu w innych aplikacjach – po prawej stronie na dole.

I co? No…. bo mi nie działa 😥.
No nie działa… bo skąd niby system ma wiedzieć, że ma odpalić widok SKScene, a nie normalnie jak Chris Lattner przykazał, ViewController? Nie wie, trzeba mu powiedzieć.

Otwórz zatem plik z klasą bazową. W moim przypadku to po prostu ViewController.swift. Po pierwsze – dodaj import SpriteKit na początku. Tym razem jednak nie usuwasz UIKit – scenę będziemy uruchamiać wewnątrz metody viewDidLoad().

Teraz, we wspomnianej metodzie, musimy sprawdzić, czy nasz widok jest typu SKView zamiast UIView. Jak pamiętasz – zmienialiśmy w edytorze klasę widoku ViewController’a właśnie na SKView. Zatem:


    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let view = self.view as? SKView{
            
        }
        
    }

Następnie sprawdzam, czy nasza scena istnieje.


    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let view = self.view as? SKView{
            if let scene = SKScene(fileNamed: "MyScene"){
                
            }
        }
        
    }

Note: Pamiętaj, żeby jako parametr fileNamed: podać swoją nazwę klasy 😅.

Skoro już wiemy, że wszystko jest, możemy dodać naszą scenę do widoku. Robi się to przez użycie metody presentScene(scene: ) dostępnej dla obiektu klasy SKView, a więc naszego widoku głównego:


    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let view = self.view as? SKView{
            if let scene = SKScene(fileNamed: "MyScene"){
                
                view.presentScene(scene)
            }
        }
        
    }

Żeby widok wyświetlał się zawsze dopasowany do ekranu, ustawmy skale sceny. To dokładnie ten sam zabieg, który stosujemy przy skalowaniu obrazka – używamy parametru scaleMode i ustawiamy na .aspectFill. Metoda viewDidLoad() wygląda następująco:


    import UIKit
    import SpriteKit
    
    class ViewController: UIViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
            
            if let view = self.view as? SKView{
                if let scene = SKScene(fileNamed: "MyScene"){
                    scene.scaleMode = .aspectFill
                    view.presentScene(scene)
                }
            }
            
        }
        override func didReceiveMemoryWarning() {
            super.didReceiveMemoryWarning()
            // Dispose of any resources that can be recreated.
        }
    }

Teraz odpalasz projekt… I?
No i działa 👨🏻‍💻👉😎. Udało Ci się właśnie poprawnie skonfigurować projekt w SpriteKit, jesteś gotowy żeby skodować swój projekt marzeń i zarobić na nim grube 💵💵💵!

Podsumowanie

Jest to pierwszy wpis z cyklu „Wprowadzenie do SpriteKit”. Na tym etapie, jeśli chcesz realizować swój pierwszy projekt gry 2D na iOS, warto żebyś wymyślił sobie swój własny pomysł do zrealizowania. Uważam, że jeśli chcesz wyciągnąć wartość z tej serii i rzeczywiście nauczyć się programować gry na iOS, musisz mieć dobry powód i motywację. Jeśli nie masz na ten moment własnego pomysłu, może być to być gra podobna to już istniejących, choćby drugi FlappyBird, to nie jest aż takie ważne, żeby było od razu autorskie.

Co do samego SpriteKit – to nie jest jedyna opcja tworzenia gier na iOS. Jak pewnie zauważyłeś podczas tworzenia pliku .sks lub całego projektu, możesz również tworzyć gry w oparciu o SceneKit, który służy do tworzenia gier w 3D, oraz Metal (obecnie w wersji II), czyli niskopoziomowy, akcelerowany sprzętowo interfejs graficzny, podobny do OpenGL oraz OpenCL.

Jak zawsze, zachęcam do zgłębiania wiedzy poprzez czytanie oficjalnej dokumentacji dotyczącej SpriteKit.

W tekście wspomniałem o Chrisie Lattnerze, który jest byłym już pracownikiem Apple oraz twórcą języka Swift.

Tymczasem mam nadzieję że wpis był dla Ciebie ciekawy i że cała seria zapowiada się dobrze. Jeśli Ci się podobało, daj znać w komentarzu, wspomnij o mnie na Twitterze albo wpadnij na grupę na Facebook’u. Jeśli się nie podobało to wiesz… 😅👉 tym bardziej daj mi znać!

Jeszcze raz dzięki i do następnego!
@jkornat

Wprowadzenie do SpriteKit

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *