{"id":9433,"date":"2012-09-04T12:01:51","date_gmt":"2012-09-04T10:01:51","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=9433"},"modified":"2012-09-04T12:01:51","modified_gmt":"2012-09-04T10:01:51","slug":"7-come-creare-uno-sfondo-con-scrolling-infinito-con-cocos2d","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/7-come-creare-uno-sfondo-con-scrolling-infinito-con-cocos2d\/","title":{"rendered":"7. Come creare uno sfondo con scrolling infinito con cocos2d"},"content":{"rendered":"

\"corso-programmazione-videogame-cocos2d-07\"<\/a> Nella lezione di oggi sfrutteremo le competenze teoriche che abbiamo acquisito nella lezione precedente e realizzeremo uno sfondo in finto 3D, con la particolarit\u00e0 che potr\u00e0 scrollare all’infinito. Lo scroll infinito \u00e8 una componente fondamentale in tantissimi tipi di giochi, dal classico “space shooter” ai pi\u00f9 recenti “endless run”, ci sono delle enormi differenze tra i vari giochi, ma alla fine la tecnica \u00e8 sempre la stessa, in pratica quello che si deve fare \u00e8 gestire correttamente gli elementi grafici che “scompaiono” da una parte dello schermo e crearne di nuovi pronti ad essere visualizzati dalla parte opposta, come in un moderno Zoetrope (http:\/\/en.wikipedia.org\/wiki\/Zoetrope<\/a>).<\/p>\n

\"scrolling-infinito-corso-cocos2d-01\"<\/a> Per gli elementi che scompaiono da una parte dello schermo c’\u00e8 poco da inventarsi, possono al massimo finire in una cache per essere ripescati velocemente qualora il giocatore tornasse indietro, tutta l’inventiva invece sta nel come creare i nuovi elementi.
\nIl caso pi\u00f9 semplice \u00e8 quello in cui, banalmente, gli elementi non vengno creati… si crea cio\u00e8 un fondale lunghissimo in cui il personaggio si pu\u00f2 muovere avanti e indietro a piacimento. Questo, bench\u00e9 possibile, \u00e8 estremamente costoso in termini di memoria occupata quidi risulta di fatto inutilizzabile.
\nI giochi pi\u00f9 complessi, invece, creano le nuove immagini in maniera random o in base allo stato del gioco, per esempio un classico “endless run” mostra livelli via via pi\u00f9 complessi man mano che avanza il gioco (avete mai provato canabalt? \u00e8 opensource! http:\/\/adamatomic.com\/canabalt\/<\/a>).<\/p>\n

L’esempio che vedremo in questa lezione \u00e8 una via di mezzo, in pratica creeremo due “sfondi” completi, quando un’immagine scompare da una parte la faremo istantaneamente riapparire dall’altra parte.<\/p>\n


\n\"scrolling-infinito-corso-cocos2d-02\"<\/a>
\n<\/center><\/p>\n

In questa immagine potete vedere anche un piccolo trucco… una delle due schermate \u00e8 stata flippata per farle combaciare correttamente, altrimenti si sarebbe visto un brutto stacco.
\nMa veniamo alle brutte notizie, purtroppo la classe CCParallaxNode che abbiamo visto nel precedente articolo non \u00e8 utlizzabile per questo genere di operazioni, perch\u00e9 la posizione del singolo livello non \u00e8 modificabile una volta che viene inserito dentro un CCParallaxNode, non ci resta quindi che darci da fare e scrivere un p\u00f2 di codice per gestire noi stessi il tutto.<\/p>\n

Iniziamo dichiarando alcune variabili nell’header del nostro layer:<\/p>\n

\r\n@interface HelloWorldLayer : CCLayer\r\n{\r\n    NSArray *spriteArray;\r\n    int numSprite;\r\n    NSArray *speedFactors;\r\n}\r\n<\/pre>\n
spriteArray conterr\u00e0 i puntatori alle sprite che andremo a creare, numSprite \u00e8 un intero che useremo per memorizzare il numero di sprite che andremo a gestire. L’ultimo array, speedFactors, memorizza il moltiplicatore che andremo ad utilizzare per muovere ogni livello di una percentuale dello spostamento totale.<\/p>\n
La creazione delle sprite avviene come negli altri esempi all’interno del metodo init<\/p>\n
Il metodo completo \u00e8 questo:<\/p>\n
\r\n-(id) init\r\n{\r\n        if( (self=[super init])) {\r\n        CGSize screensize = [[CCDirector sharedDirector] winSize];\r\n        numSprite = 4;\r\n       \r\n        CCSprite *sprite0 = [CCSprite spriteWithFile:@\"liv_0.png\"];\r\n        [sprite0 setAnchorPoint:CGPointMake(0,0)];\r\n        [sprite0 setPosition:CGPointMake(0,0)];\r\n        [self addChild:sprite0];\r\n       \r\n        CCSprite *sprite0b = [CCSprite spriteWithFile:@\"liv_0.png\"];\r\n        [sprite0b setAnchorPoint:CGPointMake(0,0)];\r\n        [sprite0b setPosition:CGPointMake(screensize.width - 1, 0)];\r\n        [self addChild:sprite0b];\r\n       \r\n        CCSprite *sprite1 = [CCSprite spriteWithFile:@\"liv_1.png\"];\r\n        [sprite1 setAnchorPoint:CGPointMake(0,0)];\r\n        [sprite1 setPosition:CGPointMake(0,80)];\r\n        [self addChild:sprite1];\r\n       \r\n        CCSprite *sprite1b = [CCSprite spriteWithFile:@\"liv_1.png\"];\r\n        [sprite1b setAnchorPoint:CGPointMake(0,0 )];\r\n        [sprite1b setPosition:CGPointMake(screensize.width - 1 , 80)];\r\n        sprite1b.flipX = YES;\r\n        [self addChild:sprite1b];\r\n       \r\n        CCSprite *sprite2 = [CCSprite spriteWithFile:@\"liv_2.png\"];\r\n        [sprite2 setAnchorPoint:CGPointMake(0, 0)];\r\n        [sprite2 setPosition:CGPointMake(0, 60)];\r\n        [self addChild:sprite2];\r\n       \r\n        CCSprite *sprite2b = [CCSprite spriteWithFile:@\"liv_2.png\"];\r\n        [sprite2b setAnchorPoint:CGPointMake(0, 0)];\r\n        [sprite2b setPosition:CGPointMake(screensize.width -1 , 60)];\r\n        sprite2b.flipX = YES;\r\n        [self addChild:sprite2b];\r\n       \r\n        CCSprite *sprite3 = [CCSprite spriteWithFile:@\"liv_3.png\"];\r\n        [sprite3 setAnchorPoint:CGPointMake(0, 0)];\r\n        [sprite3 setPosition:CGPointMake(0, 0)];\r\n        [self addChild:sprite3];\r\n       \r\n        CCSprite *sprite3b = [CCSprite spriteWithFile:@\"liv_3.png\"];\r\n        [sprite3b setAnchorPoint:CGPointMake(0, 0)];\r\n        [sprite3b setPosition:CGPointMake(screensize.width - 1, 0)];\r\n        sprite3.flipX = YES;\r\n        [self addChild:sprite3b];\r\n       \r\n        spriteArray = [[NSArray arrayWithObjects:sprite0,sprite1, sprite2, sprite3, sprite0b,sprite1b, sprite2b, sprite3b, nil ] retain];\r\n       \r\n        speedFactors = [[NSArray arrayWithObjects:\r\n                         [NSNumber numberWithFloat:0.1],\r\n                         [NSNumber numberWithFloat:0.4],\r\n                         [NSNumber numberWithFloat:0.8],\r\n                         [NSNumber numberWithFloat:1.0],\r\n                         \r\n                         [NSNumber numberWithFloat:0.1],\r\n                         [NSNumber numberWithFloat:0.4],\r\n                         [NSNumber numberWithFloat:0.8],\r\n                         [NSNumber numberWithFloat:1.0],\r\n                         nil] retain];\r\n       \r\n        [self scheduleUpdate];\r\n    }\r\n        return self;\r\n}\r\n<\/pre>\n
Non dovrebbe essere difficile capire cosa abbiamo fatto… in pratica per ciascuna delle quattro slide abbiamo aggiunto alla scena la sprite e una sua “copia” ribaltata. Queste sprite sono poi state aggiunte in un array (spriteArray) per agevolare l’operazione che vedremo tra un attimo.<\/p>\n
All’interno dell’array speedFactors sono memorizzati i fattori di spostamento, sono 8 perch\u00e9 le sprite in gioco sono 8, ma sono solo 4 livelli diversi, quindi sono 4 valori.<\/p>\n
Infine utilizziamo [self scheduleUpdate]; per aggiornare la nostra scena ad ogni iterazione.<\/p>\n
Il metodo che ho utilizzato \u00e8 questo:<\/p>\n
\r\n-(void)update:(ccTime)delta {\r\n    CGSize screensize = [[CCDirector sharedDirector] winSize];    \r\nfor (CCSprite *sprite in spriteArray) { \/\/1\r\n        int index = [spriteArray indexOfObject:sprite]; \/\/2\r\n       \r\n        CGPoint position = sprite.position;\r\n        position.x -= 100 * (delta) * [[speedFactors objectAtIndex:index]floatValue]; \/\/3\r\n       \r\n        if ( position.x < -screensize.width ) {  \/\/4\r\n            position.x += ( screensize.width * 2 ) - 2; \/\/5\r\n        }\r\n        sprite.position = position; \/\/6\r\n    }\r\n}\r\n<\/pre>\n
#1 Eseguo un ciclo su tutte le sprite che sono inserite nell'array spriteArray
\n#2 recupero anche l'indice dell'array alla quale si trova
\n#3 calcolo la nuova posizione moltiplicando per 100 il delta, in pratica il tempo che \u00e8 intercorso dalla precedete chiamata, moltiplicato per il fattore di moltiplicazione che \u00e8 memorizzato nell'arry speedFactors
\n#4 Verifico se la posizione di questa sprite \u00e8 completamente fuori dallo schermo, in tal caso...
\n#4 calcolo la nuova posizione, aggiungendo due volte la larghezza della sprite.
\n#5 Setto la posizione della sprite.<\/p>\n
Flickering<\/h4>\n
Se avete fatto caso ci sono alcuni piccoli valori correttivi quando creo le sprite \"gemelle\", in realt\u00e0 le posiziono leggermente sovrapposte alle prime, nello specifico di un 1 pixel.<\/p>\n
\r\n[sprite0b setPosition:CGPointMake(screensize.width - 1, 0)];\r\n<\/pre>\n
Inoltre, quando devo risposizionare la sprite, devo mantenere questa differenza, quindi la sposto di ( screensize.width * 2 ) - 2<\/code> pixel.<\/p>\n
Questo \u00e8 dovuto al fatto che posizionare la sprite proprio affiancata a quella precedente potrebbe causare problemi di flickering, quindi aggiungiamo un pixel di sovrapposizione per essere pi\u00f9 tranquilli.<\/p>\n
Vi lascio con il video del risultato finale ottenuto:<\/p>\n

\n