Oprettandet af et Mega Jump-spil til iPhone – Del 3

Oprettandet af et Mega Jump-spil til iPhone - Del 3

Velkommen til den tredje del af vejledni gen, hvor vi opretter et Mega Jump-spil med Sprite Kit og Swhvis t. I den til egående del 1 og del 2 oprettede vi et Sprite Kit-spil kaldet Uber Jump. Vi har tilføjet grafik, en heltesprite og nogle gameplay-elementer.

I del 3 vil vi bruge dette fundament til at opbygge det fulde niveau af spillade , i klusive scori gssystemet. Vi tilføjer også accelerometerstøtte, så vores ‘ultra jumper’ kan bevæge sig fra side til side og op og ned. Når vi alle er færdige, vil du have et absolut komplade spil, som du derefter kan udvide i til skellige retni ger. Ligesom de første dele af vejledni gen kræver dette materiale, at du kender det grundlæggende i Sprite Kit. Så velkommen til det næste niveau!

Fortsættelse

Den origi ale artikel på engelsk er tilgængelig her.

Download en komplade kopi af projektet fra første del, hvis du ikke selv gjorde det.

Vores niveau vil indeholde mange stjerner og plattil m e. For at undgå manuel strukturering af dataene skal du downloade denne niveaukonfigurationsfil og derefter trække Level01.plist ind i dit Xcode-projekt. Sørg til , at afkrydsningsfeltet “Destination: Kopier emner om nødvendigt” er markeret, og UberJump-målade er valgt.

Åbn Level01.plist og undersøge dens indhold. Den består i det væsentlige af tre elementer:

– EndY bestemmer den højde, som helten skal nå til at fuldføre niveauet.

– Stjerner bestemmer placeringen af ​​alle stjerner på niveauet.

– Platforme definerer placeringen af ​​alle platforme på niveauet.

Stjerner og platforme indeholder to indlejrede elementer:

– Mønstre indeholder et antal mønstre til stjerner og platforme.

– Positioner definerer placeringen af ​​stjernen og platformens mønstre i hele niveauet.

Oprettelse af et Mega Jump-spil til iPhone - Del 3

For at få en bedre forståelse af filstrukturen skal du åbne elementet Stars / Positions / Item 0. Den indeholder tre indlejrede elementer, der indeholder information om følgende indhold: stjernerne skal placeres på tværs på punktet med koordinaterne 160 og 240.

Oprettelse af et Mega Jump-spil til iPhone - Del 3

Se nu på Mønstre / kryds, og du vil se et mønster, der indeholder fem elementer, inklusive X- og Y-koordinaterne i forhold til positionen angivet i stjerner / positioner og type n af ​​stjerne. Normal type betegnes med nul, og speciel type betegnes med en.

Oprettelse af et Mega Jump-spil til iPhone - Del 3

Dette er en ret bekvem måde at genbruge stjerne- og platforme kabeloner uden at skulle indstille en position i kode for hvert enkelt objekt.

Oprettelse af et Mega Jump-spil til iPhone - Del 3

Indlæser et niveau med data

For at tilføje muligheden for at indlæse niveauparametre fra filen Level01.plist skal du åbne GameScene.swhvis t og føje følgende egenskab til klsom sen:

// Højde på hvilket niveau slutter  lade  slutniveau  = 0

 

EndLevelY gemmer den højde eller ordination, som spilleren skal nå for at fuldføre niveauet.

Indsæt følgende kode i i det (størrelse 🙂 -metoden lige før de linjer, der opretter og tilføjer platformen:

// Indlæs niveauet  lade  levelPlist   = NSBundle .mainBundle ().pathForResource ("Niveau01" , af Type : "plist" ) lade  niveauData  = NSDictionary         (indholdOfFile : levelPlist!)! // Højde, hvor spilleren slutter niveauet  slutniveau  = niveauData [                         "EndY" ]                         !.integerValue   !

 

Denne kode indlæser dataene fra egenskabslisten i en ordbog kaldet niveauData og tager derefter værdien af ​​egenskaben EndY derfra og gemmer dem i endLevelY-var iablen.

Lad os nu komme ind i stjernerne og platformene. Lad os stjerne te med platforme: Udskhvis t følgende linjer i metoden init (størrelse :):

// Tilføj en platform  lade  platform = createPlatformAtPosition  (CGPoint             (x                : 160, y         : 320), af Type : .Normal ) forgrundNode.addChild  (platform)

 

med denne kode:

// Tilføj platformene  lade  platforme  = niveauData ["Platforme" ] som  NSDictionary lade  platformMønstre  = platforme ["Mønstre" ] som  NSDictionary lade  platformPosition    er  = platforms["Positioner" ] as [NSDictionary] for platformPosition in platformPositioner  {                    lade  mønsterX  = platformPosition["x"    ].floatValue  lade  mønsterY  = platformPosition["y"    ].floatValue  lade  mønster  = platformPosition["mønster" ] as NSSnor    // Slå mønsteret op  lade  platformMønster  = platformMønstre [mønster ] as [NSDictionary] for platformPoint     in platformMønster  { lade  x = platformPoint["x"].floatValue  lade  y = platformPoint["y"].floatValue  lade  type = PlatformType (rawValue  : platformPoint["type"  ]!.integerValue) lade  positionX   = CGFloat        (x! +        mønsterX !) lade  positionY     = CGFloat(y! + mønsterY !) lade  platformNode   = createPlatformAtPosition(CGPoint(x: positionX, y  : positionY), af Type : type!) forgrundNode.addChild (platformNode) }                    }

 

Der foregår meget her, men disse ting er ret enkle. Vi indlæste Platforms-ordbogen fra levelData og sløjfede derefter platformens positioner fra den ordbog. For hvert element fik vi den passende skabelon og instantierede en PlatformNode af den ønskede type med de givne X- og Y-positioner. Endelig tilføjede vi alle platformsknuderne til forgrundsnoden, som skulle indeholde alle spilobjekter.

Byg og kør. Du vil se en række med tre vandret justerede platforme, der er af typen “Triple”, der er spechvis iceret i filen på Level01.plist.

Oprettelse af et Mega Jump-spil til iPhone - Del 3

Gør nu det samme for stjernerne. Inde i GameScene.swift skal du erstatte følgende linje i init (størrelse :):

// Tilføj en stjerne  lade  stjerne  = createStarAtPosition  (CGPoint(x: 160, y: 220), af Type : .Særlig ) forgrundNode.addChild (star)

 

kode:

// Tilføj stjernerne  lade  stjerner  = levelData["Stjerner" ] as NSDictionary lade  stjerneMønstre  = stjerner ["Mønstre" ] as NSDictionary lade  starPosition    s   = stjerner ["Positioner" ] as [NSDictionary] for starPosition in starPositions { lade  mønsterX  = starPosition["x"].floatValue  lade  mønsterY  = starPosition["y"].floatValue  lade  mønster  = starPosition["mønster" ] as NSString // Slå mønsteret op  lade  stjerneMønster  = stjerneMønstre [mønster ] as [NSDictionary] for starPoint     in stjerneMønster  { lade  x = starPoint["x"].floatValue  lade  y = starPoint["y"].floatValue  lade  type = StarType (rawValue: starPoint["type"]!.integerValue) lade  positionX = CGFloat(x! + mønsterX !) lade  positionY = CGFloat(y! + mønsterY !) lade  starNode   = createStarAtPosition(CGPoint(x: positionX, y: positionY), af Type : type!) forgrundNode.addChild (starNode) } }

 

Alt her er nøjagtigt det samme som hvad vi gjorde, da vi oprettede platformene, men i dette tilfælde bruger vi Stars-ordbogen i stedet for Platforms-ordbogen.

Byg og kør. Det ser allerede ud som et rigtigt spil!

Oprettelse af et Mega Jump-spil til iPhone - Del 3

Mellemjordlag

Grafisk er der en ting mere, du kan gøre for at tilføje illusionen af ​​volumen til spillade – dette er mellemlaget. Det repræsenterer den knude, der indeholder landskabsgrafik.

Føj følgende metode til GameScene.swift:

func     createMidgroundNode  () ->  SKNode   { // Opret noden  lade  theMidgroundNode   = SKNode() var anker : CGPoint! var xPosition   : CGFloat! // 1    // Tilføj nogle grene til midtgrunden  for indeks  in 0...ni  { var spriteName    : String // 2    lade  r = arc4random () %  2 if r>  0 { spriteName = "BranchRight"  anker  = CGPoint(x: 1.0 , y: 0,5 ) xPosition = selv .størrelse.bredde  } else { spriteName = "Branch Left"  anker  = CGPoint(x: 0,0 , y: 0,5 ) xPosition = 0,0  } // 3   lade  branchNode   = SKSpriteNode (imageNamed : spriteName) branchNode.anchorPoint  = ankergrenNode.position  = CGPoint(x: xPosition, y : 500,0   CGFloat(indeks )) theMidgroundNode.addChild (branchNode) } // Returner den færdige midterste node  Vend tilbage  theMidgroundNode }

 

Lad os se nærmere på denne kode:

1. Vi tilføjer ti grene til midgroundNode , jævnt fordelt over hele niveauet.

2. Der er to forskellige billeder: på den ene vokser grene fra venstre side af skærmen, på den anden – fra højre. Vi tager en tilfældig.

3. Vi placerer grenene med intervaller på 500 punkter langs y-aksen ved midterste knude.

Lad os nu tilføje den mellemliggende knude til scenen ved at indsætte følgende kode i init (størrelse 🙂 lige efter linjen, der tilføjer baggrundsknudepunktet:

// Midground  midgroundNode = createMidgroundNode() addChild(midgroundNode)

 

Byg og kør.

Se! Filialer af forskellige slags dukkede op, og nogle endda med lyserøde sommerfugle!

Oprettelse af et Mega Jump-spil til iPhone - Del 3

Bemærk: lyserøde sommerfugle vises, hvis den tilfældige gren er den, der er tegnet til højre side af skærmen. Billedet til den venstre gren indeholder ikke sommerfugle.

Klik for at starte spillet, og du vil se en heltesprite flyve op på skærmen. Men når ‘ultra jumper’ stiger, forbliver spilverdenen på plads for nu.

Oprettelse af et Mega Jump-spil til iPhone - Del 3

Forgrunds-, mellem- og baggrundslagene skal bevæge sig med heltenoden for at holde helten-spriten centreret på skærmen. Dette er hvad vi skal behandle i det næste kapitel.

Parallaks

interessant 6,1-tommer iPhone 12 og iPhone 12 Pro sælges først lancering af abonnementspakke Apple En bekræftet

For at tilføje parallax til vores spil flytter vi forgrunds-, midter- og baggrundsknuderne i forskellige hastigheder, når helten rejser op og ned af scenen. Sprite Kit kalder opdateringsmetoden () på vores scene for hver ramme, så dette er stedet at implementere logikken for at sikre jævn animation.

Åbn GameScene.swift, og tilføj følgende metode:

tilsidesætte  func opdatering (nuværende tid : NSTimeInt   erval ) { // Beregn spillerens y-offset  if player.position  .y     >  200,0  { baggrundNode.position  = CGPoint(x: 0,0 , y: -((player.position.y - 200,0 )/10)) midgroundNode.position  = CGPoint(x: 0,0 , y: -((player.position.y - 200,0 )/4)) foregroundNode.position  = CGPoint(x: 0,0 , y: -(player.position.y - 200,0 )) } }

 

Vi kontrollerer, at heltenoden er flyttet op mere end 200 point over skærmen, for ellers vil vi ikke flytte baggrunden. Hvis betingelsen er opfyldt, flytter vi tre noder ned med forskellige hastigheder for at skabe en parallakseffekt:

– Vi bevæger forgrundsknudepunktet med samme hastighed som heltens knudepunkt, hvilket faktisk forhindrer helten i at forlade skærmen.

– Flyt den midterste knude med en hastighed svarende til 25% af heltenes knudepunkthastighed, fordi dette lag skal være længere væk fra seeren.

– Flyt baggrundsknudepunktet med en hastighed svarende til 10% af heltens knudepunkthastighed, fordi den skal være endnu længere væk.

Byg og kør. Klik for at starte spillet. Du vil se, at alle lagene nu bevæger sig med helten, og de forskellige knudepunkthastigheder i baggrunden og mellemgrunden af ​​knudepunkterne giver en meget flot parallakseffekt.

Oprettelse af et Mega Jump-spil til iPhone - Del 3

Godt arbejde! Men det er for tidligt at hvile på vores laurbær. For at springe til stjernerne skal du først grave jorden.

Bevægelse med et accelerometer

Det er tid til at bruge accelerometeret. Bevægelsen langs den lodrette akse er fin, men hvad med bevægelsen langs den vandrette akse? Ligesom i Mega Jump styrer brugeren sin ‘ultra jumper’ ved hjælp af accelerometeret.

Bemærk: For at teste accelerometeret skal du køre spillet på en rigtig enhed. iPhone Simulator fungerer ikke med accelerometer.

Du skal bruge Core Motion-biblioteket til at håndtere accelerometerindgangssignalerne, så tilføj følgende linje øverst på GameScene.swift:

importere  CoreMotion

 

Føj derefter følgende egenskaber til GameScene-klassen:

// Motion manager til accelerometer  let motionManager : CMMotionManager   = CMMotionManager() // Accelerationsværdi fra accelerometer  var xAcceleration  : CGFloat = 0,0 

 

Vi skal bruge MotionManager til at få adgang til enhedens accelerometerdata, og vi gemmer også den sidst beregnede acceleration sværdi i xAcceleration-variablen, som vi har brug for senere, når vi indstiller heltenodens hastighed langs X-aksen.

For at oprette en CMMotionManager-forekomst skal du føje følgende kode til metoden init (størrelse 🙂 lige efter linjen, der tilføjer tapToStartNode til HUD:

// CoreMotion  // 1 motionManager.accelerometerUpdateInterval  = 0,2  // 2 motionManager.startAccelerometerUpdatesToQueue (NSOperationQueue .currentQueue ()med Handler : { (accelerometerData : CMAccelerometerData !, fejl : NSEfejl !) in // 3 let acceleration = accelerometerData.acceleration  // 4  selv .xAcceleration   = (CGFloat(acceleration.x )  0,75 ) + (selv .xAcceleration  0,25 ) })

 

Der foregår meget her, så lad os dykke dybere:

1. Egenskaben accelerometerUpdateInterval bestemmer antallet af sekunder mellem opdateringer til accelerometerværdierne. En værdi på 0,2 giver den jævneste opdateringshastighed.

2. Vi kører accelerometeret og indstiller en kodeblok, der skal udføres under hver opdatering af accelerometerværdierne.

3. Inde i blokken får vi information relateret til acceleration fra de sidste accelerometerdata, der blev sendt til blokken.

4. Her beregner vi accelerationen af ​​heltenoden langs X-aksen.Du kan få denne værdi direkte fra accelerometerdataene, men bevægelsen vil være meget glattere, hvis du bruger værdien, der tilføjer tre fjerdedele af accelerometerets acceleration langs X-aksen og en fjerdedel af den aktuelle acceleration langs den samme akse.

Nu hvor vi har abscissaccelerationsværdien, kan vi bruge den til at indstille den vandrette hastighed for heltenodet.

Da du direkte styrer heltenodens hastighed, er det vigtigt, at Sprite Kit først håndterer fysik.

Sprite Kit har en metode kaldet didSimulatePhysics , hvilket er fint til dette formål. Sprite Kit kalder også denne metode en gang pr. Ramme, efter at fysikken er gengivet og udført.

Føj følgende metode til GameScene.swift:

tilsidesætte  func didSimulatePhysics() { // 1 // Indstil hastighed baseret på x-akse acceleration  player.physicsBody ? .velocity  = CGVector (dx : xAcceleration  400,0 , D y : player.physicsBody!.velocity.dy ) // 2 // Kontroller x grænser  if player.position.x <  -20,0  { player.position = CGPoint(x: selv .størrelse.bredde  + 20,0 , y: player.position.y) } else if (player.position.x>  selv .størrelse.bredde  + 20,0 ) { player.position = CGPoint(x: -20,0 , y: player.position.y) } }

 

Der sker flere ting her:

1. Vi ændrer den vandrette komponent i hastighedsværdien af ​​hero-noden ved hjælp af xAcceleration-værdien. Derefter multiplicerer vi det med 400, fordi skalaen på accelerometeret ikke svarer til skalaen for ægte fysik, og når vi øger værdien, får vi en mere realistisk effekt. Vi efterlader hastighedsværdien langs Y-aksen uændret, fordi accelerometeret ikke påvirker det på nogen måde.

2. I Mega Jump, når helten forlader skærmen til venstre eller højre, vender han derefter tilbage fra den modsatte side. Vi bruger den samme adfærd her, kontrollerer skærmgrænserne og efterlader 20-punktsgrænsen væk fra skærmen.

Byg og kør på din enhed. Brug accelerometeret til at hæve heltens sprite så højt du kan!

Oprettelse af et Mega Jump-spil til iPhone - Del 3

Scoresystem

Samlet set vil vores Uber Jump-spil omfatte tre typer heltrelaterede oplysninger:

1. Løbende konto. Resultatet starter fra bunden. Jo højere helten bliver, jo flere point føjes til din score . Du modtager også point for hver stjerne, du samler.

2. Højeste score. Der vil altid være endelige point i slutningen af ​​hver spilløkke. Uber Jump skriver de højeste værdier til brugerens standardfil, så spilleren kender de poster, der skal brydes.

3. Stjerner. I modsætning til den aktuelle score, som nulstilles i begyndelsen af ​​hvert spil, vil heltenes stjerner akkumuleres fra spil til spil. I en fremtidig version af Uber Jump kan du omdanne stjerner til en særlig spilvaluta, som brugerne kan købe opgraderinger til og yderligere muligheder for. Vi vil ikke gøre dette inden for rammerne af den aktuelle lektion, men vi vil tilføje en sådan mulighed, hvis du vil gøre det efter eget skøn.

Vi holder en løbende score, højeste score og samlede stjerner i en singleton-klasse kaldet GameState . Denne klasse til gengæld skriver den højeste score og antallet af stjerner til en fil på enheden, så værdierne gemmes mellem spilstart.

Opret en ny iOS / Kilde / Swift-fil med navnet GameState. Føj følgende klasse- og egenskabsbeskrivelse til GameState.swift:

class GameState { var score: Int var højeste score : Int var stjerner : Int class var sharedInstance : GameState { struct  Singleton  { statisk  let eksempel  = GameState() } Vend tilbage  Singleton. Instans  } }

 

De givne tre egenskaber giver adgang til den aktuelle score, den højeste score og antallet af stjerner. Klassevariabelen sharedInstance giver adgang til en enkelt forekomst af GameState-klassen.

Vi har også brug for en metode til at initialisere GameState, som nulstiller den aktuelle score samt indlæser den højeste score (hvis nogen) og antallet af stjerner fra brugerindstillingsfilen.

Tilføj følgende initialiseringsmetode til GameState.swift:

init() { // I det  score = 0 højeste score  = 0 stjerner  = 0 // Indlæs spiltilstand  let standardindstillinger  = NSUserDefaults   .standardUserDefaults   () højeste score  = standardindstillinger .integerForKey  ("højeste score" ) stjerner  = defaults.integerForKey("stjerner" ) }

 

Brug af NSUserDefaults-klassen er en nem måde at gemme en lille mængde data på en enhed. Det er til brugerpræferencer, men i dette eksempel bruges det til at gemme den højeste score og antallet af stjerner. I en rigtig applikation vil du sandsynligvis bruge noget mere pålideligt end NSUserDefaults, så ingen let kan ændre de data, der er gemt der, og skrive flere stjerner for sig selv, end han tjente!

Bemærk: For mere information om lagring af speldata, se vejledningen Sådan gemmes dine spildata.

Vi har brug for en metode i GameState til at gemme de givne værdier. Føj følgende metode til GameState.swift:

func gem stat () { // Opdater højeste score , hvis den aktuelle score er større  highScore = maks (score, highScore ) // Gem i brugerstandarder  let defaults = NSUserDefaults.standardUserDefaults() defaults.setInteger  (highScore, forKey : "højeste score" ) defaults.setInteger(stjerner, forKey : "stjerner" ) NSUserDefaults.standardUserDefaults().synkroniser () }

 

Her er GameState-klassen, der synkroniseres med lageret på enheden.

Vi har fået et næsten fungerende projekt, i den næste sidste del vil vi bringe alt i tankerne og få en rigtig spilapplikation!

Rate article
Mobiltelefoner-nyheder, anmeldelser og hackere.
Add a comment