Share
În toate tutorialele Craft până în acest moment, ați folosit cutii pătrate sau dreptunghiulare pentru a înțelege diferite concepte precum animație și tastatură sau evenimente de tip touch. În timp ce aceasta este o modalitate excelentă de a afla mai multe despre bibliotecă, probabil că veți dori să utilizați imagini în jocurile dvs. reale.
În acest tutorial, veți învăța cum să încărcați foi de sprite pentru a utiliza imagini diferite în joc. După aceea, veți învăța cum să animați diferite personaje folosind animația sprite.
Pentru cei care nu sunt familiarizați cu foile de sprite, ele sunt fișiere imagine care conțin mai multe grafici mai mici, aranjate împreună într-o rețea. Fiecare dintre aceste grafice mai mici sau sprite pot fi folosite singure sau împreună cu alte imagini pentru a anima diferite obiecte.
Nu puteți încărca direct o foaie de sprite în Crafty și începeți să o utilizați. De asemenea, va trebui să-i spuneți lățimea și înălțimea diferitelor plăci sau sprite în foaia dvs. de sprite. De asemenea, puteți oferi anumite nume anumitor imagini. De exemplu, un sprite cu o piatră mică în el poate fi numit "small_stone" pentru o referință ușoară. Amintirea unui nume de placă este mult mai ușoară decât să ne amintim coordonatele reale ale diferitelor imagini.
Vom folosi următoarea foaie de sprite de către tokka în diferite demo-uri ale acestui tutorial.
Ea are o mulțime de imagini care pot fi folosite atunci când jucătorul este de mers pe jos, sărind, în picioare în picioare, sau împușcat. În acest caz, lățimea și înălțimea majorității plăcilor sunt de 80 px și respectiv 94 de pixeli. Unele foi de sprite ar putea avea, de asemenea, un extra padding în jurul plăcilor individuale sau a foii sprite ca un întreg. Acestea pot fi specificate în timpul încărcării foii de sprite folosind paddingX, paddingY, și paddingAroundBorder proprietăţi.
Aici este codul de care avem nevoie pentru a încărca foaia de sprite de mai sus în jocul nostru:
var joc_assets = "sprites": "hero_spritesheet.png": tile: 80, tileh: 94, harta: hero_idle: [0, 0], hero_walking: [1, , hero_sitting: [0, 4]; Crafty.load (game_assets);
Plăcuțele sunt menționate cu ajutorul unei perechi de numere. Primul număr determină coloana spriteului nostru, iar al doilea numără rândul său. Numerele sunt bazate pe zero. De exemplu, sprite din prima coloană și primul rând poate fi accesat prin utilizarea [0, 0]. În mod similar, sprite în coloana a treia și al patrulea rând poate fi accesat folosind [2, 3]. Așa cum am menționat mai sus, puteți da diferite nume pentru spritele individuale pentru ușurința de utilizare.
Odată ce ați încărcat o foaie de sprite, puteți reda imaginile pe ecran folosind următorul cod:
Accentsconagua
var idle_hero = Crafty.e ("2D, Canvas, hero_idle") .attr (x: 10, y: 10); X și y atributele determină locația la care vor fi redate spritele. De asemenea, puteți seta lățimea și înălțimea spritelor individuale utilizând butonul w și h atribute.
Deoarece sprite are a 2D componenta, puteți aplica toate proprietățile și atributele 2D componente pentru aceste imagini. De exemplu, puteți să vă răsturnați eroul orizontal, astfel încât acesta să se confrunte cu cealaltă direcție this.flip ( "X"). În mod similar, puteți roti un sprite folosind rotație atribui sau face transparent prin utilizarea alfa atribut.
var sitting_hero = Crafty.e ("2D, Canvas, hero_sitting") .attr (x: 440, y: 250) .flip ("X");Să presupunem că trebuie să faci doar o parte dintr-un sprite dat pe pânză. Puteți face acest lucru cu ajutorul .cultură (număr x, y Number, Număr w, Număr h) metodă. Primii doi parametri determină valorile de offset x și y ale sprite. Ultimii doi parametri determină lățimea și înălțimea spritelui tăiat. Toate valorile ar trebui specificate în pixeli.
Până în acest moment, ați mutat diferite entități prin schimbarea lor X și y atribute. Nu a fost o problemă în timp ce în majoritatea timpului v-ați mișcat doar cutii dreptunghiulare. Cu toate acestea, mișcarea personajului principal în jurul nostru, alunecându-l așa va arăta foarte nefiresc. Adăugarea animației la obiecte precum monedele pe care un jucător le poate colecta va face jocul mai plăcut.
Toate animațiile legate de sprite vă cer să adăugați SpriteAnimation componentă a entității. Această componentă tratează diferite imagini dintr-o hartă sprite ca cadre de animație.
Informațiile despre o animație sunt stocate în tambur obiect. Obiectul bobinei are cinci proprietăți diferite:
id care este numele bobineirame array care are o listă de cadre pentru animație în format [xpos, ypos] currentFrame proprietate care returnează indexul cadrului curenteasing proprietate care determină modul în care animația ar trebui să avansezedurată proprietate care stabilește durata de animație în milisecundeExistă patru evenimente diferite care pot fi declanșate de o animație sprite. Acestea sunt:
Toate aceste evenimente primesc tambur obiect ca parametru.
Pe lângă tambur obiect, există, de asemenea, a .tambur() care este folosită pentru a defini animațiile sprite. Puteți utiliza funcția .anima() pentru a juca oricare dintre animațiile definite.
Procesul de animație sprite începe prin crearea unui sprite static pe pânză.
var walking_hero = Crafty.e ("2D, Canvas, hero_walking, SpriteAnimation") .attr (x: 40, y: 20); hero_walking imagine în cazul de mai sus este prima imagine pe care utilizatorul o vede înainte de animație. Atributele sunt utilizate pentru a specifica locația entității curente. Odată ce entitatea a fost creată, puteți utiliza funcția .tambur() metodă pentru a defini animația reală.
walking_hero.reel ("mersul pe jos", 1000, [[0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1]];Această metodă acceptă trei parametri. Primul parametru este id-ul a animației create. Al doilea parametru este utilizat pentru a seta durata de animație în milisecunde, iar al treilea parametru este o serie de tablouri care conțin poziția coloanei (x) și rândul (y) a cadrelor succesive. În acest caz, matricea conține poziția tuturor spritelor din al doilea rând.
O altă versiune a acestei metode necesită cinci parametri. Primii doi parametri sunt bobina id-ul și lungimea animației. Al treilea și al patrulea parametru sunt utilizați pentru a seta pozițiile de pornire x și y pentru animație pe hartă de sprite. Ultimul parametru stabilește numărul de cadre secvențiale din animație. Când este setat la o valoare negativă, animația se va reda înapoi.
Animația de mai sus poate fi creată folosind următorul cod:
walking_hero.reel ("mersul pe jos", 1000, 0, 1, 6);Deși această versiune este succintă, este puțin limitată. Această metodă este utilă numai dacă toate spritele pe care doriți să le includeți în animație sunt într-un singur rând. În plus, animația va afișa aceste imagini în ordinea în care apar în foaia de sprite.
După ce ați definit animația, o puteți reda folosind .anima (reel_Id [, loopCount]) metodă. Primul parametru este animația pe care doriți să o redați, iar al doilea parametru determină de câte ori doriți să redați această animație. Animațiile sunt redate o singură dată în mod prestabilit. reglaj loopCount la -1 va juca animația pe o perioadă nedefinită.
În anumite situații, poate doriți să jucați o animație doar o singură dată pe baza unui eveniment. De exemplu, o animație de salt ar trebui să fie jucată atunci când utilizatorul apasă un buton pentru a face saltul jucătorului. Puteți încerca acest lucru în demo-ul de mai sus. Apăsarea butonului Săgeata în sus cheie va face al doilea salt sprite. Aici este codul pentru detectarea apăsării tastelor:
jumping_hero.bind ('KeyDown', funcția (evt) if (evt.key == Crafty.keys.UP_ARROW) jumping_hero.animate ("jumping", 1););De asemenea, aveți posibilitatea să întrerupeți și să reluați animațiile la jumătatea distanței utilizând butonul .pauseAnimation () și .resumeAnimation () metode.
Dacă un singur sprite are mai multe animații atașate la acesta, puteți determina dacă o animație specifică se joacă în prezent utilizând .isPlaying ([String reelId]) metodă. Daca nu id-ul este furnizat, va verifica dacă orice animație se joacă deloc.
După finalizarea acestui tutorial, ar trebui să puteți încărca propriile foi de sprite în Craft și să le folosiți pentru a reprezenta entități diferite de joc în loc de diferite dreptunghiuri. Acum puteți aplica diferite animații unei entități pe baza unor evenimente diferite. Trebuie să vă reamintesc că am folosit versiunea Crafty 0.7.1 în acest tutorial și că demo-urile ar putea să nu funcționeze cu alte versiuni ale bibliotecii.
JavaScript a devenit una dintre limbile de-facto de lucru pe web. Nu este fără curbele de învățare și există o mulțime de cadre și biblioteci pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem la dispoziție pe piața Envato.
În următorul tutorial, veți învăța cum să adăugați sunete în joc.
