Share
I denna serie lär vi oss hur du använder SpriteKit för att bygga 2D-spel för iOS. I det här inlägget fortsätter vi vår prospektering av SpriteKit-noder och lär dig om en speciell typ av nod som kallas "sprite" -an SKSpriteNode.
För att följa med denna handledning, ladda bara den medföljande GitHub repo. Den har en mapp som heter ExempelProjekt Starter. Öppna projektet i den mappen i Xcode, och du är redo att gå!
En SKSpriteNode ritas antingen som en rektangel med en textur kartlad på den, eller som en färgad obstruerad rektangel. Skapa en SKSpriteNode med en textur kartad på den är den vanligaste, eftersom det här är hur du tar med ditt spel konstverk.
Lägg till följande i didMove (till :) metod inom GameScene.swift.
ignorera func didMove (för att visa: SKView) let startGameLabel = SKLabelNode (text: "Start Game") startGameLabel.name = "startspel" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel) låt redSprite = SKSpriteNode (färg: .red, storlek: CGSize (bredd: 200, höjd: 200)) addChild (redSprite)
Här använder vi bekvämlighetens intiailizer init (färg: storlek :) som kommer att rita en rektangulär sprite med färg och storlek du passerar in som parametrar. Om du testar projektet nu ser du hälften av den röda rutan som visas.
Du kanske undrar varför bara hälften av spritet visar eftersom vi redan bestämt det SKNodeUrsprung är på (0,0). Detta för att SKSpriteNodes ram och därför är dess textur centrerade på sin position. För att ändra detta beteende kan du ändra spriteens anchorPoint egenskap som bestämmer vilken punkt rammen är placerad på. Diagrammet nedan visar hur anchorPoint Arbetar.
De anchorPoint specificeras i enhetskoordinatsystemet, vilka platser (0,0) längst ner till vänster och (1,1) längst upp till höger på ramen. Standard för SKSpriteNodes är (0.5,0.5).
Gå vidare och ändra anchorPoint egendom till (0,0) och märk den skillnad det gör.
ignorera func didMove (för att visa: SKView) let startGameLabel = SKLabelNode (text: "Start Game") startGameLabel.name = "startspel" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel) låt redSprite = SKSpriteNode (färg: .red, storlek: CGSize (bredd: 200, höjd: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) addChild (redSprite)
Nu, om du testar, kommer du att se att sprite är uppradad perfekt längst ner till vänster på scenen.
Låt oss nu flytta den till den övre mitten av scenen genom att byta platsegenskap. Byt ut din didMove (till :) funktion med följande:
ignorera func didMove (för att visa: SKView) let startGameLabel = SKLabelNode (text: "Start Game") startGameLabel.name = "startspel" startGameLabel.position = CGPoint (x: size.width / 2, y: size.height / 2 ) addChild (startGameLabel) låt redSprite = SKSpriteNode (färg: .red, storlek: CGSize (bredd: 200, höjd: 200)) redSprite.anchorPoint = CGPoint (x: 0, y: 0) redSprite.position = CGPoint (x: size.width / 2 - 100, y: size.height - 210) addChild (redSprite)
Lägg märke till hur vi måste subtrahera från båda x och y värden för att centrera sprite. Om vi hade lämnat anchorPoint vid dess standard skulle det redan ha varit centrerat på x axel. Det är viktigt att komma ihåg att när du ändrar ankarpunkten kanske du måste göra vissa justeringar i din positionering.
Den röda rutan är bra för övning med positionering, men du vill vanligtvis bestruka din sprite med konstverk för ditt spel.
Låt oss skapa en struktur SKSpriteNode. Lägg till följande kod längst ner på sidan didMove (till :) metod.
åsidosätta func didMove (för att visa: SKView) ... låt spelaren = SKSpriteNode (imageNamed: "player") player.position = CGPoint (x: size.width / 2, y: 300) addChild (spelare)
Här använder vi bekvämlighetsinitieraren init (imageNamed :), som tar som en parameter namnet på en bild utan förlängningen. Det här är det enklaste sättet att skapa en texturerad sprite, eftersom det skapar texturen för dig från bilden du skickar in.
Det andra sättet att skapa en texturerad SKSpriteNode är att skapa en SKTexture i förväg, och använd en av de intializers som tar en textur som en parameter.
Låt oss skapa ett par mer SKSpriteNodes och ändra några av deras egenskaper. Lägg till igen dessa i botten av din didMove (till :) fungera.
åsidosätta func didMove (för att visa: SKView) ... låt enemy1 = SKSpriteNode (imageNamed: "enemy1") fiend1.position = CGPoint (x: 100, y: 300) enemy1.xScale = 2 addChild (fiende1) låt enemy2 = SKSpriteNode imageNamed: "enemy2") enemy2.position = CGPoint (x: size.width - 100, y: 300) enemy2.zRotation = 3,14 * 90/180 addChild (fiende2)
Här skapar vi två SKSpriteNodes, enemy1 och enemy2. Vi ställer in xScale på enemy1 till 2 och ändra zRotation på enemy2 att rotera det med 90 grader. (De zRotation egenskapen tar värden i radianer, och ett positivt värde indikerar rotation moturs.)
Vi har experimenterat med att ändra några egenskaper på en sprite. Ta en titt på dokumentationen för SKNodes och SKSpriteNodes och försök ändra några av de andra egenskaperna för att se effekterna de har.
Sprite noder är bra för grundläggande rektanglar och texturer, men ibland behövs en mer komplex form. De SKShapeNode har du täckt i dessa fall. Vi tar en titt på formnoderna nästa.
En annan användbar nod är SKShapeNode. Denna nod ger en form som definieras av en Core Graphics-sökväg. SKShapeNodes är användbara för innehåll som inte lätt kan realiseras med en SKSpriteNode. Denna klass är mer minneintensiv och har lägre prestanda än att använda en SKSpriteNode, så du bör försöka använda det sparsamt.
Att tilldela en form till SKShapeNode, du kan ställa in en CGPath till nodens väg fast egendom. Det finns dock några initialisatorer som erbjuder fördefinierade former som rektanglar, cirklar och ellipser. Låt oss skapa en cirkel med hjälp av bekvämlighetsinitieraren init (circleOfRadius :).
Lägg sedan till följande längst ner på didMove (till :) metod.
åsidosätta func didMove (för att visa: SKView) ... låt cirkel = SKShapeNode (circleOfRadius: 50) circle.strokeColor = SKColor.green circle.fillColor = SKColor.blue circle.lineWidth = 8 circle.position = CGPoint (x: size.width / 2, y: 400) addChild (cirkel)
Vi byter några egenskaper på formnodet, placerar det och lägger till det på scenen. Det är väldigt enkelt att använda fördefinierade forminitierare. Men skapar en komplex CGPath Manuellt tar en stor tid och är inte för svag i hjärtat eftersom det vanligtvis innebär en del komplex matte.
Lyckligtvis finns det ett verktyg som låter dig teckna former visuellt och exportera dem CGPath som Swift-kod. Kolla in PaintCode om du vill lära dig mer.
Sprite Noder och Form Noder kommer att täcka de flesta fall, men ibland kanske du vill visa video i dina appar. De SKVideoNode, som vi ska ta en titt på nästa, har du täckt.
Den sista nod vi ska titta på är SKVideoNode. Som namnet antyder tillåter du med denna nod att spela video i dina spel.
Det finns några olika sätt att skapa en SKVideoNode. Man använder en förekomst av en AVPlayer, en annan använder bara namnet på en videofil som lagras i apppaketet, och det tredje sättet är att använda a URL.
En sak att komma ihåg är att videon är storlek egenskapen kommer initialt att vara densamma som målvideoens storlek. Du kan ändra detta storlek egendom, och videon kommer att sträckas till den nya storleken.
En annan sak att vara medveten om är att SKVideoNode erbjudanden spela() och paus() metoder bara. Om du ville ha mer kontroll över dina videoklipp skulle du initiera en SKVideoNode med en befintlig AVPlayer och använd det för att styra dina videoklipp.
Låt oss använda den enklaste metoden för att skapa en SKVideoNode. Lägg till följande längst ner på didMove (till :) metod.
åsidosätta func didMove (för att visa: SKView) ... släpp video = SKVideoNode (filnamn: "video.mov") video.position = CGPoint (x: size.width / 2, y: 600) addChild (video) video.play )
Här använde vi intiailisatorn init (fileNamed :) att skapa en video. Du skickar in videoens namn tillsammans med förlängningen. Jag har inte inkluderat en video tillsammans med projektets källkod, men om du vill se det här arbetet kan du lägga till en video med namnet "video.mov"till ditt projekt.
Detta avslutar vår studie på noder. Efter att du läst det här inlägget och det föregående ska du ha en bra förståelse för SKNodes och deras underklasser. I nästa del av serien ser vi på SKActions och använda fysik inom våra spel. Tack för att du läser, och jag kommer att se dig där!
Under tiden, kolla in några av våra andra bra kurser och handledning om att skapa IOS-appar med Swift och SpriteKit.
Titta även på våra SpriteKit kurser! Dessa kommer att ta dig igenom alla steg för att bygga ditt första SpriteKit-spel för iOS, även om du aldrig kodat med SpriteKit innan.
Accentsconagua