Share
I den första delen av serien om användning av CreateJs, tittade vi på EaselJs. I denna andra och sista delen kommer vi att titta på PreloadJs, SoundJs och TweenJs.
PreloadJS är ett bibliotek som låter dig hantera och samordna laddning av tillgångar. PreloadJS gör det enkelt att förinställa dina tillgångar, som bilder, ljud, JS, data och andra. Den använder XHR2 för att ge reell framstegsinformation när den är tillgänglig eller faller tillbaka till etikettladdning och lättad framsteg när det inte är det. Det tillåter flera köer, flera anslutningar, pausa köer och mycket mer.
I PreloadJS är LoadQueue-klassen det huvudsakliga API-läget för preloading-innehåll. LoadQueue är en lasthanterare, som kan förinställa antingen en enda fil eller en kö av filer. var kö = nytt createjs.LoadQueue (true);, passerar falskt skulle tvinga taggning när det är möjligt. LoadQueue har flera händelser du kan prenumerera på:
Du kan ladda enskilda filer genom att ringa loadfile ("sökväg till fil") eller ladda flera filer genom att ringa loadManifest () och passerar i en rad filer som du vill ladda.
De filtyper som stöds av LoadQueue inkluderar följande.
Här är ett exempel på att använda PreloadJS för att ladda in en JavaScript-fil, några PNG-filer och en MP3.
Accentsconagua
var kanvas = document.getElementById ("Canvas"); varstadiet = nya createjs.Stage (kanfas); 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 (); funktion setupManifest () manifest = [src: "collision.js", id: "myjsfile", src: "logo.png", id: "logo", src: "ForkedDeer.mp3" : "mp3file"]; för (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(); Inom setupManifest () funktion vi lägger till en JavaScript-fil, en MP3-fil och en PNG-fil. Vi skickar ett objekt med "src" och "id" -tangenterna. Genom att använda "id" kommer vi att kunna identifiera tillgången när den har laddats. Slutligen går vi igenom och lägger till 13 fler bilder i matrisen. Du behöver inte alltid ett "id" om du bara vill se till att vissa tillgångar laddas.
Vi lyssnar på "fileload", "progress" och "complete" händelser. Fileload händelsen brinner när en enda fil har laddats, framsteg är för att få framåt i loadQueue och slutföra bränder när alla filer har laddats. I handleFileLoad () funktion vi loggar filtypen, vilket kan vara mycket användbart. Vi kontrollerar också objektets id, Så här kan du hålla koll på preloaderna och göra något som är lämpligt med tillgångarna.
Observera att för att kunna ladda ljud måste du ringa installPlugin (createjs.Sound) som vi har gjort inom startPreload fungera.
TweenJS-biblioteket är för tweening och animering av HTML5- och JavaScript-egenskaper. Det ger ett enkelt men kraftfullt interpoleringsgränssnitt. Den stöder tweening av både numeriska objektegenskaper och CSS-stilegenskaper, och låter dig kedja tweens och åtgärder tillsammans för att skapa komplexa sekvenser.
För att ställa in en Tween, ringer du på Tween (mål, [rekvisita], [pluginData]) konstruktör med följande alternativ.
Tween-klassen tweens egenskaper för ett enda mål. Instansmetoder kan kedjas för enkel konstruktion och sekvensering. Det är inte en mycket stor klass och har bara några metoder, men det är mycket kraftfullt.
De till (rekvisita, varaktighet, enkelhet) metod, köer en tween från de aktuella värdena till målegenskaperna. Ställ in varaktighet till 0 att hoppa direkt till värdet. Numeriska egenskaper kommer att tweened från deras nuvarande värde i tween till målvärdet. Icke-numeriska egenskaper kommer att ställas in vid slutet av den angivna varaktigheten.
De vänta (varaktighet, passiv) köer en väntan (väsentligen en tom tween).
De samtal (återuppringning, params, omfattning) metod Köpar en åtgärd för att ringa den angivna funktionen
TweenJS stöder ett stort antal lättnader som levereras av Ease-klassen.
I följande demo kan du klicka på scenen för att se demoen.
I den här demo skapar vi Bitmap och Text objekt. Vi lägger logotypen från toppen av scenen och när användaren klickar på scenen sitter vi mellan den i mitten av scenen och ändrar sin X- och Y-skala. Vi använder vänta() metod för att ge en sekundsfördröjning, då använder vi ring upp() metod för att mellanliggande texten. I textintervallet byter vi alfabetet, gör en 360 graders rotation, mellan den till vänster om scenen.
TweenJS är mycket roligt, försök att använda några av de andra egenskaperna i bildobjekten
SoundJS är ett bibliotek som ger en enkel API och kraftfulla funktioner för att arbeta med ljud en bris. Det mesta av detta bibliotek används statiskt (du behöver inte skapa en instans). Det fungerar via plugins som abstraherar det faktiska ljudimplementet, så uppspelning är möjlig på vilken plattform som helst utan specifik kunskap om vilka mekanismer som behövs för att spela ljud.
För att använda SoundJS, använd det offentliga API: n på klassen Sound. Detta API är för:
Uppspelning av ljud skapas SoundInstance instanser som kan styras individuellt. Du kan:
Nedan är den minsta koden du behöver spela en ljudfil.
createjs.Sound.initializeDefaultPlugins (); createjs.Sound.alternateExtensions = ["ogg"]; var myInstance = createjs.Sound.play ("IntoxicatedRat.mp3"); Jag kunde dock inte få det att fungera på min maskin i Firefox och Chrome, även om ovanstående arbetade i IE. Standardinställningen gick till WebAudio, jag var tvungen att registrera den för att använda HTMLAudio enligt nedan.
createjs.Sound.registerPlugins ([createjs.HTMLAudioPlugin]); console.log (createjs.Sound.activePlugin.toString ()); createjs.Sound.alternateExtensions = ["ogg"]; var mySound = createjs.Sound.play ("IntoxicatedRat.mp3"); I ovanstående sektioner av kod använder vi alternateExtensions egenskap som försöker ladda filtypen OGG om den inte kan ladda MP3.
Med de allra bästa grunderna kommer vi nu att skapa en MP3-spelare. Se demo och skärmdump nedan.
Vi ringer först registerPlugins () att använda HTMLAudio och ange alternativ förlängning så det kommer att försöka ladda OGG om webbläsaren inte stöder MP3.
createjs.Sound.registerPlugins ([createjs.HTMLAudioPlugin]); createjs.Sound.alternateExtensions = ["ogg"];
Inom Spelljud() funktion, vi kallar spela() metod som spelar en av ljudfilerna från spår array. Vi ställer in ljudvolymen med hjälp av setVolume () metod använder vi den "kompletta" lyssnaren för att vara orolig när det nuvarande ljudet är färdigt att spela.
theMP3 = createjs.Sound.play ("./ sounds /" + tracks [currentSong] + ". mp3"); theMP3.setVolume (vol); theMP3.on ( "komplett", songFinishedPlaying, null, false); Under resten av koden använder vi spela(), sluta(),paus() och återuppta() metoder.
theMP3.play (); theMP3.stop (); theMP3.pause (); theMP3.resume ();
Jag har inte gett en rad förklaring av mp3-spelaren, men om du har några frågor, var god att fråga i kommentarerna.
Som nämnts i den första halvan av denna handledning, här är en demo av Space Invaders-spelet med förspänning, ljud och tweens tillagt.
Detta avslutar vår turné av CreateJS. Förhoppningsvis från de två senaste artiklarna har du sett hur lätt det är att skapa en rik interaktiv applikation med CreateJS.
Dokumentationen är topp och det kommer med en stor mängd exempel, så var noga med att kolla in dem.
Jag hoppas att du har hittat denna handledning för att vara till hjälp och att du är glad att använda CreateJS. De har just meddelat på sin blogg att betaversion för WebGL nu också är tillgängligt. Tack för att du läser!
