1. Location:
  2. / Computer learning >> Datamaskin læring >> Kunnskap om programmering >> Mobil Utvikling >>

iOS 8: Hva er nytt i SpriteKit, del 2

iOS 8: Hva er nytt i SpriteKit, del 2
22
Del
3
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter iOS. 8: Hva er nytt i SpriteKit.iOS 8: Hva er nytt i SpriteKit, del 1

Denne opplæringen gir en oversikt over de nye funksjonene i SpriteKit rammeverk som ble introdusert i iOS 8. De nye funksjonene er utviklet for å gjøre det lettere å støtte avanserte spilleffekter og inkluderer støtte for egendefinerte OpenGL ES fragment shaders, belysning, skygger, avanserte nye fysikk effekter og animasjoner, og integrasjon med SceneKit. I denne opplæringen vil du lære hvordan å implementere disse nye funksjonene.

Serie Format

Denne serien er delt opp i to tutorials og dekker de viktigste nye funksjonene i SpriteKit rammeverket. I den første delen tar vi en titt på shaders, lys og skygger. I den andre delen, vil jeg snakke om fysikk og SceneKit integrasjon.

Selv om hver del av denne serien står på egne ben, anbefaler jeg å følge med steg-for-steg for å riktig forstå de nye funksjonene i SpriteKit rammeverk. Etter å ha lest begge deler, vil du være i stand til å lage både enkle og mer avanserte spill ved hjelp av de nye funksjonene i SpriteKit rammeverket.

Last ned Xcode prosjekt vi opprettet i forrige artikkel fra GitHub hvis du ønsker å følge med.

1. Fysikk

I iOS 8, SpriteKit innført nye fysikk funksjoner, for eksempel per-pixel fysikk, begrensninger, inverse kinematikk og fysikk felt.

Kinematikk er prosessen med å beregne 3D posisjon enden av en bundet struktur, gitt de vinkler av alle ledd. Inverse Kinematikk (IK) gjør det motsatte. Gitt endepunktet av strukturen, hvilken vinkel må skjøtene trenger å gjøre for å oppnå dette formål punktet? Følgende bilde klargjør disse begrepene.

Med SpriteKit, bruker du sprites å representere leddene som bruker foreldre-barn forhold til å skape en felles hierarki. For hver relasjon, definerer du den inverse kinematikk begrensninger på hvert ledd og kontrollere minimum og maksimum rotasjon vinkelen mellom dem. Legg merke til at hver joint roterer rundt sin ankerpunkt

Trinn 1:. Inverse Kinematikk (IK)

Åpne PhysicsSceneEditor og tilsett croquette-o.png sprite til gult rektangel. Velg sprite og endre navn på SKNode Inspector til referanse. Sett fysikk Definition Body Type til Ingen.

Legg til en andre sprite, wood.png og endre navn til FirstNode. Endre Parent feltet referanse. Flytt FirstNode ved å sette den på høyre side av Root og endre størrelse på det å skape et rektangel som vist nedenfor. Sett fysikk Definition Body Type til Ingen.

Resultatet bør ligne på følgende scene.

Vær oppmerksom på at når du velger en sprite node, vises en hvit sirkel i midten. Den sirkelen representerer sprite node ankerpunkt rundt der hver rotasjon er utført

Trinn 2:.. Legg Flere Sprites

Følg de forrige trinnene og legge til to sprites < .no>

Første Sprite

Legg til en annen croquette-o.png sprite.

endre navnet SecondNode.

Endre sin Parent til FirstNode .

Plasser den på høyre side av FirstNode.

Endre sin fysikk Definition Body Type til Ingen.

Second Sprite

Legg til en annen wood.png sprite.

skifte navn feltet til ThirdNode.

Endre sin Parent til SecondNode.

Plasser den på høyre side av SecondNode.
< li> Resize den til å lage et rektangel.

Endre sin fysikk Definition Body Type til Ingen.

Resultatet bør ligne på følgende scene.
< h3> Trinn 3: Redigere og simulere

For å teste de felles tilkoblinger, interaksjoner, og begrensninger, trenger du ikke å bygge og drive prosjektet. Xcode har to moduser, redigere og simulere.

simulator modus gir en sanntid testing miljø mens redigeringsmodus brukes til å opprette og redigere scene. Så langt har vi jobbet i redigeringsmodus. Vær oppmerksom på at eventuelle endringer du gjør i simulator modus ikke er lagret.

På bunnen av scenen editor, kan du se hvilken modus du jobber i. Hvis bunnlinjen i scene redaktør er hvit, så du er i redigeringsmodus. En blå bakgrunn indikerer at du er i simulator modus. Klikk på etiketten i bunnlinjen for å bytte mellom de to modusene.

Endre modus for å simulere og velg FirstNode, SecondNode, og ThirdNode sprites. Du kan velge flere sprites ved å trykke Command.

Deretter trykker du Shift-Ctrl-klikk og flytte sprites rundt i scenen. Resultatet er at sprite noder animere og rotere. Men det er rart rotasjonen og må rettes opp

Trinn 4:. IK Begrensninger

Slå tilbake til redigeringsmodus og legge noen begrensninger for å sprite noder. Velg hver sprite node og endre egenskapene som følger.

Velg rot og SecondNode sprite noder og sette IK begrensninger Max Vinkel til 0. Velg FirstNode og ThirdNode sprite noder og sette Anchor Point X til 0 og IK begrensninger Max vinkel 90.

Ved å endre disse egenskapene, vil posisjonen og størrelsen på sprite noder endres. Etter å legge begrensninger, manuelt justere sin størrelse og posisjon, og bytte til simulere modus for å teste de nye begrensningene vi har lagt til.

skjermbildet under viser riktig begrensninger konfigurasjon.

< b> Trinn 5: magnetfelt Node

Magnetiske felt er også nytt i SpriteKit. La oss se hvordan dette fungerer ved å legge til et magnetisk felt i fysikk scene. Åpne PhysicsScene.m og en instansvariabel som heter magneticFieldNode av type SKFieldNode
implementation PhysicsScene {SKFieldNode * magneticFieldNode;}

I didMoveToView. Metoden, må vi først konfigurere scene ved å opprette en SKPhysicsBody eksempel for scene og legge en gravitasjonskraft. Dette betyr at eventuelle noder i bildet vil bli trukket nedover
SKPhysicsBody * physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect: self.frame];. [Self.physicsWorld setGravity: CGVectorMake (0, -9)] [selv setPhysicsBody: physicsBody];

For å konfigurere magneticFieldNode objekt, må du konfigurere sin fysikk kroppen så vel som sin posisjon og styrke. Merk at hver SKFieldNode har sine egne eiendommer. Følgende kodebit viser hvordan du konfigurerer magnetfeltet node. . Vi legger til den nye noden som barn node til scenen
magneticFieldNode = [SKFieldNode magneticField] [magneticFieldNode setPhysicsBody: [SKPhysicsBody bodyWithCircleOfRadius: 80]] [magneticFieldNode setPosition: CGPointMake (100, 100)] [magneticFieldNode setStrength : 3] [selv addChild: magneticFieldNode];
Trinn 6: Interaksjoner

For å se magnetfelt i aksjon, må vi legge noen noder som magnetfeltet notat kan samhandle. I det følgende kodebiten, skaper vi tre hundre sprites. . Merk at hver sprite node har sin egen fysikk kropp og vi setter affectedByGravity eiendommen til YES
for (int i = 0; i < 300; i ++) {SKSpriteNode * node4 = [SKSpriteNode spriteNodeWithTexture: [SKTexture textureWithImageNamed: @ "wood.png"] størrelse: CGSizeMake (25, 25)]; [node4 setPhysicsBody: [SKPhysicsBody bodyWithRectangleOfSize: CGSizeMake (25, 25)]]; [node4 setPosition: CGPointMake (arc4random ()% 640, arc4random ()% 950)]; [node4.physicsBody setDynamic: YES]; [node4.physicsBody setAffectedByGravity: YES]; [node4.physicsBody setAllowsRotation: true]; [node4.physicsBody setMass: 0,9]; [selvtillit addChild: node4];}

Den ferdige didMoveToView: metode bør se slik ut: Anmeldelser - (void) didMoveToView: (SKView *) visning {SKPhysicsBody * physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect: self.frame]; [self.physicsWorld setGravity: CGVectorMake (0, -9)]; [selvtillit setPhysicsBody: physicsBody]; magneticFieldNode = [SKFieldNode magneticField]; [magneticFieldNode setPhysicsBody: [SKPhysicsBody bodyWithCircleOfRadius: 80]]; [magneticFieldNode setPosition: CGPointMake (100, 100)]; [magneticFieldNode setStrength: 3]; [selvtillit addChild: magneticFieldNode]; for (int i = 0; i < 300; i ++) {SKSpriteNode * node4 = [SKSpriteNode spriteNodeWithTexture: [SKTexture textureWithImageNamed: @ "wood.png"] størrelse: CGSizeMake (25, 25)]; [node4 setPhysicsBody: [SKPhysicsBody bodyWithRectangleOfSize: CGSizeMake (25, 25)]]; [node4 setPosition: CGPointMake (arc4random ()% 640, arc4random ()% 950)]; [node4.physicsBody setDynamic: YES]; [node4.physicsBody setAffectedByGravity: YES]; [node4.physicsBody setAllowsRotation: true]; [node4.physicsBody setMass: 0,9]; [selvtillit addChild: node4]; }}

Før vi bygge og kjøre programmet, vi overstyre touchesMoved: withEvent. metoden, slik at du kan flytte magnetfeltet node ved å peke fingeren Anmeldelser - (void) touchesMoved: (NSSet *) berører withEvent: (UIEvent *) hendelse {for (UITouch * touch i innslag) {[magneticFieldNode setPosition: [berørings locationInNode bolig:]]; }}

Bygg og kjøre programmet for å teste det magnetiske feltet node effekt på scenen. For mer informasjon om simulere fysikk bruker SpriteKit rammeverket, anbefaler jeg å lese Apples dokumentasjon om dette emnet.

2. SceneKit Integrasjon

SceneKit er et høyt nivå Objective-C rammeverk for å bygge applikasjoner og spill som bruker 3D-grafikk. Den støtter import, manipulasjon, og gjengivelse av 3D eiendeler. Gjengivelsen algoritme krever bare beskrivelsen av scenens innhold, animasjoner og handlinger du vil den skal utføre.

Gjennom SceneKit, du er nå i stand til å skape og levere 3D-innhold ved hjelp SpriteKit. SceneKit har en trestruktur og kan brukes på to måter:

stående SceneKit miljø

integrert i SpriteKit

SceneKit har et tre hierarki komposisjon. I et frittstående SceneKit miljø, er base klassen for trestrukturen en SCNNode eksempel som vist i figuren nedenfor. En SCNNode objekt i seg selv har ingen synlige innholdet når scenen inneholder det er gjengitt. Den definerer rett og slett en posisjon i rommet som representerer posisjon, rotasjon, og omfanget av en node i forhold til den overordnede noden.
T

Når du integrerer SceneKit inn en SpriteKit-baserte app, må du definere en SK3DNode objekt som roten gjenstand for scenen. Dette betyr at kjerne SceneKit hierarkiet endres til følgende:

Merk at ikke alle barn node i diagrammet er nødvendig. Du bare definere og konfigurere nodene som passer dine behov. For eksempel kan du legge til en SCNLight node for å belyse scenen selv om du ikke tar med en SCNCamera node i scenen

Trinn 1:. Live Preview av modellene
< p> SpriteKit og SceneKit støtter en rekke filformater for import modeller. Du kan forhåndsvise disse modellene i sanntid i Xcode. Inne i Tekstur mappen i dine prosjekt (Resources > Tekstur), er det en fil som heter ship.dae. . Når du velger denne filen, du presentert med et nytt brukergrensesnitt som vist nedenfor

På venstre side av redaktøren, kan du se to grupper:

Entities: Denne gruppen inneholder informasjon om de forhåndsdefinerte animasjoner, kameraposisjon, lys og materialer som er definert av modellfilen. Filen vi har åpnet bare inneholder informasjon om modellens geometri og dens materielle

Scene grafen:. Denne gruppen inneholder informasjon om det opprinnelige objektet mesh. I dette tilfellet ble gjenstanden laget som en helhet, og du bare se en eneste maske

Trinn 2:. Importere en ekstern Modell

For å bruke SceneKit i kombinasjon med SpriteKit, må du importere SceneKit biblioteket fra SceneKit rammeverk. Åpne SceneKitScene.m og inkludere det som vist nedenfor
#include <. SceneKit /SceneKit.h >

Vi kommer til å bruke modellen lagret i ship.dae som 3D-scenen. Inne i didMoveToView: metode, opprette SCNScene objekt som laster en scene fra den filen
SCNScene * shipScene = [SCNScene sceneNamed: @ "ship.dae"];.

Husk treet hierarki jeg nevnte tidligere? For å legge til shipScene objektet til SKScene objekt, er to trinn kreves:

opprette en SK3DNode objekt

definere en SceneKit scene å gjengi

I dette tilfellet, er scenen for å gjengi shipScene. Merk at du også definere noden posisjon og sin størrelse
SK3DNode * sk3DNodeFist = [[SK3DNode alloc] initWithViewportSize: CGSizeMake (300, 300)] [sk3DNodeFist setPosition: CGPointMake (200300)];. [Sk3DNodeFist setScnScene: shipScene];

Til slutt legger SK3DNode objekt som barn node til SKScene objektet product: [selv addChild: sk3DNodeFist];.

For å gjøre det endelige resultatet litt mer tiltalende, setter scenen bakgrunnsfarge til grønt som vist nedenfor product: [selv setBackgroundColor: [SKColor greenColor]];

Dette er hva hele didMoveToView. Metoden skal se ut. Bygge og kjøre programmet for å se resultatet Anmeldelser - (void) didMoveToView: (SKView *) visning {[selv setBackgroundColor: [SKColor greenColor]].; SCNScene * shipScene = [SCNScene sceneNamed: @ "ship.dae"]; SK3DNode * sk3DNodeFist = [[SK3DNode alloc] initWithViewportSize: CGSizeMake (300, 300)]; [sk3DNodeFist setPosition: CGPointMake (200300)]; [sk3DNodeFist setScnScene: shipScene]; [selvtillit addChild: sk3DNodeFist];}
Trinn 3: Opprette et tilpasset Scene

La oss skape en mer kompleks scene som inneholder flere SCNNode stedene. For denne andre scene, må vi opprette en annen SK3DNode objekt
SK3DNode * sk3DNode = [[SK3DNode alloc] initWithViewportSize: CGSizeMake (400, 400)].; [sk3DNode setPosition: CGPointMake (150200)];

Deretter oppretter vi SCNScene objekt, den som vil inneholde scene barnet noder
SCNScene * sceneObject = [SCNScene scene];

Dette sceneObject vil ha tre noder.


Kamera. Dette node brukes til å vise scenen gjennom en gitt posisjon

Light: Denne noden gjør det mulig å se ulike materialegenskaper for 3D-objektet. Du normalt definere lys type og farge

3D-objekt. Dette er importert eller definert objekt i koden din. Som standard aktiverer SceneKit du definere flere para 3D-objekter, det vil si torus, boks, pyramide, kule, sylinder, kjegle, tube, kapsel, gulv, 3D-tekst, eller en tilpasset form.

For hver enkelt node, du alltid utføre tre handlinger. La oss ta kameraet node som et eksempel.


    Opprett en SCNCamera objekt og definere sine egenskaper.
  1. Opprett en SCNNode til hvilken SCNCamera vil bli tildelt.
  2. Tilsett SCNNode som barn node til SCNScene objektet.

    La oss nå opprette de tre nodene jeg nevnte tidligere. Dette er hva vi trenger for å iverksette for å skape kameraet node
    SCNCamera * kamera = [SCNCamera kamera]; SCNNode * cameraNode = [SCNNode node] [cameraNode setCamera: camera];. [CameraNode setPosition: SCNVector3Make (0, 0 , 40)] [sceneObject.rootNode addChildNode: cameraNode];

    Som standard kameraet beliggenhet og 3D-scenen er plassert i origo, (0,0,0). Bruke stilling eiendom, kan du justere kameraet langs tre x, y og z aksene til å endre sin posisjon.

    Lyset node krever litt mer arbeid, men følgende kode bør være lett å forstå
    SCNLight * Spotlight = [SCNLight lys] [Spotlight setType: SCNLightTypeDirectional];. [Spotlight SetColor: [SKColor redColor]]; SCNNode * spotLightNode = [SCNNode node] [spotLightNode setLight: Spotlight]; [spotLightNode setPosition: SCNVector3Make (0, 0, 5)] [cameraNode addChildNode: spotLightNode] [sceneObject.rootNode addChildNode: spotLightNode];.

    Vi vil også opprette en torus objekt som vist i følgende kode

    SCNTorus * torus = [SCNTorus torusWithRingRadius: 13 pipeRadius: 1,5]; SCNNode * torusNode = [SCNNode nodeWithGeometry: torus] [torusNode settransform: SCNMatrix4MakeRotation (M_PI /3, 0, 1, 0)] [sceneObject .rootNode addChildNode: torusNode];

    Til slutt, vi sette scenen at vi ønsker å gjengi og legge den sk3DNode som barn node i SKScene eksempel
    [sk3DNode setScnScene: sceneObject] [selv addChild. sk3DNode];

    Dette er hva den endelige didMoveToView: metode skal se ut Anmeldelser - (void) didMoveToView: (SKView *) visning {[selv setBackgroundColor: [SKColor greenColor]].; SCNScene * shipScene = [SCNScene sceneNamed: @ "ship.dae"]; SK3DNode * sk3DNodeFist = [[SK3DNode alloc] initWithViewportSize: CGSizeMake (300, 300)]; [sk3DNodeFist setPosition: CGPointMake (200300)]; [sk3DNodeFist setScnScene: shipScene]; [selvtillit addChild: sk3DNodeFist]; SK3DNode * sk3DNode = [[SK3DNode alloc] initWithViewportSize: CGSizeMake (400, 400)]; [sk3DNode setPosition: CGPointMake (150200)]; SCNScene * sceneObject = [SCNScene scene]; SCNCamera * kamera = [SCNCamera kamera]; SCNNode * cameraNode = [SCNNode node]; [cameraNode setCamera: camera]; [cameraNode setPosition: SCNVector3Make (0, 0, 40)]; [sceneObject.rootNode addChildNode: cameraNode]; SCNLight * Spotlight = [SCNLight lys]; [Spotlight setType: SCNLightTypeDirectional]; [Spotlight SetColor: [SKColor redColor]]; SCNNode * spotLightNode = [SCNNode node]; [spotLightNode setLight: Spotlight]; [spotLightNode setPosition: SCNVector3Make (0, 0, 5)]; [cameraNode addChildNode: spotLightNode]; [sceneObject.rootNode addChildNode: spotLightNode]; SCNTorus * torus = [SCNTorus torusWithRingRadius: 13 pipeRadius: 1,5]; SCNNode * torusNode = [SCNNode nodeWithGeometry: torus]; [torusNode settransform: SCNMatrix4MakeRotation (M_PI /3, 0, 1, 0)]; [sceneObject.rootNode addChildNode: torusNode]; [sk3DNode setScnScene: sceneObject]; [selvtillit addChild: sk3DNode];}

    Bygg og kjøre programmet. Du skal se noe som ligner på følgende skjermbilde

    Trinn 4:. Animere Scene

    Du kan animere scene med CABasicAnimation klassen. Du trenger bare å opprette en forekomst av CABasicAnimation ved å påberope animationWithKeyPath :. Animasjonen vi skaper i følgende kodebiten vilje sløyfe på ubestemt tid, og har en varighet på fem sekunder. Legg inn følgende kode til didMoveToView: metode
    CABasicAnimation * torusRotation = [CABasicAnimation animationWithKeyPath: @ "rotasjon"];. TorusRotation.byValue = [NSValue valueWithSCNVector4: SCNVector4Make (1, 1, 0, 4.0 * M_PI)]; [torusRotation setTimingFunction: [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionLinear]] [torusRotation setRepeatCount: INFINITY] [torusRotation setDuration: 5,0] [torusNode addAnimation: torusRotation Forkey: null];.

    Bygg og kjøre programmet for å teste animasjonen < .no>
    3. Mer SpriteKit

    Hvis du ønsker å lære mer om SpriteKit, så jeg oppfordrer deg til å lese følgende SpriteKit tutorials:

    Bygg et fly spill med Sprite Kit

    Bygg Missile Command med Sprite Kit

    iOS SDK: Bygg en Fakta Spill

    Hvis du ønsker å lese mer om SpriteKit rammeverk, så jeg anbefaler å lese Apples SpriteKit Programming Guide eller surfer på rammeverket referanse.

    Konklusjon

    Dette avslutter den andre tutorial av denne todelt serie om de nye funksjonene i SpriteKit rammeverk introdusert i iOS 8 . I denne delen, lært deg hvordan du bruker fysikk simulering og integrere SceneKit. Hvis du har spørsmål eller kommentarer, må du gjerne slippe en linje i kommentarfeltet. Anmeldelser