Share
Benvenuti alla terza puntata del nostro infinito gioco di corridori! Questo tutorial spiegherà come creare sprite tramite fogli sprite e l'animazione del nostro personaggio del gioco. Fino ad ora nel nostro gioco dovremmo avere una bella vista con tre livelli di immagini che scorrono a diverse velocità, creando per alcuni fantastici scrolling-ness parrallax! Il prossimo passo logico per noi sarà aggiungere il nostro eroe al gioco. Lo faremo in due passaggi. Questo tutorial coprirà il primo passo. Il prossimo tutorial riguarderà in realtà l'aggiunta dell'eroe nel nostro gioco esistente e l'aggiunta di controlli per fargli seguire ogni nostro comando.
Ora, prima di iniziare a giocare, parliamo rapidamente di sprite, fogli sprite e animazioni in termini generali. Se hai esperienza con la grafica, l'animazione o lo sviluppo del gioco, questo è probabilmente un argomento familiare per te. Tuttavia, per la nostra discussione, assumeremo che tu non abbia esperienza con nessuno degli argomenti sopra menzionati. Quindi, iniziamo con l'animazione. L'animazione nei giochi viene eseguita esattamente nello stesso modo in cui è eseguita in cartoni animati e film. Pensa a cosa succede quando vai al cinema e iniziano il film. Quando guardi il film non stai guardando le persone che si muovono e parlano, ma stai guardando una serie di immagini lampeggianti con il suono che viene riprodotto lungo il rullo allo stesso tempo, dando l'illusione che stai guardando qualcosa che è vivo e respirazione. Questa è la stessa cosa che succede con i nostri giochi. Creiamo l'illusione della "vita" dalle immagini lampeggianti sullo schermo. Quando questo è fatto abbastanza velocemente, diventa un'animazione fluida. Quindi, la domanda è come ottenere queste animazioni fluide nel nostro gioco. La risposta è usare gli sprite. L'SDK Corona fornisce la funzionalità degli sprite per noi, quindi l'unica cosa di cui dobbiamo preoccuparci è creare i nostri folletti e assegnare loro le nostre animazioni. Dai un'occhiata alle gif animate qui sotto:
Quando vedi quell'animazione, sembra un piccolo mostro che corre e agita le braccia. Quello che stai veramente guardando è una serie di immagini, prese da un singolo foglio di sprite, che lampeggia continuamente. Si noti che l'ultima immagine nella sequenza non è inclusa nell'animazione. Questo è un semplice foglio sprite, ed è anche il modo in cui configurerai le immagini per il tuo gioco.
Quindi, la domanda sul perché esattamente usiamo i fogli sprite è probabilmente spuntata nella tua mente. La risposta è duplice e abbastanza semplice: memoria e semplicità. Voglio che tu guardi le quattro immagini che ho fatto qui sotto. Tutto molto semplice, a scacchiera (anche se gli sprite sono molto piccoli quindi non sembrano essere così, ma aprili in qualsiasi programma e ingrandisci e vedrai la scacchiera: D), con dimensioni che vanno da 8x8 fino a 256x256.
La prima ragione, la memoria, diventerà molto evidente se si scaricano le immagini e si guardano le loro dimensioni. Si noti la differenza di dimensioni passando da 8x8 fino a 256x256. Se non vuoi scaricarli, ti risparmierò i 30 secondi necessari.
Supponiamo che tutte le nostre immagini abbiano dimensioni di 16x16 pixel (ovviamente questo non è realistico, ma il nostro esempio vale anche per immagini molto più grandi). Le immagini sono 16x16 e occupano un totale di 2,74 KB ciascuna. Diciamo che abbiamo 256 sprite che formano il nostro personaggio. Queste immagini potrebbero includere lui a camminare in direzioni diverse, saltare, sparare a un'arma, o fare qualsiasi altra cosa si possa desiderare che i tuoi personaggi facciano. Se dovessimo inserirli in singoli file PNG 16x16 (il formato PNG è comune per i giochi per dispositivi mobili poiché hanno un ingombro di memoria molto ridotto), occorrerebbero fino a 701.44KB per contenere tutte le immagini. Non sembra così grande perché molti dispositivi hanno molta memoria, giusto? Sì, ma ricorda che probabilmente avremo centinaia di tali immagini nel nostro gioco. Anche così, 701K per una piccola immagine su un dispositivo mobile è troppo grande. Sull'iPhone i giochi più piccoli cercano di rimanere sotto i 20 MB perché è il file più grande che puoi scaricare su 3G. I file più grandi devono essere eseguiti tramite WiFi o scaricati tramite iTunes. Se pensi che un limite di 20 MB sia cattivo, era 10 MB! Ora, diamo un'occhiata al motivo per cui è utile raggruppare i nostri sprite in fogli sprite.
Diciamo che hai messo quei 256 sprite 16x16 su un solo foglio sprite. Quanto pensi che il file risultante sarebbe? Se hai scaricato i file e hai osservato le dimensioni, sai che l'immagine 256x256 è solo 3.42KB! Questo è un risparmio di 698,02 KB! Ma come è possibile!?! La risposta ha a che fare con il modo in cui le immagini vengono ridimensionate e compresse e un sacco di altre cose tecniche alle quali non dovremo partecipare. La cosa importante da togliere è che raddoppiare un'immagine in dimensioni non necessariamente la raddoppia in memoria. Infatti, se guardi le altre dimensioni delle immagini noterai che la dimensione delle immagini da 16x16 a 128x128 sprite sale solo a 2.98KB, e il 256x256 si sposta solo fino a 3.43KB! Lo so, fantastico, vero!?!
Il secondo motivo per cui lo facciamo è per semplicità. I fogli Sprite forniscono un modo piacevole per organizzare tutte le nostre immagini. Se hai mai giocato ad Atari, NES, Sega Saturn, SNES, Gameboy, o praticamente qualsiasi cosa sia 2D, allora hai visto fogli sprite al lavoro. Alcuni di questi giochi contengono migliaia e migliaia di sprite. Fai un gioco come Final Fantasy 3 sul Super Nintendo (che sappiamo tutti è davvero Final Fantasy 6, giusto?). Hanno dozzine di personaggi, centinaia di nemici, incantesimi, oggetti, tipi di terreno e probabilmente diverse dozzine di altre cose che sto lasciando fuori. Quindi, come fanno a tenere traccia di tutti quei singoli spiriti? Ancora una volta, la risposta è fogli sprite. Immagina che invece di avere dozzine di sprite o fogli sprite per ogni personaggio, avevano tutte le immagini per ogni personaggio su 1 foglio. In quel modo sapevano sempre esattamente cosa fare. La vita diventa esponenzialmente più facile quando si lavora su grandi progetti. Come riferimento rapido, cerca l'immagine google per "Finaly Fantasy 6 Sprite Sheets" e consulta alcuni dei fogli sprite di Final Fantasy per avere un'idea di come vengono utilizzati nei giochi di grandi dimensioni.
Il processo generale di creazione di sprite con animazioni è un processo piuttosto semplice. Apri un file vuoto e chiamalo main.lua. La prima cosa che dobbiamo fare è impostare il nostro gestore sprite. Vai avanti e inserisci il seguente codice in:
Accentsconagua
--Questo dovrebbe sembrare familiare, nasconde la barra di stato dalla vista display.setStatusBar (display.HiddenStatusBar) - 'sprite' è ciò che useremo per creare i nostri fogli sprite - 'require' consente a Corona di sapere che stiamo facendo chiamate a funzioni già impostate in un altro file. "sprite" è già incorporato in --Corona quindi non dobbiamo fare altro lavoro a tale scopo - Useremo sprite come "sprite handler" per creare spritesheet local sprite = require ("sprite") Poiché Corona ha già svolto gran parte del lavoro per noi, ci rimane una procedura abbastanza semplice. Ecco cosa devi ricordare. Dal nostro gestore sprite creiamo un foglio sprite. Dal nostro foglio sprite creiamo "set". Dai nostri set, creiamo animazioni e oggetti sprite. Affinché questo metodo di creazione del foglio sprite funzioni, ogni sprite dovrebbe avere la stessa dimensione. Quindi ogni frame del nostro piccolo mostro è 100x100. In questo esempio c'è un lungo foglio di sprite. Affinché questo funzioni nel modo migliore e più efficiente, i fogli di sprite dovrebbero sempre essere realizzati con potenze di 2. 2x2, 4x4, 16x16, 32x32, 64x64, ecc ... Naturalmente non userai mai qualcosa di così piccolo per la maggior parte, ma questo vale fino a 1024x1024. Puoi teoricamente andare anche oltre, tuttavia, ogni dispositivo ha una dimensione massima della trama e se superi la dimensione della trama la tua app non sarà in grado di caricare i fogli sprite. Quindi, prima di aggiungere fogli sprite che sono 4096x4096, assicurati di fare la tua ricerca per assicurarti che il tuo dispositivo di destinazione possa gestirlo! Un'altra cosa da notare è che quando hai le tue immagini in un quadrato, le leggerà nello stesso modo in cui leggeresti un libro. Dall'alto verso il basso, da sinistra a destra, in questo modo:
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
Quindi quando dici al tuo sprite di guardare i fotogrammi dal 6 al 12, saprà automaticamente dove andare.
Aggiungi questo codice al tuo progetto sotto la riga di richiesta:
--la creazione di un nuovo spritesheet interromperà l'immagine che hai inserito in blocchi pari a 100 - da 100, cambia questi parametri in qualsiasi dimensione siano le tue immagini. Si noti che questo metodo - di creazione sprite funziona solo per gli sprite della stessa dimensione. Esistono altri metodi - per gestire gli sprite di diverse dimensioni, ma questo va oltre lo scopo di questo tutorial. local spriteSheet = sprite.newSpriteSheet ("images / monsterSpriteSheet.png", 100, 100) - dal nostro foglio di sprite creiamo uno spriteSet, questo è il modo in cui possiamo raggruppare diversi folletti - insieme per scopi organizzativi. Supponiamo ad esempio di avere 2 mostri diversi, potremmo inserire --them nello stesso spritesheet e creare 2 diversi sprite set ciascuno contenente le informazioni per - i rispettivi frame. Questo set sprite contiene tutti e sette i frame della nostra immagine, definiti da 1 e 7. local monsterSet = sprite.newSpriteSet (spriteSheet, 1, 7) --next eseguiamo animazioni dai nostri set di sprite. Per fare ciò basta indicare la funzione che sprite ci ha assegnato, il nome successivo dell'animazione, il frame di partenza e il numero di fotogrammi nell'animazione, il numero di millisecondi - vogliamo 1 animazione da acquisire e infine il numero di volte in cui desideriamo eseguire l'animazione. 0 lo eseguirà finché non diremo all'animazione di fermare sprite.add (monsterSet, "running", 1, 6, 600, 0) sprite.add (monsterSet, "jumping", 7, 7, 1, 1) - l'ultimo passo è quello di creare uno sprite dal set di sprite che contiene tutte le animazioni locali hero = sprite.newSprite (monsterSet) Ora che abbiamo creato il nostro foglio sprite e ne abbiamo realizzato un oggetto sprite, inizializziamo alcune delle nozioni di base di cui avremo bisogno per lui.
Aggiungi questo sotto l'ultimo bit di codice che hai inserito:
--trova il centro dello schermo x = display.contentWidth / 2 y = display.contentHeight / 2 - una variabile booleana che mostra in quale direzione ci stiamo muovendo verso destra = vero hero.x = x hero.y = y
Quel codice posizionerà il nostro sprite al centro dello schermo. Quindi aggiungi questo codice:
--usa preparati per far sapere allo sprite quale animazione userà hero: prepare ("running") - la riproduzione in corso inizierà l'eroe di animazione caricato: play () Esegui questo codice e dovremmo far girare il nostro piccolo mostro sul posto al centro dello schermo. Questo è tutto ciò che c'è da fare per creare sprite animati da fogli sprite. Li utilizzeremo un po 'più in profondità nelle seguenti esercitazioni. Per un riferimento completo sui fogli sprite, è possibile consultare il riferimento Corona SDK. Questo è tutto ciò che copriremo sull'argomento per ora, quindi spero che sia sufficiente per iniziare! Per un effetto finale prima di andare a far scorrere il mostro sullo schermo, aggiungi il seguente codice alla fine del tuo codice:
function update () - se stiamo correndo a destra, continua a muoverti a destra se (a destra) poi hero.x = hero.x + 3 - se non stiamo andando a destra continua a spostarti a sinistra else hero.x = hero.x - 3 fine - se il nostro mostro è scappato dallo schermo, fallo girare - e corri nella direzione opposta. hero.xScale = -1 - invertirà il nostro sprite orizzontalmente if (hero.x> 380) then right = false hero.xScale = -1 end if (hero.x < -60) then right = true hero.xScale = 1 end end --call the update function timer.performWithDelay(1, update, -1)
Roba facile Spoglia tutti i commenti che ho fatto nel codice spiegando le cose e vedrai quanto è facile Corona che mette in piedi degli sprite animati. Se hai domande o commenti, fammi sapere!
