miten tehdä peli kuten Fruit Ninja Box2D ja Cocos2D – Osa 1

miten tehdä peli kuten Fruit Ninja Box2D ja Cocos2D – Osa 1

tämä on viesti iOS Tutorial tiimin jäsen Allen Tan, iOS kehittäjä ja toinen perustaja White Widget. Hänet löytää myös Google+: sta ja Twitteristä.

tässä opetusohjelmassa opit tekemään iPhonelle Sprite-leikkuupelin, joka on samanlainen kuin Halfbrick Studiosin Fruit Ninja käyttäen tehokkaita Cocos2D-ja Box2D-kirjastoja sekä joitakin valmiita työkaluja.

useimmissa viipalepeleissä, kun piirrät leikatun viivan Spriten kautta, peli yleensä muuntaa sprite-kuvan kahdeksi valmiiksi piirretyksi sprite-kuvaksi, jossa viipale on aina keskellä, riippumatta siitä, mistä leikkaat.

mutta tämä opetusohjelma esittelee vielä siistimmän tekniikan. Meidän hedelmät voidaan leikata useita kertoja, ja ne jaetaan dynaamisesti perustuu tarkka leikata linjat!

kuten arvata saattaa, tämä on kehittynyt tekniikka, joten tämä opetusohjelma on edistyneille Cocos2D-ja Box2D-kehittäjille. Jos olet uusi Cocos2D tai Box2D, sinun pitäisi käydä läpi (ainakin) intro Cocos2D ja intro Box2D tutorials ensin ennen kuin jatkat tätä opetusohjelma.

tämä opetussarja on jaettu kolmeen osaan:

• tässä ensimmäisessä osassa sarja, voit luoda perustan peli, ja oppia luomaan kuvioitu polygoneja.
• toisessa osassa näytetään, miten & halkaistaan nämä kuvioidut monikulmiot.
• kolmannessa osassa näytetään, miten tästä voi tehdä kokonaisen pelin lisäämällä pelattavuutta ja tehosteita.

haluan kiittää erityisesti Rick Smorawskia siitä, että hän loi perustan projektille, johon tämä opetusohjelma perustuu. Hän oli vastuussa tämän flash-pohjainen viipalointi demo osaksi Cocos2D, ja myös siirtää CCBlade ja PRKit Cocos2D 2.0.

Jatka lukemista ja katso videolta, mitä teet ja aloita uusien hienojen tekniikoiden opettelu!

pelin Demo

tässä esittelyvideo, josta näet, mitä teet tässä opetussarjassa:

kuten mainitsin, näet, että hedelmien leikkuuefekti on todella dynaaminen. Hedelmä leikataan dynaamisesti sen mukaan, missä viipaloit, ja koska voit viipaloida esineitä useita kertoja, voit todella pilkkoa asioita!

voit nähdä, että toteutat myös siistin viipaloinnin trail-efektin, joitain hiukkasjärjestelmiä, pelilogiikkaa ja ääniä maustamaan asioita.

on paljon tutkittavaa – joten aloitetaan!

Getting Started: Project Setup

käytät Cocos2D 2: ta.X tässä projektissa, joten mene eteenpäin ja lataa se, jos sinulla ei ole sitä jo. Huomaa, että voit vapaasti käyttää Cocos2D 1: tä.X sijasta 2.X. Kanssa 1.X, voit ohittaa osia muuntaa PRKit ja CCBlade Cocos2D 2.X, mutta muista kiinnittää huomiota muihin pieniin muutoksiin, joita teet näihin luokkiin.

lataamisen jälkeen kaksoisnapsauta tar-näppäintä avataksesi sen arkiston ja asenna sitten mallineet seuraavilla komennoilla päätteeseen:

cd ~/Downloads/cocos2d-iphone-2.0-beta./install-templates.sh -f -u

Käynnistä Xcode ja luo uusi projekti iOS\cocos2d v2: lla.x\cocos2d iOS Box2d malli ja nimi se CutCutCut.

uuden projektisi pitäisi näyttää jokseenkin tältä:

First things first-sapluunaa kannattaa hieman siivota, jotta pääsee hyvään lähtöpisteeseen.

Open HelloWorldLayer.h ja poista seuraava rivi:

CCTexture2D *spriteTexture_;// weak ref

Vaihda kohteeseen HelloWorldLayer.mm ja tee seuraavat muutokset

// Remove this line from the top#import "PhysicsSprite.h"// Replace the init method with this-(id) init{ if( (self=)) { // enable events self.isTouchEnabled = YES; self.isAccelerometerEnabled = YES; CGSize s = .winSize; // init physics ; ; } return self;}// Remove these two methods-(void) createMenu { //all content}-(void) addNewSpriteAtPosition:(CGPoint)p methods { //all content}// Remove this line from ccTouchesEnded;

tässä vaiheessa olet poistanut kaikki viittaukset PhysicsSprite helloworldlayerista, mutta älä poista tiedostoja projektista aivan vielä. Myöhemmin, sinun täytyy kopioida menetelmä, joka PhysicsSprite.mm sisältää jossain muualla, joten jätä se laittaa nyt.

paina komentoa+R kääntääksesi ja ajaaksesi projektisi, ja sinun pitäisi nähdä tyhjä näyttö, jonka ympärillä on vihreä reunus.:

jäljelle jäävässä mallikoodissa on käytössä Box2D-debug-piirros, joka piirtää rajat ruudun Box2D-kehojen ympärille. Näetkö ruudun ympärille Piirretyt ohuet vihreät viivat? Nämä ovat seinät syntyy oletuksena initPhysics menetelmä, joka tuli mallin.

vilkaise jäljellä olevaa mallikoodia varmistaaksesi, että ymmärrät, mitä tähän mennessä on meneillään – se alustaa Box2D-maailman, määrittää maa-alueen (vihreät rajat), määrittää debug-piirtämisen jne. Tämä on aika hyvä ”lähes tyhjä” lähtökohta Box2D voimme rakentaa tästä.

Resurssipaketti

lataa seuraavaksi tämän projektin resurssit ja pura tiedosto.

älä lisää kaikkea projektiin vielä; osa tiedostoista on itse asiassa vapaaehtoisia. Pidä kansio kuitenkin kätevänä – kun käyt läpi opetusohjelman, ajoittain pyydän sinua lisäämään joitakin näistä tiedostoista projektiin.

tässä mitä sisältä löytyy:

• taustakuva ja nippu Vickin tekemää hedelmätaidetta sekä muita sekalaisia kuvia Kuvat-kansiossa
• taustaäänimiksaus, joka on tehty gomixilla.se Sounds-kansiossa
• äänitehosteet, jotka on tehty bfxr: llä tai ladattu Freesound-tiedostosta Sounds-kansiossa
• kaikki Hiukkassuunnittelijan kanssa luodut hiukkasjärjestelmät Partikkelikansiossa
• Physicseditorin luoma PLIST-tiedosto, joka sisältää vertex-tiedot Fruits & Bomb-luokista Misc-kansiossa
• Fruits & Bomb-luokista Luokkakansiossa
• Fruits& Bomb-luokista 9445>
• prkit-ja Ccblade-versiot, joita käytät opetusohjelmassa luokat-kansiossa
• attribuutioluettelo resursseille, jotka ovat Attribution-lisenssin alla Misc: ssä kansio

piirtämällä kuvioituja monikulmioita prkit

tavoitteemme on leikata spritejä moneen osaan. Tyypillinen CCSprite sisältää tekstuurin ja rajaavan laatikon riippumatta siitä, minkä muotoinen kuva on. Tämä ei sovi peliimme, sillä kuvien todellisten muotojen tunteminen on ratkaiseva askel pyrittäessä luomaan spritejä, joita voidaan leikata, viipaloida ja jakaa.

sinun täytyy luoda kuvioituja monikulmioita, jotka:

• luo monikulmion/muodon ja kuvan vastaavuus (Tekstuurikartoitus)
• Näytä vain ne kuvan osat, jotka ovat monikulmion rajojen sisällä (Tekstuurikartoitus))

kumpikaan Cocos2D eikä Box2D mukana sisäänrakennettu luokka, joka käsittelee mukautettuja ominaisuuksia haluat, ja normaalisti tämä veisi joitakin kolmiomittaus yhdistettynä mukautetun OpenGL piirustus koodi.

kuulostaa kovalta oikealta?

onneksi kaikki monimutkaiset laskelmat ja piirustuskoodi, joita tarvitaan tämän saavuttamiseksi, ovat jo Prekognitiivisen tutkimuksen hyvät ihmiset kirjoittaneet. He loivat Cocos2D-kirjastoon PRKit-nimisen lisäyksen, joka käsittelee Tekstuurikartoitusta ja täyttöä.

voit aloittaa teksturoitujen polygonien käytön lataamalla PRKit: n, purkamalla sen ja vetämällä prkit-kansion projektiin. Varmista, että” Kopioi kohteita kohderyhmän kansioon ”on valittu ja” Luo ryhmiä lisättyjä kansioita ” on valittu.

huomaa, että Prkit on prekognitiivisen tutkimuksen ylläpitämä, joten se saattaa ajan mittaan päivittyä. Sekaannusten välttämiseksi resurssipakkauksemme sisältää myös tarkan version prkit: stä, jota käytin tämän opetusohjelman tekemisessä.

projektisi tulisi nyt sisältää nämä tiedostot:

käännä ja aja, niin törmäät muutamaan virheeseen:

virheet pulpahtavat esiin, koska PRKit tehtiin Cocos2D: lle 1.X, joka käyttää OpenGL ES 1.1, kun taas käytät Cocos2D 2.X, joka käyttää OpenGL ES 2.0, ja näiden kahden välillä on merkittäviä eroja.

tämän korjaamiseksi avaa PRFilledPolygon.m ja tehdä nämä muutokset:

// Add inside the initWithPoints: andTexture: usingTriangulator: methodself.shaderProgram = programForKey:kCCShader_PositionTexture];// Replace the calculateTextureCoordinates method with this-(void) calculateTextureCoordinates { for (int j = 0; j < areaTrianglePointCount; j++) { textureCoordinates = ccpMult(areaTrianglePoints,1.0f/texture.pixelsWide*CC_CONTENT_SCALE_FACTOR()); textureCoordinates.y = 1 - textureCoordinates.y; }}// Replace the draw method with this-(void) draw{ CC_NODE_DRAW_SETUP(); ccGLBindTexture2D( self.texture.name ); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); ccGLBlendFunc( blendFunc.src, blendFunc.dst); ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position | kCCVertexAttribFlag_TexCoords ); glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, 0, areaTrianglePoints); glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, 0, textureCoordinates); glDrawArrays(GL_TRIANGLES, 0, areaTrianglePointCount);}

käydään nämä muutokset läpi vähän kerrallaan.

ensin Cocos2D: ssä jokaiseen Ccnodeen on liitetty OpenGL ES 2.0 shader-ohjelma. Piirtää PRFilledPolygon, sinun täytyy haastaa sisäänrakennettu ”asema/rakenne” shader, jonka annat init menetelmällä.

seuraavaksi on määritettävä oikeat tekstuurikoordinaatit jokaiselle monikulmion pisteelle. Voit tehdä tämän, sinun täytyy tehdä kaksi muutosta calculateTextureCoordinates menetelmä:

• asteikko: koska tämä luokka tekee omat laskelmansa tekstuurinsa koordinaateille, se ei automaattisesti käsittele retina-näyttöä. Voit korjata tämän, voit vain moninkertaistaa rakenne.pixelsWide kanssa CC_CONTENT_SCALE_FACTOR-kätevä kerrannaisarvo tarjoamia Cocos2D muuntaa arvoja säännöllisesti ja verkkokalvon vastaavina.
• Flip Y: jostain syystä PRFIlledPolygon piirtää kuvioita ylösalaisin, joten tässä käännetään yksinkertaisesti y-arvo.

viimeinen, piirustuskoodi päivitetään OpenGL ES 2: een.0, samalla tavalla kuin miten CCSprite-piirustus muuttui Cocos2D 1: stä.X Cocos2D 2: lle.X:

• aloita kutsumalla CC_NODE_DRAW_SETUP (), joka valmistelee solmun piirtämistä varten.
• puhelut gldisableclientstateen() ja glenableclientstateen () ovat vanhentuneita ja hylätään.
• glvertexpointer () – ja glTexCoordPointer () – komennot on molemmat korvattu glVertexAttribPointer () – komennolla, joka hyväksyy nyt Ykkösvaihtoehdokseen Verteksiasennon tai Tekstuurikoordinaatin.
• gltexenvf: n () kokoonpano, joka vastasi Spriten toistamisesta, jos monikulmio olisi tekstuuria suurempi, korvataan kutsuilla gltexparametriin().

jos jokin näistä hämmentää, kannattaa tarkistaa OpenGL ES 2.0 for iPhone ja Custom Cocos2D 2.X Shaders tutorials lisätietoja taustatietoa. Mutta sinun ei tarvitse huolehtia siitä liikaa, koska tässä vaiheessa kaikki teemme on siirtää luokan työskennellä Cocos2D 2.X:]

käännä ja aja, niin kaikki PRKit-virheet katoavat!

on aika laittaa PRKit toimintaan. Aliluokitat prkitin PRFilledPolygon-luokan tehdäksesi perus PolygonSprite-luokan, joka piirtää hedelmämme.

PolygonSprite perustuu Prfilledpolygoniin liittämällä spriteen Box2D-rungon, ja se sisältää myös muita mukautettuja muuttujia ja menetelmiä pelin toteutuksessa oleville hedelmille.

mennään asiaan. Paina Komento + N ja luo uusi tiedosto iOS\cocos2d v2.x\CCNode-luokan malli. Tee siitä prfilledpolygonin alaluokka ja anna sille nimeksi PolygonSprite.m.

Vaihda Polygonspriteen.h ja tehdä seuraavat muutokset:

// Add to top of file#import "Box2D.h"#import "PRFilledPolygon.h"#define PTM_RATIO 32// Add inside @interfaceb2Body *_body;BOOL _original;b2Vec2 _centroid;// Add after the @interface@property(nonatomic,assign)b2Body *body;@property(nonatomic,readwrite)BOOL original;@property(nonatomic,readwrite)b2Vec2 centroid;// Add before the @end-(id)initWithTexture:(CCTexture2D*)texture body:(b2Body*)body original:(BOOL)original;-(id)initWithFile:(NSString*)filename body:(b2Body*)body original:(BOOL)original;+(id)spriteWithFile:(NSString*)filename body:(b2Body*)body original:(BOOL)original;+(id)spriteWithTexture:(CCTexture2D*)texture body:(b2Body*)body original:(BOOL)original;-(id)initWithWorld:(b2World*)world;+(id)spriteWithWorld:(b2World*)world;-(b2Body*)createBodyForWorld:(b2World*)world position:(b2Vec2)position rotation:(float)rotation vertices:(b2Vec2*)vertices vertexCount:(int32)count density:(float)density friction:(float)friction restitution:(float)restitution;-(void)activateCollisions;-(void)deactivateCollisions;

yllä oleva koodi ilmoittaa perusmuuttujat ja menetelmät, jotka tarvitset Polygonspriten luomiseen. Nämä ovat:

• body: tämä on Box2D elin, joka on kiinnitetty meidän sprite. Sitä tarvitaan fysiikan simulointiin.
• alkuperäinen: täydellisissä ja viipaloiduissa spriteissä käytetään samaa PolygonSprite-luokkaa, joten näiden kahden erottaminen toisistaan on tärkeää. Jos tämä on kyllä, se tarkoittaa, että se on leikkaamaton eli alkuperäinen esine, jonka loit, muuten se on vain pala kokonaisuutta.
• centroid: Kuvan monikulmion keskipiste ei ole aina sama kuin kuvan keskipiste,joten tämä arvo on hyvä tallentaa.
• ominaisuudet: Paljasta kaikki muuttujat käyttämällä ominaisuuksia, jotta muut luokat voivat käyttää niitä vapaasti.
• init / spriteWith*: tärkeimmät init-menetelmämme noudattavat samaa nimeämiskäytäntöä kuin Cocos2D.
• muut menetelmät: nämä ovat menetelmiä, joilla luodaan &, jotka käsittelevät liitteenä olevaa Box2D-runkoa ja sen ominaisuuksia.
• PTM_RAATIO: pikselien ja metrien suhde. Box2D tarvitsee tämän muunnosarvon, koska se käsittelee mittareita pikselien sijaan.

vaihda nopeasti Polygonspriteen.m ja nimeä se uudelleen PolygonSprite.mm. kaikilla luokilla, jotka sekoittavat Objective-C (Cocos2D) – ja C++ (Box2D) – koodia, on oltava ”.mm” – pääte, jotta sekalaisen syntaksin voi ilmoittaa kääntäjälle.

tee seuraavaksi seuraavat muutokset PolygonSprite.mm:

// Add inside the @implementation@synthesize body = _body;@synthesize original = _original;@synthesize centroid = _centroid;+(id)spriteWithFile:(NSString *)filename body:(b2Body *)body original:(BOOL)original{ return initWithFile:filename body:body original:original] autorelease];}+(id)spriteWithTexture:(CCTexture2D *)texture body:(b2Body *)body original:(BOOL)original{ return initWithTexture:texture body:body original:original] autorelease];}+(id)spriteWithWorld:(b2World *)world{ return initWithWorld:world] autorelease];}-(id)initWithFile:(NSString*)filename body:(b2Body*)body original:(BOOL)original{ NSAssert(filename != nil, @"Invalid filename for sprite"); CCTexture2D *texture = addImage: filename]; return ;}-(id)initWithTexture:(CCTexture2D*)texture body:(b2Body*)body original:(BOOL)original{ // gather all the vertices from our Box2D shape b2Fixture *originalFixture = body->GetFixtureList(); b2PolygonShape *shape = (b2PolygonShape*)originalFixture->GetShape(); int vertexCount = shape->GetVertexCount(); NSMutableArray *points = ; for(int i = 0; i < vertexCount; i++) { CGPoint p = ccp(shape->GetVertex(i).x * PTM_RATIO, shape->GetVertex(i).y * PTM_RATIO); ]; } if ((self = )) { _body = body; _body->SetUserData(self); _original = original; // gets the center of the polygon _centroid = self.body->GetLocalCenter(); // assign an anchor point based on the center self.anchorPoint = ccp(_centroid.x * PTM_RATIO / texture.contentSize.width, _centroid.y * PTM_RATIO / texture.contentSize.height); // more init stuff here later when you expand PolygonSprite } return self;}-(id)initWithWorld:(b2World *)world{ //nothing to do here return nil;}

Cocos2D: n tapaan kaikki spriteWith* – menetelmät ovat vain automaattisia initwith* – menetelmien vastineita, kun taas initwithworldilla ei ole vielä varsinaista käyttöä tälle luokalle, vaan sitä käyttävät Polygonspriten alaluokat myöhemmin.

suurin osa muutoksista löytyy initWithFile – ja initWithTexture-menetelmistä. Saada virtaus asioita, luoda hedelmä kutsutaan tässä järjestyksessä:

• initWithWorld: tämä on tarkoitettu alaluokille PolygonSprite joten et tee mitään paitsi palauta nolla, ja käsitellä sitä myöhemmin.
• initWithFile: tämä lisää tekstuurin tiedostostamme ja siirtää kaiken initwithtexturelle.
• initWithTexture: our main initialization. PRFilledPolygon tarvitsee tekstuuri ja kaikki vertices, monikulmio se täyttää. Koska edellinen vaihe jo käsitteli tekstuuriosan, tämä vaihe käsittelee vertices keräämällä ne Spriten Box2D-rungosta. Siirrettyään ne Prfilledpolygoniin, se etenee alustamaan aiemmin ilmoittamasi muuttujat.
• initWithPoints: kaikki mitä tämä tekee sisältyy PRKit: iin ja hyvä asia on, että sinun ei tarvitse enää koskea PRKit: iin nyt kun olet päivittänyt sen koodin.

vielä sisällä PolygonSprite.mm, lisää seuraavat menetelmät:

-(void)setPosition:(CGPoint)position{ ; _body->SetTransform(b2Vec2(position.x/PTM_RATIO,position.y/PTM_RATIO), _body->GetAngle());}-(b2Body*)createBodyForWorld:(b2World *)world position:(b2Vec2)position rotation:(float)rotation vertices:(b2Vec2*)vertices vertexCount:(int32)count density:(float)density friction:(float)friction restitution:(float)restitution{ b2BodyDef bodyDef; bodyDef.type = b2_dynamicBody; bodyDef.position = position; bodyDef.angle = rotation; b2Body *body = world->CreateBody(&bodyDef); b2FixtureDef fixtureDef; fixtureDef.density = density; fixtureDef.friction = friction; fixtureDef.restitution = restitution; fixtureDef.filter.categoryBits = 0; fixtureDef.filter.maskBits = 0; b2PolygonShape shape; shape.Set(vertices, count); fixtureDef.shape = &shape; body->CreateFixture(&fixtureDef); return body;}-(void)activateCollisions{ b2Fixture *fixture = _body->GetFixtureList(); b2Filter filter = fixture->GetFilterData(); filter.categoryBits = 0x0001; filter.maskBits = 0x0001; fixture->SetFilterData(filter);}-(void)deactivateCollisions{ b2Fixture *fixture = _body->GetFixtureList(); b2Filter filter = fixture->GetFilterData(); filter.categoryBits = 0; filter.maskBits = 0; fixture->SetFilterData(filter);}

yllä olevassa koodissa ylikuormitetaan ensin CCNode-asetusmenetelmä niin, että kun päivität Spriten sijainnin, myös siihen liittyvän Box2D-kappaleen asento päivittyy.

tämän jälkeen tehdään mukavuusmenetelmä Box2D-kappaleen luomiseen ja määrittelyyn. Voit luoda kehon, sinun täytyy määritellä kehon määritelmä, kehon objekti, muoto, ja telineeseen määritelmä. Mitään todellisia kovia arvoja ei tässä vielä anneta, sillä tätä menetelmää käyttävät myöhemmin Polygonspriten alaluokat.

huomioitavaa on vain kategoriat ja maskbitit. Näitä kahta käytetään kohteiden välisten törmäysten suodattamiseen siten, että jos jonkin kohteen kategoriabitti vastaa toisen kohteen maskibittiä ja päinvastoin, näiden kahden objektin välillä tapahtuu törmäys. Asetat nämä arvoon 0 ensin, koska et halua törmäyksiä tapahtuvan, kun objektit alustetaan.

lopuksi määritellään kaksi menetelmää, jotka yksinkertaisesti korvaavat kategoriabitit ja maskibitit niin, että voit aktivoida ja deaktivoida Monikulmiomme törmäykset.

vielä yksi asia PolygonSprite.mm:

-(CGAffineTransform) nodeToParentTransform{ b2Vec2 pos = _body->GetPosition(); float x = pos.x * PTM_RATIO; float y = pos.y * PTM_RATIO; if ( !isRelativeAnchorPoint_ ) { x += anchorPointInPoints_.x; y += anchorPointInPoints_.y; } // Make matrix float radians = _body->GetAngle(); float c = cosf(radians); float s = sinf(radians); if( ! CGPointEqualToPoint(anchorPointInPoints_, CGPointZero) ){ x += c*-anchorPointInPoints_.x+ -s*-anchorPointInPoints_.y; y += s*-anchorPointInPoints_.x+ c*-anchorPointInPoints_.y; } // Rot, Translate Matrix transform_ = CGAffineTransformMake( c, s, -s,c, x,y ); return transform_;}

Muistatko, kun mainitsin, että tarvitset jotain Fyysikkospritestä? Tässä se on. Kaikki tämä tekee on varmistaa, että meidän Box2D muoto ja meidän sprite ovat samassa asennossa liikkuessa. Se on valmistettu meille Cocos2D ja se tekee siitä sitäkin mahtavampi.

edellä mainitun koodin kopioimisen jälkeen voit nyt poistaa molemmat Fysikssprite.h ja PhysicsSprite.mm hankkeesta, koska olet täysin poistanut niiden hyödyllisyyttä.

käännä ja juokse, ja kaiken pitäisi olla kunnossa. PolygonSprite riittää toistaiseksi.

Hedelmiemme suunnittelu

ennen kuin luot hedelmillemme luokkia, sinun on oltava selvillä säännöistä, joita kuvien ja niiden muotojen on noudatettava. Koska kartoitat tekstuurimme yksittäisiin Box2D polygoneihin, sinun on myös noudatettava Box2D: n monikulmion rajoituksia. Sinun täytyy pitää kaksi asiaa mielessä:

• monikulmioiden tulee olla kuperia, eli yksikään sisäkulma ei ole suurempi kuin 180.
• monikulmioita saa olla enintään 8 kärkipistettä.

voit kiertää tämän rajoituksen, jos annat jokaisen kappaleen sisältää useita muotoja. Box2D voi käsitellä kovera muotoja, Jos käytät kolmiomittausmenetelmällä ja tehdä kovera muotoja pois useita kolmioita, mutta tämä on soveltamisalan ulkopuolella opetusohjelma.

jotta asiat pysyisivät yksinkertaisina, tässä tutoriaalissa on 1 Body is to 1 Shape-sääntö.

Katso näitä kahta hedelmää:

banaanin käyttäminen ei ole hyvä idea, koska se on luonnostaan kovera. Vesimeloni taas on erittäin hyvä, koska voit määritellä kuperan monikulmion, joka muistuttaa läheisesti sen muotoa.

jos määriteltäisiin Box2D: n sääntöjä noudattavat monikulmion muodot kahdelle hedelmälle, päädyttäisiin enemmän tai vähemmän näihin:

Vesimelonimonikulmio sopii kuvaan täydellisesti, kun taas Banaanimonikulmiossa on iso tyhjä tila, jossa kuva kaartuu sisäänpäin. Box2D käsittelee tuota tilaa osana esinettämme, ja se saattaa saada banaanin tuntumaan luonnottomalta, kun se törmää muihin esineisiin tai kun se leikataan.

tämä ei tarkoita, etteikö banaania voisi käyttää, vaan sitä ei vain suositella käytettäväksi. Itse asiassa, peli, että luot tässä opetusohjelma käyttää tätä samaa banaani.

ensimmäisen hedelmän luominen

on aika luoda ensimmäinen hedelmä: vesimeloni (siitä ainakin siivu).

Muistellessasi Polygonspriteemme alustusprosessin virtausta tiedät, että initWithTexture odottaa Box2D-kehoa, mutta sitä edeltävä askel, initWithFile, ei anna tätä.

syy tähän on se, että sinun on luotava ja määriteltävä runko yksilöllisesti hedelmäkohtaisesti, joten sen on oltava ensimmäinen askel maailmassa, joka luo kehon ja asettaa muut arvot kullekin hedelmälle.

luodaksesi Box2D-runkomme, sinun on ensin tiedettävä sen monikulmion muodon kärkipisteet, jonka haluat luoda. On olemassa erilaisia tapoja tehdä tämä, mutta tämä opetusohjelma, käytät näppärä työkalu nimeltään PhysicsEditor. Tämä työkalu on täynnä ominaisuuksia, mutta voit vain käyttää sitä ohjaamaan meitä saamaan koordinaatit, vertices meidän monikulmio.

jos sitä ei ole, lataa PhysicsEditor, asenna se ja käynnistä se. Saat tyhjän projektin 3 paneelit / sarakkeet.

Physicseditorin kanssa työskentely on melko suoraviivaista. Vasemmalle, laitat kaikki kuvat haluat työskennellä. Keskellä, voit visuaalisesti määritellä monikulmio kuvasi. Oikealla on ruumiin parametrit.

nappaa vesimeloni.png resurssipaketin kuvat-kansiosta ja vedä se vasempaan paneeliin. Keskimmäisessä paneelissa on nyt vesimeloni.

Suurenna tämän paneelin alareunasta löytyvä suurennos mukavalle tasolle ja napauta sitten tämän paneelin yläosassa olevaa Pentagonin nappia luodaksesi 3-sivuisen monikulmion muodon.

Napsauta Monikulmiota hiiren kakkospainikkeella ja valitse ”Lisää Vertex”, kunnes sinulla on yhteensä 5-8 vertexiä. Siirrä kärkiä vesimelonin reunojen ympärille varmistaen samalla kaksi asiaa:

• luomasi monikulmio on kupera.
• kaikki vesimelonin pikselit ovat monikulmion sisällä.

lisää mukaan kaikki muut hedelmät ja pommin kuva resurssipakkauksen kuvat-kansiosta ja tee sama niille.

sinun tulisi määritellä muotoja seuraaville kuville:

• banaani.png
• pommi.png
• rypäleet.png
• ananas.png
• mansikka.png
• vesimeloni.png

kun olet valmis, muuta oikeassa yläkulmassa viejän arvo ”Box2D generic (PLIST)”, ja sinun pitäisi päätyä jotain tällaista:

osuma ”Publish” eli ”Publish As” vei verteksitiedot sisältävän PLIST-tiedoston. Tallenna tiedosto hedelminä.plist.

esimerkkinä hedelmät.plist, jota käytit tässä opetusohjelmassa, on resurssipaketin sekalaisen kansion sisällä.

haluat vain katsoa PLIST-tiedoston sisältämiä tietoja, joten älä lisää tätä tiedostoa projektiisi,vaan avaa vain hedelmät.plist käyttää Xcode tarkastella sen sisältöä järjestäytyneesti.

Napsauta ”bodies” – kappaleen vieressä olevaa kolmiokuvaketta laajentaaksesi tätä osiota, niin näet luettelon kuvista, joille olet määritellyt muodot. Sinun täytyy porata alas syvimmälle tasolle saada vesimeloni monikulmio vertices kuten niin:

Extend watermelon/fixtures/Item 0/polygons and you should now see another Item 0 Of Type Array under polygons. Tämä viimeinen ryhmä on sinun muotosi. Jos olisit oikein määritelty kupera muoto 8 tai vähemmän vertices, sinun pitäisi vain nähdä yksi array alle polygons.

jos näet useamman kuin yhden, i.E kohta 0 Array, kohta 1 Array, jne, niin se tarkoittaa PhysicsEditor teki monimutkainen muoto, koska joko määritelty liian monta vertices, tai muodostit kovera monikulmio. Jos näin käy, mene takaisin PhysicsEditor ja korjata muoto.

laajenna seuraavaksi tyypin Array kohtaa 0, jotta näet lopullisen listan kohteista. Nämä ovat vertices, ja arvo näet oikealla puolella tässä muodossa { numero, numero } ovat X & y koordinaatit kunkin huippupiste.

nyt kun sinulla on tarkat arvot monikulmiosi kärkipisteille, voit jatkaa Vesimeloniluokan luomista.

luo Xcodessa uusi tiedosto iOS\cocos2d v2: lla.x\CCNode-luokan malli. Tee siitä PolygonSprite-alaluokka ja anna sille nimeksi vesimeloni. Avaa Vesimeloni.h ja tehdä seuraavat muutokset:

// Add to top of file#import "PolygonSprite.h"

Vaihda vesimeloniin.m, nimeä se muotoon Watermelon.mm, ja lisää seuraavat init-menetelmä:

// Add inside the @implementation-(id)initWithWorld:(b2World *)world{ int32 count = 7; NSString *file = @"watermelon.png"; b2Vec2 vertices = { b2Vec2(5.0/PTM_RATIO,15.0/PTM_RATIO), b2Vec2(18.0/PTM_RATIO,7.0/PTM_RATIO), b2Vec2(32.0/PTM_RATIO,5.0/PTM_RATIO), b2Vec2(48.0/PTM_RATIO,7.0/PTM_RATIO), b2Vec2(60.0/PTM_RATIO,14.0/PTM_RATIO), b2Vec2(34.0/PTM_RATIO,59.0/PTM_RATIO), b2Vec2(28.0/PTM_RATIO,59.0/PTM_RATIO) }; CGSize screen = winSize]; b2Body *body = ; if ((self = )) { // We will initialize more values for the fruit here later } return self;}

yllä olevassa koodissa määritellään ensin, kuinka monta verticeä on, mikä tässä tapauksessa on 7. Seuraava, luo joukko vertices sisältää kaikki koordinaatit juuri nähnyt PLIST. Voit käyttää näitä tietoja luodaksesi kehon käyttäen polygonsprite-menetelmässä määrittämääsi mukavuusmenetelmää.

laitetaan vähän kitkaa, jotta muodot eivät liukuisi loputtomasti, ja laitetaan myös pieni korjaus, jotta muodot eivät pysähdy, kun ne kimpoavat toisiaan vasten.

viimeisenä luodaan objekti kutsumalla superluokan alustusta ja ohitetaan kuvatiedoston, Box2D-kappaleen, nimi ja todetaan, että kyseessä on alkuperäinen hedelmä.

tarvitset resurssipakkauksen vesimelonikuvat, joten nyt olisi hyvä hetki vain lisätä kaikki tarvittavat graafiset resurssit opetusohjelman loppuosaan.

Napsauta Project Navigator-paneelissa hiiren kakkospainikkeella resursseja ja valitse ”Lisää tiedostoja Cutcutcutiin”. Lisää Resurssipaketin Kuvat-kansio projektiin. Varmista, että” Kopioi kohteita kohderyhmän kansioon ”on valittu ja” Luo ryhmiä lisättyjä kansioita ” on valittu.

seuraa samoja vaiheita banaanin, viinirypäleiden, ananaksen, mansikan ja pommin luomiseksi.

käsittelitte vain sitä, miten ensimmäiset hedelmät luodaan vaihe vaiheelta, koska kyseessä on periaatteessa jokaisen hedelmän huuhtelu & toistoprosessi. Resurssipaketti sisältää valmiit hedelmä-ja pommiluokat luokat-kansiossa, jota voit tarkastella, jos tarvitset vielä ohjausta, tai voit lisätä ne kaikki projektiisi, jos haluat ohittaa tämän vaiheen.

käännä ja juokse, ja varmista, että kaikki on hyvin.

hedelmän lisääminen kohtaukseen

toistaiseksi mitään ei ole vielä tapahtunut valkokankaalla, ja olet ilmiselvästi kutkuttava näkemään työpanoksesi hedelmät-sanaleikki tarkoitettu! :]

Vaihda Helloworldlayeriin.h ja tehdä seuraavat muutokset:

// Add to top of file#import "PolygonSprite.h"// Add inside the @interfaceCCArray *_cache;// Add after the @interface@property(nonatomic,retain)CCArray *cache;

vaihda takaisin HelloWorldLayer.mm ja tehdä nämä muutokset:

// Add to top of file#import "Watermelon.h"// Add inside the @implementation@synthesize cache = _cache;// Add inside the init method, below ;// Add inside the dealloc method, before calling ;_cache = nil;// Add anywhere inside the @implementation and before the @end-(void)initSprites{ _cache = initWithCapacity:53]; // Just create one sprite for now. This whole method will be replaced later. PolygonSprite *sprite = initWithWorld:world]; ; ; ;}

julistat cache array, joka pitää kaikki hedelmät ja pommit luot tulevaisuudessa. Seuraavaksi luot 1 vesimeloni ja lisää se kohtaukseen. Kutsut aktiivisuuskoostumuksia niin, että vesimeloni ei kulje seinien läpi.

käännä ja juokse, niin näet vesimelonin putoavan ruudun keskialueelta, ja laskeudut pohjaan kuten alla olevassa kuvassa.

Saatat huomata, ettei vesimeloni ole aivan keskellä. Syynä tähän on se, että sijoitit esineen sen Box2D-rungon perusteella, ja meidän Box2D-kehon alkuperä on esineen vasemmassa alakulmassa. Vesimelonin ympärillä oleva ohut ääriviiva on näkyvissä, koska debug-piirtotila on edelleen päällä.

Minne Tästä Eteenpäin?

tässä on esimerkkiprojekti, jossa on kaikki yllä olevan opetusohjelman koodi.

siinä se sarjan 1. osan osalta. Toistaiseksi sinulla on vesimelonin kuvioitu monikulmio, joka vain putoaa näytön alareunaan.

mutta sen sijaan, että piirrettäisiin suorakulmainen sprite läpinäkyvällä välilyönnillä, kuten yleensä nähdään Box2D-tutoriaaleissa, tämä käyttää Prkitiä piirtämään vain ne tekstuurin osat, jotka vastaavat Box2D-kappaleen kärkipisteitä. Tästä on pian hyötyä!

nyt olet valmis opetusohjelman 2. osaan, johon lisätään kyky viipaloida hedelmät!

jos sinulla on kysyttävää tai kommentteja tästä osasta, liity alla olevaan foorumikeskusteluun!

tämä on viesti iOS Tutorial tiimin jäsen Allen Tan, iOS kehittäjä ja co-perustaja White Widget. Hänet löytää myös Google+: sta ja Twitteristä.