iOS SDK Bygg et fakta-spill - Prosjektoppsett

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.


Introduksjon

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:


Det ferdige fakta spillet

1. Første oppsett

Starte på nytt SpriteKit Xcode prosjekt og navn det fakta. Utplasseringsinformasjonen som brukes over de tre delene er:

  • Distribusjonsmål: 7
  • Enheter: iPad
  • Enhetsretning: Portrett
  • Skjul statuslinjestil

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.


2. Bakgrunn, etiketter og knapper

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:


Root-grensesnitt

Det er nå på tide å legge til flere klasser til prosjektet ditt.


3. Nytt spill og valg SKScenes

Trinn 1

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); 

Steg 2

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:

  • Legg til -(void) didMoveToView: (SKView *) visning metode
  • Legg til et UIButton-objekt
  • Konfigurer UIButton
  • Legg til @selector metode
  • Importer MyScene.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.


4. Valg SKScene

Trinn 1

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];

Steg 2

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:


Alternativer Grensesnitt

Trinn 3

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.


Konklusjon

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.