Kaip sukurti kelių valstybių animaciją savo HTML5 žaidime

Autorius Andy Harrisas

Visam šiam judesiui vykstant jūsų HTML5 žaidime, tikrai norėsite kelių sudėtingų animacijų. Galite naudotipakeisti vaizdą ()arbasetImage ()funkcija (jie yra du skirtingi to paties dalyko pavadinimai) bet kuriuo metu pakeisti vaizdą, susietą su sprite. Tačiau kartais norisi kur kas įmantresnių animacijų. Pažiūrėk įwalkAimim.html.



image0.jpg



Čia vyksta daugybė vaizdų keitimo. Pėsčiųjų animacija iš tikrųjų yra aštuonių skirtingų vaizdų serija, greitai pakeista, kad sukurtų ėjimo iliuziją. Yra 4 skirtingos animacijos (po vieną kiekvienai kardinaliai krypčiai), taigi tai iš viso 32 skirtingi vaizdai. Tačiau, jei peržiūrėsite kodą, pamatysite, kadcharakterissprite yra tik vienas vaizdas.

image1.jpg



Šis vaizdas yra sudėtinė animacija. Kiekviena eilutė nurodo kryptį, o kiekvienoje eilutėje yra ciklas arba vaizdų serija, skirta pakartoti.

rpg_sprite_walk.pngvaizdą sukūrė Franckas Dupontas. Jis dosniai paskelbė šį vaizdą „OpenGameArt.org“ svetainė , kur jis žinomas kaip Arikelis. Jis išleido savo kūrinį pagal specialią licenciją „Attribution - Share Alike“. Tai reiškia, kad žmonės gali nemokamai naudoti ar remiksuoti jo kūrinį, jei tik jie priskiria originalų autorių.

Fono paveikslėlis yra autorius, vardu „Hyptosis“, kuris viešoje erdvėje išleido vaizdus toje pačioje svetainėje. Talentingi ir apgalvoti bendradarbiai, tokie kaip Franckas ir „Hyptosis“, yra raktas į klestinčią kūrybinę bendruomenę. Nedvejodami peržiūrėkite atvirą žaidimo meno svetainę, kur rasite daugiau puikių meno kūrinių, kuriuos galite naudoti savo žaidimuose, tačiau būtinai padėkokite ir priskirkite autorius taip, kaip jie nusipelnė.



simpleGame.jsbibliotekoje yra funkcija, leidžianti gana lengvai kurti kelių vaizdų animacijas. Peržiūrėkite kodąwalkAimim.htmlnorėdami pamatyti, kaip tai veikia:

 walkAnim.html 

Norėdami sukurti animaciją, turite atlikti kelis naujus veiksmus, tačiau rezultatai yra visiškai verti pastangų.

  1. Gaukite animacijos vaizdą.

    Galite patys susikurti vaizdą arba pažvelgti į puikius išteklius, pvz., „OpenGameArt.org“, norėdami rasti kitų atliktų darbų. Žinoma, jūs esate atsakingas už kitų darbų gerbimą, tačiau šiandien yra labai puikių darbų, leidžiančių naudoti labai leidžiančias licencijas. Įsitikinkite, kad vaizdas yra išdėstytas eilutėmis ir stulpeliais ir kad kiekvienas antrinis vaizdas yra tiksliai tokio paties dydžio.

    Gali tekti susipainioti su paveikslėlių redaktoriumi, kad įsitikintumėte, jog vaizdas yra tinkamo formato ir žinote kiekvieno papildomo vaizdo dydį.

  2. Pritvirtinkite animacinį vaizdą prie savo sprite.

    Prie savo „sprite“ pritvirtinsite visą vaizdą, bet tik vienu metu rodysite nedidelę jo dalį. Tai yra lengviau nei dirbti su daugybe vaizdų, be to, tai yra efektyviau.

  3. Sukurkite animacijos objektą naudodamiloadAnimation ()metodas.

    thc aliejaus šalutinis poveikis

    Kai pasikviesiteloadAnimation ()objekto metodą, kuriate animacijos įrankį, kuris padeda valdyti animaciją. Pirmieji du parametrai yra viso vaizdo dydis (plotis ir aukštis), o antrieji du parametrai yra kiekvieno antrinio vaizdo plotis ir aukštis. Jei klaidingai įvertinsite šias reikšmes, bus rodoma animacija. Žaisk tol, kol teisingai suprasi šias vertybes:

    character.loadAnimation(192, 128, 24, 32);
  4. Sukurkite animacijos ciklus.

    Kiekviena eilutė bus paversta animacijos ciklu. Numatytoji versija (be jokių parametrų) veikia puikiai daugeliu atvejų. Dokumentuose rasite pažangesnius šio įrankio naudojimo būdus:

    character.generateAnimationCycles();
  5. Pervardykite ciklus.

    Animacijos, sukurtos naudojantbuildAnimationCycles ()komanda turi numatytuosius pavadinimus, tačiau beveik visada geriau pridėti savo, prasmingesnius vardus. Pridėkite masyvą su pavadinimu, nurodančiu, ką reiškia kiekviena eilutė:

    character.renameCycles(new Array('down', 'up', 'left', 'right'));
  6. Nustatykite animacijos greitį.

    Animacijos greitis nurodo, kaip greitai animacija veiks. 500 vertė daugumai programų atrodo tinkama, tačiau galite pakoreguoti šią vertę, kad veikėjo ėjimo ciklas atrodytų taip, lyg jis iš tikrųjų paskatintų veikėją:

    character.setAnimationSpeed(500);
  7. Nustatykite, kurį ciklą ketinate rodyti.

    setCurrentCycle ()metodas leidžia pasirinkti ciklą su vienu iš pavadinimų, kuriuos nurodėtepervadintiAnimationCycles ()žingsnis:

    character.setCurrentCycle('down');
  8. Naudotipauzė Animacija ()komanda sustabdyti animaciją.

    pauzė Animacija ()komanda priverčia animaciją laikinai sustabdyti.

  9. NaudokiteplayAnimation ()pradėti animaciją.

    Šis metodas nuolat sukurs dabartinį animacijos ciklą.

Kaip matote, animacija suteikia daug malonumo žaidimams ir atveria visą vaidmenų žaidimų sritį jūsų repertuare.