Ved hjelp av CreateJs PreloadJS, SoundJS og TweenJS

I den første delen av denne serien om bruk av CreateJs, så vi på EaselJs. I denne andre og siste del vil vi se på PreloadJs, SoundJs og TweenJs.

PreloadJS

PreloadJS er et bibliotek som lar deg administrere og koordinere lastingen av eiendeler. PreloadJS gjør det enkelt å forhåndslaste dine eiendeler, som bilder, lyder, JS, data og andre. Den bruker XHR2 til å gi reell fremdriftsinformasjon når den er tilgjengelig eller faller tilbake til taglasting og lettet fremgang når det ikke er det. Det tillater flere køer, flere tilkoblinger, pauser køer og mye mer.

I PreloadJS er LoadQueue-klassen den viktigste API for forhåndsinnlasting av innhold. LoadQueue er en lastbehandler, som kan forhåndsbelaste enten en enkelt fil eller en kø av filer. var kø = nytt createjs.LoadQueue (true);, passerer falsk ville tvinge tag-lasting der det er mulig. LoadQueue har flere arrangementer du kan abonnere på:

• fullfør: sparken når en kø fullfører lasting av alle filer
• Feil: sparket når køen opplever en feil med en hvilken som helst fil.
• fremgang: fremdriften for når hele køen har endret seg.
• fileload: for når en enkelt fil har fullført lasting.
• filprorogress: Fremdriften for når en enkelt fil har endret seg. Vær så snill Merk at bare filer lastet med XHR (eller muligens ved plugins) vil brann fremgangshendelser, annet enn null eller 100%.

Du kan laste enkelt filer ved å ringe loadfile ("bane til fil") eller last flere filer ved å ringe loadManifest () og passerer i en rekke filer du vil laste inn.

De støttede filtyper av LoadQueue Inkluder følgende.

• BINARY: Rå binær data via XHR
• CSS: CSS-filer
• BILDE: Vanlige bildeformater
• JAVASCRIPT: JavaScript-filer
• JSON: JSON data
• JSONP: JSON-filer kryss-domene
• MANIFEST: En liste over filer som skal lastes inn i JSON-format, se loadManifest
• LYD: Lydfilformater
• SVG: SVG-filer
• TEKST: Tekstfiler - kun XHR
• XML: XML-data

Her er et eksempel på bruk av PreloadJS for å laste inn en JavaScript-fil, noen PNG og en MP3.

var lerret = document.getElementById ("Canvas"); var scenen = ny createjs.Stage (lerret); var åpenbar; var preload; var progressText = new createjs.Text ("", "20px Arial", "# 000000"); progressText.x = 300 - progressText.getMeasuredWidth () / 2; progressText.y = 20; stage.addChild (progressText); stage.update (); funksjon setupManifest () manifest = [src: "collision.js", id: "myjsfile", src: "logo.png", id: "logo", src: "ForkedDeer.mp3" : "mp3file"]; for (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();

Innen setupManifest () funksjon vi legger til en JavaScript-fil, en MP3 og en PNG-fil. Vi sender et objekt inn med "src" og "id" -tastene. Ved å bruke "id" vil vi kunne identifisere eiendelen når den har lastet inn. Til slutt løper vi gjennom og legger til 13 flere bilder i matrisen. Du trenger ikke alltid et "id" hvis du bare vil sørge for at enkelte eiendeler blir lastet.

Vi lytter etter "fileload", "progress" og "complete" hendelser. Fileload-hendelsen bryr seg når en enkelt fil har lastet, fremgang er for å få fremdriften av loadQueue, og fullfør branner når alle filene har lastet inn. I handleFileLoad () funksjon vi logger filtypen, noe som kan komme veldig bra med. Vi sjekker også elementets id, Slik kan du holde oversikt over forhåndsbelastningen og gjøre noe passende med eiendelene.

Merk at for å kunne laste lyd må du ringe installPlugin (createjs.Sound) som vi har gjort innenfor startPreload funksjon.

TweenJS

TweenJS-biblioteket er for tweening og animering av HTML5- og JavaScript-egenskaper. Det gir et enkelt, men kraftig tweening-grensesnitt. Den støtter tweening av både numeriske objektegenskaper og CSS stilegenskaper, og lar deg koble tweens og handlinger sammen for å lage komplekse sekvenser.

For å sette opp en Tween, ringer du til Tween (mål, [rekvisitter], [pluginData]) konstruktør med følgende alternativer.

• mål - Målobjektet som vil ha sine egenskaper tweened
• rekvisitter - Konfigurasjonsegenskapene som skal gjelde for denne tween-forekomsten (for eksempel loop: true, paused: true). Alle egenskapene er standard til falske. Støttede rekvisitter er:
• loop: setter loopegenskapen på denne tweenen.
• useTicks: bruker ticks for alle varigheter i stedet for millisekunder.
• ignoreGlobalPause: setter egenskapen ignoreGlobalPause på denne tweenen.
• overstyr: hvis sant, vil Tween.removeTweens (target) bli kalt for å fjerne andre tweens med samme mål.
• pauset: angir om du vil starte intervallet midlertidig.
• posisjon: angir startposisjonen for denne tweenen.
• onChange: angir en lytter for "endring" -hendelsen.
• pluginData - Et objekt som inneholder data for bruk av installerte plugins

Tween-klassen tweens egenskaper for et enkelt mål. Instansmetoder kan kjedes for enkel konstruksjon og sekvensering. Det er ikke en veldig stor klasse og har bare noen få metoder, men det er veldig kraftig.

De til (props, varighet, letthet) metode, køer en tween fra de nåværende verdiene til målegenskapene. Angi varighet til 0 å hoppe umiddelbart til verdien. Numeriske egenskaper blir tweened fra deres nåværende verdi i tween til målverdien. Ikke-numeriske egenskaper vil bli angitt ved slutten av den angitte varigheten.

De vente (varighet, passiv) køer vent (i hovedsak en tom tween).

De anrop (tilbakeringing, parametere, omfang) metode Køer en handling for å ringe til den angitte funksjonen

TweenJS støtter et stort antall lettelser som leveres av Ease-klassen.

I den følgende demonstrasjonen kan du klikke på scenen for å se demoen.

I denne demonstrasjonen oppretter vi bitmap og Tekst objekter. Vi legger logoen fra toppen av scenen, og når brukeren klikker på scenen, tverr vi det til midten av scenen mens vi endrer sin X- og Y-skala. Vi bruker vente() metode for å gi en sekund forsinkelse, så bruker vi anrop() metode for å tween teksten. I tekstintervallet endrer vi alfaen, gjør en 360 graders rotasjon, mellom den til venstre for scenen.

TweenJS er mye moro, prøv å bruke noen av de andre egenskapene til skjermobjektene

SoundJS

SoundJS er et bibliotek som gir en enkel API og kraftige funksjoner for å gjøre arbeidet med lyd en bris. Det meste av dette biblioteket brukes på en statisk måte (du trenger ikke å opprette en forekomst). Det fungerer via plugins som abstraherer den faktiske lydimplementasjonen, slik at avspilling er mulig på hvilken som helst plattform uten spesifikk kunnskap om hvilke mekanismer som er nødvendige for å spille lyder.

For å bruke SoundJS, bruk offentlig API på Sound-klassen. Denne API-en er for:

• Installere lydavspillingsplugger
• Registrere (og forhåndsbelaste) lyder
• Opprette og spille lyder
• Master-volum, demp, og stopp kontrollene for alle lyder samtidig

Spille av lyder skaper SoundInstance forekomster, som kan styres individuelt. Du kan:

• Pause, gjenoppta, søke og stoppe lyder
• Kontroller lydens lydstyrke, demp og pan
• Lytt etter hendelser på lydinstanser for å bli varslet når de er ferdige, sløyfe eller mislykkes

Nedenfor er den minimale koden du trenger for å spille en lydfil.

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

Jeg kunne imidlertid ikke få det til å fungere på min maskin i Firefox og Chrome, selv om ovenstående jobbet i IE. Standardprogrammet var standard for WebAudio, jeg måtte registrere det for å bruke HTMLAudio som nedenfor.

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

I de ovennevnte delene av kode bruker vi alternateExtensions egenskap som vil forsøke å laste filtype OGG hvis den ikke kan laste inn MP3.

Med det aller grunnleggende ut av veien, vil vi nå skape en MP3-spiller. Se demo og skjermbilde nedenfor.

Vi ringer først registerPlugins () å bruke HTMLAudio og angi alternativ utvidelse, så det vil prøve å laste OGG hvis nettleseren ikke støtter MP3.

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

Innen spill lyd() funksjon, vi kaller spille() metode som spiller en av lydfiler fra spor array. Vi stiller lydvolumet ved hjelp av setVolume () metode, bruker vi den "fullstendige" lytteren til å være foruroliget når den gjeldende lyden er ferdig med å spille.

theMP3 = createjs.Sound.play ("./ sounds /" + tracks [currentSong] + ". mp3"); theMP3.setVolume (volumdeler); theMP3.on ( "komplett", songFinishedPlaying, null, false);

Gjennom resten av koden bruker vi spille(), Stoppe(),pause() og gjenoppta() fremgangsmåter.

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

Jeg har ikke gitt en linje for linjeforklaring av MP3-spilleren, men hvis du har spørsmål, kan du spørre i kommentarene.

Space Invader Game

Som nevnt i første halvdel av denne opplæringen, er her en demonstrasjon av Space Invaders-spillet med forhåndsbelysning, lyd og tweens lagt til.

Konklusjon

Dette avslutter vår tur til CreateJS. Forhåpentligvis, fra de to siste artiklene, har du sett hvor enkelt det er å lage et rikt, interaktivt program med CreateJS.

Dokumentasjonen er topp og det kommer med mange eksempler, så vær sikker på å sjekke dem ut.

Jeg håper du har funnet denne veiledningen for å være nyttig, og at du er spent på å bruke CreateJS. De har nettopp annonsert på bloggen deres at betaversjon for WebGL er nå tilgjengelig også. Takk for at du leste!