Share
În această serie, învățăm cum să folosim SpriteKit pentru a construi jocuri 2D pentru iOS. În acest post, vom continua să explorăm nodurile SpriteKit și să învățăm despre un tip special de nod numit "sprite" SKSpriteNode.
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!
Un SKSpriteNode este desenat fie ca un dreptunghi cu o textura mapata pe el, fie ca un dreptunghi colorat neted. Crearea unui SKSpriteNode cu o textură cartografiat pe ea este cea mai obișnuită, deoarece acesta este modul în care aduceți opera de arta a jocului dvs. la viață.
Adăugați următoarele la 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) permite redSprite = SKSpriteNode (culoare: .red, dimensiune: CGSize (lățime: 200, înălțime: 200)) addChild (redSprite)
Aici folosim intiulizatorul de confort init (culoare: dimensiunea :) care va desena un sprite dreptunghiular cu culoarea si marimea pe care le transmiteti ca parametri. Dacă testați proiectul acum, veți vedea jumătate din pătrat roșu arătând.
S-ar putea să te întrebi de ce arată doar jumătate din sprite, de vreme ce deja am determinat asta SKNodeoriginile sunt la (0,0). Acest lucru pentru că SKSpriteNodeși, prin urmare, textura sa este centrat pe poziția sa. Pentru a schimba acest comportament, puteți schimba sprite-ul punct de ancorare proprietate, care determină punctul în care este poziționat cadrul. Diagrama de mai jos arată modul în care punct de ancorare lucrări.
punct de ancorare este specificat în sistemul de coordonate al unității, care plasează (0,0) în partea stângă jos și (1,1) în colțul din dreapta sus al cadrului. Implicit pentru SKSpriteNodes este (0.5,0.5).
Mergeți și schimbați punct de ancorare proprietate la (0,0) și observați diferența pe care o face.
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) permite redSprite = SKSpriteNode (culoarea: .red, dimensiune: CGSize (lățime: 200, înălțime: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) addChild
Acum, dacă încercați, veți vedea că sprite este aliniat perfect cu partea din stânga jos a scenei.
Acum, hai să o mutăm în centrul de sus al scenei schimbând poziția sa. Înlocuiți-vă didMove (la :) funcționează cu următoarele:
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) permite redSprite = SKSpriteNode (culoare: .red, dimensiune: CGSize (lățime: 200, înălțime: 200)) redSprite.anchorPoint = CGPoint (x: size.width / 2-100, y: size.height - 210) addChild (redSprite)
Observați cum trebuie să scădem din ambele X și y valorile pentru a centra sprite. Dacă l-am fi părăsit punct de ancorare la întârziere, atunci ar fi fost deja centrat pe X axă. Este important să rețineți că atunci când schimbați punctul de ancorare, va trebui să efectuați unele ajustări în poziționarea dvs..
Această cutie roșie este bună pentru practică cu poziționare, dar de obicei, veți dori să vă textură sprite cu opere de artă pentru joc.
Să creăm o textură SKSpriteNode. Adăugați următorul cod în partea de jos a paginii didMove (la :) metodă.
suprascrie func didMove (pentru a vizualiza: SKView) ... permite jucatorului = SKSpriteNode (imageNamed: "player") player.position = CGPoint (x: size.width / 2, y: 300) addChild
Aici folosim inițialele de confort init (imageNamed :), care ia ca parametru numele unei imagini fără extensie. Acesta este cel mai simplu mod de a crea o sprite texturate, deoarece creează textura pentru dvs. din imaginea pe care o parcurgeți.
Cealaltă modalitate de a crea o textură SKSpriteNode este de a crea un SKTexture în prealabil, și să utilizați unul dintre inițialiștii care iau o textură ca parametru.
Să creăm un cuplu mai mult SKSpriteNodeși schimba unele dintre proprietățile lor. Din nou, adăugați-le în partea de jos a ecranului didMove (la :) funcţie.
suprascrie func didMove (pentru a vizualiza: SKView) ... let enemy1 = SKSpriteNode (imageNamed: "enemy1") enemy1.position = CGPoint (x: 100, y: 300) enemy1.xScale = 2 addChild imageNamed: "enemy2") enemy2.position = CGPoint (x: dimensiune.width - 100, y: 300) enemy2.zRotation = 3.14 * 90/180 addChild (inamic2)
Aici creăm două SKSpriteNodes, enemy1 și enemy2. Am setat XScale pe enemy1 la 2 și schimbați zRotation pe enemy2 să îl rotești 90 grade. (The zRotation proprietatea ia valorile în radiani, iar o valoare pozitivă indică o rotație în sens invers acelor de ceasornic.)
Am experimentat schimbarea câtorva proprietăți pe un sprite. Uitați-vă la documentația pentru SKNodes și SKSpriteNodes și încercați să schimbați câteva din celelalte proprietăți pentru a vedea efectele pe care le au.
Nodurile Sprite sunt bune pentru dreptunghiurile și texturile de bază, dar uneori este nevoie de o formă mai complexă. SKShapeNode ați acoperit în aceste cazuri. Vom arunca o privire asupra nodurilor de formă următoare.
Un alt nod util este SKShapeNode. Acest nod redă o formă definită de o cale grafică de bază. SKShapeNodes sunt utile pentru conținut care nu poate fi ușor realizat cu un SKSpriteNode. Această clasă este mai intensă în memorie și are performanțe mai scăzute decât utilizarea unui SKSpriteNode, astfel încât ar trebui să încercați să-l utilizați cu ușurință.
Pentru a atribui o formă SKShapeNode, puteți seta o CGPath la nodul lui cale proprietate. Cu toate acestea, există câteva inițiale care oferă forme predefinite, cum ar fi dreptunghiuri, cercuri și elipse. Să creăm un cerc folosind inițialele de confort init (circleOfRadius :).
Apoi, adăugați următoarele în partea de jos a didMove (la :) metodă.
suprascrie func didMove (pentru a vizualiza: SKView) ... lasa cercul = SKShapeNode (circleOfRadius: 50) cerc_core_color = SKColor.green circle.fillColor = SKColor.blue circle.lineWidth = 8 cerc.locatie = CGPoint (x: / 2, y: 400) addChild (cerc)
Schimbați câteva proprietăți pe nodul de formă, poziționați-l și adăugați-l la scenă. Este foarte ușor să utilizați inițializatorii de formă predefiniți. Cu toate acestea, crearea unui complex CGPath manual durează o perioadă considerabilă de timp și nu este pentru cei slabi ai inimii, deoarece implică, de obicei, niște matematică complexă.
Din fericire, există un instrument care vă permite să desenați forme vizual și să le exportați CGPath ca cod Swift. Verificați PaintCode dacă doriți să aflați mai multe.
Nodurile Sprite și nodurile de formare vor acoperi majoritatea cazurilor, însă uneori este posibil să doriți să afișați videoclipuri în aplicațiile dvs. SKVideoNode, pe care vom arunca o privire la următoarea, ați acoperit.
Ultimul nod pe care îl vom arunca o privire este SKVideoNode. După cum sugerează și numele, acest nod vă permite să jucați videoclipuri în cadrul jocurilor dvs..
Există câteva moduri diferite de a crea un SKVideoNode. Se folosește o instanță a unui AVPlayer, altul utilizează doar numele unui fișier video care este stocat în pachetul de aplicații, iar al treilea mod este să utilizați a URL-.
Un lucru de ținut minte este că videoclipul este mărimea proprietatea va fi inițial aceeași cu dimensiunea videoclipului țintă. Puteți schimba acest lucru mărimea proprietate, dar, video va fi întins la noua dimensiune.
Un alt lucru care trebuie să fie conștient este că SKVideoNode promoții Joaca() și pauză() numai metodele. Dacă doriți mai mult control asupra videoclipurilor dvs., ați inițializa un videoclip SKVideoNode cu un existent AVPlayer și să-l folosești pentru a-ți controla videoclipurile.
Să folosim cea mai simplă metodă de a crea un SKVideoNode. Adăugați următoarele în partea de jos a paginii didMove (la :) metodă.
suprascrie func didMove (pentru a vizualiza: SKView) ... permite video = SKVideoNode (fileNamed: "video.mov") video.position = CGPoint (x: size.width / 2, y: 600) addChild )
Aici am folosit elementul de intilenizare init (fileNamed :) pentru a crea un videoclip. Introduceți numele videoclipului împreună cu extensia. Nu am inclus un videoclip împreună cu codul sursă al proiectului, dar dacă doriți să vedeți această lucrare, puteți adăuga un videoclip numit "video.mov"la proiectul tău.
Acest lucru completează studiul nostru privind nodurile. După ce ați citit acest post și cel precedent, ar trebui să aveți o bună înțelegere SKNodes și subclasele lor. În următoarea parte a acestei serii, vom arunca o privire la SKActions și folosind fizica în jocurile noastre. Mulțumesc că ai citit și te voi vedea acolo!
Între timp, verificați câteva din celelalte cursuri și tutoriale ale noastre despre crearea aplicațiilor iOS cu Swift și SpriteKit.
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.
Accentsconagua