Utilizând CreateJs PreloadJS, SoundJS și TweenJS

În prima parte a acestei serii despre utilizarea lui CreateJs, am aruncat o privire asupra lui EaselJs. În această a doua și ultima parte, ne vom uita la PreloadJs, SoundJs și TweenJs.

PreloadJS

PreloadJS este o bibliotecă care vă permite să gestionați și să coordonați încărcarea activelor. PreloadJS facilitează preîncărcarea activelor, cum ar fi imagini, sunete, JS, date și altele. Utilizează XHR2 pentru a furniza informații despre progresul real atunci când este disponibil sau pentru a cădea înapoi la încărcarea tag-urilor și pentru a ușura progresul atunci când nu este. Permite mai multe cozi, mai multe conexiuni, cozi de întrerupere și multe altele.

În PreloadJS, clasa LoadQueue este principalul API pentru preîncărcarea conținutului. LoadQueue este un manager de încărcare, care poate preloada fie un singur fișier, fie o coadă de fișiere. vară de așteptare = new createjs.LoadQueue (true);, trecerea false ar forța încărcarea cu etichete acolo unde este posibil. LoadQueue are mai multe evenimente la care vă puteți abona:

complet: concediat atunci când o coadă completează încărcarea tuturor fișierelor
eroare: concediat atunci când coada întâlnește o eroare cu orice fișier.
progres: progresul pentru care întreaga coadă sa schimbat.
fileload: pentru când un singur fișier a terminat încărcarea.
Progresul fișierelor: progresul în cazul în care un singur fișier are modificări. Vă rog Notă că numai fișierele încărcate cu XHR (sau eventual prin pluginuri) vor declanșa evenimente de progres, altele decât zero sau 100%.

Puteți încărca fișiere unice apelând loadfile ("cale către fișier") sau încărcați mai multe fișiere prin apelare loadManifest () și trecerea într-o serie de fișiere pe care doriți să le încărcați.

Tipurile de fișiere acceptate din LoadQueue include următoarele.

BINARY: date binare brute prin XHR
CSS: fișiere CSS
IMAGE: Formate de imagine comune
JAVASCRIPT: fișiere JavaScript
JSON: date JSON
JSONP: JSON fișiere încrucișate
MANIFEST: O listă de fișiere care se încarcă în format JSON, vezi loadManifest
SOUND: Formate de fișiere audio
SVG: fișiere SVG
TEXT: Fișiere text - doar XHR
XML: date XML

Iată un exemplu de utilizare a programului PreloadJS pentru a încărca un fișier JavaScript, unele PNG-uri și un MP3.

var canvas = document.getElementById ("Canvas"); var etapă = noi creații.Set (pânză); var manifest; var preload; var progressText = new createjs.Text ("", "20px Arial", "# 000000"); progressText.x = 300 - progressText.getMeasuredWidth () / 2; progressText.y = 20; stage.addChild (progressText); stage.update (); () src: "collision.js", id: "myjsfile", src: "logo.png", id: "logo", src: "ForkedDeer.mp3" : "mp3file"]; pentru (var i = 1; i<=13;i++) manifest.push(src:"c"+i+".png")  function startPreload()  preload = new createjs.LoadQueue(true); preload.installPlugin(createjs.Sound); preload.on("fileload", handleFileLoad); preload.on("progress", handleFileProgress); preload.on("complete", loadComplete); preload.on("error", loadError); preload.loadManifest(manifest);  function handleFileLoad(event)  console.log("A file has loaded of type: " + event.item.type); if(event.item.id == "logo") console.log("Logo is loaded"); //create bitmap here   function loadError(evt)  console.log("Error!",evt.text);  function handleFileProgress(event)  progressText.text = (preload.progress*100|0) + " % Loaded"; stage.update();  function loadComplete(event)  console.log("Finished Loading Assets");  setupManifest(); startPreload();

În cadrul setupManifest () adăugăm un fișier JavaScript, un fișier MP3 și un fișier PNG. Transmitem un obiect cu tastele "src" și "id". Folosind "id" vom putea identifica activul după încărcare. În cele din urmă, ne străduim și adăugăm încă 13 imagini în matrice. Nu veți avea întotdeauna nevoie de un "id" dacă doriți doar să vă asigurați că unele materiale se încarcă.

Ascultați pentru evenimentele "fileload", "progress" și "complete". Evenimentul fileload apare atunci când un singur fișier a fost încărcat, progresul este pentru a obține progresul de loadQueue, și a finalizat incendiile atunci când toate fișierele au fost încărcate. În handleFileLoad () funcția pe care o înregistrăm tipul de fișiere, care poate fi foarte util. De asemenea, verificăm elementul id, acesta este modul în care puteți urmări preload-urile și faceți ceva adecvat cu activele.

Rețineți că pentru a putea încărca sunetul, trebuie să apelați installPlugin (createjs.Sound) pe care am făcut-o în cadrul startPreload funcţie.

TweenJS

Biblioteca TweenJS este destinată îmbunătățirii și animării proprietăților HTML5 și JavaScript. Acesta oferă o interfață simplă, dar puternică de tweening. Acesta suplimentează atât proprietățile obiectului numeric, cât și proprietățile stilului CSS și vă permite să îmbinați tweens și acțiuni împreună pentru a crea secvențe complexe.

Pentru a configura un Tween, apelați Tween (țintă, [recuzită], [pluginData]) constructor cu următoarele opțiuni.

țintă - obiectul țintă care va avea proprietățile completate
props - Proprietățile de configurare care se aplică acestei instanțe tween (de exemplu, loop: true, paused: true). Toate proprietățile implicite sunt false. Suporturile suportate sunt:

buclă: setează proprietatea buclă la acest tween.
useTicks: utilizează căpușe pentru toate duratele în loc de milisecunde.
ignoreGlobalPause: setează proprietatea ignoreGlobalPause în acest tween.
override: dacă este adevărat, Tween.removeTweens (țintă) va fi chemat să elimine orice alte tweens cu aceeași țintă.
întrerupt: indică dacă să înceapă întreruperea temporară.
position: indică poziția inițială pentru această modificare.
onChange: specifică un ascultător pentru evenimentul "schimbare".

pluginData - Un obiect care conține date pentru utilizarea de către pluginurile instalate

Proprietățile Tween ale clasei Tween pentru o singură țintă. Metodele instanței pot fi înlănțuite pentru construcție și secvențiere ușoară. Nu este o clasă foarte mare și are doar câteva metode, dar este foarte puternică.

la (elemente de recuzită, durată, ușurință) metode, cozi de un tween de la valorile curente la proprietățile țintă. Setați durata până la 0 pentru a sari imediat la valoare. Proprietățile numerice vor fi completate de la valoarea lor curentă în valoarea tween la valoarea țintă. Proprietățile non-numerice vor fi setate la sfârșitul duratei specificate.

așteptați (durata, pasiv) așteaptă o așteptare (în esență o completare goală).

apel (apel invers, params, domeniul de aplicare) Metodă Redă o acțiune pentru a apela funcția specificată

TweenJS acceptă un număr mare de facilități oferite de clasa Ease.

În următoarea demo, puteți face clic pe scenă pentru a vedea demo-ul.

În această demonstrație, creăm Bitmap și Text obiecte. Am pus logo-ul de pe partea de sus a scena și atunci când utilizatorul face clic pe scena am tween-o la mijlocul scena în timp ce schimba scara X și Y. Noi folosim aștepta() metoda pentru a da o întârziere de o secundă, apoi vom folosi apel() metodă de completare a textului. În textul tween, schimbăm alfa, facem o rotație de 360 de grade, adăugăm-o în stânga scenei.

TweenJS este o mulțime de distracție, încercați să utilizați unele dintre celelalte proprietăți ale obiectelor de afișare

SoundJS

SoundJS este o bibliotecă care oferă un API simplu și caracteristici puternice pentru a face lucrul cu briza audio. Cea mai mare parte a acestei biblioteci este utilizată într-un mod static (nu este nevoie să creați o instanță). Funcționează prin pluginuri care abstracționează implementarea audio reală, astfel încât redarea este posibilă pe orice platformă fără cunoașterea specifică a mecanismelor necesare pentru a reda sunetele.

Pentru a utiliza SoundJS, utilizați API-ul public din clasa de sunet. Acest API este destinat:

Instalarea pluginurilor de redare audio
Sunete de înregistrare (și preîncărcare)
Crearea și redarea sunetelor
Controlați volumul principal, dezactivați și opriți comenzile pentru toate sunetele simultan

Redarea sunetelor creează SoundInstance care pot fi controlate individual. Poti:

Întrerupeți, reluați, căutați și opriți sunetele
Controlați volumul sunetului, sunetul și tigaia
Ascultați pentru evenimentele pe instanțe de sunet pentru a fi notificate atunci când acestea termină, bucla sau eșua

Mai jos este codul minim necesar pentru redarea unui fișier audio.

createjs.Sound.initializeDefaultPlugins (); createjs.Sound.alternateExtensions = ["ogg"]; var myInstance = createjs.Sound.play ("IntoxicatedRat.mp3");

Cu toate acestea, nu am reușit să fac asta pentru a lucra la mașina mea în Firefox și Chrome, deși cele de mai sus au lucrat în IE. Pluginul implicit a fost implicit la WebAudio, trebuia să îl înregistrez pentru a utiliza HTMLAudio ca mai jos.

createjs.Sound.registerPlugins ([createjs.HTMLAudioPlugin]); console.log (createjs.Sound.activePlugin.toString ()); createjs.Sound.alternateExtensions = ["ogg"]; var mySound = createjs.Sound.play ("IntoxicatedRat.mp3");

În secțiunile de mai sus, folosim codul alternateExtensions care va încerca să încarce tipul de fișier OGG dacă nu poate încărca MP3.

Cu foarte multe lucruri de bază, vom crea acum un player MP3. Vedeți demo-ul și captura de ecran de mai jos.

Mai întâi sunăm registerPlugins () pentru a utiliza HTMLAudio și pentru a seta o extensie alternativă, astfel încât va încerca să încarce OGG dacă browserul nu suportă MP3.

createjs.Sound.registerPlugins ([createjs.HTMLAudioPlugin]); createjs.Sound.alternateExtensions = ["ogg"];

În cadrul playSound () funcția, numim Joaca() metoda care joacă unul dintre fișierele audio de pe piese matrice. Am setat volumul de sunete folosind butonul setVolume () , folosim ascultătorul "complet" pentru a fi alarmat când sunetul curent se termină redarea.

theMP3 = createjs.Sound.play ("./sunete/" + piese [curentSong] + ". mp3"); theMP3.setVolume (vol); theMP3.on ( "complet", songFinishedPlaying, nul, fals);

Pe tot restul codului, folosim Joaca(), Stop(),pauză() și relua() metode.

theMP3.play (); theMP3.stop (); theMP3.pause (); theMP3.resume ();

Nu am dat o explicație line-line a player-ului MP3, dar dacă aveți întrebări, nu ezitați să întrebați în comentarii.

Space Invader Game

După cum sa menționat în prima jumătate a acestui tutorial, aici este un demo al jocului Space Invaders cu preloading, sound și tweens adăugate în.

Concluzie

Aceasta incheie turneul nostru pe CreateJS. Sperăm că din ultimele două articole ați văzut cât de ușor este să creați o aplicație interactivă bogată cu CreateJS.

Documentația este de top și vine cu un număr mare de exemple, deci asigurați-vă că le verificați.

Sper că ați găsit acest tutorial pentru a fi de ajutor și că sunteți încântat să utilizați CreateJS. Ei tocmai au anunțat pe blog-ul că suportul beta pentru WebGL este acum disponibil, de asemenea. Vă mulțumim pentru lectură!

Cod