Share
Bine ați venit în cea de-a treia tranșă a jocului nostru fără sfârșit! Acest tutorial se va referi la modul de creare a spritelor prin foi de sprite și prin animarea caracterului nostru de joc. Până acum, în jocul nostru ar trebui să avem o vedere frumoasă, cu trei straturi de imagini derulând la viteze diferite, făcând o parollaxă minunată de derulare! Următorul pas logic pentru noi este să adăugăm eroul nostru la joc. Vom face acest lucru în două etape. Acest tutorial va acoperi primul pas. Următorul tutorial va acoperi efectiv adăugarea eroului în jocul nostru existent și adăugarea de controale pentru al face să urmeze fiecare comandă.
Acum, înainte să începem jocul, să vorbim repede despre sprite, foi de sprite și animație în termeni generali. Dacă aveți experiență în ceea ce privește grafica, animația sau dezvoltarea jocurilor, acesta este probabil un subiect familiar pentru dvs. Cu toate acestea, pentru discuția noastră, vom presupune că nu aveți experiență cu niciunul dintre subiectele menționate mai sus. Deci, să începem cu animația. Animația în jocuri se face exact așa cum se face în desene animate și filme. Gândește-te la ce se întâmplă când te duci la filme și încep filmul. Când vizionați filmul, nu vă uitați la mutare și vorbire, dar vizionați o serie de imagini intermitente, cu sunet jucat de-a lungul tamburului în același timp, oferind iluzia că vizionați ceva viu și respiraţie. Acesta este același lucru care se întâmplă cu jocurile noastre. Creați iluzia "vieții" prin intermiterea rapidă a imaginilor pe ecran. Când acest lucru se face destul de repede, devine o animație netedă. Deci, întrebarea este cum vom obține aceste animații netede în jocul nostru. Răspunsul este acela de a folosi sprite. Corona SDK oferă funcționalitatea sprites pentru noi, astfel încât singurul lucru de care avem nevoie să ne facem griji este crearea de sprites noastre și atribuirea animațiile noastre pentru ei. Uitați-vă la gif animat de mai jos:
Când vedeți acea animație, se pare că un mic monstru rulează și aruncă brațele. Ceea ce vă uitați cu adevărat este o serie de imagini, luate dintr-o singură foaie de sprite, care clipesc mereu. Rețineți că ultima imagine din secvență nu este inclusă în animație. Aceasta este o foaie de sprite simplă, și așa veți crea și imaginile pentru jocul dvs..
Deci, întrebarea exact de ce am folosit foi de sprite a apărut probabil în mintea ta. Răspunsul este de două ori și destul de simplu: memorie și simplitate. Vreau să te uiți la cele patru imagini pe care le-am făcut mai jos. Toate modelele foarte simple, cu carouri (cu toate că spritele sunt foarte mici, astfel încât acestea nu par a fi așa, dar le deschideți în orice program și măriți și veți vedea tabla de verificare: D), cu dimensiuni cuprinse între 8x8 până la 256x256.
Primul motiv, memorie, va deveni foarte evident dacă descărcați imaginile și căutați dimensiunile lor. Observați diferența de mărime de la trecerea de la 8x8 până la 256x256. Dacă nu doriți să le descărcați, vă voi plăti cele 30 de secunde pe care le-ați fi luat.
Să presupunem că toate imaginile noastre vor avea 16x16 pixeli în dimensiune (desigur, acest lucru nu este realist, dar exemplul nostru este valabil și pentru imaginile mult mai mari). Imaginile sunt 16x16 și ocupă câte 2.74KB. Să spunem că avem 256 de sprites care ne compun caracterul. Aceste imagini ar putea să-l includă pe el mergând în diferite direcții, sărind, aruncând o armă sau făcând orice altceva care ar putea să-ți dorească personajele tale. Dacă ar fi să le punem în fișiere PNG 16x16 individuale (PNG este un format comun pentru jocuri pe mobil deoarece au o amprentă de memorie foarte mică), ar fi nevoie de până la 701.44KB pentru a ține toate imaginile. Asta nu pare atât de mare, deoarece majoritatea dispozitivelor au o mulțime de memorie, nu? Da, dar amintiți-vă că probabil vom avea sute de astfel de imagini în jocul nostru. Chiar și așa, 701K pentru o imagine mică pe un dispozitiv mobil este prea mare. Pe iPhone cele mai mici jocuri încearcă să rămână sub 20MB, deoarece este cel mai mare fișier pe care îl puteți descărca pe 3G. Fișierele mai mari trebuie să fie realizate prin WiFi sau descărcate prin iTunes. Dacă credeți că o limită de 20MB este rău, a fost de 10MB! Acum, haideți să ne uităm de ce este bine să grupăm spritele noastre în foi de sprite.
Să spunem că ai pus acei 256 16x16 sprites pe o singură foaie de sprite. Cât de mare credeți că ar fi fișierul rezultat? Dacă ați descărcat fișierele și ați examinat dimensiunile pe care le știți că imaginea de 256x256 este de numai 3,42KB! Aceasta este o economie de 698.02KB! Dar cum este posibil acest lucru? Răspunsul are legătură cu modul în care imaginile sunt scalate și sunt comprimate și multe alte lucruri tehnice pe care nu le vom intra. Lucrul important de luat este că dublarea unei imagini în dimensiune nu o dublează neapărat în memorie. De fapt, dacă vă uitați la celelalte dimensiuni ale imaginilor, veți observa că dimensiunea imaginilor de la 16x16 la 128x128 sprite se deplasează numai până la 2.98KB, iar 256x256 se deplasează numai până la 3.43KB! Știu, minunat!?!
Cel de-al doilea motiv pentru care facem acest lucru este pentru simplitate. Foliile Sprite oferă o modalitate frumoasă de a organiza toate imaginile noastre. Dacă ați jucat vreodată un joc despre Atari, NES, Sega Saturn, SNES, Gameboy sau ceva aproape 2D, atunci ați văzut foi de sprite la serviciu. Unele dintre aceste jocuri au mii și mii de sprites în ele. Faceți un joc ca Final Fantasy 3 pe Super Nintendo (despre care știm cu toții că este cu adevărat Final Fantasy 6, nu?). Au zeci de personaje, sute de dușmani, vrăji, obiecte, tipuri de terenuri și, probabil, câteva duzini de alte lucruri pe care le-am lăsat afară. Deci, cum păstrează evidența tuturor acestor sprite individuale? Din nou, răspunsul este foile de sprite. Imaginați-vă că în loc să aveți zeci de sprite sau foi de sprite pentru fiecare personaj, au avut toate imaginile pentru fiecare personaj pe o coală. În felul acesta au știut întotdeauna exact ce să facă referire. Viața devine mai simplă atunci când lucrați la proiecte mari. Ca o referință rapidă, căutarea imaginii Google pentru "Finaly Fantasy 6 Sprite Sheets" și verificarea unor foi de sprite de la Final Fantasy pentru a obține o idee despre modul în care sunt folosite în jocurile mari.
Procesul general de creare a spritelor cu animații este un proces destul de simplu. Deschideți un fișier gol și denumiți-l principal.lua. Primul lucru pe care trebuie să-l facem este să-i înființăm pe mâna noastră. Mergeți și puneți următorul cod în:
--Acest lucru ar trebui să pară familiar, ascunde bara de stare din ecranul de afișare.setStatusBar (display.HiddenStatusBar) - "sprite" este ceea ce vom folosi pentru a crea foile noastre sprite - "necesită" îi permite Corona să știe că suntem apelați la deja funcții stabilite într-un alt fișier. "Sprite" este deja încorporat în "Corona", așa că nu trebuie să mai lucrăm în acest scop. - Vom folosi sprite ca "manipulator de sprite" pentru a crea sprite. Sprite local = Sprite
Deoarece Corona a făcut deja cea mai mare parte a muncii pentru noi, am rămas cu un proces destul de simplu. Iată ce trebuie să vă amintiți. De la manipulatorul nostru de sprite vom crea o foaie de sprite. Din foaia noastră de sprite creăm "seturi". Din seturile noastre, creăm animații și obiecte sprite. Pentru ca această metodă de creare a foii de sprite să funcționeze, fiecare sprite ar trebui să aibă aceeași dimensiune. Deci fiecare cadru al micului nostru monstru este de 100x100. În acest exemplu există o foaie lungă de sprite. Pentru ca aceasta să funcționeze cât mai bine și mai eficient, foile de sprite ar trebui întotdeauna să fie realizate în puteri de 2x2, 4x4, 16x16, 32x32, 64x64, etc ... Desigur, nu veți folosi niciodată nimic mic, în cea mai mare parte, dar acest lucru este adevărat până la 1024x1024. Teoretic, puteți merge chiar și mai mare, însă fiecare dispozitiv are o dimensiune maximă a texturii, iar dacă treceți deasupra acestei dimensiuni a texturii, aplicația dvs. nu va putea încărca coli de sprite. Deci, înainte de a vă adăuga foi de sprite care sunt 4096x4096, asigurați-vă că faceți cercetările pentru a vă asigura că dispozitivul țintă vă poate rezolva! Un alt lucru de observat este că atunci când aveți imaginile într-un pătrat, le veți citi în același mod în care ați citit o carte. De sus în jos, de la stânga la dreapta, după cum urmează:
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
Deci, când îi spui spriteului tău să se uite la cadrele de la 6 la 12, el va ști automat unde să meargă.
Adăugați acest cod la proiectul dvs. sub linia de solicitare:
Accentsconagua
--crearea unei noi foi de sprite va sparge imaginea pe care o puneți în blocuri chiar 100 - prin 100, modificați acești parametri la orice dimensiune a imaginilor. Rețineți că această metodă - creare de sprite funcționează numai pentru sprite care au aceeași dimensiune. Există și alte metode - de a gestiona sprite de diferite dimensiuni, dar acest lucru depășește scopul acestui tutorial. local spriteSheet = sprite.newSpriteSheet ("images / monsterSpriteSheet.png", 100, 100) - din fila noastră de sprite creăm un spriteSet, așa cum putem grupa diferite sprites - împreună pentru scopuri organizaționale. Spune, de exemplu, că am avut 2 monștri diferiți, am putea să le punem în aceeași foaie de date și să creăm două seturi de sprite diferite, fiecare având informațiile pentru respectivele cadre. Acest set sprite deține toate cele șapte cadre în imaginea noastră, definite de 1 și 7. local monsterSet = sprite.newSpriteSet (spriteSheet, 1, 7) - după aceea vom face animații din seturile noastre sprite. Pentru a face acest lucru, pur și simplu spuneți - funcția pe care sprite-ul ne-a stabilit-o, următorul nume de animație, dați frame-ul de pornire și numărul de cadre din animație, numărul de milisecunde - vrem să facem o animație, de câte ori vrem ca --animarea să se execute. 0 va face să ruleze până când vom spune animației să oprească sprite.add (monsterSet, "running", 1, 6, 600, 0) sprite.add (monsterSet, "jumping", 7, 7, 1, 1) ultimul pas este de a face un sprite din setul nostru sprite care deține toate animațiile erou local = sprite.newSprite (monsterSet) Acum, când avem o foaie de sprite creată și am făcut un obiect sprite din asta, să inițializăm câteva din elementele de bază de care avem nevoie pentru el.
Adăugați aceasta sub ultimul bit de cod introdus de dvs.:
--găsește centrul ecranului x = display.contentWidth / 2 y = display.contentHeight / 2 - o variabilă booleană care arată direcția în care ne mișcă dreapta = adevărat hero.x = x hero.y = y
Acest cod va plasa sprite noastre în centrul ecranului. Înainte adăugați acest cod:
--utilizați pregătiți pentru a lăsa sprite să știe ce animație intenționează să folosească eroul: pregătește ("rulează") - redarea melodiei va porni eroul animat încărcat: play () Rulați acest cod și ar trebui ca monștrii noștri să fie difuzați în centrul ecranului. Asta e tot ce este pentru a crea sprite animate din foi sprite. Îi vom folosi în detaliu în următoarele tutoriale. Pentru o referință completă asupra foilor de sprite, puteți să consultați referința SDK Corona. Acesta este tot ce vom acoperi pe această temă pentru moment, deci sperăm că este suficient să începeți! Pentru un efect final înainte de a merge la montarea monștrilor pe ecran, adăugați următorul cod în partea de jos a codului:
function () - daca functionam corect atunci continuam sa ne mutam dreapta daca (dreapta) atunci hero.x = hero.x + 3 - daca nu ne mutam corect mergem in miscare stanga altceva hero.x = hero.x - 3 sfârșitul - dacă monstrul nostru a fugit de pe ecran să-l întoarcă - și a alerga în direcția opusă. hero.xScale = -1 - va întoarce sprite-ul nostru orizontal dacă (hero.x> 380) apoi right = false hero.xScale = -1 sfârșit dacă (hero.x < -60) then right = true hero.xScale = 1 end end --call the update function timer.performWithDelay(1, update, -1)
Lucru ușor. Îndepărtați toate comentariile pe care le-am făcut în codul care explică lucrurile și veți vedea cât de ușor vă ajută Corona să creeze sprite animate frumos. Dacă aveți și întrebări sau comentarii, anunțați-ne!
