{"id":9539,"date":"2012-09-18T15:31:47","date_gmt":"2012-09-18T13:31:47","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=9539"},"modified":"2012-09-18T15:31:47","modified_gmt":"2012-09-18T13:31:47","slug":"8-particle-effect-con-cocos2d","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/8-particle-effect-con-cocos2d\/","title":{"rendered":"8. Particle Effect con cocos2d"},"content":{"rendered":"<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/corso-programmazione-videogame-cocos2d-08.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/corso-programmazione-videogame-cocos2d-08.jpg\" alt=\"corso-programmazione-videogame-cocos2d-08\" title=\"corso-programmazione-videogame-cocos2d-08\" width=\"200\" height=\"100\" class=\"alignleft size-full wp-image-9541\" \/><\/a> In questa lezione parliamo di Particle Effect, una funzione molto apprezzata di cocos2d per aggiungere degli effetti veramente interessanti ai nostri videogiochi.<\/p>\n<p>Particle Effect \u00e8 una funzionalit\u00e0 molto complessa, perch\u00e9 permette di modificare una quantit\u00e0 enorme di parametri e variabili nella gerazione del sistema di particelle, cos\u00ec tanti che in pratica \u00e8 impossibile creare un particolare effetto agendo direttamente sul codice, perch\u00e9 il &#8220;guess and check&#8221; durerebbe delle ore!<!--more--><\/p>\n<p>Se non avete mai sentito parlare di particle effect e ancora non avete capito di cosa si tratta, questa immagine vi dar\u00e0 un&#8217;idea pi\u00f9 precisa di che cosa si pu\u00f2 realizzare:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-01.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-01.png\" alt=\"particle-effect-con-cocos2d-01\" title=\"particle-effect-con-cocos2d-01\" width=\"441\" height=\"421\" class=\"aligncenter size-full wp-image-9542\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-01.png 441w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-01-300x286.png 300w\" sizes=\"auto, (max-width: 441px) 100vw, 441px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Ma iniziamo con ordine e vediamo come si pu\u00f2 creare un semplice effetto di particelle.<\/p>\n<p>La prima informazione utile \u00e8 sempre quella che riguarda la gerarchia delle classi, e vediamo <a href=\"http:\/\/goo.gl\/7xRal\" target=\"_blank\">alla pagina della documentazione<\/a> che la classe responsabile per questo particolare effetto \u00e8 la classe <strong>CCParticleSystem<\/strong>, subclass di CCNode!<br \/>\nIl fatto che sia subclass di CCNode dovrebbe farci rallegrare, perch\u00e9 significa che possiamo usare gli effetti di particelle in ogni caso dove \u00e8 previsto l&#8217;uso di un CCNode e che tutto quello che abbiamo imparato per le azioni e gli effetti si applica anche a questa nuova classe! Potenza dell&#8217;ereditariet\u00e0!<\/p>\n<h4>Particle System per chi ha fretta<\/h4>\n<p>La libreria di Cocos2d viene fornita con una piccola serie di esempi gi\u00e0 pronti all&#8217;uso, tutti dichiarati all&#8217;interno del file CCParticleExamples.h.<\/p>\n<p>Utilizzarli \u00e8 molto semplice, baster\u00e0 aggiungere un&#8217;istanza della specifica classe alla nostra scena.<\/p>\n<p>Per questa lezione ho creato il mio solito progetto &#8220;learnParticleEffect&#8221; ed ho sostitutito il metodo init della classe HelloWorldLayer con questo:<\/p>\n<pre lang=\"objc\" line=\"1\" escaped=\"true\">\r\n-(id) init\r\n{\r\n        if( (self=[super init])) {\r\n        CCParticleSystem* system = [CCParticleExplosion node];\r\n        [self addChild:system z:1 tag:1];\r\n \r\n        }\r\n        return self;\r\n}\r\n<\/pre>\n<p>Con una sola riga di codice ho ottenuto questo effetto:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-02.png\" alt=\"particle-effect-con-cocos2d-02\" title=\"particle-effect-con-cocos2d-02\" width=\"550\" height=\"283\" class=\"aligncenter size-full wp-image-9543\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-02.png 716w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-02-300x154.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>al posto di CCParticleExplosion avrei potuto usare una qualsiasi di queste subclass gi\u00e0 pronte:<\/p>\n<ul>\n<li>CCParticleExplosion<\/li>\n<li>CCParticleFire<\/li>\n<li>CCParticleFireworks<\/li>\n<li>CCParticleFlower<\/li>\n<li>CCParticleGalaxy<\/li>\n<li>CCParticleMeteor<\/li>\n<li>CCParticleRain<\/li>\n<li>CCParticleSmoke<\/li>\n<li>CCParticleSnow<\/li>\n<li>CCParticleSpiral<\/li>\n<li>CCParticleSun<\/li>\n<\/ul>\n<p><strong>Una nota:<\/strong> avete notato che ho dichiarato la variabile come CCParticleSystem e non come CCParticleExplosion, questo ci permette di ragionare in termini pi\u00f9 astratti, senza bisogni di cambiare continuamente il tipo della variabile.<\/p>\n<h4>Particle System per chi vuole capire<\/h4>\n<p>Gli undici esempi forniti da cocos2d sono soltanto pochissimi tra gli innumerevoli effetti che si possono realizzare, quindi vediamo quali sono le possibilit\u00e0 fornite creando una nostra subclass.<\/p>\n<p>La propriet\u00e0 pi\u00f9 importante, dalla quale dipende poi la possibilit\u00e0 di usare alcune o altre opzioni \u00e8 la propriet\u00e0<\/p>\n<p><strong>emitterType<\/strong><\/p>\n<p>Dalla pagina di documentazione leggiamo che pu\u00f2 assumere due valori:<\/p>\n<ul>\n<li>kCCParticleModeGravity: uses gravity, speed, radial and tangential acceleration<\/li>\n<li>kCCParticleModeRadius: uses radius movement + rotation<\/li>\n<\/ul>\n<p>Il primo serve per crearea emettitori di particelle che seguno &#8220;la gravit\u00e0&#8221; (gravit\u00e0 che setteremo noi!) mentre l&#8217;altro tipo crea emettitori di particelle radiali, come CCParticleExplosion che abbiamo visto poco fa.<\/p>\n<p>Sempre con uno sguardo alla documentazione notiamo una cosa interessante, molte propriet\u00e0 sono affiancate da una con lo stesso nome, ma con il suffisso &#8220;var&#8221;, come speed e speedVar, startSize e startSizeVar&#8230; come mai?<\/p>\n<p>In pratica possiamo scegliere non solo il valore della propriet\u00e0, ma anche la sua varianza. Ad esempio possiamo scegliere che la dimensione iniziale sia di 10 e che la sua varianza sia di 5, quindi avremo particelle di dimensione variabile da 5 a 15. Questa variabilit\u00e0 aiuta ad aumentare il realismo&#8230;<br \/>\nPesante ad un effetto neve in cui i fiocchi siano tutti esattamente della stessa dimensione, \u00e8 molto pi\u00f9 realistico se la dimensione varia leggermente, no?<\/p>\n<p>Creiamo quindi la nostra subclass di CCParticleSystem, io l&#8217;ho chiamata DEVAPPEmitter con il solito procedimento file->new->new file.<\/p>\n<p>A causa delle diverse CPU che sono state utilizzate sui dispositivi apple, esistono due grandi categorie di particle emitter, una \u00e8 <strong>CCParticleSystemPoint <\/strong>e l&#8217;altra \u00e8 <strong>CCParticleSystemQuad<\/strong>. Senza entrare troppo nel dettaglio la nostra classe dovr\u00e0 ereditare da una di queste due&#8230; ma quale?<\/p>\n<p>Anche qui i ragazzi di cocos ci danno una mano, hanno previsto infatti una macro<br \/>\n<strong>ARCH_OPTIMAL_PARTICLE_SYSTEM<\/strong> che restituisce automaticamente la classe corretta&#8230; modifichiamo quindi la nostra classe in questo modo:<\/p>\n<pre lang=\"objc\" line=\"1\" escaped=\"true\">\r\n#import \"CCParticleSystem.h\"\r\n#import \"cocos2d.h\"\r\n@interface DEVAPPEmitter : ARCH_OPTIMAL_PARTICLE_SYSTEM\r\n@end\r\n<\/pre>\n<p>Il metodo principale sar\u00e0 questo:<\/p>\n<pre lang=\"objc\" line=\"1\" escaped=\"true\">\r\n-(id) initWithTotalParticles:(NSUInteger)numParticles\r\n{\r\n        if ((self = [super initWithTotalParticles:numParticles]))\r\n        {\r\n                self.duration = kCCParticleDurationInfinity;\r\n                self.emitterMode = kCCParticleModeGravity;\r\n\r\n                self.gravity = CGPointMake(0, -90);\r\n       \r\n                self.radialAccel = -90;\r\n                self.radialAccelVar = 20;\r\n       \r\n                self.tangentialAccel = 100;\r\n                self.tangentialAccelVar = 10;\r\n       \r\n                \/\/ speed is of course how fast particles move in general\r\n                self.speed = 15;\r\n                self.speedVar = 4;\r\n       \r\n                self.position = CGPointZero;\r\n                self.posVar = CGPointZero;\r\n                self.startSize = 40.0f;\r\n                self.startSizeVar = 0.0f;\r\n                self.endSize = kCCParticleStartSizeEqualToEndSize;\r\n                self.endSizeVar = 0;\r\n       \r\n                self.angle = 0;\r\n                self.angleVar = 0;                \r\n                self.life = 5.0f;\r\n                self.lifeVar = 0.0f;                \r\n                self.emissionRate = 30;\r\n                       \r\n                startColor.r = 0.0f;\r\n                startColor.g = 0.0f;\r\n                startColor.b = 0.0f;\r\n                startColor.a = 1.0f;\r\n       \r\n                startColorVar.r = 1.0f;\r\n                startColorVar.g = 1.0f;\r\n                startColorVar.b = 1.0f;\r\n                startColorVar.a = 0.0f;\r\n                \r\n                endColor.r = 0.0f;\r\n                endColor.g = 0.0f;\r\n                endColor.b = 0.0f;\r\n                endColor.a = 1.0f;\r\n                \r\n                endColorVar.r = 1.0f;\r\n                endColorVar.g = 1.0f;\r\n                endColorVar.b = 1.0f;\r\n                endColorVar.a = 0.0f;\r\n                \r\n                self.blendFunc = (ccBlendFunc){GL_SRC_ALPHA, GL_DST_ALPHA};        \r\n                self.texture = [[CCTextureCache sharedTextureCache] addImage: @\"fire.png\"];\r\n        }\r\n        \r\n        return self;\r\n}\r\n<\/pre>\n<p>Come potete vedere ho dovuto settare molte delle propriet\u00e0 dell&#8217;emitter, in un modo che non aveva molto di scientifico, ma era pi\u00f9 un &#8220;proviamo questo valore qui&#8221;&#8230; insomma se davvero vi serve un emitter non \u00e8 il caso che vi mettiate a provare a crearlo via codice, ma potete usare la soluzione del prossimo paragrafo.<\/p>\n<h4>Particle System per chi ha capito ed ora vuole fare.<\/h4>\n<p>Per generare rapidamente le configurazioni per un emettitore di particelle esistono diversi software, alcuni anche per iPad, che offrono la possibilit\u00e0 di simulare il risultato finale senza per questo dover ricompilare.<\/p>\n<p>Il tool &#8220;ufficale&#8221; (tra virgolette perch\u00e9 non \u00e8 ufficiale) \u00e8 <a href=\"http:\/\/particledesigner.71squared.com\/\" target=\"_blank\">Particle Designer<\/a>, ma ne esistono veramente tante, io per questa lezione ho usato <a href=\"http:\/\/clk.tradedoubler.com\/click?p=24373&#038;a=1735897&#038;g=0&#038;url=http:\/\/itunes.apple.com\/it\/app\/particles\/id437119239?mt=12&#038;partnerId=2003\" target=\"_blank\">particles<\/a>, perch\u00e9 comprato in offerta tempo fa.<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-03.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-03.png\" alt=\"particle-effect-con-cocos2d-03\" title=\"particle-effect-con-cocos2d-03\" width=\"550\" height=\"348\" class=\"aligncenter size-full wp-image-9544\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-03.png 694w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-03-300x189.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Con questi programmi \u00e8 facile modificare tutti i parametri e vedere live il loro effetto. Una volta creato l&#8217;emettitore che pi\u00f9 ci aggrada, questi programmi salvano tutte le informazioni in un file *.plist, il classico formato apple.<\/p>\n<p>Per poter generare un nuovo emitter basato su queste informazioni copiamo il file plist all&#8217;interno del progetto, quindi inizializziamo un&#8217;istanza della classe CCParticleSystemQuad attraverso il metodo particleWithFile, come vediamo in questo esempio:<\/p>\n<pre lang=\"objc\" line=\"1\" escaped=\"true\">\r\n-(id) init\r\n{\r\n        if( (self=[super init])) {\r\n        self.isTouchEnabled = YES;\r\n       \r\n        \/\/CCParticleSystem* system = [DEVAPPEmitter node];\r\n        CCParticleSystem *system = [CCParticleSystemQuad particleWithFile:@\"Flower2.plist\"];\r\n        [self addChild:system z:1 tag:1];\r\n \r\n        }\r\n        return self;\r\n}\r\n<\/pre>\n<p>Otterremo un risultato come questo:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-04.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-04.png\" alt=\"particle-effect-con-cocos2d-04\" title=\"particle-effect-con-cocos2d-04\" width=\"550\" height=\"283\" class=\"aligncenter size-full wp-image-9545\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-04.png 716w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/09\/particle-effect-con-cocos2d-04-300x154.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Questa lezione termina qui, vi lascio ai vostri particle emitters e mi raccomando&#8230; possono causare dipendenza!!<\/p>\n<p>Buona programmazione<br \/>\nIgnazioC<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In questa lezione parliamo di Particle Effect, una funzione molto apprezzata di cocos2d per aggiungere degli effetti&#8230;<\/p>\n","protected":false},"author":53,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1119],"tags":[1196,1151,1198,1201,1200,1197,1199],"class_list":["post-9539","post","type-post","status-publish","format-standard","hentry","category-corso-programmazione-videogiochi","tag-ccparticlesystem","tag-corso-cocos2d-italiano","tag-creare-videogame-ios","tag-emittertype","tag-esempi-cocos2d","tag-particle-effect-cocos2d","tag-tutorial-cocos2d"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=9539"}],"version-history":[{"count":6,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9539\/revisions"}],"predecessor-version":[{"id":9550,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/9539\/revisions\/9550"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=9539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=9539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=9539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}