cocos2d: creare videogiochi con facilità!

[email protected] - MobileSoft

Maurizio Moriconi

Cocos2d: creare videogiochi con facilità!

mailto:[email protected]


[email protected] Moriconi

Chi sono

• CTO presso Mobilesoft• Mobile Developer

• Co-founder• Main Developer

http://www.facebook.com/maurizio.moriconi

http://www.linkedin.com/in/bugman

@bugman79








Cocos2d

• Framework per videogiochi 2D Open Source

• Nato inizialmente in Python e portato su altri linguaggi

• Versione Objective-c sviluppata da Ricardo Quesada (assunto da Zynga dal 2011)

• Basato su OpenGL ES 1.1 e 2.0

• Con più di 3500 giochi presenti nel solo Apple Store




Cocos2d ports



• Alice (iPad)• The Elements (iPad)• Tiny Tower• StickWars• Farmville• Zombie Farm• Foldify


Esempi di successo




Perché usare Cocos2d

• E’ gratis (no royalties)• E’ Open Source• 2D (ma usa openGL ES!)• E’ scritto in objective-C * ma meno tecnico • Si programma!• Ci fa concentrare sul gioco e sul design

* o altri linguaggi di programmazione (Java, C++, C#, JavaScript, Python)



• Documentazione: http://www.cocos2d-iphone.org/wiki/doku.php/

• Forum: http://www.cocos2d-iphone.org/forum/

• API reference / Xcode Documentation integration

• Tanti esempi e tool esterni (CososBuilder ed altro)

• Varie pubblicazioni


Materiale e comunità

http://www.cocos2d-iphone.org/wiki/doku.php/

http://www.cocos2d-iphone.org/wiki/doku.php/

http://www.cocos2d-iphone.org/forum/

http://www.cocos2d-iphone.org/forum/



• Scene management (workflow)• Transitions between scenes• Sprites and Sprite Sheets• Effects: Lens, Ripple, Waves, Liquid, Twirl...• Actions (behaviors): Move, Rotate, Scale, Jump...• Basic menus and buttons• Integrated physics engine: Box2d / Chipmunk• Particle systems• Text rendering support • Tile Map support: Orthogonal /Isometric / Hexagonal Map• Parallax scrolling support• Sound support• Touch/Accelerometer (iOS) • Fast Textures: Supports PVRTC textures, 8-bit textures, 16-bit textures and 32-bit textures• Ribbons• Shaders (versione 2.0)


Cocos2d Features

http://www.box2d.org/

http://www.box2d.org/

http://code.google.com/p/chipmunk-physics/

http://code.google.com/p/chipmunk-physics/



http://www.cocos2d-iphone.org/download


Download ed installazione

https://github.com/cocos2d/cocos2d-iphone/tags

Ci sono template per Xcode!!

Stable Version: 2.0 / 1.0.1Unstable Version: 2.1-rc / 1.1








Hello World




Hello World

Librerie cocos2d

Icone e SplashScreen

Application Delegate

Intro Scene

HelloWorld Scene




Hello World

Splashscreen

Intro Scene

Hello World Scene Game Center già configurato!!!




Show me the code...



Director inizializza OpenGL ES e gestisce le scene

Scenes pensiamole come una schermata di gioco

Layers compongono le scene (vedi Photoshop)

Spites vi dice qualcosa questa parola?? 8-)

Nodessono l’oggetto base di cocos2d


Basic Concepts



CCScene


Scenes

Fonte immagine cocos2d Wiki

• Sono composte da uno o più layer • E’ una sottoclasse di CCNode• E’ possibile avere delle transizioni CCTransitionScene



CCLayer


Layers

Fonte immagine cocos2d Wiki

• Gestisce gli eventi di touches e l’accellerometro• E’ una sottoclasse di CCNode• Può essere semitrasparente• Contengono gli Sprites




Nodes

CCNode

• E’ la classe base da cui derivano le altre• Tutto quello che è disegnato è un NODO!• Possono contenere altri nodi• Eseguono Actions • Alcune proprietà

• Position• Z order• Tag• ...

Sperando che vi ricordate cosa sia un sistema di riferimento cartesiano

0,0# X#

Y#




Sprite



Creazione


Sprites

CCSprite* ryu = [CCSprite spriteWithFile:@"0.png"];

ryu.position = ccp( x , y );

Posizionamento (di base è 0,0)

Anchor Pointdi base è 0.5,0.5

[self addChild:ryu z:1 tag:123];

Aggiunta al LayerSprite posizionato a 0,0




Actions

CCActions• Sono gli “ordini” che possiamo dare ai nodi!

• Possono essere: istantanee o periodiche

• Si auto-rimuovono una volta terminate

• Si definiscono con un tempo, i movimenti o altre azioni sono interpolate e gestiti in automatico!!!

es. spostati fino a x,y in 2 secondi!!!




Actions

Basic Move, Scale, Rotate, Bezier, Hide, Fade,Tint..

Composition Sequence, Repeat, Spawn, RepeatForever..

Ease Ease, EaseExponential, EaseBounce..

Effects Lens, Liquid, Ripple, Shaky,Twirl,Waves..

Special CallFunc, Follow..




Actions in action!

CCScaleTo *scaleToAction = [CCScaleTo actionWithDuration:duration scale:scale];

CCRotateBy *rotateByAction = [CCRotateBy actionWithDuration:duration angle:angle];

CCSequence *sequence = [CCSequence actions:scaleToAction, rotateByAction, nil];

[ryu runAction:sequence];

CCMoveTo *moveToAction = [CCMoveTo actionWithDuration:duration position:newPosition];[ryu runAction:moveToAction];




Show me the code...




Sprite Sheets

Super Mario All-Stars: Super Mario Bros. 2



Texture con dimensioni di potenze di 2


Texture Atlas

2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048

Texture 256x256

Wasted memory

1. Chiamate ad OpenGLES ridotte2. Utilizzo della memoria ottimizzato3. Si possono gestire sprite con diverse dimensioni4. Ci sono tool ottimi come Texture Packer (o Zwoptex) per crearle

Perchè usarle ???



http://www.codeandweb.com/texturepacker


Texture Packer






Gestire i controlli

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

• Ogni layer può ricevere comandi (touch, mouse, tastiera)

• Facile da implementare!!!• Implementazioni di Joypad OpenSource




Show me the code...



Scelta tra 2 motori Fisici:• Box2D• ChipMunk


Physics engine

Con un motore fisico si delega la gestione delle animazioni mappando Sprite con oggetti della fisica



Caratteristiche:• scritto in C++ • sviluppato da Erin Catto (Blizzard Entertainment)• openSource e multipiattaforma


Box2d

http://box2d.org



http://box2d.org

http://box2d.org


ChipMunk

Caratteristiche:• scritto in C • sviluppato da Scott Lembcke (Howling Moon Software)

• openSource e multipiattaforma• esistono versioni a pagamento

http://chipmunk-physics.net






Cocos2d Templates



CocosDenshion


Sound Engine

• Libreria audio iOS e Mac OS X

• Si può usare al di fuori di Cocos2d!!

• Alto e basso livello

• Supporta molti formati tra cui:

• Caf• Aiff• Wav• Mp3



Play a sound


SimpleAudioEngine

[[SimpleAudioEngine sharedEngine] playEffect:@"mysound.wav"];

[[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"mario-music.mp3"];

Play a music

[[SimpleAudioEngine sharedEngine] preloadEffect:@"mysound.wav"];

Preload a sound

Preload a music[[SimpleAudioEngine sharedEngine] preloadBackgroundMusic:@"mario-music.mp3"];




CDAudioManager e CDSoundEngine

CDSoundEngine

• E’ usata anche da SimpleAudioEngine

• Permette di gestire più tracce di lunga durata

• Utile se serve suonare più suoni contemporaneamente

• Sound Engine basato su OpenAL

• Gestisce fino a 32 suoni contemporanei

• Permette effetti come:• Pitch• Pan• Gain



Il tempo è tiranno...


Alcune features

Vediamo alcune features al volo...



CCMenu

composto da Menu Item


Menu



Sistema particellare, alcuni effetti:• fuoco• pioggia• neve• galassia• molti altri....


Particle system

CCParticleFire *fire = [[CCParticleFire alloc] initWithTotalParticles:100];[fire setLife:20];[fire setAutoRemoveOnFinish:YES];fire.position = ccp(size.width/4,size.height/2);[self addChild:fire];




Tile maps

Basate sul concetto di Tile• riuso della grafica • possibilità di assegnare status a dei tile• editor esterni per creare “mondi”

Ortogonali

Isometriche




Altre ancora...

Parallax Scrolling

Ribbons

Shaders

BitMapped Font

Cocos Builder

Game Center



Cocos2d è uno dei tanti mezzi...

il resto ce lo mettete voi...


Cocos2d



Donald Knuth “The Art of Computer Programming”


Programmare è un arte!

Our discussion indicates that computer programming is by now both a science and an art, and that the two aspects nicely complement each other. [...] We have seen that computer programming is an art, because it applies accumulated knowledge to the world, because it requires skill and ingenuity, and especially because it produces objects of beauty. A programmer who subconsciously views himself as an artist will enjoy what he does and will do it better. Therefore we can be glad that people who lecture at computer conferences speak about the state of the Art.

http://en.wikipedia.org/wiki/Donald_Knuth

http://en.wikipedia.org/wiki/Donald_Knuth

http://www.amazon.com/gp/product/0201485419?ie=UTF8&tag=highordefun-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0201485419

http://www.amazon.com/gp/product/0201485419?ie=UTF8&tag=highordefun-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0201485419



cocos2d: creare videogiochi con facilità!

Technology