Share
In deze serie leren we SpriteKit te gebruiken om 2D-spellen voor iOS te bouwen. In dit bericht gaan we verder met het verkennen van SpriteKit-knooppunten en leren we over een speciaal soort knooppunt genaamd "sprite" -een SKSpriteNode.
Volg deze tutorial om de bijbehorende GitHub-repo te downloaden. Het heeft een map genaamd VoorbeeldProject Starter. Open het project in die map in Xcode en je bent klaar om te gaan!
Een SKSpriteNode wordt getekend als een rechthoek met een textuur erop of als een gekleurde niet-getextureerde rechthoek. Een maken SKSpriteNode met een textuur die erop is afgebeeld, is de meest voorkomende, omdat je zo de kunstwerken van je spel tot leven brengt.
Voeg het volgende toe aan de didMove (naar :) methode binnen GameScene.swift.
override func didMove (te bekijken: SKView) let startGameLabel = SKLabelNode (tekst: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel) laat redSprite = SKSpriteNode (kleur: .red, size: CGSize (width: 200, height: 200)) addChild (redSprite)
Hier gebruiken we de gemakintiailizer init (kleur: maat :) die een rechthoekige sprite tekent met de kleur en grootte die je als parameters doorgeeft. Als je het project nu test, zie je de helft van het rode vierkantje.
U vraagt zich misschien af waarom slechts de helft van de sprite wordt weergegeven, omdat we dat al hebben vastgesteld SKNodezijn oorsprong ligt bij (0,0). Dit omdat het SKSpriteNodehet frame en daarom de textuur is gecentreerd op zijn positie. Om dit gedrag te veranderen, kun je de sprite's veranderen ankerpunt eigenschap, die het punt bepaalt waarop het frame wordt gepositioneerd. Het onderstaande diagram laat zien hoe het ankerpunt werken.
De ankerpunt wordt gespecificeerd in het eenheidcoördinatensysteem, welke plaatsen (0,0) links onderaan en (1,1) in de rechterbovenhoek van het kader. De standaard voor SKSpriteNodezus (0.5,0.5).
Ga je gang en verander de ankerpunt eigendom van (0,0) en merk het verschil op dat het maakt.
override func didMove (te bekijken: SKView) let startGameLabel = SKLabelNode (tekst: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel) laat redSprite = SKSpriteNode (kleur: .red, size: CGSize (width: 200, height: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) addChild (redSprite)
Als je nu test, zie je dat de sprite perfect is uitgelijnd met de linkerbenedenhoek van de scène.
Laten we het naar het midden van de scène verplaatsen door de eigenschap position ervan te wijzigen. Vervang je didMove (naar :) functie met het volgende:
override func didMove (te bekijken: SKView) let startGameLabel = SKLabelNode (tekst: "Start Game") startGameLabel.name = "startgame" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel) laat redSprite = SKSpriteNode (kleur: .red, size: CGSize (width: 200, height: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) redSprite.position = CGPoint (x: size.width / 2 - 100, y: size.height - 210) addChild (redSprite)
Merk op hoe we af moesten trekken van beide X en Y waarden om de sprite te centreren. Als we de. Hadden verlaten ankerpunt op zijn standaard dan zou het al gecentreerd zijn op de X as. Het is belangrijk om te onthouden dat wanneer u het ankerpunt wijzigt, u mogelijk een aantal aanpassingen in uw positie moet aanbrengen.
Die rode doos is goed om te oefenen met positionering, maar je zult meestal je sprite een textuur geven voor je spel.
Laten we een structuur maken SKSpriteNode. Voeg de volgende code toe onderaan de didMove (naar :) methode.
negeer func didMove (om te bekijken: SKView) ... laat speler = SKSpriteNode (imageNamed: "player") player.position = CGPoint (x: size.width / 2, y: 300) addChild (player)
Hier gebruiken we de gemakinitialisatie init (imageNamed :), die als een parameter de naam van een afbeelding zonder de extensie opneemt. Dit is de gemakkelijkste manier om een getextureerde sprite te maken, omdat deze de textuur voor u creëert uit de afbeelding die u invoert.
De andere manier om een textuur te maken SKSpriteNode is om een te maken SKTexture vooraf en gebruik een van de initializers die een textuur als parameter gebruiken.
Laten we er nog een paar maken SKSpriteNodes en sommige van hun eigenschappen wijzigen. Nogmaals, voeg deze toe aan de onderkant van uw didMove (naar :) functie.
override func didMove (te bekijken: SKView) ... laat enemy1 = SKSpriteNode (imageNamed: "enemy1") enemy1.position = CGPoint (x: 100, y: 300) enemy1.xScale = 2 addChild (enemy1) laat enemy2 = SKSpriteNode ( imageNamed: "enemy2") enemy2.position = CGPoint (x: size.width - 100, y: 300) enemy2.zRotation = 3.14 * 90/180 addChild (enemy2)
Hier maken we er twee SKSpriteNodes, enemy1 en enemy2. We hebben de xScale op enemy1 naar 2 en verander de zRotation op enemy2 om het te laten draaien 90 graden. (De zRotation property neemt de waarden in radialen en een positieve waarde geeft een rotatie in tegenwijzerzin aan.)
We hebben geëxperimenteerd met het wijzigen van een paar eigenschappen van een sprite. Bekijk de documentatie voor SKNodes en SKSpriteNodes en probeer enkele van de andere eigenschappen te wijzigen om de effecten te zien die ze hebben.
Sprite-knooppunten zijn goed voor standaardrechthoeken en structuren, maar soms is een complexere vorm nodig. De SKShapeNode heb je in die gevallen gedekt. We zullen daarna naar vormknopen kijken.
Een ander nuttig knooppunt is de SKShapeNode. Dit knooppunt maakt een vorm aan gedefinieerd door een Core Graphics-pad. SKShapeNodes zijn handig voor inhoud die niet gemakkelijk kan worden gerealiseerd met een SKSpriteNode. Deze klasse is meer geheugenintensief en heeft lagere prestaties dan het gebruik van een SKSpriteNode, dus je zou moeten proberen het spaarzaam te gebruiken.
Een vorm toewijzen aan SKShapeNode, je kunt een instellen CGPath naar de knooppunten pad eigendom. Er zijn echter een paar initializers die vooraf gedefinieerde vormen bieden, zoals rechthoeken, cirkels en ellipsen. Laten we een cirkel maken met behulp van de convenience-initialisatie init (circleOfRadius :).
Voeg vervolgens het volgende toe aan de onderkant van de didMove (naar :) methode.
override func didMove (te bekijken: SKView) ... let circle = SKShapeNode (circleOfRadius: 50) circle.strokeColor = SKColor.green circle.fillColor = SKColor.blue circle.lineWidth = 8 circle.position = CGPoint (x: size.width / 2, y: 400) addChild (circle)
We veranderen een paar eigenschappen op het vormknooppunt, plaatsen het en voegen het toe aan de scène. Het is heel gemakkelijk om de voorgedefinieerde vorminitializers te gebruiken. Het creëren van een complex CGPath Handmatig neemt een aanzienlijke hoeveelheid tijd in beslag en is niet voor bangeriken omdat het meestal een ingewikkelde wiskunde inhoudt.
Gelukkig is er een hulpmiddel waarmee je vormen visueel kunt tekenen en ze kunt exporteren CGPath als Swift-code. Bekijk PaintCode als je meer wilt weten.
Sprite-knooppunten en vormknooppunten zullen in de meeste gevallen worden gebruikt, maar soms wilt u misschien video in uw apps weergeven. De SKVideoNode, waar we later naar gaan kijken, heb je het behandeld.
Het laatste knooppunt dat we zullen bekijken, is het SKVideoNode. Zoals de naam al aangeeft, kun je met dit knooppunt video afspelen in je games.
Er zijn een paar verschillende manieren om een te maken SKVideoNode. Men gebruikt een instantie van een AVPlayer, een ander gebruikt gewoon de naam van een videobestand dat is opgeslagen in de app-bundel en de derde manier is om een URL.
Een ding om in gedachten te houden is dat de video's grootte eigenschap zal aanvankelijk hetzelfde zijn als de grootte van de doelvideo. Je kunt dit veranderen grootte eigenschap, en de video wordt uitgerekt naar de nieuwe grootte.
Een ander ding om op te letten is dat het SKVideoNode aanbiedingen spelen() en pauze() alleen methoden. Als je meer controle over je video's wilde, zou je een a initialiseren SKVideoNode met een bestaand AVPlayer en gebruik dat om je video's te besturen.
Laten we de eenvoudigste methode gebruiken om een te maken SKVideoNode. Voeg het volgende toe aan de onderkant van de didMove (naar :) methode.
override func didMove (te bekijken: SKView) ... let video = SKVideoNode (fileNamed: "video.mov") video.position = CGPoint (x: size.width / 2, y: 600) addChild (video) video.play ( )
Hier hebben we de intiailizer gebruikt init (fileNamed :) om een video te maken. U geeft de naam van de video samen met de extensie door. Ik heb geen video bijgevoegd bij de broncode van het project, maar als je dit wilt zien, kun je een video toevoegen met de naam 'video.mov"naar uw project.
Hiermee is onze studie over knooppunten voltooid. Na het lezen van dit bericht en het vorige moet je een goed begrip hebben van SKNodes en hun subklassen. In het volgende deel van deze serie zullen we een kijkje nemen SKActions en het gebruik van fysica in onze games. Bedankt voor het lezen en ik zie je daar!
Bekijk in de tussentijd enkele van onze andere geweldige cursussen en zelfstudies over het maken van iOS-apps met Swift en SpriteKit.
Bekijk ook onze SpriteKit-cursussen! Deze zullen je door alle stappen leiden van het bouwen van je eerste SpriteKit-game voor iOS, zelfs als je nog nooit met SpriteKit hebt gecodeerd.
Accentsconagua