Last ned prosjektet og ta deg tid til å bla gjennom mapper, klasser og ressurser . Bygge og drive prosjektet på en fysisk enhet eller i iOS Simulator. Hvis programmet kjører uten problemer, så det er på tide å begynne å utforske de nye iOS 8 SpriteKit funksjoner.

3. Shaders

Trinn 1: Lag SpriteKit Scene

I Xcode prosjekt, legge til en ny SpriteKit Scene
fil. Velg Fil
> Ny
> File ... Hotell og, fra Resource
delen velger SpriteKit Scene
. Name it ShaderSceneEditor og klikk Opprett
. En grå grensesnittet skal vises

Trinn 2:. SpriteKit Scene Configuration

I SKNode Inspektør på høyre, skal du se to eiendommer, Størrelse Hotell og Gravity
. Sett Størrelse eiendommen tar hensyn enheten skjermoppløsning og satt Gravity til 0,0.

Du vil merke at størrelsen på de gule rektangelet endringer for å gjenspeile endringene du har gjort. Den gule rektangelet er din virtuelle grensesnitt. Den viser deg hvordan objekter vises på enheten

Trinn 3:. Legg en farge Sprite

Inne i Object Library
til høyre, velg Color Sprite Hotell og dra den inn i den gule rektangelet.

Velg farge sprite og åpne SKNode Inspector til høyre for å se dens egenskaper.

Du kan samhandle med objektet i sanntid . Eventuelle endringer du gjør vises i redigeringsprogrammet. Du kan spille med Posisjons
, Størrelse
, Color
, eller Skala
, men hva du virkelig ønsker er Custom Shader
alternativ. Men vil du se at det er ingen shader tilgjengelig ennå
Trinn 4:. Legg en Custom Shader: Metode 1

Legg til en ny tomt kildefilen ( Fil
> New > File ...
), velger du Andre
> Empty fra iOS-delen, og gi den navnet Shader01.fsh
. Legg til følgende kode i filen du nettopp har opprettet
void main () {float currTime = u_time.; vec2 uv = v_tex_coord; vec2 circleCenter = vec2 (0,5, 0,5); vec3 circleColor = vec3 (0,8, 0,5, 0,7); vec3 posColor = vec3 (uv, 0,5 + 0,5 * sin (currTime)) * circleColor; flyte illu = pow (. 1 - avstand (uv, circleCenter), 4.) * 1,2; illu * = (. 2. + abs (0,4 + cos (currTime * -20 + 50. * avstand (uv, circleCenter)) /1,5)); gl_FragColor = vec4 (posColor * illu * 2., illu * 2.) * v_color_mix.a;}

Listen kodeblokken genererer en blanding av farger som tar hensyn til sentrum av en sirkel og sin kant. Apple viste dette shader i sin SpriteKit sesjon under WWDC 2014.

Gå tilbake til redaktøren, velge farge sprite objekt, og i Custom Shader velge shader du nettopp har opprettet. Du skal nå se shader i aksjon

Trinn 5:. Real Time Tilbakemelding

Programmering shaders bruker Xcode og SpriteKit er lett, fordi du får tilbakemeldinger i sanntid. Åpne Assistent Editor Hotell og konfigurere den til å vise både SpriteKit scene samt shader du nettopp har opprettet.

La oss se hvordan dette fungerer. Innføre en kjøretidsfeil i shader, for eksempel ved å endre en variabel navn og lagre endringene for å se resultatet.

Som du kan se, gir Xcode en rask og enkel måte å varsle utbygger om mulig shader feil. Fordelen er at du ikke trenger å bygge eller distribuere programmet til enheten eller iOS Simulator for å se om alt går greit.

Det er nå på tide å legge til en annen shader og manuelt programmere den.

Trinn 6: Legg en Custom Shader: Metode 2

I dette trinnet, vil du lære hvordan du:

kalle en shader manuelt

tildele en shader til en SpriteKit objekt

opprette og sende egenskapene til en shader

I dette trinnet, vil du legge til en egendefinert SKSpriteNode ved posisjonen til brukerens springen og deretter vil bruke en shader å endre teksturen fargen på SKSpriteNode.

Det første trinnet er å legge til en annen shader. Nevne den nye shader shader02.fsh Hotell og legge til følgende kode blokk til shader fil:
void main () {gl_FragColor = texture2D (myTexture, v_tex_coord) * vec4 (1, 0,2, 0,2, 1 );}

Åpne gjennomføringen fil av ShaderScene klassen. Det første trinnet er å finne ut om brukeren har tappet skjermen og finne plasseringen av springen. For det, må vi implementere touchesBegan: withEvent: metode. Inne i denne metoden, legge en SKSpriteNode eksempel på plasseringen av springen. Du kan bruke alle sprite du vil. Jeg har brukt Spaceship.png
, som allerede er inkludert i prosjektet Anmeldelser - (void) touchesBegan:. (NSSet *) berører withEvent: (UIEvent *) hendelse {for (UITouch * touch i berører) {CGPoint plassering = [berørings locationInNode bolig:]; //Opprett noden SKSpriteNode * plass = [SKSpriteNode spriteNodeWithImageNamed: @ "Spaceship.png"]; space.position = CGPointMake (location.x, location.y); [selvtillit addChild: space]; }}

Vi deretter opprette en SKShader objekt og initialisere den ved hjelp av shader02.fsh
file:
SKShader * shader = [SKShader shaderWithFileNamed: @ "shader02.fsh"];

kanskje lagt merke til at shader kildefilen refererer til en myTexture objekt. Dette er ikke en forhåndsdefinert shader eiendom, men en referanse søknaden din trenger for å passere til shader. Følgende kodebit viser hvordan du gjør dette
shader.uniforms = @ [[SKUniform uniformWithName: @ "myTexture" tekstur: [SKTexture textureWithImageNamed: @ "Spaceship.png"]]];.

Vi tilsett shader til SKSpriteNode objektet
space.shader = shader;

Dette er hva touchesBegan. withEvent: metode skal se slik ut: Anmeldelser - (void) touchesBegan: (NSSet *) berører withEvent: (UIEvent * ) hendelse {for (UITouch * touch i innslag) {CGPoint plassering = [berørings locationInNode bolig:]; //Opprett noden SKSpriteNode * plass = [SKSpriteNode spriteNodeWithImageNamed: @ "Spaceship.png"]; space.position = CGPointMake (location.x, location.y); [selvtillit addChild: space]; SKShader * shader = [SKShader shaderWithFileNamed: @ "shader02.fsh"]; shader.uniforms = @ [[SKUniform uniformWithName: @ "myTexture" tekstur: [SKTexture textureWithImageNamed: @ "Spaceship.png"]]]; space.shader = shader; }}

Bygg og kjøre prosjektet. Trykk på Shaders (initWithSize)
knappen og trykke på skjermen. Hver gang du trykker på skjermen, er et romskip sprite lagt med en modifisert tekstur.

Ved hjelp av dette alternativet, ser du at den første shader ikke er presentert på skjermen. Dette skjer fordi at shader ble opprettet og konfigurert inne i SpriteKit Scene editor. Å se det, må du initialisere ShaderScene klassen bruker unarchiveFromFile. Metode

I GameScene.m
, skal du se en del som registrerer og analyserer brukerens kraner i touchesBegan: withEvent :. I den andre om klausulen, initial vi en ShaderScene eksempel som vist nedenfor
if ([node.name isEqualToString: @ "buttonShaderCoder"]) {ShaderScene * scene = [ShaderScene unarchiveFromFile: @ "ShaderSceneEditor"].; [self.scene.view presentScene: scene];}

Bygg og kjøre prosjektet igjen, trykker du på Shaders (initWithCoder)
knappen, og trykke på skjermen. Begge shaders er nå aktive i en enkelt SpriteKit scene.

4. Lys og skygger

Lys og skygger er to egenskaper som spiller sammen. Målet med denne delen er å legge til flere lys noder og sprites, og leke med sine egenskaper

Trinn 1:. Legg en lys

Åpne LightingSceneEditor.sks Hotell og bla objektene inne i Media Bibliotek
til høyre. I mediebiblioteket, kan du se de ressursene som inngår i prosjektet.

Velg og dra background.jpg
til den gule rektangelet. Hvis du ikke har endret standard scene oppløsning, bør bildet passe inn i rektangelet.

Når du velger sprite, vil du legge merke til at den har flere egenskaper som Posisjon
, < b> Størrelse
, Z
Posisjons
, Lighting Mask
, Shadow Casting Mask
, Fysikk Definisjon av, og mange andre.

Ta gjerne leke med disse egenskapene. For nå, skjønt, er det viktig at du lar eiendommene på standardverdiene. Dra en Lys
objekt fra objektbiblioteket til høyre på bakgrunnen sprite. Plasseringen av lyset er ikke viktig, men den lette øvrige egenskaper er.

Du kan konfigurere Color
, Shadow
, og Ambient
farge for å konfigurere lys og skygge. Z Beliggenhet
er node høyde i forhold til den overordnede noden. Sett den til 1. Lighting Mask
definerer hvilke kategorier denne lys tilhører. Når en scene er gjengitt, er en lysets categoryBitMask eiendom i forhold til hver enkelt sprite nodes lightingBitMask, shadowCastBitMask, og shadowedBitMask egenskaper. Hvis verdiene samsvarer, kommuniserer at sprite med lyset. Dette gjør at du kan definere og bruke flere lamper som samhandler med ett eller flere objekter.

Du har sikkert lagt merke til at bakgrunnen ikke er endret etter tilsetting av lys. Det skjer fordi belysningen maske av lyset og bakgrunnen er forskjellige. Du må sette bakgrunnen belysning maske til den av lys, som er en i vårt eksempel.

Oppdater bakgrunn i SKNode Inspector Hotell og trykk enter. Effekten av denne endringen er umiddelbar. Lyset tennes nå bakgrunnen basert på sin posisjon. Du kan endre lysets posisjon til å se samspillet mellom bakgrunnen og lette noder i sanntid.

For å øke realismen i bakgrunnen eller fremheve en av dens funksjoner, leke med Jevnhet Anmeldelser og Contrast
egenskaper. Spill med verdiene for å se endringene i sanntid

Trinn 2:. Fylle Scene

Det er nå på tide å legge noen gjenstander som samhandler med lyset node. I Media Library
, finner croquette-o.png Hotell og croquette-x.png
sprites og legge dem til åstedet.

Hver sprite må konfigureres individuelt. Velg hver sprite og sette Lighting Mask, etter Shadow Cast Mask
, og
Z Beliggenhet
til 1. Belysningen maske sikrer at sprite påvirkes av lyset node mens skyggemasken støpt skaper en sanntids skygge basert på posisjonen av lyset noden. Endelig satt den Kroppstype product: ( Fysikk Definisjon av) til Ingen. Gjør dette for begge sprites.

Du burde ha lagt merke til at, selv etter å sette egenskapene til lys og skygge, kan du ikke se samspillet mellom lys og nodene. For det må du bygge og drive prosjektet på en fysisk enhet eller i Simulator

Trinn 3:. Manuell Lighting

Du vet allerede hvordan du legger lys ved hjelp av scene redaktør. La oss se hvordan du legger en lys uten å bruke scenen redaktør

Åpne LightingScene.m og inne i didMoveToView:.. Metoden skaper vi en SKSpriteNode objekt og en SKLightNode objekt

For SKSpriteNode objekt bruker vi Wicked-Cat.png
sprite. Posisjonen til noden er ikke så viktig, men verdiene av zPosition, shadowCastBitMask, og lightingBitMask er. Fordi SpriteKit analyserer data sekvensielt, må du sette noden er zPosition til 1 for denne sprite å være synlig, på toppen av bakgrunnen sprite. Vi setter shadowCastBitMask og lightingBitMask til 1.

Dette er hva didMoveToView: metoden ser ut så langt: Anmeldelser - (void) didMoveToView: (SKView *) visning {SKSpriteNode * sprite = [SKSpriteNode spriteNodeWithImageNamed: @ "Wicked-Cat.png"]; [sprite setPosition: CGPointMake (self.frame.size.width /2, self.frame.size.height /2)]; [sprite setScale: 0,6]; [sprite setZPosition: 1]; [sprite setShadowCastBitMask: 1]; [sprite setLightingBitMask: 1]; [selvtillit addChild: sprite];}

Neste, la oss legge den SKLightNode objektet. Du bør ta spesielle hensyn til categoryBitMask eiendommen. Hvis du setter den til en, vil dette lyset samhandle med hver sprite. Name it lys og satt zPosition til 1.

Den komplette tekstutdrag for SKLightNode skal se slik ut:
SKLightNode * lys = [[SKLightNode Alloc] init] [lys setName: @ "light"] [lys setPosition: CGPointMake (100, 100)] [lys setCategoryBitMask: 1] [lys setFalloff: 1,5] [lys setZPosition: 1] [lys setAmbientColor: [UIColor whiteColor]] [lys setLightColor: [[ ,,,0],UIColor Alloc] initWithRed: 1,0 green: 0,0 blå: 0.0 alpha: 0,5]] [lys setShadowColor: [[UIColor alloc] initWithRed: 0.9 grønt: 0,25 blå: 0.0 alpha: 0,5]] [selv addChild: light];
Trinn 4: Endre Lys beliggenhet

På dette punktet har du et sekund lys. Men la oss legge til noen brukermedvirkning. For det bør du legge til touchesMoved: withEvent.: Metode og endre lyset stilling, hensyntatt avgreningslokaliseringen Anmeldelser - (void) touchesMoved: (NSSet *) berører withEvent: (UIEvent *) hendelse {for (UITouch * røre i innslag) {CGPoint plassering = [berørings locationInNode bolig:]; . [selvtillit childNodeWithName: @ "light"] posisjon = CGPointMake (location.x, location.y); }}

Endelig
bygge og drive din søknad. Trykk på Lighting knappen og du skal se noe som ligner på skjermbildet under:

Konklusjon

Dette avslutter den første opplæringen i våre to-del serien på nytt SpriteKit rammeverket funksjoner introdusert i iOS 8. I denne delen, lært deg å lage tilpassede shaders og lyseffekter ved hjelp av både SpriteKit Scene redaktør og gjennom koden. Hvis du har spørsmål eller kommentarer, som alltid, gjerne slippe en linje i kommentarfeltet.