Creați Space Invaders cu Swift și Sprite Kit Introducerea Sprite Kit

Ce veți crea

În această serie, vă voi învăța cum să creați un joc inspirat de Space Invaders folosind Sprite Kit și limbajul de programare Swift. Pe parcurs, veți afla despre motorul fizic integrat Sprite Kit, generați particule utilizând editorul de particule Sprite Kit, utilizați accelerometrul pentru a muta playerul și multe altele. Să începem.

Introducerea Kitului Sprite

Sprite Kit este motorul de jocuri 2D al Apple, care a fost introdus împreună cu iOS 7. Odată cu introducerea limbajului de programare Swift în 2014, nu a existat niciodată un moment mai bun pentru a fi un dezvoltator de jocuri pentru iOS.

Sprite Kit oferă un motor de randare construit pe partea de sus a OpenGL. Cu ajutorul spritelor texturate, un motor de fizică încorporat și cel foarte puternic SKAction clasa, puteți construi foarte rapid jocuri funcționale 2D.

Rândulator

Sprite Kit, la fel ca majoritatea motoarelor de joc, utilizează o buclă de randare pentru a reda și a actualiza ecranul. Bucla de randare are câțiva pași pe care îi trece înainte de redarea scenei curente. Ele sunt după cum urmează:

  1. Actualizați
  2. Evaluați acțiunile
  3. Simulați fizica
  4. Aplicați constrângeri
  5. Refaceți scena

Fiecare dintre acestea are o metodă corespunzătoare pe care o puteți utiliza pentru a aplica orice logică suplimentară care trebuie să aibă loc la acel moment în cadru. Mai specific, ați folosi următoarele metode în interiorul scenei.

  1. Actualizați
  2. didEvaluateActions
  3. didSimulatePhysics
  4. didApplyConstraints
  5. didFinishUpdate

 Suntem interesați de două dintre aceste metode pentru acest tutorial, Actualizați și didSimulatePhysics. Vom folosi Actualizați pentru a muta invadatorii manual și didSimulatePhysics metodă de actualizare a player-ului, care va fi controlat cu accelerometrul și motorul de fizică.

SKNode

Unul dintre elementele de bază ale cadrului Sprite Kit este SKNode clasă. SKNode clasa nu atrage niciun element vizual. Rolul său principal este de a oferi un comportament de bază pe care îl pun în aplicare alte clase. SKScene clasa este nodul rădăcină într - un arbore al lui SKNode instanțe și este folosit pentru a ține sprites și alte conținut care trebuie să fie redate.

Redarea și animația sunt realizate de un SKView instanță care este plasată în interiorul unei ferestre și se adaugă apoi alte vizualizări. SKScene instanța este adăugată la SKView instanță. Puteți utiliza un singur SKView exemplu în fereastra dvs. și comutați între diferite scene în orice moment.

Cadrul definește un număr de SKNode subclase. Cea mai comună pentru a construi o scenă este SKSpriteNode clasă. SKSpriteNode clasa poate fi trasată fie drept dreptunghi cu a SKTexture cartografiate pe ea sau ca dreptunghi colorat, neted. Veți folosi cel mai adesea spritele texturate, pentru că astfel veți aduce viața voastră în joc. Check out arborele de mostenire al SKNode pentru a vedea ce alte tipuri de noduri sunt disponibile.

SKAction

SKAction clasa este ceea ce vă aduce SKNode clasele la viață. Prin utilizarea funcției SKAction puteți muta, roti, scala și distruge nodurile. Puteți utiliza, de asemenea SKAction pentru a reda un sunet și a rula cod personalizat. SKAction clasa este foarte puternică și, împreună cu SKNode clasa, este unul din blocurile constructive ale unui joc Sprite Kit.

Fizica Motor

Sprite Kit are un motor integrat de fizică care face manipularea situațiilor fizice complexe o briza. Dacă ați încercat vreodată să implementați un motor fizic pe cont propriu, veți aprecia această caracteristică.

În Sprite Kit, coordonatele (0,0) este situat în partea din stânga jos a ecranului în loc de partea stângă sus, pe care ați putea fi folosit dacă ați lucrat cu Flash, Corona, HTML5 Canvas și multe alte cadre de joc. Acest lucru se datorează faptului că Sprite Kit utilizează OpenGL sub capotă.

Vă sugerez foarte mult să citiți Ghidul de programare Sprite Kit al Apple pentru a vă familiariza mai bine cu conceptele de mai sus. Cu această scurtă introducere în drum, să începem să construim un joc cu Sprite Kit.

1. Configurarea proiectului

Deschideți Xcode și alegeți Creați un nou proiect Xcode sau alegeți Nou> Proiect ...  de la Fişier meniul.


Asigurați-vă că vizați iOS,că tipul este cerere, și pe care l-ați ales Joc ca tip de șablon. Clic Următor → a continua.

Apoi, alegeți ceea ce doriți pentru numele produsului, Numele Organizatiei, și Identificarea organizației. Asigura-te ca Limba este setat sa Rapid, Tehnologia jocurilor este setat sa SpriteKit, și Dispozitive este setat sa iPad. Specificați o locație pentru a salva fișierele de proiect și faceți clic pe Crea.

Dacă faceți clic pe butonul de derulare din partea stângă sus (sau apăsați Command-R), Xcode va construi și executa aplicația, afișând textul "Salut Lume!". Când atingeți ecranul, se adaugă o imagine a unei nave spațiale și începe să se rotească.

2. Configurarea proiectului

Selectați proiectul din Project Navigator și deschideți General în partea de sus. Sub Informații despre implementare, debifați toate casetele de selectare, dar Portret pentru Orientarea dispozitivului.

Apoi, selectați și ștergeți GameScene.sks. .SKS Fișierul vă permite să vizualizați vizual scenă. Pentru acest proiect, vom adăuga fiecare nod programabil. Deschis GameViewController.swift, ștergeți conținutul și înlocuiți-l cu următoarele.

import Import UIKit Clasă SpriteKit GameViewController: UIViewController override func viewDidLoad () super.viewDidLoad () let scenă = StartGameScene (size: view.bounds.size) let skView = vizualiza ca! SKView skView.showsFPS = adevărată skView.showsNodeCount = true skView.ignoresSiblingOrder = adevărată scenă.scaleMode = .ResizeFill skView.presentScene (scenă) suprascrie funcția preferăStatusBarHidden () -> Bool return true

 GameViewController clasa moșteni de la UIViewController și va avea un SKView ca punct de vedere. În interiorul viewDidLoad metoda, ne forțăm downcast sale vedere proprietate la un SKView exemplu, folosind la fel de! introduceți operatorul de tip și configurați vizualizarea.

Este posibil să fi observat textul din colțul din dreapta jos al ecranului când ați rulat aplicația pentru prima dată. Asta este ceea ce showsFPS și showsNodeCount proprietățile sunt pentru, arătând cadrele pe secundă la care rulează jocul și numărul de SKNodes vizibile în scenă.

Dacă unele dintre noduri urmau să se deplaseze în afara ecranului, numărul de noduri ar fi scăzut, dar acestea ar fi încă în memorie. Acest lucru este important pentru a vă aminti și nu lăsați numărul nodului să vă păcălească. Dacă adăugați 100 de noduri la o scenă și 90 dintre acestea sunt off-screen, încă mai aveți 100 de noduri care preiau memoria.

În scopuri de optimizare, ignoresSiblingOrder este setat sa Adevărat. Puteți citi mai multe despre acest lucru în Ghidul de programare Sprite Kit. Ultimul lucru pe care îl facem este să invocăm SKView„s presentScene și treceți în StartGameScene, pe care o vom crea în etapa următoare.

În cele din urmă, nu vrem ca bara de stare să fie afișată, așa că ne întoarcem Adevărat de la preferStatusBarHidden metodă.

3. Crearea StartGameScene

Pasul 1: Adăugarea StartGameScene Clasă

Alege Nou > Fişier… de la Fişier meniu și alegeți Cocoa Touch Class de la iOS> Sursă secțiune. Clic Următor → a continua.

Apoi, denumiți clasa StartGameScene și asigurați-vă că acesta moștenește SKScene. Limba ar trebui setat la Rapid. Clic Următor → a continua.

Spuneți Xcode unde doriți să salvați fișierul pentru noua clasă și faceți clic pe Crea. Adăugați următorul cod la StartGameScene.swift.

importul UIKit import SpriteKit class StartGameScene: SKScene override func didMoveToView (vedere: SKView) backgroundColor = SKColor.blackColor () NSLog ("Am încărcat ecranul de pornire")

didMoveToView (_ :) metoda se numește imediat după ce scena este prezentată de vizualizare. În general, acesta este locul în care veți realiza configurația pentru scenă și veți crea activele.

Dacă testați jocul acum, ar trebui să vi se prezinte un ecran negru care să arate rata cadrelor și numărul de noduri din colțul din dreapta jos al ecranului.

Pasul 2: Adăugarea startGameButton

Nu e distractiv să privim un ecran negru, așa că să ne creăm primul SKSpriteNode instanță. Actualizați didMoveToView (_ :) așa cum se arată mai jos.

override funcția didMoveToView (vizualizare: SKView) permite startGameButton = SKSpriteNode (imageNamed: "newgamebtn") startGameButton.position = CGPointMake (size.width / 2, size.height / 2-100) startGameButton.name = "startgame" addChild ) 

Declarăm o constantă startGameButton utilizând inițializatorul de confort init (imageNamed :), care ia ca argument numele de imagine. Am centrat-o pe ecran atât pe orizontală cât și pe verticală, cu excepția faptului că scăpăm 100 de puncte pentru ao plasa puțin în centru pe axa verticală. Am stabilit-o Nume proprietate la incepe jocul astfel încât să ne putem referi mai târziu la aceasta. În final, îl adăugăm la scenă invocând addChild (_ :), care ia ca argument nodul pentru a adăuga la scena. Puteți afla mai multe despre SKSpriteNode clasă în Referința cadru SpriteKit.

Acum ar fi un moment bun pentru a adăuga imaginile la proiect. Descărcați fișierele sursă ale acestui tutorial și găsiți folderul numit imagini. Glisați-l în folderul care are numele a ceea ce ați numit proiectul dvs., de exemplu, MobileTutsInvaderz. Asigura-te Copiați articolele dacă este necesar este verificată, precum și obiectivul principal din lista de obiective.

Dacă vă testați cererea, ar trebui să vedeți un buton etichetat "Joc nou".

Pasul 3: Implementarea touchesBegan

Apoi, trebuie să implementăm touchesBegan (_: withEvent :) metodă. Punerea în aplicare este prezentată mai jos. touchesBegan metoda este invocată atunci când una sau mai multe degete atinge ecranul.

suprascrie funcțiileBegan (atinge: Set, cu eveniment Eveniment: UIEvent) lasa touch = atinge prima data ca! UITouch permite touchLocation = touch.locationInNode (auto) lasă touchedNode = self.nodeAtPoint (touchLocation) dacă (touchedNode.name == "startgame") lăsați gameOverScene = GameScene (dimensiune: size) gameOverScene.scaleMode = scaleMode let transitionType = SKTransition. vizualizare flipHorizontalWithDuration (1.0)? .presentScene (gameOverScene, transition: transitionType)

multiTouchEnabled proprietatea vederii scenei este setată la fals în mod implicit, ceea ce înseamnă că vizualizarea primește doar prima atingere a unei secvențe multitouch. Cu această proprietate dezactivată, puteți prelua atingerea utilizând primul proprietate calculată a atinge set deoarece există un singur obiect în set. Observați că și noi l-am înjunghiat UITouch.

Stocăm locația atingerii în scenă într-o constantă denumită touchLocation. Facem asta invocând locationInNode (_ :) pe atingere obiect, trecând în scenă. Apoi ne putem da seama care nod a fost atins prin invocarea nodeAtPoint, trecând în zona de contact. Cu acest nod touchedNode găsită, putem verifica Nume proprietate și, dacă este egal cu incepe jocul, știm că au lovit butonul.

Dacă utilizatorul a apăsat butonul, instanțiăm GameScene clasa și setul său scaleMode pentru a fi la fel ca modul de scară al scenei curente. Apoi creăm un SKTransition numit transitionType și arată scena invocând presentScene (_: tranziție :) trecerea în gameOverScene si transitionType.

Sunt destul de puține SKTransistion tipuri de a alege de la. Puteți citi mai multe despre acestea în Referința cadru SpriteKit. Vă sugerez să încercați câteva și să vedeți care dintre ele vă place cel mai bine.

Dacă testați aplicația dvs., puteți apăsa butonul, care vă duce la GameScene. Aceasta este aceeași scenă la care a început inițial proiectul.

Concluzie

Aceasta aduce la prima parte prima parte a acestei serii. Ați fost introdus în Sprite Kit și ați învățat cum să creați scene personalizate, utilizați SKSpriteNode clasa și detectarea atingerilor. Acesta este doar începutul, avem încă multe de învățat. Vă mulțumim că ați citit și vă voi vedea în următoarea parte a acestei serii.

Cod