SpriteKit From Scratch Fundamentals

Introduksjon

SpriteKit, tilgjengelig på iOS, tvOS og OS X, er et rammeverk som gir utviklere mulighet til å lage 2D-spill av høy kvalitet uten å bekymre seg om kompleksiteten til grafikk-APIer, for eksempel OpenGL og Metal. I tillegg til å håndtere all grafikk for utviklere, tilbyr SpriteKit også et bredt spekter av ekstra funksjonalitet, inkludert fysikk simulering, lyd / videoavspilling og lagring / lasting av spill.

Gjennom hele denne serien lærer du alt om SpriteKit og oppnår ferdigheter, som du kan søke om på hvilken som helst type 2D-spill som bygges med dette gode rammeverket. I denne serien lager vi et fullt funksjonelt spill hvor spilleren kontrollerer en bil som må unngå hindringer som krysser banen.

Forutsetninger

Denne serien krever at du kjører Xcode 7.3 eller høyere, som inkluderer støtte for Swift 2.2, samt SDKene for iOS 9.3, tvOS 9.2 og OS X 10.11.5. Du må også laste ned startprosjektet fra GitHub, som inneholder de visuelle eiendelene som skal brukes i spillet og noen få linjer med kode for å hjelpe oss med å komme i gang.

Grafikken som brukes til spillet i denne serien, finnes på GraphicRiver. GraphicRiver er en god kilde for å finne kunst og grafikk for spillene dine.

1. Scener, Noder og Visninger

scener

Den første klassen du må være oppmerksom på når du arbeider med SpriteKit, er SKScene klasse. For alle 2D-spill som er bygget med SpriteKit, deler du spillets innhold opp i flere scener, hver med sine egne SKScene underklasse.

Mens vi vil se på funksjonaliteten og indre arbeidene til SKScene klasse senere i denne serien, hva du trenger å vite for nå er at en scene er hva du legger til innholdet i spillet og det virker som root node. Dette bringer oss til noder.

Noder (Sprites)

De SKNode klassen, hvilken SKScene er en underklasse av, brukes til å representere alle slags gjenstander innenfor din scene. Selv om det finnes mange forskjellige typer noder tilgjengelig i SpriteKit, ofte referert til som sprites, deler de de samme nøkkelegenskapene med det viktigste som er:

• stilling (CGPoint)
• XScale (CGFloat): representerer den horisontale skalaen til en node
• ySkala (CGFloat): lik XScale men det fungerer i vertikal retning i stedet
• alfa (CGFloat): representerer nodens gjennomsiktighet
• skjult (bool): Verdien avgjør om noden skal være synlig eller ikke
• zRotation (CGFloat): representerer vinkelen, i radianer, at knutepunktet skal roteres
• zPosition (CGFloat): brukes til å bestemme hvilke noder som skal vises på toppen av andre noder i scenen

Som du kan se, lar de ovennevnte egenskapene deg nøyaktig plassere, rotere og redigere det grunnleggende utseendet på hver knute i en scene.

Akkurat som du kan legge til undervisninger til noen UIView objekt i UIKit, i SpriteKit kan du legge til et hvilket som helst antall barn noder til en eksisterende node. Dette gjøres ved hjelp av addChild (_ :) metode på noen SKNode gjenstand.

Ligner også på UIView objekter, posisjon og skala egenskaper av noen barn node er i forhold til den overordnede node som den er lagt til. Dette er hvordan en SKScene objekt, være en underklasse av SKNode, kan fungere som rotnoden til din scene. For noen noder du vil ha i din scene, må du legge dem til som barn av selve scenen ved hjelp av addChild (_ :) metode.

De SKNode Klassen er ikke i stand til å produsere noe visuelt innhold. For å gjøre det må du bruke en av de mange underklassene som er tilgjengelige i SpriteKit. Noen viktige SKNode underklasser å være klar over er:

• SKSpriteNode: tar et bilde og skaper en teksturert sprite i scenen din
• SKCameraNode: kontrollerer hvor scenen din ses fra
• SKLabelNode: Gjør en tekststreng
• SKEmitterNode: brukes i forbindelse med et partikkelsystem for å gjøre partikkelvirkninger
• SKLightNode: skaper lys og skyggeeffekter i scenen din

Gjennom hele denne serien bruker vi disse nodetypene, samt noen av de andre mindre vanlige.

Visninger

For å vise SpriteKit-innholdet ditt i et fungerende program, må du bruke SKView klasse. Dette er en underklasse av UIView (eller NSView på OS X), som enkelt kan legges til noen del av søknaden din. For å presentere en SpriteKit-scene må du ringe enten presentScene (_ :) eller presentScene (_: overgang :) metode på en SKView forekomst. Den andre metoden brukes når du vil ha en egendefinert animasjon eller overgang til den nye scenen.

I tillegg til å bare gjengi SpriteKit-innholdet, SKView klassen tilbyr også litt ekstra og svært nyttig funksjonalitet. Dette inkluderer en bool eiendom kalt pauset, som lett kan brukes til å stoppe eller gjenoppta en scene.

Det finnes også flere egenskaper som er nyttige når du feilsøker spillet ditt, og kan vise informasjon, for eksempel dagens FPS (rammer per sekund), node telling og fysikkfelter innenfor din scene. Hvis du vil se på alle tilgjengelige eiendommer, sjekk ut SKView klasse referanse.

2. Scene Editor

Nå som vi har sett over de grunnleggende klassene som brukes i SpriteKit-spill, er det på tide å lage vår aller første scene. Mens scener kan opprettes helt programmatisk, gir Xcode et utmerket sceneredigeringsverktøy, som lar deg enkelt dra og slippe noder inn i scenen din mens du redigerer sin posisjon, utseende og andre egenskaper.

Åpne startprosjektet og opprett en ny fil ved å trykke Command + N eller velge Ny> Fil ...  fra Xcode er Fil Meny. Velg iOS> Ressurs> SpriteKit Scene filtype og klikk neste.

Gi filen navnet MainScene og lagre det. Du bør nå se din nye scenefil i Prosjektnavigator.

Å velge MainScene.sks å åpne Xcodes sceneredigerer. For øyeblikket er scenen blank og har en grå bakgrunn. Det er ingen noder i det ennå. Før du legger til noen sprites til din scene, må vi først endre størrelsen.

I Attributtsinspektør til høyre, endre scenens størrelse for å ha en bredde (W) på 320 poeng og en høyde (H) på 480 poeng.

Denne scenestørrelsen korrelerer med den minste skjermstørrelsen vi målretter mot (3,5 "skjerm på iPhone 4) slik at vi kan formatere våre noder riktig. Vi vil endre scenestørrelsen for å være adaptiv til den nåværende enhetsskjermstørrelsen i en senere opplæring.

For å legge til noder på scenen din, åpne Objektbibliotek til høyre. Du må kanskje klikke på ikonet uthevet i blått hvis Objektbibliotek er ikke synlig.

Fra Objektbibliotek, dra a Color Sprite til midten av scenen din.

Åpne Attributtsinspektør til høyre og endre Tekstur, Stilling, og Størrelse attributter til følgende verdier:

Din scene skal nå ha en bil i midten som vist nedenfor.

Legg merke til at, i motsetning til UIKit koordinatsystemet, i SpriteKit, stilling av en knute gjelder alltid midtpunktet fra scenens nederste venstre hjørne opprinnelsespunkt (0, 0). Det er derfor å sette bilens posisjon til (160, 120) plasserer midten av bilen 160 poeng inn fra venstre og 120 poeng opp fra bunnen.

3. Vise en scene

Med din scene ferdig for nå, åpne ViewController.swift og legg til en importerklæring for SpriteKit-rammen øverst. Dette tillater oss å bruke SpriteKit-klassene og APIene i ViewController.swift.

importere UIKit import SpriteKit

Deretter oppdaterer du implementeringen av viewDidLoad () metode av ViewController klassen som følger:

overstyr func viewDidLoad () super.viewDidLoad () la skView = SKView (ramme: self.view.frame) la scene = SKScene (filNamed: "MainScene") skView.presentScene (scene) view.addSubview (skView)

Med denne koden, oppretter vi først en SKView eksempel, som er den samme størrelsen som visningskontrollørens visning. Deretter laster vi vår scene fra filen vi opprettet ved å bruke SKScene (fileNamed :) initializer. Vi lager SKView Eksempel presentere denne scenen og legg den til som et undervisning i hovedvisningen.

Velg iPhone 4s simulator (slik at vår scene er riktig dimensjonert for skjermen) og bygge og kjøre søknaden din. Du bør se en skjerm som ligner på følgende:

Konklusjon

I denne første opplæringen av SpriteKit From Scratch lærte du grunnleggende om visninger, scener og noder i SpriteKit. Du har opprettet en grunnleggende scene med ett sprite ved hjelp av sceneditoren som er innebygd i Xcode, noe som gjør at skaper scener mye enklere når man sammenligner med å gjøre alt programmert.

I neste veiledning legger vi til mer funksjonalitet i spillet vårt ved å bruke SpriteKit-handlinger for å flytte bilen rundt i scenen. Du vil også bli introdusert til fysikk simuleringen i SpriteKit ved å oppdage når bilen kolliderer med en annen knutepunkt.

Som alltid, legg igjen dine kommentarer og tilbakemeldinger i kommentarfeltet nedenfor.