Denne opplæringen vil lære deg hvordan du bruker Sprite Kit-rammeverket for å lage et spørsmålbasert fakta-spill. Den er designet for både nybegynnere og avanserte brukere. Underveis vil du bruke Sprite Kit-kjernen. Facts Game-serien er delt inn i tre opplæringsprogrammer for å dekke hvert emne helt.
Denne serien er delt inn i tre opplæringsprogrammer: Prosjektoppsett, Grensesnittoppretting og Game Logic. Hver del vil gi et praktisk resultat, og summen av alle deler vil produsere det endelige spillet. Etter tre delseriene vil leserne kunne lage et enkelt spørsmål og svar-trykkspill med lyder, animasjoner, menyer, regler, timere og UIKit-interaksjon. Til tross for at hver del kan leses selvstendig, foreslår vi at du følger veiledningene i orden for å få en bedre forståelse. Vi har også tatt med kildekoden for hver del separat, og gir dermed en måte å starte opplæringen på.
På slutten av denne opplæringen vil resultatet se slik ut:
Starte på nytt SpriteKit
Xcode prosjekt og navn det fakta. Utplasseringsinformasjonen som brukes over de tre delene er:
Merk at følgende fire rammer er automatisk inkludert i prosjektet: Coregraphics
, UIKit
, SpriteKit
, og Fundament
. Du vil se tre klasser, et bilde (Spaceship.png
) og a Main.storyboard
fil. Du kan slette bildet siden du ikke vil bruke det.
Åpne nå Myscene.m
og kommentere hele -(void) berørerBegan: (NSSet *) berører medEvent: (UIEvent *) hendelse
metode. Du trenger ikke å lage en trykkbevegelse i denne scenen fordi du vil bruke flere UIKIT UIButtons
for brukerinteraksjon.
Begynn med å endre bakgrunnsfargen til SKScene ved å endre self.backgroundColor
eiendommer. Legg merke til at den bruker en SKColor
objekt med tre egenskaper for røde, blå og grønne komponenter. Endre nå mylabel
Tekst til "Fakta !!" eller til en annen tittel av interesse.
Det neste trinnet er å legge til de nødvendige ressursene for prosjektet ditt; finn dem i ressursmappen. Til tross for at du ikke vil bruke alle ressursene nå, bør du legge dem alle sammen. Siden du vil bruke UIKit-rammen, legger du til en bestemt metode -(void) didMoveToView: (SKView *) visning
Det oppdager om sceneovergangen oppstod uten problemer. Hvis det ikke oppstår problemer, laster appen inn ressurser på skjermen. Legg til denne metoden i koden din. Innsiden vil du erklære tre knapper: en for å starte spillet, en for alternativer, og den siste til å avslutte appen.
Legg til tre UIButtons
til din MyScene.m
. Det vil se slik ut:
@implementation MyScene UIButton * startButton; UIButton * OptionsButton; UIButton * exitButton;
Hver knapp har spesifikke konfigurasjoner angående rammens plassering og størrelse, bakgrunnsfargen og bakgrunnsbildet. Du bør prøve å lage en UIButton
og legg det til scenevisningen. Knappene skal se ut som følgende utdrag:
-(void) didMoveToView: (SKView *) visning startButton = [UIButton buttonWithType: UIButtonTypeRoundedRect]; startButton.frame = CGRectMake (CGRectGetMidX (self.frame) -100, CGRectGetMidY (self.frame), 200, 70.0); startButton.backgroundColor = [UIColor clearColor]; [startButton setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; UIImage * buttonImageNormal = [UIImage imageNamed: @ "StartBtn.png"]; UIImage * strechableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [startButton setBackgroundImage: strechableButtonImageNormal forState: UIControlStateNormal]; [self.view addSubview: startButton]; optionsButton = [UIButton buttonWithType: UIButtonTypeRoundedRect]; optionsButton.frame = CGRectMake (CGRectGetMidX (self.frame) -100, CGRectGetMidY (self.frame) +90, 200, 70.0); optionsButton.backgroundColor = [UIColor clearColor]; [optionsButton setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; UIImage * buttonOptionsImageNormal = [UIImage imageNamed: @ "OptionsBtn.png"]; UIImage * strechableButtonOptionsImageNormal = [buttonOptionsImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [optionsButton setBackgroundImage: strechableButtonOptionsImageNormal forState: UIControlStateNormal]; [self.view addSubview: optionsButton]; exitButton = [UIButton buttonWithType: UIButtonTypeRoundedRect]; exitButton.frame = CGRectMake (CGRectGetMidX (self.frame) -100, CGRectGetMidY (self.frame) +180, 200, 70,0); exitButton.backgroundColor = [UIColor clearColor]; [exitButton setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; UIImage * buttonExitImageNormal = [UIImage imageNamed: @ "ExitBtn.png"]; UIImage * strechableButtonExitImageNormal = [buttonExitImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [exitButton setBackgroundImage: strechableButtonExitImageNormal forState: UIControlStateNormal]; [self.view addSubview: exitButton];
Løpe
prosjektet og se det nye rotgrensesnittet. Hvis du vil, kan du justere plasseringen, størrelsen og posisjonen til grensesnittobjektene. Hvis du vil lære mer om SKLabelNode
eller UIButton
, Jeg anbefaler deg å leke med disse klassene litt mer. Grensesnittet bør se ut som det følgende bildet:
Det er nå på tide å legge til flere klasser til prosjektet ditt.
Siden du har lagt til flere knapper, er det nå på tide å bruke dem til å omdirigere brukeren til et annet grensesnitt. Legg til to nye klasser. Velge Fil> Ny> Fil og Objective-C klasse. Oppgi klassene FactsScene
og OptionsScene
. Merk at begge vil være en superklasse av SKScene
.
Fire nye filer er tilgjengelige i prosjektet ditt: FactsScene.h
, FactsScene.m
, OptionsScene.h
, og OptionsScene.m
. Merk at implementeringsfilene i begge klassene er nesten tomme. Derfor må du legge til klasseinitialiseringene. For begge klassene bruk -initWithSize:
metode. Prøv og legg til det selv. Hvis du har problemer, vil følgende utdrag hjelpe deg:
-(id) initWithSize: (CGSize) størrelse hvis (selv = [super initWithSize: size]) NSLog (@ "Opstions Scene"); returner selv;
Igjen bør du bruke det for begge klassene. Nå som du har klassens initialisatorer, er det nå på tide å endre UIButton
kode fra det siste trinnet for å skifte mellom klasser. Gå tilbake til MyScene.m
og importer begge klassene i importen:
#import "OptionsScene.h" #import "FactsScene.h"
Nå i start knapp
, optionsButton
, og exitButton
, du må legge til en egendefinert handling. På hver knapp legger du til den tilsvarende koden.
[startButton addTarget: selvhandling: @selector (moveToGame) forControlEvents: UIControlEventTouchUpInside]; [optionsButton addTarget: selvhandling: @selector (moveToOptions) forControlEvents: UIControlEventTouchUpInside]; [exitButton addTarget: selvhandling: @selector (endApplication) forControlEvents: UIControlEventTouchUpInside];
Du bør se tre advarsler ("svart valgt"). Ikke bekymre deg! Det er nå på tide å legge til disse metodene i klassen din.
-(void) moveToGame - (void) moveToOptions - (void) endApplication
Hver og en er ansvarlig for en bestemt handling, og navnet på hver metode er selvforklarende. De -(void) moveToGame
og -(void) moveToOptions
metoder er like, siden begge brukes til å skape overgang fra dette SKScene
til en annen. Ved hver metode bør du opprette en SKScene
destinasjonsobjekt og overgangsobjekt, og presentere den nye scenen. Merk at siden du bruker UIKit-objekter, må du også fjerne dem fra scenen på SKScene
overganger. Hvis du opplever problemer med disse trinnene, vil følgende utdrag veilede deg:
-(void) moveToGame NSLog (@ "moveToGame"); FactsScene * factsScene = [[FactsScene alloker] initWithSize: CGSizeMake (CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame))]; SKTransition * overgang = [SKTransition revealWithDirection: SKTransitionDirectionUp varighet: 1]; [startButton removeFromSuperview]; [optionsButton removeFromSuperview]; [exitButton removeFromSuperview]; [self.scene.view presentScene: factsScene overgang: overgang]; - (void) moveToOptions NSLog (@ "moveToOptions"); OptionsScene * optionsScene = [[OptionsScene alloker] initWithSize: CGSizeMake (CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame))]; SKTransition * overgang = [SKTransition revealWithDirection: SKTransitionDirectionLeft varighet: 1]; [startButton removeFromSuperview]; [optionsButton removeFromSuperview]; [exitButton removeFromSuperview]; [self.scene.view presentScene: optionsScene overgang: overgang];
Den siste metoden -(ugyldig) endapplikasjon
er enklere siden det bare brukes til å avslutte søknaden.
-(void) endApplication [startButton removeFromSuperview]; [optionsButton removeFromSuperview]; [exitButton removeFromSuperview]; exit (0);
Det er nå tid til Løpe
koden og test de nye funksjonene. Hvis alt er bra, bør du kunne endre standardvisningen til Nytt spill
se og alternativer
utsikt. Du kan imidlertid ikke gå tilbake til hovedmenyen. La oss forandre det akkurat nå.
De neste trinnene er å legge til en UIButton til alternativer
scene, programmer den for å gjøre en overgang tilbake til hovedmenyen, og velg å opprette en overgangseffekt (eller ikke). For å gjøre dette er det nødvendig med flere trinn:
-(void) didMoveToView: (SKView *) visning
metode@selector
metodeMyScene.h
Først, gå til OptionsScene.h
og legg til:
@property (nonatomic, behold) UIButton * backButton;
Endre oppmerksomheten til OptionsScene.m
. Utdragene for pseudokoden er å legge til didMoveToView
metode, UIButton, og knappkonfigurasjonen.
-(void) didMoveToView: (SKView *) visning _backButton = [UIButton buttonWithType: UIButtonTypeRoundedRect]; _backButton.frame = CGRectMake (CGRectGetMidX (self.frame) -100, CGRectGetMidY (self.frame) +180, 200, 70,0); _backButton.backgroundColor = [UIColor clearColor]; [_backButton setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; UIImage * buttonExitImageNormal = [UIImage imageNamed: @ "ExitBtn.png"]; UIImage * strechableButtonExitImageNormal = [buttonExitImageNormal stretchableImageWithLeftCapWidth: 12 topCapHeight: 0]; [_backButton setBackgroundImage: strechableButtonExitImageNormal forState: UIControlStateNormal]; [_backButton addTarget: selvhandling: @selector (moveToHome) forControlEvents: UIControlEventTouchUpInside]; [self.view addSubview: _backButton];
Deretter legger du til @selector
metode.
-(void) moveToHome MyScene * myScene = [[MyScene alloker] initWithSize: CGSizeMake (CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame))]; [_backButton removeFromSuperview]; [self.scene.view presentScene: myScene];
Løpe
Koden din for å sjekke om alt er i gang. Du kan nå hoppe fra rotgrensesnittet til OptionsScene
og tilbake igjen. Nå kan vi fylle ut alternativ-scenen.
Spillalternativene er hvor brukeren kan endre spillets konfigurasjoner. For nå vil du bare fokusere på to alternativer: musikk og lyd. Du må legge til en SKLabelNode
, en UISwitch
, og en AVAudioPlayer
ha innvendinger OptionsScene.h
:
@property (nonatomic, behold) IBOutlet UISwitch * musicSwitch; @property (nonatomic, behold) IBOutlet UISwitch * soundSwitch; @property (nonatomic, behold) SKLabelNode * soundTitle; @property (nonatomic, behold) SKLabelNode * musicTitle;
Så på OptionsScene.m
inne i didMoveToView
metode, tilordne objektene som:
_soundSwitch = [[UISwitch alloc] initWithFrame: CGRectMake (CGRectGetMidX (self.frame) +50, CGRectGetMidY (self.frame) -26, 100, 100)]; [_ soundSwitch addTarget: selvhandling: @selector (flipMusicAndSound :) forControlEvents: UIControlEventValueChanged]; [self.view addSubview: _soundSwitch]; _musicSwitch = [[UISwitch tildeling] initWithFrame: CGRectMake (CGRectGetMidX (self.frame) +50, CGRectGetMidY (self.frame) +50, 100, 100)]; [_musicSwitch addTarget: selvhandling: @selector (flipMusicAndSound :) forControlEvents: UIControlEventValueChanged]; [self.view addSubview: _musicSwitch]; _soundTitle = [SKLabelNode labelNodeWithFontNamed: @ "Chalkduster"]; [_soundTitle setText: @ "Sound"]; [_soundTitle setFontSize: 40]; [_soundTitle setPosition: CGPointMake (CGRectGetMidX (self.frame) -80, CGRectGetMidY (self.frame))]; [self addChild: _soundTitle]; _musicTitle = [SKLabelNode labelNodeWithFontNamed: @ "Chalkduster"]; [_musicTitle setText: @ "Music"]; [_musicTitle setFontSize: 40]; [_musicTitle setPosition: CGPointMake (CGRectGetMidX (self.frame) -80, CGRectGetMidY (self.frame) -80)]; [self addChild: _musicTitle];
Du vil få en advarsel. For å rette opp det, legg til flipMusicAndSound
metode. Denne metoden kontrollerer tilstanden til _soundSwitch
og _musicSwitch
UISwitches, og setter en standardnøkkel til hver egenskap ved hjelp av NSUserDefaults
. Før du fullfører metoden, bør du legge til NSUserDefaults
motsette seg klassen.
@implementering OptionsScene NSUserDefaults * standard;
Da bør du allokere den i initWithSize
metode som:
standard = [NSUserDefaults standardUserDefaults];
Nå er du klar til å bruke fordelene ved NSUserDefaults
. Du vil bruke den til å lagre tilstanden til lyd- og musikkegenskapene over hele appen. Du kan skrive og fullføre flipMusicAndSound
metode. Du vil bruke heltall
verdi 1 for å sette lyden og musikken på, og 0 ellers. De flipMusicAndSound
er under.
- (IBAction) flipMusicAndSound: (id) avsender hvis (_musicSwitch.on) [standard setInteger: 1 forKey: @ "music"]; else [standard setInteger: 0 forKey: @ "music"]; hvis (_soundSwitch.on) [standardinnstillingerInteger: 1 forKey: @ "lyd"]; else [standard setInteger: 0 forKey: @ "sound"];
Hvis du Løpe
prosjektet og spill med begge brytere, vil du se at hver gang du går til OptionsScene
begge bryterne har en standardtilstand, i stedet for den sist definerte tilstanden. For å endre det, må vi lese NSUserDefaults
objekt på didMoveToView
metode.
Du vil definere to variabler for lyd og musikk og sjekke hver inneboende eiendomsnøkkel. Det er en veldig enkel og logisk beslutningstest. Hvis du er usikker på hvordan du gjør dette, vil neste utdrag hjelpe deg:
lang lydDefaults = [standard integerForKey: @ "lyd"]; lang musicDefaults = [standard integerForKey: @ "music"]; hvis (soundDeults == 1) [_soundSwitch setOn: YES animated: YES]; ellers [_soundSwitch setOn: FALSE animated: YES]; hvis (musicDeults == 1) [_musicSwitch setOn: YES animated: YES]; ellers [_musicSwitch setOn: FALSE animated: YES];
Det siste trinnet i OptionsScene.m
filen er å fjerne UISwitch-elementene fra overvåkingen hver gang brukeren trykker på tilbakeknappen:
[_soundSwitch removeFromSuperview]; [_musicSwitch removeFromSuperview];
Her er en illustrasjon av alternativgrensesnittet:
Flytt til FactsScene.m
. Nå kan vi legge til lyd- og musikkelementene. Som med OptionsScene
, vi må bruke NSUserDefaults
å få verdien for musikk og lyd. Vi vil også trenge et objekt for å lagre musikkbanen og en annen for iOS-musikkspilleren. Dermed vil vi deklarere dem som:
@implementation FactsScene NSUserDefaults * standard; NSString * musicPath;
Også i FactsScene.h
:
@property (ikkeatomisk, sterk) AVAudioPlayer * musicPlayer;
Du må erklære (som du gjorde med siste klasse) metoden -(void) didMoveToView: (SKView *) visning
. Innsiden må du sjekke om musikk- og lydinnstillingene er på og tilordne musikkinnstillingene. Begge kan oppnås gjennom:
musicPath = [[NSBundle mainBundle] pathForResource: @ "music" ofType: @ "mp3"]; _musicPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL: [NSURL filURLWithPath: musicPath] feil: NULL]; _musicPlayer.numberOfLoops = -1; // loop forever _musicPlayer.volume = 0,7; lang musicFlag = [standard integerForKey: @ "music"]; if (musicFlag == 1) [_musicPlayer play]; ellers [_musicPlayer stop];
Ovennevnte kode starter eller stopper bare musikken hvis eiendommen er på. Vi ønsker også å lage lyder når et trykk oppstår. Så, vi må ta kontakten og reagere tilsvarende.
Husker du -(void) berørerBegan: (NSSet *) berører medEvent: (UIEvent *) hendelse
metode fra MyScene.m
implementasjonsfil? Du vil definere den og bruke den her.
-(ugyldig) berørerBegan: (NSSet *) berører withEvent: (UIEvent *) hendelse for (UITouch * berør berøring) [self touchWillProduceASound: @ "False"];
Vær oppmerksom på at -(void) touchWillProduceSound: (NSString *) svar
er ikke erklært ennå. Erklære det. Det brukes til å teste om en bestemt berøring er "riktig" eller "feil" (det vil være mer på det i neste opplæring). Den analyserer (NSString *) svar
og produserer en lyd tilsvarende til innholdet av det NSString.
Lyden er opprettet med SKAction
gjenstand. Den skaper et lydobjekt og spiller en bestemt lyd. Igjen, dette skjer bare hvis lydegenskapen (gitt av NSUserDefaults
) er på.
-(void) touchWillProduceSound: (NSString *) svar long soundFlag = [standard integerForKey: @ "sound"]; if (soundFlag == 1) SKAction * lyd; hvis ([svar isEqualToString: @ "False"]) lyd = [SKAction playSoundFileNamed: @ "beep.mp3" waitForCompletion: YES]; NSLog (@ "innsiden"); [self runAction: lyd];
Kjør prosjektet og test de nye musikk- og lydinteraksjonene. Aktiver og deaktiver både UISwitches lyd og musikk og flytt til New Game-scenen for å teste dem riktig.
Dette er slutten på den første opplæringen! På dette tidspunktet kan du initiere og konfigurere et SpriteKit-prosjekt, legge til og initialisere SKScene
objekter, navigere mellom SKScene
objekter, samspill mellom SpriteKit og UIKit-rammer, og legg til og fjern lyder og musikk. I de følgende opplæringsprogrammene skal du håndtere Interface Creation og Game Logic.