Izvedba igre mega skokov za iPhone – 1. del

Izvedba igre mega skokov za iPhone - 1. del

Izdelava mega priljubljene igre za iOS je hitra v to bomo dokazali v tej vadnici : ). S tem člankom začnemo vrsto materialov o ustvarjanju igre za iPhone.

Na amaterski ravni bomo uporabili Sprite Kit in Swift, da bomo ustvarili nekaj podobnega Mega Jump. To je dokaj priljubljena igra navpičnega skakanja v arkadnem stilu. Doodle Jump lahko imenujemo tudi njegov analog. Spodnji video prikazuje, kako igranje izgleda v napravi …

Ko bomo gradili igro, se boste naučili uporabljati funkcije Sprite Kit, kot so zaznavanje trkov, nadzor merilnika pospeška, prehodi prizor . Če ste popolnoma novi v motorju Sprite Kit, si lahko pred začetkom te vadnice ogledate Ray-ov Vodič za Sprite Kit za začetnike. Če pa ste prepričani vase, pojdite naprej!

Izvirni članek v angleščini najdete tukaj.

Opomba: za igranje boste potrebovali plačljiv račun razvijalca. In če nameravate to lekcijo uporabiti v polni meri, potem je to tudi naprava za testiranje.

Začni

Naredili bomo igro, kot je Mega Jump. Kot pravi znani pregovor: “Kakor imenujete jahto, tako bo tudi plavala.” Da bi igra postala resnično svetla, mora imeti svetlo, nepozabno ime.

“Uber” je celo boljši od “mega”, zato mu recimo “Uber Jump” :).

V bistvu je igra v duhu Mega Jump fizična igra: glavnega junaka vržejo po zaslonu in od tega trenutka se mora boriti proti gravitaciji, da bo zdržal čim dlje.

Ko junak zbira kovance, se vzpenja čedalje višje, platza me pa mu na poti zagotavljajo začasen predah. Naša igra Uber Jump bo imela enak model: najprej bomo vrgli svojega junaka, nato pa mu bomo uporabili stalno težo. Na svoji poti bo zbral zvezde, ki mu bodo pomagale vstati in biti odgovorne za gibanje po osi Y. Če boste zamudili preveč zvezd, bo junak neizogibno padel dol.

Merilec pospeška bo nadzoroval gibanje igralca vzdolž osi X. Z nagibom naprave v desno ali levo lahko vodoravno nastavite smer gibanja junaka.

Rezultat bo sestavljen iz dinamične komponente (saj boste na igralca uporabljali dve sili) in kinematične komponente (saj boste neposredno spremenili njeno hitrost). Tako vam ne bo dolgčas!

Izvedba igre mega skokov za iPhone - 1. del

Najprej morate z motorjem Sprite Kit ustvariti nov projekt Xcode. Zaženite Xcode, izberite File \ New \ Project, nato IOS \ Application \ SpriteKit Game predloga in kliknite Next.

Izvedba igre mega skokov za iPhone - 1. del

V polje z imenom izdelka vnesite UberJump, za jezik izberite Swift, na zavihku naprave vnesite iPhone in kliknite gumb “Naprej”.

Izvedba igre mega skokov za iPhone - 1. del

Izberite mesto za shranjevanje projekta in kliknite gumb “Ustvari”. Preden se lotimo posla, je treba izvesti nekaj predhodnih nastavitev. V navigatorju poiščite datoteko GameScene .sks. Ne bomo ga potrebovali, zato ga izberite in kliknite gumb “Izbriši”. Ko se prikaže okno z opozorilom, kliknite »Premakni v smetnjak«.

Izvedba igre mega skokov za iPhone - 1. del

Zdaj odprite GameViewController.swift in odstranite pripono unarchiveFromFile SKNode na vrhu datoteke, saj ne bomo potrebovali nobene tuje kode. Nato metodo viewDidLoad zamenjajte z naslednjo:

preglasiti  func    viewDidLoad() {        super   .pogled DidLoad () pustiti  skView  = sebe .view as SKView skView.showsFPS  = prav  skView.showsNodeCount  = prav  pustiti  prizor  = GameScene(velikost : skView.bounds.velikost  ) scene.scaleMode  = .AspectFit skView.presentScene (scene) }       

 

Kliknite Build, nato Run, da se prepričate, da za zdaj vse deluje.

Izvedba igre mega skokov za iPhone - 1. del

Ne skrbite, da bo besedilna nalepka “Hello, World” okrnjena. Najdete ga v datoteki GameScene.swift in ga nadomestite s tistim, kar potrebujete. Najprej pa morate narediti zadnjo stvar, ki jo želite nastaviti. Ker bo naša igra uporabljala merilnik pospeška, moramo poskrbeti, da vrtenje naprave ne bo preklopilo aplikacije v ležeči način.

V navigatorju Xcode (kjer je trenutno izbran vaš projekt) izberite UberJump, pojdite na zavihek Splošno v nastavitvah in poiščite razdelek Informacije o uvajanju. Poskrbite, da bo za napravo na voljo le portretna usmerjenost.

Izvedba igre mega skokov za iPhone - 1. del

Pripravili smo projekt za začetek dodajanja komponent igre. Začnimo s slikami.

Uvoz grafike

Prenesite grafične vire (povezava za prenos na koncu članka) za ta projekt in jih povlecite in spustite v Xcode. Prepričajte se, da sta izbrani »Cilj: Kopiraj elemente po potrebi« in UberJump.

Izvedba igre mega skokov za iPhone - 1. del

Ilustracije so razdeljene na ozadje (mapa Ozadja) in igre (mapa Assets.atlas). Ploščice za ozadje so ploščice, ki se bodo med premikanjem junaka pomikale po zaslonu gor in dol:

Izvedba igre mega skokov za iPhone - 1. del

Igre vključujejo vse sprite , zlasti lik, plošče in zvezde.

Izvedba igre mega skokov za iPhone - 1. del

Da bi izboljšali učinkovitost, je treba vire iger shraniti v atlas teksture. V tej vadnici lahko izveste več o atlatih teksture v komppustiti u Sprite.

Gradnja scene

Morda ste opazili, da je bil razred GameScene že ustvarjen v predlogi projekta. Prizor Sprite Kit trenutno prikazuje “Hello, World!” ob začetku igre. Tu bo potekala večina akcije Uber Jump, zato odprite razred GameScene.swift in vsebino nadomestite z naslednjim:

uvoz  SpriteKit class GameScene: SKScene  { zahteva  v ? (kodirnik aDekoder : NSCoder ) { super.v (kodirnik : aDekoder ) } preglasiti  v (velikost : CGSize ) { super.v (velikost : size) Barva ozadja  = SKColor.whiteColor () } }

 

Kliknite Build and Run. GameScene zdaj prikazuje samo beli zaslon. To je prazno platno, na katerem bomo dodali glavne predmete igre. Mega Jump uporablja paralaksni učinek plasti, da ustvari realistično upodabljanje glasnosti. Predmeti v ospredju se na primer premikajo hitreje kot predmeti v ozadju. V Uber Jump bomo naredili enak učinek z ustvarjanjem naslednjih plasti v sceni:

– Ozadje: plast počasnega posnetka, ki prikazuje oddaljeno pokrajino.

– Sredina: hitrejša dekoracija drevesnih vej.

– Ospredje: hitro premikajoča se plast, ki vsebuje lik, zvezde in platforme, ki tvorijo jedro igranja.

– HUD: zgornja plast, ki se ne premika in prikazuje oznake za točkovanje.

Vozlišče v ozadju je prvo, ki ga dodate. Odprite GameScene.swift in dodajte naslednjo metodo:

func createBackgroundNode  () ->   SKNode { // 1   // Ustvari vozlišče  pustiti  backgroundNode      = SKNode() pustiti  ySpacing   = 64,0   scaleFactor     // 2   // Pojdite skozi slike, dokler ni zgrajeno celotno ozadje  for indeks  in 0...devetnajst  { // 3   pustiti  vozlišče  = SKSpriteNode  (imageNamed  :Vrvica (format : "Ozadje% 02d" , kazalo  +  1)) // 4   vozlišče .setScale (scaleFactor) node.anchorPoint  = CGPoint   (x: 0,5 , y   : 0,0 ) vozlišče.položaj  = CGPoint(x: sebe .size.width    / 2, y: ySpacing  CGFloat  (indeks )) // pet  backgroundNode.addChild   (node) } // 6  // Vrnemo zaključeno vozlišče v ozadju  vrnitev  backgroundNode }

 

Poglejmo si podrobneje, kaj počnemo tukaj:

1. Najprej ustvarimo nov primerek SKNode. Nima vizualne vsebine, je pa postavljen na odru. To pomeni, da ga lahko premaknemo kamor koli, njegovi otroci pa se bodo z njim.

zanimiva 6,1-palčna iPhone 12 in iPhone 12 Pro bosta prvič naprodaj Apple, bo iz dneva v dan napovedala začetek iPhone 12

2. Imamo 20 slik za ozadje, ki jih je treba razporediti v vrsto, da zapolnijo ozadje.

3. Vsako podrejeno vozlišče je podedovano od SKSpriteNode z dodatkom ustrezne slike v ozadju, naložene iz naših virov.

4. Če sidrno točko vsakega vozlišča pomaknete na njegovo spodnje središče, vozlišča zlahka zložite eno na drugo.

5. Vsako podrejeno vozlišče dodamo vozlišču v ozadju.

6. Končno vrnemo vozlišče v ozadju.

Zdaj je čas, da vozlišče v ozadju postavite na oder. V GameScene.swift dodajte naslednje lastnosti:

// Večplastna vozlišča  pustiti  backgroundNode = SKNode() pustiti  midgroundNode  = SKNode() pustiti  foregroundNode    = SKNode() pustiti  hudNode  = SKNode() // Za namestitev iPhone 6  pustiti  scaleFactor: CGFloat = 0,0 

 

Dodajamo lastnosti za vsako vozlišče, ki bo uporabljeno v igri. Za zdaj potrebujemo samo vozlišče v ozadju, vendar ne škodi, če hkrati prijavimo tudi druga vozlišča.

Dodamo lahko tudi lastnost scaleFactor. To je potrebno, da je grafika pravilno prilagojena in nameščena na vseh modelih iPhone.

Če želite sceni dodati ozadje, vstavite naslednjo kodo v metodo init (size 🙂 razreda GameScene.swift, takoj za vrstico, ki nastavi barvo ozadja:

scaleFactor = sebe .size.width / 320,0  // Ustvari vozlišča igre  // Ozadje  backgroundNode = createBackgroundNode() addChild(backgroundNode)

 

Grafika je zasnovana tako, da ustreza standardnemu zaslonu s 320 slikovnimi pikami, ki ga ima večina modelov iPhone. Zato se tukaj uporablja faktor merila za prilagajanje drugim velikostim zaslona. Po inicializaciji vozlišča v ozadju je vse, kar moramo storiti, da ga kot otroka dodamo na trenutno sceno.

Kliknite Build and Run in se prepričajte, da se naše vozlišče v ozadju prikaže na odru, kot je prikazano spodaj:

Izvedba igre mega skokov za iPhone - 1. del

Opomba: Čeprav smo vozlišču v ozadju dodali 20 otrok, boste videli, da se ob zagonu aplikacije na 4-palčni napravi na prizorišču prikaže le devet vozlišč. In s 3,5-palčnim zaslonom – le osem. Sprite Kit je precej napreden in prikazuje le vozlišča, ki bi morala biti trenutno vidna v igri.

Dodajanje vozlišča predvajalnika (vozlišče)

Čas je, da na oder izpustimo našega “Super Jumperja”. V GameScene.swift dodajte naslednjo metodo:

func createPlayer  () -> SKNode { pustiti  predvajalnik Node   = SKNode() predvajalnik Node.position  = CGPoint(x: sebe .size.width / 2, y: 80,0 ) pustiti  sprite = SKSpriteNode(imageNamed: "Igralec" ) predvajalnik Node.addChild (sprite) vrnitev  playerNode }

 

Na enak način, kot smo dodali vozlišče v ozadju, se ustvari SKNode in mu kot otrok doda SKSpriteNode, ki vsebuje sprite igralca. Vozlišče igralca postavite tako, da je v središču zaslona vodoravno in tik nad dnom scene. Preden dodate vozlišče predvajalnika na sceno, morate ustvariti ospredje. Kot smo že omenili, bo vozlišče v ospredju vsebovalo predvajalnik, zvezde in platforme. To pomeni, da se bodo, ko ga premaknemo, vsi elementi igre premikali z njim.

Naslednjo kodo prilepite v metodo init (size 🙂 takoj za vrstico, ki na ozadje doda ozadje:

// Ospredje  foregroundNode = SKNode() addChild(foregroundNode)

 

Zdaj, ko imamo v ospredju vozlišče za naše elemente igranja, mu lahko dodamo vozlišče igralca. Na vrhu GameScene.swift prijavite naslednjo lastnost:

// Igralec  let player = SKNode()

 

Zdaj postavite vozlišče predvajalnika na oder tako, da v init (size 🙂 vstavite naslednjo kodo takoj za vrstico, ki na oder doda foregroundNode:

// Dodaj predvajalnik  player = createPlayer() foregroundNode.addChild (player)

 

Zgradite in zaženite (Build and Run), da vidite Super Jumperja, pripravljenega za začetek avanture:

Izvedba igre mega skokov za iPhone - 1. del

Dodajanje gravitacije in fizičnega telesa

Naš junak je videti preveč sproščen. Lepo bi bilo v igro dodati fiziko in videti, kaj se bo zgodilo. Začnimo z dejstvom, da je fizika naše igre nepredstavljiva brez gravitacije. V GameScene.swift dodajte naslednjo vrstico v init (size 🙂 takoj za vrstico, ki nastavi barvo ozadja:

// Dodajte nekaj teže  fizikaSvet.gravitacija  = CGVector (dx : 0,0 , dy : -2.0 )

 

S tem fizičnemu svetu na osnovi zapleta igre dodate gravitacijski vektor. Gravitacija ni projicirana na os X; ustvarja silo navzdol vzdolž osi Y.

Zgradite in zaženite, da vidite, kako bo gravitacija vplivala na igralčevo vozlišče.

Izvedba igre mega skokov za iPhone - 1. del

Hmm … nič se ni zgodilo. Zakaj vašega junaka skrbi gravitacija? Poskusite sami ugotoviti, preden pogledate odgovor.

Odgovor:

Sila, ki jo ustvarja gravitacija, ima dinamičen učinek samo na fizična telesa prizorišča. In predmeti razreda SKNode, na primer vozlišče predvajalnika našega predvajalnika, nimajo privzeto nastavljenih fizičnih teles. Zato moramo vozlišču igralca dodeliti fizično telo. Na koncu metode createPlayer pred izjavo return dodajte naslednjo kodo:

// 1 playerNode.physicsBody  = SKPhysicsBody (circleOfRadius : sprite.size.width  / 2) // 2 playerNode.physicsBody? .dynamic  = prav  // 3 playerNode.physicsBody? .allowsRotation  = napačno  // 4 playerNode.physicsBody? .restitucija  = 1.0  playerNode.physicsBody? .friction  = 0,0  playerNode.physicsBody? .angularDamping  = 0,0  playerNode.physicsBody? .linearDamping  = 0,0 

 

Zgornja koda nastavi fizično telo vozlišča igralca. Poglejmo si ga pobližje:

1. Vsako fizično telo mora imeti obliko, ki jo fizikalni stroj lahko uporablja za zaznavanje trkov. Najprimernejša oblika telesa za zaznavanje trkov je krog (zlahka je ugotoviti, kdaj se krogi prekrivajo) in tudi krog je zelo primeren za vozel vašega igralca. Njegov polmer je polovica širine spriteta.

2. Fizična telesa se delijo na statična in dinamična. Dinamična telesa so pod vplivom fizikalnega motorja in so zato odvisna od sil in impulzov. Statična telesa niso prizadeta, vendar jih vseeno lahko uporabimo za zaznavanje trkov. Na primer, statično telo, kot je stena ali trdna platforma, se ne bo nikoli premaknilo, lahko pa vanj trčijo drugi predmeti. Ker želimo, da je vozlišče našega igralca pod gravitacijo, nastavite njegovo dinamično lastnost na true.

3. Nujno je, da vozlišče našega predvajalnika ostane vedno v navpičnem položaju, zato izklopimo vrtenje vozlišča.

4. Ker v tej igri neodvisno obvladujemo trke, nastavimo parametre fizičnega telesa vozliškega igralca tako, da ne pride do trenja ali dušenja. Vendar smo njegovo lastnost restitucije nastavili na 1, da preprečimo, da bi fizično telo med trki izgubilo svoj zagon.

Zgradite in zaženite, da vidite, kako igralec sprite pade na dno zaslona, ​​ko ga gravitacija neusmiljeno vleče proti središču Zemlje.

Izvedba igre mega skokov za iPhone - 1. del

Mogoče se sliši nekoliko melodramatično, toda kako bo naš junak našel svoje mesto na tem svetu?

Nadaljevanje čez en teden ….

Prenesite grafične vire za lekcijo.

Rate article
Mobilni telefoni - novice, pregledi in življenjski haki.
Add a comment