SpriteKit Noțiuni de bază Noduri

SpriteKit este motorul de jocuri 2D al Apple - un motor de randare construit pe partea de sus a OpenGL. Acesta a fost introdus cu iOS 7, iar fiecare lansare ulterioară a adus mari adăugări în cadrul. Cu ajutorul spritelor texturate, un motor de fizică încorporat și cel foarte puternic SKAction clasa, puteți construi foarte rapid jocuri funcționale 2D.

SpriteKit are built-in editori pentru scene și particule, un nod de cameră de la lansarea iOS9 și suport încorporat pentru tilesets de la lansarea iOS 10. Cu aceste noi adăugiri, SpriteKit devine rapid o putere pentru crearea de jocuri 2D.

Pentru a urmări împreună cu acest tutorial, trebuie doar să descărcați reparațiile GitHub însoțitoare. Are un dosar numit ExempluProiect de pornire. Deschideți proiectul în acel folder în Xcode și sunteți gata să plecați!

Nodurile

Nodurile reprezintă blocurile fundamentale ale SpriteKit și SKNode este clasa de bază a tuturor nodurilor. Toate activele de pe ecran vor fi una SKNode sau o subclasă a acestuia. SKNodeînsă nu oferă niciun conținut vizual. Toate conținuturile vizuale sunt desenate utilizând unul din mai multe predefinite SKNode subclase. SKNodes și subclasele sale împărtășesc câteva proprietăți pe care le puteți modifica. Unele dintre cele mai importante sunt după cum urmează.

  • poziţie (CGPoint): poziția nodului în cadrul sistemului de coordonate al părintelui
  • XScale (CGFloat): măsoară lățimea unui nod cu ajutorul unui multiplicator
  • yScale(CGFloat): se calculează înălțimea unui nod printr-un multiplicator
  • alfa (CGFloat): transparența nodului
  • zRotation (CGFloat): rotația Euler în jurul axei z (în radiani)

Unul dintre cele mai importante SKNodes este SKScene. Acesta este nodul rădăcină la care sunt adăugate toate celelalte noduri. De la sine, SKScene nu furnizează elemente vizuale, dar afișează nodurile care sunt adăugate la ele.

Scări Noduri

SKScenes sunt nodurile rădăcină la care sunt adăugate toate celelalte noduri. Scena animă și redă conținutul din nodurile copilului său. Pentru a afișa o scenă, o adăugați într-o scenă SKView (care este o subclasă de UIView și, prin urmare, are multe din aceleași proprietăți ca UIView).

În cadrul proiectului Starter SpriteKit, scena inițială se afișează când se încarcă proiectul. Deocamdată, acesta este doar un ecran neagră necompletat. Se afișează când GameViewController invocă presentScene (_ :) pe instanța de vizualizare, trecând în scenă ca parametru:

override functie viewDidLoad () super.viewDidLoad () let scena = GameScene (dimensiune: CGSize (latime: 768, inaltime: 1024)) skView = self.view as! SKView skView.showsFPS = falsă skView.showsNodeCount = falsă skView.ignoresSiblingOrder = falsă scena.scaleMode = .aspectFill skView.presentScene (scena) // Prezentarea Scenei

Nu vă faceți griji cu privire la celelalte opțiuni pentru moment; Le voi explica mai târziu în această serie.

Crearea unei scene

Multe jocuri au mai mult de un ecran sau o scenă, așa că vom crea o nouă scenă de la zero și apoi o vom arăta din scena noastră inițială.

Selectați Fişier > Nou > Fişier din meniul Xcode și alegeți Cocoa Touch Class.

Asigura-te Clasă este setat sa NewScene și asta Subclasa de este setat sa SKScene. presa Următor → și apoi Crea, asigurându-vă că obiectivul principal este verificat. Mai jos este codul pentru NewScene.swift.

import Import UIKit Clasa SpriteKit NewScene: SKScene 

Acum avem două scene în proiectul nostru și niciunul nu are conținut vizual. Să adăugăm un SKLabelNode (ca toate nodurile, aceasta este o subclasă de SKNode). SKLabelNodeare un singur scop de a afișa o etichetă de text.

Etichete Noduri

Etichete noduri, implementate în SKLabelNode clasa, sunt folosite pentru a afișa textul în joc. Aveți posibilitatea să utilizați fonturi personalizate, dacă doriți, însă pentru scopurile noastre vom rămâne la valoarea implicită, care afișează text alb și este setată la Helvetica Neue Ultra Light, 32 de puncte.

Adăugați următoarele în interiorul didMove (la :) metoda în cadrul GameScene.swift. Această metodă este chemată imediat după ce o scenă este prezentată de o vizualizare. În general, acesta este locul în care vă instalați oricare dintre activitățile jocului dvs. și le adăugați la scenă.

override func didMove (pentru a vedea: SKView) lăsați startGameLabel = SKLabelNode (text: "Start Game")

Aici creăm un SKLabelNode utilizând inițializatorul de confort init (text :), care ia ca parametru un șir de text.

Adăugarea și eliminarea nodurilor

Doar inițializarea nodurilor nu le va afișa în scenă. Pentru a vedea nodurile, trebuie să invocați addChild (_ :) metoda pe nodul de primire, trecând SKNode pe care doriți să o adăugați ca parametru.

Adăugați următoarele în cadrul didMove (la :) metodă.

suprascrie func didMove (pentru a vizualiza: SKView) lăsați startGameLabel = SKLabelNode (text: "Start Game") addChild (startGameLabel)

addChild (_ :) metoda nu este exclusivă SKScenes, dar este o metodă de SKNode. Aceasta vă permite să construiți o ierarhie complexă de noduri - cunoscută sub numele de "arbore nod". De exemplu, să presupunem că aveți un personaj de joc și că doriți să mutați separat brațele și picioarele. Ai putea crea un SKNode instanță și apoi adăugați fiecare parte individuală ca fiind un copil al acesteia SKNode (nodul conținut este cunoscut ca nodul părinte). Acest lucru vă va oferi avantajul de a fi capabil să mutați caracterul ca o unitate întreagă prin mutarea părintelui SKNode, dar, de asemenea, vă permit să mutați fiecare parte individuală în mod individual.

O altă metodă importantă pentru adăugarea nodurilor este insertChild (_: la :) , care introduce un copil într-o poziție specifică în lista de copii a nodului receptor. Când adăugați un copil la un nod, nodul menține o listă ordonată de copii la care se face referire prin citirea nodului copii proprietate. Este important să adăugați noduri multiple la un nod părinte pentru a lua în considerare acest lucru, deoarece ordinea în care adăugați nodurile afectează unele aspecte ale procesării scenelor, inclusiv testarea hit-urilor și randarea.

Pentru a elimina un nod, invocați removeFromParent () pe nodul pe care doriți să îl eliminați.

Acum, că am acoperit adăugarea și eliminarea nodurilor, ne putem mișca înapoi în proiectul de exemplu. Dacă vă amintiți, tocmai tocmai am adăugat SKLabelNode la GameScene. Dacă încercați acum, veți vedea doar jumătate din text în stânga jos a ecranului.

De ce este doar jumătate din textul afișat? Acum ar fi un moment bun pentru a vorbi despre sistemul de coordonate și poziționare al SpriteKit.

Poziționarea și coordonatele

Implicit, sistemul de coordonate al SpriteKit plasează (0,0) în partea stângă jos a ecranului. De asemenea, în mod implicit, SpriteKit plasează nodurile astfel încât să fie poziționate la (0,0). Totuși, deși ... de ce vedem doar jumătate din text? Acest lucru se datorează faptului că, în mod prestabilit, eticheta de text este centrat orizontal pe originea nodului de etichetă, care este (0,0). Mai jos este o imagine care arată cum funcționează sistemul de coordonate al unui nod.

Originea nodurilor se află la (0,0), iar o coordonată pozitivă x se mișcă spre dreapta și o coordonată pozitivă y urcă pe ecran. Ține minte că o SKScene este un nod și, prin urmare, originea sa este de asemenea (0,0).

Setarea poziției unui nod

Acum, că am învățat sistemul de coordonate al SpriteKit și cum localizează nodurile, putem muta SKLabelNode într-o poziție diferită, astfel încât să putem vedea întregul text. Adăugați următoarele la didMove (la :) metoda în cadrul GameScene.swift.

suprascrie func didMove (pentru a vizualiza: SKView) lasa startGameLabel = SKLabelNode (text: "Start Game") startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2) addChild (startGameLabel)

Aici poziționăm eticheta în centrul scenei. poziţie proprietatea este de tip CGPoint, care are valori x și y care reprezintă un singur punct în interiorul scenei.

Dacă încercați acum, ar trebui să vedeți că eticheta a fost poziționată în centrul scenei.

Comutarea între scene

În prezent, NewScene este doar o scena goala. Să adăugăm, de asemenea, o etichetă și apoi să învățăm cum să comutați între scene. Iată o provocare: înainte de a citi mai departe, încercați să adăugați o etichetă NewScene asta spune, "Întoarce-teSoluția mea este mai jos.

Primul lucru pe care trebuie să-l facem este să adăugăm didMove (la :) metodă. Adăugați următoarele la NewScene.swift.

clasa NewScene: SKScene override func didMove (pentru vizualizare: SKView) 

Apoi, trebuie să adăugăm eticheta. Adăugați următoarele în cadrul didMove (la :) metoda pe care ați adăugat-o mai sus.

suprascrie func didMove (pentru a vizualiza: SKView) let goBackLabel = SKLabelNode (text: "Înapoi") goBackLabel.position = CGPoint (x: size.width / 2, y: size.height / 2) addChild (goBackLabel)

Aceasta adaugă o etichetă la  NewScene cu textul "Întoarce-te"Apoi vom implementa funcționalitatea sugerată de această etichetă - vom răspunde la evenimentele de atingere prin trecerea scenelor.

Răspunsul la atingere

Aproape toate jocurile mobile vor fi interacționate cu ajutorul atingerii. În acest pas, veți învăța cum să răspundeți la evenimentele touch din cadrul jocului.

Pentru a înregistra driverele de evenimente touch în cadrul jocului, trebuie să implementați vizualizarea touchesBegan (_: cu :) metodă. Adăugați următoarele la GameScene.swift:

suprascrie funcțiileBegan (atinge: Set, cu eveniment: UIEvent?) print ("YOU TOUCHED")

Dacă doriți să testați acest lucru acum, veți vedea TU ATINGEȚI tipărite pe consola când atingeți pe ecran. Totuși, de obicei, avem nevoie să aflăm când a fost atins un anumit nod. Pentru a face acest lucru, avem nevoie de o modalitate de a găsi și de a identifica nodurile. Vom învăța cum să realizăm acest lucru, apoi vom reveni și vom termina touchesBegan (_: cu :) metodă.

Căutarea arborelui Nod

Pentru a putea identifica un nod, folosiți nodurile Nume proprietatea și căutarea arborelui nod pentru un nod cu acest nume. Nodul e Nume proprietatea are un șir alfanumeric fără nici o semne de punctuație. 

Există câteva metode pentru a căuta un nod prin intermediul acestuia Nume proprietate. Dacă aveți deja o referință la nod, puteți să o verificați Nume proprietate direct, ceea ce vom face în touchesBegan (_: cu :) metodă. Cu toate acestea, este important să știm cum să căutăm arborele nod pentru un anumit nod după nume sau să căutăm un grup de noduri cu același nume.

childNode (withName :) metoda caută copiii unui nod pentru numele specific transmis ca parametru.

enumerateChildNodes (withName: folosind :) metoda caută copiii unui nod și cheamă blocul o dată pentru fiecare nod de potrivire pe care îl găsește. Utilizați această metodă atunci când doriți să găsiți toate nodurile care au același nume.

subscript (_ :) metoda returnează o serie de noduri care se potrivesc cu parametrul nume.

De asemenea, puteți căuta noduri utilizând o sintaxă de căutare avansată, care vă permite să căutați întreg arborele de scene sau să căutați un model, nu un nume exact, de exemplu. Această capacitate de căutare avansată este dincolo de scopul acestui tutorial. Cu toate acestea, dacă doriți să aflați mai multe, puteți citi despre în SKNode programare.

Acum, că știm cum să căutăm noduri în copacul nodului, să oferim etichetelor noastre un nume.

Adăugați următoarele în cadrul didMove (la :) metoda în cadrul GameScene.swift.

suprascrie func didMove (pentru a vizualiza: SKView) lăsați startGameLabel = SKLabelNode (text: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: size.width / 2; ) addChild (startGameLabel)

Aici, am stabilit startGameLabelnumele de proprietate la incepe jocul.

De asemenea, trebuie să setăm numele etichetei înăuntru NewScene. Adăugați următoarele cu didMove (la :) metoda în cadrul NewScene.swift.

 suprascrie func didMove (pentru a vizualiza: SKView) let goBackLabel = SKLabelNode (text: "Înapoi") goBackLabel.name = "goback" goBackLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (goBackLabel)

Am setat Nume proprietate la întoarce-te.

Detectarea unui nod care este atins

Adăugați următoarele în cadrul touchesBegan (_: cu :) metoda în cadrul GameScene.swift.

 suprascrie funcțiileBegan (atinge: Set, cu eveniment: UIEvent?) paza permite atingere = atinge prima data inca return permite touchLocation = touch.location (in: self) let touchedNode = self.atPoint (touchLocation) permiteți newScene = NewScene (dimensiune: dimensiune) newScene.scaleMode = scaleMode lăsați doorClose = SKTransition.doorsCloseVertical (withDuration: 2.0) view? .presentScene (newScene, transition: doorsClose)

multiTouchEnabled proprietatea vederii scenei este setată la fals în mod implicit, ceea ce înseamnă că vizualizarea primește doar prima atingere a unei secvențe multitouch. Cu această proprietate dezactivată, puteți prelua atingerea utilizând primul proprietatea calculată a seturilor de atingeri, deoarece există un singur obiect în set.

Putem obține touchLocation în scena din Locație proprietatea atingerii. Apoi ne putem da seama care nod a fost atins prin invocarea atPoint (_ :) și trecerea în touchLocation.

Verificăm dacă touchedNodeproprietatea de nume este egală cu "incepe jocul", și dacă este, știm că utilizatorul a atins eticheta. Apoi creăm un exemplu de NewScene și setați-o scalemode proprietatea să fie aceeași cu cea a scenei actuale - aceasta asigură faptul că scena funcționează la fel în diferite dispozitive. În cele din urmă, vom crea un SKTransition și invocați presentScene (_: tranziție :) care va prezenta scena împreună cu tranziția.

SKTransition clasa are multe metode de clasă pe care le puteți invoca pentru a arăta tranziții diferite între scene în loc să arătați imediat scena. Acest lucru oferă un pic de "bomboane ochi" pentru utilizatorul final, și face să arate o nouă scenă par mai puțin abrupte. Pentru a vedea toate tipurile de tranziție disponibile, verificați SKTransition clasă în ghidul de referință.

Nu o să pun în aplicare touchesBegan (_: cu :) metoda în NewScene. De ce nu încercați să faceți acest lucru pe cont propriu și să treceți la etichetă GameScene folosind un alt tip de tranziție? Codul se va asemăna foarte mult cu ceea ce avem deasemenea, doar amintim că am numit-o SKLabelNode "întoarce-te".

Concluzie

Am învățat un pic bun despre nodurile utilizate până în prezent folosind scene și ați văzut cum să utilizați un nod de etichete ca exemplu generic pentru a afla unele dintre caracteristicile nodurilor. Am studiat sistemele lor de coordonate, cum le putem localiza în arborele nodului, cum să le poziționăm și cum să răspundem evenimentelor touch. 

Există mai multe alte tipuri de noduri disponibile și le vom arunca o privire în următorul tutorial - începând cu SKSpriteNode!

Pentru a afla mai multe despre cum să începeți cu SpriteKit, ar trebui să verificați și postul lui Davis Allie aici pe Envato Tuts+.

De asemenea, verificați cursurile noastre SpriteKit! Acestea vă vor duce prin toți pașii de construire a primului joc SpriteKit pentru iOS, chiar dacă nu ați codat niciodată cu SpriteKit înainte.

Cod