cocos2d & Chipmunk Tworzenie gier 2D pod ios Konrad Kołakowski, Playsoft

cocos2d & Chipmunk Tworzenie gier 2D pod ios Konrad Kołakowski, Playsoft

cocos2d Co to?

cocos2d - co na tym powstało? Kingdom Rush

cocos2d - co na tym powstało? Robot Unicorn Attack

cocos2d - co na tym powstało? League of Evil

Chipmunk Co to?

Chipmunk - co na tym powstało? Waking Mars

Chipmunk - co na tym powstało? Feed me Oil

Chipmunk - co na tym powstało? I Dig It

Stworzenie projektu w Xcode 1. Ściągamy cocos2d-iphone: www.cocos2diphone.org/download 2. Aby móc wygodnie tworzyć nowe projekty, po rozpakowaniu paczki instalujemy szablony projektów dla Xcode ( odpalamy tą komendę w Terminalu, w katalogu frameworka ):./install-templates.sh -f -u

Stworzenie projektu w Xcode To wszystko, w tym momencie po stworzeniu nowego projektu, powinny być takie opcje:

Stworzenie projektu w Xcode Jak możecie zauważyć, cocos2d dostarcza już kod Chipmunka w swoich szablonach projektów. Na potrzeby laboratorium, projekt będzie już gotowy, wystarczy otworzyć i można działać.

Podstawy cocos2d - warstwy, węzły cocos2d logicznie jest podzielony na sceny. Scena stanowi główny węzeł do którego podłączamy kolejne ( warstwy, sprite'y, efekty cząsteczkowe itd. ) Każdy element dodawany do gry, oprócz scen, musi być dodany do jakiegoś elementu nadrzędnego.

Podstawy cocos2d - warstwy, węzły

Podstawy cocos2d - warstwy, węzły

Podstawy cocos2d - układ współrzędnych Układ współrzędnych, punkty zaczepienia.

Podstawy cocos2d - dołączanie i rysowanie elementów Jak narysować takiego kosmitę? // GameScene.h #import "cocos2d.h" @interface GameScene : CCScene @end

Podstawy cocos2d - dołączanie i rysowanie elementów // GameScene.m #import "GameScene.h" @implementation GameScene -(id) init { self = [super init]; if(self) { // 1 CGSize s = [CCDirector shareddirector].winsize; // 2 CCSprite* invader = [ CCSprite spritewithfile: @"invader.png" ]; invader.position = ccp(s.width/ 2, s.height/ 2); // 3 [self addchild: invader]; } return self; } @end

Podstawy cocos2d - obsługa dotyku Aby włączyć przechwytywanie zdarzeń dotykowych na naszej warstwie: [self setistouchenabled: YES]; Następnie należy zaimplementować te metody protokołu CCStandardTouchDelegate: - (void)cctouchesended:(nsset*)touches withevent:(uievent*)event; (void)cctouchesbegan:(nsset*)touches withevent:(uievent*)event; (void)cctouchesmoved:(nsset*)touches withevent:(uievent*)event; (void)cctouchesended:(nsset*)touches withevent:(uievent*)event; (void)cctouchescancelled:(nsset*)touches withevent:(uievent*)event;

Podstawy cocos2d - obsługa dotyku - (void)cctouchesended:(nsset*)touches withevent:(uievent*) event { for( UITouch *touch in touches ) { CGPoint pos = [touch locationinview: [touch view]]; pos = [[CCDirector shareddirector] converttogl: location]; // Do something with position // (...) } }

Podstawy cocos2d - akcje Akcje są wygodnym elementem frameworku cocos2d. Pozwalają w prosty sposób tworzyć nieskomplikowane animacje, czy proste powtarzalną logikę. Akcje można łączyć, oraz dodawać im easing.

Podstawy cocos2d - akcje

Podstawy cocos2d - akcje

Podstawy cocos2d - akcje Podany niżej kod sprawi że nasz invader się obróci o 360º oraz przesunie w prawo o 50 pikseli. Wszystko to w 1 sekundę. -(void) roll { CCMoveBy* move = [ CCMoveTo actionwithduration: 1.0f position: ccp( 50.0f, 0.0f)]; CCRotateBy* rotate = [ CCRotateBy actionwithduration: 1.0f angle: 360.0f]; [invader_ runaction: move]; [invader_ runaction: rotate]; }

Podstawy Chipmunk - inicjalizacja oraz stworzenie przestrzeni symulacji - alokowanie/dealokowanie wszelkich obiektów powinno się odbywać poprzez funkcje typu cpspacenew, cpspacefree etc. - do konfiguracji i odpalenia silnika wystarczy: cpinitchipmunk(); cpspace* space = cpspacenew(); cpspacesetgravity(space, ccp(0.0f, -500.0f));

Podstawy Chipmunk - obiekty fizyczne Koncepcja shape (kształt) oraz body (ciało): W skrócie: jedno ciało może mieć podłączonych do siebie wiele kształtów

Podstawy Chipmunk - obiekty fizyczne Tworzenie "podłogi" // 1 CGSize s = [CCDirector shareddirector].winsize; CGPoint lowerleft = ccp(0, 0); CGPoint lowerright = ccp(s.width, 0); float height = 20.0f; // 2 cpbody* groundbody = cpbodynewstatic(); // 3 cpshape* groundshape = cpsegmentshapenew(groundbody, lowerleft, lowerright, height); cpshapesetelasticity(groundshape, 0.2f); cpshapesetfriction(groundshape, 1.0f); // 4 cpspaceaddshape(space, groundshape);

Podstawy Chipmunk - obiekty Dodawanie obiektu w kształcie kwadratu: static const float boxw = 30.0f; static const float boxh = 50.0f; static const float mass = 2.5f; cpbody* body = cpbodynew(mass, cpmomentforbox(mass, boxw, boxh)); cpbodysetposition(body, ccp(s.width/2, s.height/2)); cpspaceaddbody(space, body); cpshape* shape = cpboxshapenew(body, boxw, boxh); cpshapesetelasticity(shape, 0.8f); cpshapesetfriction(shape, 1.0f); cpspaceaddshape(space, shape);

Podstawy Chipmunk - odpalenie symulacji // W metodzie 'init' [self scheduleupdate]; // W metodzie update wywolywanej co klatke -(void) update:(cctime)dt { cpspacestep(space, dt); }

Podsumowanie Poznaliśmy tylko podstawy tych dwóch frameworków. Na laboratoriach dowiemy się więcej. Dokumentacja oficjalna: chipmunk-physics. net/release/chipmunklatest-docs www.cocos2d-iphone.org/api-ref/latest-stable

Pytania?

Konrad Kołakowski konrad.kolakowski@playsoft.fr