Share
În acest tutorial vom explora suita de biblioteci CreateJS. CreateJS este o suită de biblioteci JavaScript și instrumente pentru construirea de experiențe interactive bogate cu HTML5. Suita CreateJS este împărțită în patru biblioteci.
Prima bibliotecă la care ne vom uita este Galeriile. Să începem!
EaselJS este o bibliotecă pentru lucrul cu panza HTML5. Este alcătuită dintr-o listă completă, ierarhică de afișare, un model de interacțiune de bază, și clase de ajutor pentru a face lucrul cu Canvas mult mai ușor. Noțiuni de bază și de funcționare cu EaselJS nu ar putea fi mai ușor. Va trebui să definiți un element de canvas în HTML și să îl referiți în JavaScript. EaselJS utilizează noțiunea de Stage care este containerul de nivel superior pentru lista de afișare (etapa va fi elementul dvs. de panza). Mai jos este un fragment HTML și JavaScript-ul corespunzător necesar pentru configurarea programului EaselJS.
Pentru a face referire la panza de mai sus, veți folosi următoarele.
Accentsconagua
var canvas = document.getElementById ("testCanvas"); var etapă = noi creații.Set (pânză); EaselJS vine cu o clasă Graphics care expune un ușor de utilizat API pentru generarea instrucțiunilor de desen vectorial și desenarea acestora într-un context specificat. Comenzile sunt foarte asemănătoare cu cea normală HTML5 Canvas, în timp ce EaselJs adaugă unele dintre propriile comenzi noi. Dacă nu sunteți familiarizați cu panza HTML 5 și cu comenzile de desen, vă recomandăm să urmăriți cursul Canvas Essentials care a fost lansat recent. În mod normal nu veți folosi clasa Graphics de la sine, ci mai degrabă accesați-o prin clasa Shape. Mai jos este un JSFiddle care folosește acea clasă Shape pentru a face niște desene.
După cum puteți vedea în codul de mai sus, comenzile sunt lanțabile ShapeObject.graphics.setStrokeStyle (1) .beginStroke ( "RGBA (0,0,0,1) etc ... S-ar putea să fi observat și un apel către stage.addChild () în cadrul funcțiilor. Ori de câte ori doriți să puneți ceva pe pânză, trebuie să sunați stage.addChild (). În cadrul drawShapes () funcția, există un apel la stage.update (). Pentru a putea vedea modificările, trebuie să apelați stage.update () după fiecare schimbare la pânză. Există o modalitate de a nu trebui să sunați în mod repetat stage.update () și care este prin utilizarea Classer Ticker. Tickerul oferă o transmisie centrală sau o transmisie la un interval prestabilit. Ascultătorii se pot abona la evenimentul de bifare care trebuie notificat când a trecut un interval de timp stabilit. Mai jos este modul în care ați folosi clasa Ticker pentru a actualiza automat etapa.
createjs.Ticker.addEventListener ("bifați", handleTick); funcția handleTick (eveniment) stage.update () Clasa Shape vine cu o mulțime de proprietăți pe care le puteți ajusta, cum ar fi X y pozițiile, alfa, scaleX, scaleY și alți câțiva alții. Mai jos este o demonstrație care arată unele dintre aceste proprietăți.
În cadrul drawTheShapes () noi generăm 15 cercuri cu o linie trasată prin ele, fiind capabile să lanseze comenzile desenului face acest lucru simplu mort. Atunci vom randomiza pozițiile, scala, rotația și alfa.
Puteți atașa evenimente la forme cum ar fi clic, mousedown / peste / out, etc, folosind pe() metodă. În această demonstrație când faceți clic pe una dintre forme, o alertă este aruncată în sus, iar pe mouseout vom conecta un mesaj la consola. Pentru a permite evenimentele mouse-ului pe scenă mousedown / peste / out etc, trebuie să sunați stage.enableMouseOver (frecvență) unde frecvența este numărul de ori pe secundă pentru a difuza evenimentele mouse-ului. Această operație este costisitoare, deci este dezactivată implicit.
EaselJS este livrat cu o clasă de text care face foarte ușor de creat text și de a schimba proprietățile pe acel text. Apelați constructorul care trece în text, un font și o culoare, adică. createjs.Text nou ("Hello World", "20px Arial", "# ff7700") Ca și în clasa Shape, aceasta are o varietate de proprietăți și metode. Mai jos este o demonstrație care utilizează clasa Text.
Similar cu ultima demonstrație, creăm 25 de texturi și aplicăm câteva valori aleatorii proprietăților lor.
Demo-ul următor este un joc de tip hangman creat utilizând clasa Shape and Text pe care am discutat-o până acum în acest tutorial.
Pentru a atrage un hangman, folosim o combinație lineTo (), MoveTo (), iar pentru capul pe care îl folosim arc() metodă. În cadrul drawCanvas () funcția, numim clar() metoda pe hangmanShape.graphics care eliberează orice desene anterioare pe care le-am făcut în această formă. Schimbăm culoarea TextFields în funcție de faptul dacă jucătorul a câștigat sau și-a pierdut jocul.
Puteți utiliza imagini utilizând clasa Bitmap. O imagine Bitmap reprezintă o imagine, o canava sau un video în lista de afișare, poate fi instanțiată utilizând un element HTML existent sau un șir (Base64). De exemplu noi creațis.Bitmap ("imagePath.jpg").
<
Foarte asemănătoare cu demo-urile anterioare creăm trei imagini bitmap și le oferim câteva proprietăți aleatorii.
Folosim clasa Shadow pentru a crea unele umbre. Clasa de umbre are ca parametri, culoarea, offsetX, offsetY și dimensiunea efectului de estompare etc. myImage.shadow = noul creatSs.Shadow ("# 000000", 5, 5, 10). Puteți aplica umbre la orice obiect de afișare, astfel încât aceasta să funcționeze și pentru text.
Un Sprite afișează un cadru sau o secvență de cadre (cum ar fi o animație) dintr-o instanță SpriteSheet. O foaie de sprite este o serie de imagini (de obicei, cadre de animație) combinate într-o singură imagine. De exemplu, o animație formată din opt imagini 100x100 poate fi combinată într-o foaie sprite de 400x200 (patru cadre pe două înălțime). Puteți afișa cadre individuale, puteți juca cadre ca animație și chiar și animații de secvențe. Pentru a inițializa o instanță Sprite, treceți, de exemplu, un număr SpriteSheet și un număr de cadru opțional sau o animație de redare, noi createjs.Sprite (spriteSheet, "run"). Datele transmise constructorului SpriteSheet definesc trei fragmente critice de informații:
Mai jos este un exemplu de cod care ar inițializa un sprite "caracter".
var data = new createjs.SpriteSheet ("imagini": ["path / to / image.png"], "frames": "regX": 0, "height" ": 0," lățime ": 75," animații ": " walk ": [0, 9]); caracter = noi createjs.Sprite (date, "plimbare"); character.play (); Aici este un demo care utilizează clasa Sprite și SpriteSheet. Trebuie să faceți clic pe scenă, apoi puteți folosi "A" pentru a vă deplasa spre stânga, iar "D" pentru a vă deplasa la dreapta. Un lucru de remarcat despre acest demo este că am codificat Base64 imaginile și sunt incluse în resursele externe "imagestrings.js". Pentru că folosim un SpriteSheet și interacționăm cu mouse-ul, pânza este pătată de politica de imagini cu domenii transversale (CORS). Prin utilizarea șirurilor Base64 putem depăși acest lucru. Dacă acestea ar fi găzduite pe propriul dvs. domeniu, ați folosi clasa Bitmap ca de obicei prin trecerea unui element sau a unei căi.
În cadrul înființat() funcția pe care o creăm spritesheet. Pentru cheia "imagini", trec characterImage care este un șir codificat Base64. Pentru tasta "cadre" imaginile caracter sunt de 96 de pixeli înălțime, 75 de pixeli lățime, și există zece cadre (imagini separate). Mai jos este imaginea pe care o folosim pentru spritesheet astfel încât să puteți vizualiza ceea ce pare.
Pentru tasta "animație" definim o animație "rulați" care este de la "cadru" zero la nouă. În cele din urmă, creăm caracter de la spritesheet.
Când mutați caracterul la stânga sau la dreapta sunăm character.play (). și când nu mai mișcați personajul pe care îl sunămcharacter.gotoAndStop (0). Deoarece avem doar o "animație", putem să sunăm Joaca() și gotoAndStop () dacă ai avea un număr de animații, ai folosi o combinație a celor două plus gotoAndPlay ().
Clasa Container este o listă nesemnificativă de afișare care vă permite să lucrați cu elemente de afișare combinate. De exemplu, ați putea grupa instanțele bitmap, picior, trunchi și cap de Bitmap împreună într-un Container Person și transformați-le ca grup, în timp ce încă puteați să mutați părțile individuale unul față de celălalt. Copiii containerelor au proprietatea de transformare și alfa concatenate cu containerul părinte. Mai jos este o demonstrație care folosește clasa Container. Faceți clic pe etapă pentru a muta containerul cu 20 de pixeli.
Aici vom crea trei bitmap-uri și le vom adăuga la recipient, atunci putem să-i mutăm pe toți într-o singură trecere prin mișcarea lui recipient, și chiar dacă se află într-un container, puteți să le mișcați fiecare în parte.
Metoda cache () a obiectului de afișare atrage obiectul afișat într-o pânză nouă, care este utilizată apoi pentru desene ulterioare. Pentru un conținut complex care nu se schimbă frecvent (de exemplu, un container cu mulți copii care nu se mișcă sau un vector complex Shape), aceasta poate oferi o redare mult mai rapidă, deoarece conținutul nu trebuie redimensionat.
Obiectul afișat în cache poate fi mutat, rotit, decolorat, etc, dar dacă conținutul acestuia se modifică, trebuie să actualizați manual cache-ul apelând updateCache () sau cache () din nou. Trebuie să specificați zona cache prin parametrii x, y, w și h. Acesta definește dreptunghiul care va fi redat și stocat în cache folosind coordonatele acestui obiect afișat. Cache nu ar trebui să fie în mod normal utilizat pe Bitmap deoarece poate degrada performanța, totuși dacă doriți să utilizați un filtru pe Bitmap atunci trebuie să fie stocate în cache.
Datorită restricțiilor privind dimensiunile încorporate în JSFiddle, nu voi oferi o demonstrație pentru această metodă, ci vă va face legătura cu un demo de pe site-ul CreateJs.
Clasa Filtru este clasa de bază pe care toate filtrele ar trebui să o moștenească. Filtrele trebuie să fie aplicate obiectelor care au fost stocate în memoria cache utilizând metoda cache. Dacă un obiect se modifică, va trebui să îl memorați din nou sau să-l folosiți updateCache (). Rețineți că filtrele trebuie aplicate inainte de cache. EaselJS vine cu un număr de filtre pre-construite. Rețineți că filtrele individuale nu sunt compilate în versiunea miniaturală a programului EaselJS. Pentru a le folosi, trebuie să le includeți manual în HTML.
Demo-ul de mai jos utilizează Filtrul de culori, când faceți clic pe scenă, eliminând canalul verde din imagine. Filtru de culoare are următorii parametri.
ColorFilter ([redMultiplier = 1] [greenMultiplier = 1] [blueMultiplier = 1] [alphaMultiplier = 1]) [redOffset = 0] [greenOffset = 0] [blueOffset = 0])
Se așteaptă ca multiplicatorii roșii, verzi, albastre și alfa să fie un număr de la zero la unu, iar roșu, verde, albastru și alfa Offset să fie un număr de la 255 la 255.
Creăm un obiect bitmap obișnuit, aplicăm filtrul și cache-ul bitmap-ului.
Am creat o demonstrație finală, pe care o vom construi în următoarea parte a acestei serii, adăugând sunet, preîncărcarea activelor și folosind tweens.
În acest demo vom folosi Bitmap, Text, și Formă, pentru a crea un joc de tipul Space Invaders. Nu voi trece peste fiecare pas aici, din moment ce scopul este doar acela de a arăta cum să legeți conceptele împreună, dar dacă aveți întrebări legate de cod, nu ezitați să întrebați în comentarii. Detectarea coliziunii este furnizată de osln prin intermediul Github.
În acest tutorial ne-am aruncat o privire la Java și am făcut câteva aplicații demo. Sper că ați găsit acest articol util și că vă devine entuziasmat de utilizarea lui EaselJS. Vă mulțumim pentru lectură!
