Bygg et Caterpillar spill med Cocos2D Introduksjon

I denne serien vil vi gjenskape det populære Atari-spillet Centipede ved hjelp av Cocos2D-spillmotor for iOS. Centipede ble opprinnelig utviklet for Atari og utgitt på Arcaden i 1980. Siden da har den blitt portet til omtrent enhver plattform som er tenkelig. For vårt formål vil vi ringe spillet Caterpillar.

Serieoversikt

Denne serien vil fokusere sterkt på å utnytte alt Cocos2D har å tilby for å lage et komplett spill fra start til slutt. Vi vil også bruke noen andre verktøy som Texture Packer for å hjelpe oss underveis. Ved slutten av denne serien vil du ha en fullt funksjonell Centipede klon som inneholder grafikk, enkle animasjoner, brukerinteraksjon, kunstig intelligens, spilllogikk og lyd.

Caterpillar HD, prosjektet denne serien lærer deg å bygge, er en ekte spill tilgjengelig på iTunes App Store gratis. Så den beste måten å se hva denne serien handler om, er å laste ned spillet og prøve det selv!

Organisering av serien

Denne serien er organisert i 7 separate deler som vil bli utgitt i løpet av den kommende måneden eller så.

Del 1 - Vi vil være fokusert på å få dine eiendeler og Cocos2D-prosjekt satt opp. Jeg vil vise deg hvordan du bruker Texture Packer for å forberede dine eiendeler, samt hvordan du starter et nytt Cocos2D-prosjekt, laster eiendelene og starter tittelskjermbildet.
Del 2 - I denne delen vil vi sette opp spillområdet. Dette vil inkludere å få alle sprites på plass og lære å tegne spillbrettet.
Del 3 - Vi skal bygge vår grunnleggende larve og få den til å bevege seg over skjermen.
Del 4 - Dette vil være den mest dyptgående delen. Det handler om Caterpillars kunstige intelligens og hvordan det samhandler med verden. Ta med tankekapene til denne.
Del 5 - På et tidspunkt må vi gjøre spillet spillbart av noen. Denne delen fokuserer på spillerinteraksjon og missilobjektet som brukes til å drepe larven.
Del 6 - Her vil du lære om å gjøre grunnleggende kollisjonsdeteksjon med Cocos2D. Vi viser hvordan hver gjenstand samhandler for å drive spillet fremover.
Del 7 - I denne innpakningen av serien legger vi på polishen med spillelyd, scoring og restart.

Trinn 1: Få Cocos2D

Før du begynner, må du laste ned og installere et par verktøy. Den første er Cocos2D-spillmotor. Du kan hente den fra deres hjemmeside på http://cocos2d-iphone.org/download.

Når du er lastet ned, må du installere sine Xcode-maler. Dette vil gjøre livet ditt mye enklere i fremtiden når du vil sette opp et prosjekt ved hjelp av Cocos2D. Her er deres veiledning om hvordan du gjør det. Ikke bekymre deg, dette er veldig enkelt: bare last ned malen tarball og deretter untar det inn ~ / Library / Developer / Xcode / Maler på maskinen din. Neste gang du åpner Xcode og oppretter et nytt prosjekt, bør du se en Maler-kategori med flere Cocos2D-alternativer.

Trinn 2: Texture Packer

Texture Packer er et fantastisk verktøy som vil ta et sett med teksturer, gjøre dem til en eneste tekstur, og skriv ut en plist som forteller Cocos2D hvordan du bruker dem. Å ha en enkelt tekstur kan spare deg for mye diskplass, lastetid og kompleksitet.

For å komme i gang, last ned Texture Packer fra http://texturepacker.com. Du kan bruke demoversjonen for denne opplæringen, men jeg sterk anbefaler å kjøpe dette verktøyet. Det er vel verdt pengene!

Importere eiendeler til Texture Packer

Begynn å laste ned vedlegget for denne opplæringen. Den inneholder både standard- og høydefinisjonsversjonene av bildene våre. Husk at iPhone 3GS er ledig nå, så det er fortsatt mange brukere som ikke bruker retina-displayenheter. La oss ikke forlate dem. ;)

Å være at vi har 2 separate versjoner av bildene våre, må du utføre denne prosessen to ganger. Bare dra alle bildene i HD-mappen unntatt tittel-hd.png og game-over-hd.png inn i Texture Packer. Det vil bli klart senere hvorfor vi ikke inkluderer disse to bildene.

Eksportere eiendeler ut av teksturpakker

Texture Packer vil automatisk legge ut bildene for deg og lage et enkelt bilde som er så lite som det muligens kan være. Vær oppmerksom på at Cocos2D krever at alle bildedimensjoner skal leveres i kraft på 2.

Nå som bildene er lagt ut, klikker du på Publiser-knappen øverst. Navngi utdataene caterpillar-hd. Pass på at du fjerner bildene fra Texture Packer og gjenta denne prosessen for alle standarddefinisjonsbildene i SD-mappen og navnet deres utdata larver.

Du bør nå se totalt 4 filer: caterpillar-hd.png, caterpillar-hd.plist, caterpillar.png, og caterpillar.plist.

Trinn 3: Opprette et nytt Cocos2D-prosjekt

Åpne Xcode og opprett et nytt Cocos2D-program. Dette bør vises i din nye prosjektmeny etter installering av maler som nevnt ovenfor.

Gi navn på dette prosjektet Caterpillar og Xcode vil sette opp alt som trengs for å starte et grunnprosjekt.

Trinn 4: Spillspillet

Cocos2D bruker filmterminologi til å organisere sine objekter (Director, Scene, etc ...). Regissøren er ansvarlig for å kjøre og vedlikeholde alle scenene i søknaden.

Før vi går videre, drar du alle larvefiler du opprettet i forrige del i prosjektet ditt, så vel som de få stragglers (title.png, tittel-hd.png, spill-over.png, game-over-hd.png). Pass på at du merker av for å kopiere filene til prosjektkatalogen.

Som standard er du utstyrt med en ny scene og et lag som heter HelloWorldLayer. Siden vi skal skape vår egen scene, trenger vi ikke dette i vårt prosjekt. Bare slett både .h og .m filene.

Opprett en ny fil som er en underklasse av CCLayer kalt GameLayer. Lim inn i følgende kode for GameLayer.h.

 #importere "cocos2d.h" @interface GameLayer: CCLayer  @property (nonatomic, behold) CCSpriteBatchNode * spritesBatchNode; + (CCScene *) scene; @slutt

Dette er stort sett det samme innholdet som var i HelloWorldLayer med navn endret til GameLayer og tillegget til spriteBatchNode-egenskapen.

I Cocos2D tillater en CCSpriteBatchNode oss å gruppere alle våre sprites opp slik at OpenGL ES viser dem i en samtale. OpenGL ES er i hovedsak en statlig maskin, og bytte mellom stater er ofte svært kostbart, så du vil ønske å gjøre det så sjeldent som mulig. Du kan få Cocos2D til å tegne alle dine sprites uten en CCSpriteBatchNode, men du er ikke garantert når de blir tegnet og påvirker derfor ytelsen.

Scenemetoden er ganske enkelt en klassenivåmetode som vil returnere en singleton-forekomst av vår GameScene. Dette vil bare bli kalt når du forteller regissøren å starte spillet vårt. Vi vil se implementeringen av det i en senere del.

Åpne GameLayer.m og legg til følgende kode:

 #importere "GameLayer.h" @implementation GameLayer @synthesize spritesBatchNode = _spritesBatchNode; + (CCScene *) scene CCScene * scene = [CCScene node]; GameLayer * layer = [GameLayer node]; [scene addChild: lag]; retur scene;  - (void) dealloc [_spritesBatchNode release]; [super dealloc];  - (id) init hvis ((selv = [super init])) [CCTexture2D setDefaultAlphaPixelFormat: kCCTexture2DPixelFormat_RGBA4444]; // 1. self.spritesBatchNode = [CCSpriteBatchNode batchNodeWithFile: @"caterpillar.png"]; [self addChild: self.spritesBatchNode]; // 2. [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile: @"caterpillar.plist"]; [CCTexture2D setDefaultAlphaPixelFormat: kCCTexture2DPixelFormat_RGB565]; // 3. CCSprite * background = [CCSprite spriteWithSpriteFrameName: @"background.png"]; background.anchorPoint = ccp (0,0); [self.spritesBatchNode addChild: background]; [CCTexture2D setDefaultAlphaPixelFormat: kCCTexture2DPixelFormat_Default];  returner selv;  @slutt

Fra og med scenemetoden ser vi alle boilerplate-kodene for å initialisere hovedlaget for denne scenen. Vi kaller nodemetoden i laget vårt som initialiserer og returnerer det tilbake til den som ringer. Til slutt returneres den instantiated scenen. Du vil se kode akkurat slik i hver scene du lager.

Init-metoden er hvor vi skal gjøre alt vårt oppsett for spillet vårt, og laster det viktigste spritesheet inn i minnet.

Er der vi initialiserer vårt CCSpriteBatchNode-objekt med vår caterpillar.png sprite arkfil. Det vil også se etter en fil med samme navn med en .plist-utvidelse for å bestemme hvordan du bruker filen.
Etter at sprite-arket er lastet, legger vi alle sprites til Cocos2Ds CCSpriteFrameCache. Dette caches sprites slik at når vi vil bruke dem igjen og igjen, trenger vi ikke å gjenkilde dem fra disken. Jeg anbefaler sterkt at du bruker bufferen her, da det vil forbedre ytelsen drastisk.
Nå er vi i stand til å hente sprites ut av hurtigbufferen basert på deres opprinnelige filnavn. Dette er takket være caterpillar.plist-filen som informerer Cocos2D av mappings (jeg fortalte deg at Texutre Packer var praktisk). I dette tilfellet henter vi bakgrunnen ut av hurtigbufferen og legger den til som et barn i vårt lag på posisjon 0,0 (fra øverste venstre hjørne). Dette vil vise vår spillbakgrunn.

Trinn 5: Tittel Scene

Før vi kan begynne å spille spillet, må vi presentere tittelskjermen til spilleren. For å gjøre dette må du opprette en annen ny fil som er en underklasse av CCLayer kalt TitleLayer.

Filen TitleLayer.h er veldig rett frem. Legg til følgende kode:

 #importere "cocos2d.h" @ Interface TitleLayer: CCLayer + (CCScene *) scene; @slutt

Det eneste vi la til var erklæringen for scenemetoden. Nå åpner du TitleLayer.m og legger til følgende kode:

 #importere "TitleLayer.h" #importere "GameLayer.h" #importere "CCTransition.h" @implementation TitleLayer + (CCScene *) scene CCScene * scene = [CCScene node]; TitleLayer * layer = [TitleLayer node]; [scene addChild: lag]; retur scene;  - (id) init hvis ((selv = [super init])) [CCTexture2D setDefaultAlphaPixelFormat: kCCTexture2DPixelFormat_RGB565]; // 1 CCSprite * background = [CCSprite spriteWithFile: @"title.png"]; background.anchorPoint = ccp (0,0); [self addChild: background]; // 2 [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate: selvprioritet: 0 swallowsTouches: YES];  returner selv;  - (BOOL) ccTouchBegan: (UITouch *) berør medEvent: (UIEvent *) hendelse // 3 [[CCDirector sharedDirector] replaceScene: [CCTransitionFade transitionWithDuration: .5 scene: [GameLayer scene] withColor: ccWHITE]]; returnere JA;  @slutt

Koden for dette skal se veldig ut som GameLayer-koden som vi diskuterte ovenfor. Her er de få sentrale forskjellene.

Dette laster bakgrunnsbildet for tittelskjermbildet og viser det i vårt TitleScene hovedlager.
For at et lag i Cocos2D skal kunne akseptere berører, må du aktivere det ved hjelp av swallowsTouches-metoden. Dette vil påberope noen av berøringsoppringingsmetodene til mottakerdelegateklassen. I vårt tilfelle bryr vi oss bare om ccTouchesBegan-metoden.
Når brukeren tapper skjermen, vil denne metoden brenne. Innvendig bruker vi regissøren til å overføre scenen fra TitleScene til GameScene ved hjelp av en fadeovergang. Du kan se alle de forskjellige overgangstypene inne i filen CCTransition.h.

Trinn 6: Kjører prosjektet

Hvis du prøver å bygge og kjøre programmet på dette tidspunktet, får du en feil. Det er fordi AppDelegate forsøker fortsatt å laste HelloWorldLayer som du slettet før. Vi må endre koden og fortelle den å starte med vår TitleLayer ved oppstart av programmet.

Åpne AppDelegate.m og importer Titlelageren:

 #importere "TitleLayer.h"

Sørg også for å slette importen til HelloWorldLayer. Deretter navigerer du til linje 113 og endrer [HelloWorldLayer scene] til [TitleLayer scene].

 [[CCDirector sharedDirector] runWithScene: [TitleLayer scene]];

Nå, trykk Run-knappen ... Hvis du limte koden riktig, bør du se noe slikt:

Det ser ut til at vårt spill har vært feilrettet. Dette er en enkel løsning. Som standard er Cocos2D avhengig av visningskontrollen som vises i den for å bestemme riktig retning. Den er for øyeblikket satt til liggende modus. Åpne RootViewController.m og se i metoden "shouldAutorotateToInterfaceOrientation". Endre returerklæringen til denne metoden for å være dette:

 returnere (UIInterfaceOrientationIsPortrait (interfaceOrientation));

Dette vil bare fortelle visningskontrolleren og Cocos2D for å bare støtte portrettmodus. Nå, når du klikker Run, vil spillet være riktig orientert og vil fungere som du forventer.

Konklusjon

Det vi har nå er grunnarbeidet for vår Cocos2D-implementering av Centipede. Det er ikke mye å se på akkurat nå, men vet at dette fundamentet er svært viktig for utviklingen vår fremover.

Neste gang

I den neste opplæringen i denne serien skal vi sette opp grensesnittelementene, inkludert score, liv og spirefeltet.

Glad koding!

Kode