SpriteKit de la zero Fundamente

Introducere

SpriteKit, disponibil pe iOS, tvOS și OS X, este un cadru care permite dezvoltatorilor să creeze jocuri de înaltă calitate 2D fără să se îngrijoreze de complexitatea graficelor API, cum ar fi OpenGL și Metal. În plus față de manipularea tuturor graficelor pentru dezvoltatori, SpriteKit oferă, de asemenea, o gamă largă de funcționalități suplimentare, inclusiv simulare fizică, redare audio / video și salvare / încărcare jocuri.

În toată această serie, învățați totul despre SpriteKit și câștigați abilități, pe care le puteți aplica apoi oricărui tip de joc 2D construit cu acest cadru excelent. În această serie, creăm un joc pe deplin funcțional, în care jucătorul controlează o mașină care trebuie să evite obstacolele care îi depășesc drumul.

Cerințe preliminare

Această serie cere să executați Xcode 7.3 sau o versiune ulterioară, care include suport pentru Swift 2.2 precum și SDK pentru iOS 9.3, tvOS 9.2 și OS X 10.11.5. De asemenea, trebuie să descărcați proiectul starter de la GitHub, care conține materialele vizuale care vor fi folosite în joc și câteva linii de cod pentru a ne ajuta să începem.

Grafica folosită pentru joc în această serie poate fi găsită pe GraphicRiver. GraphicRiver este o sursă excelentă pentru găsirea de ilustrații și grafică pentru jocurile dvs..

1. Scene, noduri și viziuni

scene

Prima clasă pe care trebuie să o cunoașteți când lucrați cu SpriteKit este SKScene clasă. Pentru orice joc 2D construit cu SpriteKit, împărțiți conținutul jocului în mai multe scene, fiecare cu propriile lor SKScene subclasă.

În timp ce ne vom uita la funcționalitatea și funcționarea interioară a SKScene clasa mai târziu în această serie, ceea ce trebuie să știți pentru moment este că o scenă este ceea ce adăugați conținutul jocului și acționează ca rădăcină nod. Acest lucru ne aduce la noduri.

Noduri (Sprite)

SKNode clasa, care SKScene este o subclasă de, este folosit pentru a reprezenta orice fel de element din scena dvs. Deși există multe tipuri diferite de noduri disponibile în SpriteKit, denumite în mod obișnuit sprite, ele au aceleași proprietăți cheie, cele mai importante fiind:

  • poziţie (CGPoint)
  • XScale (CGFloat): reprezentând scara orizontală a unui nod
  • yScale (CGFloat): similar cu XScale dar acționează în direcție verticală
  • alfa (CGFloat): reprezentând transparența nodului
  • ascuns (bool): valoare care determină dacă nodul trebuie sau nu să fie vizibil
  • zRotation (CGFloat): reprezentând unghiul, în radiani, ca nodul să fie rotit
  • zPosition (CGFloat): utilizat pentru a determina care noduri ar trebui să fie afișate pe lângă alte noduri din scenă

După cum puteți vedea, proprietățile de mai sus vă permit să poziționați cu precizie, să rotiți și să editați aspectul de bază al fiecărui nod dintr-o scenă.

Așa cum puteți adăuga subview-uri la oricare UIView obiect în UIKit, în SpriteKit puteți adăuga orice număr copil noduri către un nod existent. Acest lucru se face folosind addChild (_ :) pe orice SKNode obiect.

De asemenea, similar cu UIView obiectele, poziția și proprietățile scalei fiecărui nod copil sunt relativ la nodul părinte la care este adăugat. Acesta este modul în care SKScene obiect, fiind o subclasă de SKNode, poate acționa ca nodul rădăcinii scenei tale. Pentru orice noduri pe care le doriți în scenă, trebuie să le adăugați ca și copii ai scenei folosind addChild (_ :) metodă.

SKNode clasa pe cont propriu nu este capabilă să producă conținut vizual. Pentru a face acest lucru, trebuie să utilizați una dintre multele subclase disponibile în SpriteKit. Unele importante SKNode subclasele care trebuie constiente sunt:

  • SKSpriteNode: face o imagine și creează o scena texturate în scenă
  • SKCameraNode: controale în cazul în care scena dvs. este vizualizat de la
  • SKLabelNode: redă un șir de text
  • SKEmitterNode: utilizat împreună cu un sistem de particule pentru a face efecte particulare
  • SKLightNode: creează efecte de iluminare și umbre în scenă

De-a lungul acestei serii, folosim aceste tipuri de noduri, precum și unele dintre celelalte.

Vizualizări

Pentru a afișa conținutul dvs. SpriteKit într-o aplicație de lucru, trebuie să utilizați SKView clasă. Aceasta este o subclasă de UIView (sau NSView pe OS X), care pot fi adăugate cu ușurință în orice parte a aplicației dvs. Pentru a prezenta o scenă SpriteKit, trebuie să apelați fie presentScene (_ :) sau presentScene (_: tranziție :) metoda pe un SKView instanță. A doua metodă este utilizată atunci când doriți o animație personalizată sau o tranziție în noua scenă.

Pe lângă redarea conținutului dvs. SpriteKit SKView clasa oferă, de asemenea, unele funcționalități suplimentare și foarte utile. Aceasta include a bool proprietatea numită întrerupte, care pot fi utilizate cu ușurință pentru a întrerupe sau a relua o scenă.

Există, de asemenea, câteva proprietăți care sunt utile atunci când depanați jocul și puteți afișa informații, cum ar fi câmpurile actuale FPS (cadre pe secundă), numărul de noduri și câmpurile de fizică din scenă. Dacă doriți să aruncați o privire asupra tuturor proprietăților disponibile, verificați SKView clasă de referință.

2. Editorul scenelor

Acum că am analizat clasele de bază folosite în jocurile SpriteKit, este timpul să creați prima noastră scenă. În timp ce scenele pot fi create în întregime programabil, Xcode oferă un excelent instrument de editare a scenei, care vă permite să trageți și să lăsați ușor nodurile în scenă în timp ce editați poziția, aspectul și alte proprietăți.

Deschideți proiectul de pornire și creați un fișier nou apăsând Comandă + N sau selectarea Nou> Fișier ...  din Xcode Fişier meniul. Alege iOS> Resurse> SpriteKit Scene tip de fișier și faceți clic pe Următor →.

Denumiți fișierul MainScene și salvați-l. Ar trebui să vedeți acum noul fișier de scenă în Project Navigator.

Selectați MainScene.sks pentru a deschide editorul de scenarii Xcode. În prezent, scena dvs. este goală și are un fundal gri. Nu există noduri în el încă. Înainte de a adăuga niște sprites la scenă, trebuie mai întâi să-i schimbăm mărimea.

În Atribuții Inspector în partea dreaptă, schimbați dimensiunea scenei pentru a avea o lățime (W) de 320 de puncte și o înălțime (H) de 480 de puncte.

Această dimensiune a scenei se corelează cu cea mai mică dimensiune a ecranului pe care o vizăm (ecranul de 3,5 "pe iPhone 4s), astfel încât să putem dimensiona corect nodurile. Vom schimba dimensiunea scenei astfel încât să fie adaptabilă dimensiunii actuale a ecranului dispozitivului într-un tutorial ulterior.

Pentru a adăuga noduri la scenă, deschideți Biblioteca de obiecte pe dreapta. Este posibil să fie necesar să faceți clic pe pictograma evidențiată în albastru dacă este afișată Biblioteca de obiecte nu este vizibilă.

De la Biblioteca de obiecte, trageți a Color Sprite la mijlocul scenei tale.

Deschide Atribuții Inspector în dreapta și schimbați TexturăPoziţie, și mărimea atribuie următoarele valori:

Scena dvs. ar trebui să aibă acum o mașină în mijloc, după cum se arată mai jos.

Rețineți că, spre deosebire de sistemul de coordonate UIKit, în SpriteKit, poziţie al unui nod se referă întotdeauna la centrul acestuia din punctul de origine al colțului stâng sus-jos al scenei (0, 0). De aceea setați poziția mașinii (160, 120) plasează centrul mașinii 160 de puncte din stânga și 120 de puncte în sus.

3. Afișarea unei scene

Cu scena finalizată pentru moment, deschideți-vă ViewController.swift și adăugați o declarație de import pentru cadrul SpriteKit din partea de sus. Acest lucru ne permite să folosim clasele SpriteKit și API-urile în ViewController.swift.

importați importul UIKit SpriteKit

Apoi, actualizați punerea în aplicare a viewDidLoad () metodă a ViewController clasa după cum urmează:

override funcția viewDidLoad () super.viewDidLoad () permite skView = vizualizare SKV (cadru: self.view.frame) permite scena = SKScene (fileNamed: "MainScene") skView.presentScene (scenă) view.addSubview (skView)

Cu acest cod, vom crea mai întâi un SKView exemplu, care are aceeași dimensiune ca vizualizarea controlerului de vizualizare. Apoi, încărcăm scena noastră din fișierul pe care l-am creat folosind SKScene (fileNamed :) initializare. Noi facem SKView instanța prezintă această scenă și apoi o adaugă sub formă de subview la vizualizarea principală.

Selectează iPhone 4S simulator (astfel încât scena noastră să fie corect dimensionată pentru ecran) și să construiască și să execute aplicația. Ar trebui să vedeți un ecran similar cu următorul:

Concluzie

În acest prim tutorial al SpriteKit From Scratch, ați învățat bazele de vederi, scene și noduri în SpriteKit. Ați creat o scenă de bază cu un sprite folosind editorul de scenă încorporat în Xcode, ceea ce face mult mai ușor de creat scenele în comparație cu a face totul programabil.

În următorul tutorial, vom adăuga mai multe funcționalități jocului nostru, utilizând acțiunile SpriteKit pentru a muta mașina în scenă. Veți fi, de asemenea, prezentat simulării fizicii în SpriteKit prin detectarea momentului în care mașina se ciocnește cu un alt nod.

Ca întotdeauna, lăsați-vă comentariile și feedback-ul în secțiunea de comentarii de mai jos.

Cod