Share
Acest tutorial vă va învăța cum să utilizați cadrul Sprite Kit pentru a crea un joc de fapte bazate pe întrebări. Este conceput atât pentru începători, cât și pentru utilizatori avansați. Pe parcurs, veți aplica nucleul Sprite Kit. Seria Jocurile cu fapte este împărțită în trei tutoriale pentru a acoperi complet fiecare subiect.
Această serie este împărțită în trei tutoriale: configurarea proiectului, crearea interfeței și logica jocurilor. Fiecare parte va produce un rezultat practic, iar suma tuturor pieselor va produce jocul final. După seria celor trei părți, cititorii vor putea crea un simplu joc de întrebări și răspunsuri cu sunete, animații, meniuri, reguli, cronometre și interacțiune UIKit. În ciuda faptului că fiecare parte poate fi citită independent, pentru o mai bună înțelegere vă sugerăm să urmați tutorialele în ordine. Am inclus, de asemenea, codul sursă pentru fiecare parte separat, oferind astfel o modalitate de a începe tutorialul în orice secțiune.
La sfârșitul acestui tutorial, rezultatul va arăta astfel:
Începeți o nouă SpriteKit Xcode proiect și numește-l Fapte. Informațiile de implementare utilizate în cele trei părți sunt:
Rețineți că următoarele patru cadre sunt incluse automat în proiect: CoreGraphics, UIKit, SpriteKit, și fundație. Veți vedea trei clase, o imagine (Spaceship.png) și a Main.storyboard fişier. Puteți șterge imaginea, deoarece nu o veți utiliza.
Deschide acum Myscene.m și să comenteze întregul -(void) touchesBegan: (NSSet *) atinge evenimentul Event: (UIEvent *) metodă. Nu este nevoie să creați un gest de robinet în această scenă deoarece veți folosi mai multe UIKit UIButtons pentru interacțiunea cu utilizatorul.
Începeți prin a schimba culoarea de fundal a SKScene modificând self.backgroundColor proprietăți. Rețineți că utilizează un SKColor obiect cu trei proprietăți pentru componente roșii, albastre și verzi. Acum schimbați mylabel text la "Fapte!" sau la orice alt titlu de interes.
Următorul pas este să adăugați resursele necesare proiectului dvs.; găsiți-le în folderul Resurse. În ciuda faptului că nu veți folosi toate resursele acum, trebuie să le adăugați pe toate. Deoarece veți folosi cadrul UIKit, adăugați o metodă specifică -(void) didMoveToView: (SKView *) vizualizare care detectează dacă tranziția scena a avut loc fără probleme. Dacă nu apar probleme, aplicația încarcă resurse pe ecran. Adăugați această metodă în codul dvs. În interior, veți declara trei butoane: una pentru pornirea jocului, una pentru opțiuni și ultima pentru a părăsi aplicația.
Adăugați trei UIButtons pentru dumneavoastră MyScene.m. Acesta va arata astfel:
@implementation MyScene UIButton * startButton; UIButton * optionsButton; UIButton * exitButton;
Fiecare buton are configurații specifice privind locația și dimensiunea cadrului, culoarea de fundal și imaginea de fundal. Ar trebui să încercați să creați o UIButton și adăugați-o în vizualizarea scenă. Butoanele ar trebui să arate ca fragmentul următor:
-(void) didMoveToView: (SKView *) vedere startButton = [butonul UIButtonWithType: UIButtonTypeRoundedRect]; startButton.frame = CGRectMake (CGRectGetMidX (auto.frame) -100, CGRectGetMidY (auto.frame), 200, 70.0); startButton.backgroundColor = [UICcolor clearColor]; [startButton setTitleColor: [UICcolor whiteColor] pentruState: UIControlStateNormal]; UIImage * buttonImageNormal = [UIImage imageNamed: @ "StartBtn.png"]; UIImage * strechableButtonImageNormal = [butonulImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [startButton setBackgroundImage: strechableButtonImageNormal forState: UIControlStateNormal]; [auto.view addSubview: startButton]; optionsButton = [Butonul UIButtonWithType: UIButtonTypeRoundedRect]; optionsButton.frame = CGRectMake (CGRectGetMidX (auto.frame) -100, CGRectGetMidY (auto.frame) +90, 200, 70.0); optionsButton.backgroundColor = [UICcolor clearColor]; [optionsButton setTitleColor: [UICcolor whiteColor] pentruState: UIControlStateNormal]; Butonul UIImage * buttonOptionsImageNormal = [UIImage imageNamed: @ "OptionsBtn.png"]; UIImage * strechableButtonOptionsImageNormal = [butonOptionsImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [optionsButton setBackgroundImage: strechableButtonOptionsImageNormal forState: UIControlStateNormal]; [self.view addSubview: optionsButton]; exitButton = [Butonul UIButtonWithType: UIButtonTypeRoundedRect]; exitButton.frame = CGRectMake (CGRectGetMidX (auto.frame) -100, CGRectGetMidY (auto.frame) +180, 200, 70.0); exitButton.backgroundColor = [UICcolor clearColor]; [exitButton setTitleColor: [UICcolor whiteColor] pentruState: UIControlStateNormal]; Butonul UIImage * buttonExitImageNormal = [UIImage imageNamed: @ "ExitBtn.png"]; UIImage * strechableButtonExitImageNormal = [butonulExitImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [exitButton setBackgroundImage: strechableButtonExitImageNormal forState: UIControlStateNormal]; [auto.view addSubview: exitButton];
Alerga proiectul și a vedea noua interfață rădăcină. Dacă doriți, puteți ajusta locația, dimensiunea și poziția obiectelor de interfață. Dacă doriți să aflați mai multe despre SKLabelNode sau UIButton, Vă sfătuiesc să jucați cu aceste clase un pic mai mult. Interfața ar trebui să arate similară cu următoarea imagine:
Acum este momentul să adăugați mai multe clase la proiectul dvs..
Din moment ce ați adăugat mai multe butoane, este timpul să le folosiți pentru a redirecționa utilizatorul către o altă interfață. Adăugați două clase noi. Alege Fișier> Nou> Fișier și Obiectiv-C clasă. Denumiți clasele FactsScene și OptionsScene. Rețineți că ambele vor fi o superclasă de SKScene.
În proiect sunt disponibile patru fișiere noi: FactsScene.h, FactsScene.m, OptionsScene.h, și OptionsScene.m. Rețineți că fișierele de implementare ale celor două clase sunt aproape goale. Prin urmare, trebuie să adăugați inițialele clasei. Pentru ambele clase, utilizați -initWithSize: metodă. Încercați și adăugați-o singură. Dacă aveți probleme, următorul fragment vă va ajuta:
-(id) initWithSize: dimensiunea (CGSize) if (self = [super initWithSize: size]) NSLog (@ "Scenă opțiuni"); întoarce-te;
Încă o dată, ar trebui să o aplicați pentru ambele clase. Acum, dacă aveți inițializatorii de clasă, este momentul să modificați UIButton cod din ultimul pas pentru a schimba între clase. Intoarce-te la MyScene.m și importați ambele clase în secțiunea de import:
#import "OpțiuniScene.h" #import "FactsScene.h"
Acum în butonul de start, optionsButton, și exitButton, trebuie să adăugați o acțiune personalizată. La fiecare buton, adăugați linia corespunzătoare de cod.
[startButton addTarget: acțiune auto: @selector (moveToGame) forControlEvents: UIControlEventTouchUpInside]; [optionsButton addTarget: acțiunea individuală: @selector (moveToOptions) forControlEvents: UIControlEventTouchUpInside]; [exitButton addTarget: acțiunea de sine: @selector (endApplication) forControlEvents: UIControlEventTouchUpInside];
Ar trebui să vedeți trei avertismente ("selector nedeclarat"). Nu vă faceți griji! Acum este momentul să adăugați aceste metode la clasă.
-(void) moveToGame - (vid) moveToOptions - (void) endApplication
Fiecare dintre ele este responsabil pentru o acțiune specifică, iar numele fiecărei metode este explicabilă. -(void) moveToGame și -(void) moveToOptions metodele sunt similare, deoarece ambele sunt folosite pentru a crea o tranziție de la aceasta SKScene altcuiva. La fiecare metodă, ar trebui să creați un SKScene obiect de destinație și obiect de tranziție și prezintă noua scenă. Rețineți că, deoarece utilizați obiecte UIKit, trebuie să le eliminați și de pe scena de la SKScene tranziții. Dacă întâmpinați probleme cu acești pași, următoarele instrucțiuni vă vor ghida:
-(void) moveToGame NSLog (@ "moveToGame"); FapteScene * factScene = [[FactsScene alin] initWithSize: CGSizeMake (CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame)); SKTransition * tranziție = [SKTransition revealWithDirection: SKTransitionDirectionUp duration: 1]; [startButton removeFromSuperview]; [optionsButton removeFromSuperview]; [exitButton removeFromSuperview]; [self.scene.view presentScene: factsScene tranziție: tranziție]; - (vid) moveToOptions NSLog (@ "moveToOptions"); OpțiuniScene * opțiuniScene = [[OpțiuniScene alocare] initWithSize: CGSizeMake (CGRectGetMaxX (auto.frame), CGRectGetMaxY (auto.frame)); SKTransition * tranziție = [SKTransition revealWithDirection: SKTransitionDirectionLeft length: 1]; [startButton removeFromSuperview]; [optionsButton removeFromSuperview]; [exitButton removeFromSuperview]; [self.scene.view presentScene: optionsScene tranziție: tranziție];
Ultima metodă -(void) endApplication este mai simplu, deoarece este folosit numai pentru a termina aplicația.
-(void) endApplication [startButton removeFromSuperview]; [optionsButton removeFromSuperview]; [exitButton removeFromSuperview]; exit (0);
Acum este timpul să Alerga codul și testați noile caracteristici. Dacă totul este bine, ar trebui să puteți modifica vizualizarea implicită în Joc nou vizualizați și Opțiuni vedere. Cu toate acestea, nu vă puteți întoarce la meniul principal. Să schimbăm asta chiar acum.
Următorii pași sunt să adăugați un UIButton la Opțiuni scenă, programați-o pentru a efectua o tranziție înapoi la meniul principal și alegeți să creați un efect de tranziție (sau nu). Pentru a face acest lucru, sunt necesare mai multe etape:
Accentsconagua
-(void) didMoveToView: (SKView *) vizualizare metodă@selector metodăMyScene.h Mai întâi, du-te la OptionsScene.h si adauga:
@property (nonatomic, reține) UIButton * backButton;
Acum, schimbați atenția OptionsScene.m. Fragmentele pentru pseudo-codul trebuie să adauge didMoveToView metoda, butonul UIButton și configurația butonului.
-(void) didMoveToView: vizualizarea (SKView *) _backButton = [butonul UIButtonWithType: UIButtonTypeRoundedRect]; _backButton.frame = CGRectMake (CGRectGetMidX (auto.frame) -100, CGRectGetMidY (auto.frame) +180, 200, 70.0); _backButton.backgroundColor = [UICcolor clearColor]; [_backButton setTitleColor: [UICcolor whiteColor] pentruState: UIControlStateNormal]; Butonul UIImage * buttonExitImageNormal = [UIImage imageNamed: @ "ExitBtn.png"]; UIImage * strechableButtonExitImageNormal = [butonulExitImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [_backButton setBackgroundImage: strechableButtonExitImageNormal forState: UIControlStateNormal]; [_backButton addTarget: acțiune auto: @selector (moveToHome) forControlEvents: UIControlEventTouchUpInside]; [self.view addSubview: _backButton];
Apoi, adăugați @selector metodă.
-(void) moveToHome MyScene * myScene = [[MyScene aloc] initWithSize: CGSizeMake (CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame)); [_backButton removeFromSuperview]; [self.scene.view presentScene: myScene];
Alerga codul dvs. pentru a verifica dacă totul este în desfășurare. Acum puteți sări de la interfața de root la OptionsScene și din nou. Acum, putem popula scena Opțiuni.
Opțiunile jocului sunt în cazul în care utilizatorul poate schimba configurațiile jocului. Pentru moment, vă veți concentra doar pe două opțiuni: muzică și sunet. Trebuie să adăugați un SKLabelNode, A UISwitch, si un AVAudioPlayer obiecte pentru OptionsScene.h:
@property (nonatomic, reține) IBOutlet UISwitch * musicSwitch; @property (nonatomic, reține) IBOutlet UISwitch * soundSwitch; @property (nonatomic, reține) SKLabelNode * soundTitle; @property (nonatomic, reține) SKLabelNode * musicTitle;
Apoi, pe OptionsScene.m în interiorul didMoveToView , alocați obiectele ca:
_SoundSwitch = [[UISwitch aliniere] initWithFrame: CGRectMake (CGRectGetMidX (self.frame) +50, CGRectGetMidY (self.frame) -26, 100, 100) UIControlEventValueChanged]; [self.view addSubview: _soundSwitch]; _musicSwitch = [[UISwitch aliniere] initWithFrame: CGRectMake (CGRectGetMidX (auto.frame) +50, CGRectGetMidY (autoframe) +50, 100, 100)]; [_musicSwitch addTarget: acțiune automată: @selector (flipMusicAndSound :) forControlEvents: UIControlEventValueChanged]; [self.view addSubview: _musicSwitch]; _soundTitle = [SKLabelNode labelNodeWithFontNamed: @ "Chalkduster"]; [_soundTitle setText: @ "Sunet"]; [_soundTitle setFontSize: 40]; [_soundTitle setPosition: CGPointMake (CGRectGetMidX (auto.frame) -80, CGRectGetMidY (auto.frame)); [auto addChild: _soundTitle]; _musicTitle = [SKLabelNode labelNodeWithFontNamed: @ "Chalkduster"]; [_musicTitle setText: @ "Muzică"]; [_musicTitle setFontSize: 40]; [_musicTitle setPoziție: CGPointMake (CGRectGetMidX (auto.frame) -80, CGRectGetMidY (auto.frame) -80)]; [auto addChild: _musicTitle];
Veți primi un avertisment. Pentru ao corecta, adăugați flipMusicAndSound metodă. Această metodă verifică starea _soundSwitch și _musicSwitch UISverifică și stabilește o cheie prestabilită pentru fiecare proprietate utilizând NSUserDefaults. Înainte de a finaliza metoda, trebuie să adăugați NSUserDefaults obiectează la clasă.
@implementation OptionsScene NSUserDefaults * implicit;
Apoi trebuie să o alocați în initWithSize metoda:
defaults = [NSUserDefaults standardUserDefaults];
Acum sunteți gata să utilizați avantajele NSUserDefaults. O veți folosi pentru a stoca starea proprietăților de sunet și muzică în întreaga aplicație. Puteți scrie și completa flipMusicAndSound metodă. Veți folosi întreg valoarea 1 pentru a seta sunetul și muzica activată și 0 în caz contrar. flipMusicAndSound este dedesubt.
- (IBAction) flipMusicAndSound: (id) expeditor if (_musicSwitch.on) [implicit setInteger: 1 pentruKey: @ "muzică"]; altceva [implicit setInteger: 0 pentruKey: @ "muzică"]; dacă (_soundSwitch.on) [implicit setInteger: 1 pentruKey: @ "sunet"]; altceva [implicit setInteger: 0 pentruKey: @ "sunet"];
daca tu Alerga proiectul și jocul cu ambele comutatoare, veți vedea că de fiecare dată când mergeți la OptionsScene ambele comutatoare au o stare implicită, mai degrabă decât ultima stare definită. Pentru a schimba asta, trebuie să citim NSUserDefaults obiect la didMoveToView metodă.
Veți defini două variabile pentru sunet și muzică și veți verifica fiecare cheie de proprietate inerentă. Este un test de decizie foarte simplu și logic. Dacă nu sunteți siguri cum să faceți acest lucru, fragmentul următor vă va ajuta:
long soundDefaults = [implicit integerForKey: @ "sunet"]; lung musicDefaults = [implicit integerForKey: @ "muzică"]; dacă (soundDefaults == 1) [_SoundSwitch setOn: YES animat: YES]; altceva [_soundSwitch setOn: FALSE animat: YES]; dacă (musicDefaults == 1) [_musicSwitch setOn: YES animat: YES]; altceva [_musicSwitch setOn: FALSE animat: YES];
Ultimul pas în OptionsScene.m fișierul este de a elimina elementele UISwitch din supervizare de fiecare dată când utilizatorul pune pe butonul din spate:
[_soundSwitch removeFromSuperview]; [_musicSwitch removeFromSuperview];
Iată o ilustrare a interfeței Opțiuni:
Deplasați-vă la FactsScene.m. Acum putem adăuga elemente de sunet și muzică. Ca și cu OptionsScene, trebuie să folosim NSUserDefaults pentru a obține valoarea pentru muzică și sunet. De asemenea, vom avea nevoie de un obiect pentru a stoca calea muzicală și altul pentru music player-ul iOS. Astfel le vom declara:
@implementation FactsScene NSUserDefaults * implicit; NSString * musicPath;
De asemenea, în FactsScene.h:
@property (nonatomic, puternic) AVAudioPlayer * musicPlayer;
Trebuie să declarați (așa cum ați făcut cu ultima clasă) metoda -(void) didMoveToView: (SKView *) vizualizare. În interiorul dvs. trebuie să verificați dacă preferințele de muzică și sunet sunt activate și să alocați preferințele muzicale. Ambele pot fi obținute prin:
musicPath = [[NSBundle mainBundle] pathForResource: @ "muzica" dinType: @ "mp3"]; _musicPlayer = [[Alocare AVAudioPlayer] initWithContentsOfURL: [NSURL fileURLWithPath: musicPath] eroare: NULL]; _musicPlayer.numberOfLoops = -1; // bucla pentru totdeauna _musicPlayer.volume = 0.7; muzică lungăFlag = [implicit integerForKey: @ "muzică"]; dacă (musicFlag == 1) [play_musicPlayer]; altceva [stop _musicPlayer];
Codul menționat mai sus pornește sau oprește muzica numai dacă proprietatea este activată. De asemenea, dorim să creăm sunete atunci când apare o atingere. Deci, trebuie să prindem interacțiunile tactile și să reacționăm în consecință.
Vă amintiți -(void) touchesBegan: (NSSet *) atinge evenimentul Event: (UIEvent *) metoda de la MyScene.m fișier de implementare? O veți defini și o veți folosi aici.
-(void) atingeBegan: (NSSet *) atinge cu EventEvent: (UIEvent *) eveniment pentru (UITouch * atinge în atinge) [touchWillProduceASound: @ "False"];
Rețineți că, -(void) touchWillProduceASound: (NSString *) răspuns nu este declarat încă. Declarați-o. Este folosit pentru a testa dacă o anumită atingere este "corectă" sau "incorectă" (va exista mai multe despre asta în tutorialul următor). Ea analizează (NSString *) Răspuns și produce un sunet corespunzător conținutului NSString.
Sunetul este creat cu SKAction obiect. Creează un obiect de sunet și joacă un sunet specific. Din nou, aceasta se produce numai dacă proprietatea sunetului (dată de NSUserDefaults) este pornit.
-(void) touchWillProduceASound: (NSString *) răspuns lung soundFlag = [implicit integerForKey: @ "sunet"]; dacă (soundFlag == 1) SKAction * sunet; dacă ([answer esteEqualToString: @ "False"]) sound = [SKAction playSoundFileNamed: @ "beep.mp3" waitForCompletion: YES]; NSLog (@ "interior"); [auto runAction: sunet];
Rulați proiectul și testați noile interacțiuni de muzică și sunet. Activați și dezactivați sunetul și muzica UISwitch-urilor și treceți la scena Jocului nou pentru a le testa corect.
Acesta este sfârșitul primului tutorial! În acest moment puteți iniția și configura un proiect SpriteKit, adăugați și inițializați SKScene obiecte, navigați între SKScene obiecte, interacționează între cadrele SpriteKit și UIKit și adaugă și elimină sunete și muzică. În următoarele tutoriale, vă veți ocupa de Interface Creation și Game Logic.
