CreateJs gebruiken PreloadJS, SoundJS en TweenJS

In het eerste deel van deze serie over het gebruik van CreateJs, hebben we EaselJs bekeken. In dit tweede en laatste deel zullen we kijken naar PreloadJs, SoundJs en TweenJs.

PreloadJS

PreloadJS is een bibliotheek waarmee u het laden van activa kunt beheren en coördineren. PreloadJS maakt het gemakkelijk om uw activa vooraf te laden, zoals afbeeldingen, geluiden, JS, gegevens en andere. Het gebruikt XHR2 om echte voortgangsinformatie te bieden wanneer beschikbaar of terug te vallen naar het laden van tags en de voortgang te vereenvoudigen wanneer dit niet het geval is. Het maakt meerdere wachtrijen, meerdere verbindingen, pauzeer wachtrijen en nog veel meer mogelijk.

In PreloadJS is de klasse LoadQueue de hoofd-API voor het vooraf laden van inhoud. LoadQueue is een load manager, die een enkel bestand of een wachtrij met bestanden kan voorladen. var queue = new createjs.LoadQueue (true);, false doorgeven zou tag-loading waar mogelijk afdwingen. LoadQueue heeft verschillende evenementen waarop u zich kunt abonneren:

• volledig: afgevuurd wanneer een wachtrij het laden van alle bestanden voltooit
• error: fired when the queue ontmoet een fout met een bestand.
• voortgang: de voortgang voor wanneer de volledige wachtrij is gewijzigd.
• fileload: voor wanneer een enkel bestand klaar is met laden.
• fileprogress: de voortgang voor wanneer een enkel bestand wijzigingen bevat. alsjeblieft Notitie dat alleen bestanden die geladen zijn met XHR (of mogelijk door plug-ins) voortgangsevents kunnen afvuren, anders dan nul of 100%.

U kunt afzonderlijke bestanden laden door te bellen loadfile ("pad naar bestand") of laad meerdere bestanden door te bellen loadManifest () en het doorgeven van een reeks bestanden die u wilt laden.

De ondersteunde bestandstypen van LoadQueue omvatten het volgende.

• BINAIR: onbewerkte binaire gegevens via XHR
• CSS: CSS-bestanden
• IMAGE: Algemene beeldformaten
• JAVASCRIPT: JavaScript-bestanden
• JSON: JSON-gegevens
• JSONP: JSON-bestanden voor meerdere domeinen
• MANIFEST: een lijst van bestanden die moeten worden geladen in JSON-indeling, zie loadManifest
• SOUND: audiobestandsindelingen
• SVG: SVG-bestanden
• TEXT: tekstbestanden - alleen XHR
• XML: XML-gegevens

Hier is een voorbeeld van het gebruik van PreloadJS om in een JavaScript-bestand, enkele PNG's en een MP3 te laden.

var canvas = document.getElementById ("Canvas"); var stage = new createjs.Stage (canvas); 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 (); functie setupManifest () manifest = [src: "collision.js", id: "myjsfile", src: "logo.png", id: "logo", src: "ForkedDeer.mp3", id : "mp3bestand"]; voor (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();

Binnen de setupManifest () functie voegen we een JavaScript-bestand, een MP3- en een PNG-bestand toe. We geven een object door met "src" en "id" -sleutels. Door "id" te gebruiken, kunnen we het item identificeren zodra het is geladen. Ten slotte lus je door en voeg je nog 13 extra afbeeldingen toe aan de array. U zult niet altijd een "id" nodig hebben als u er zeker van wilt zijn dat sommige assets worden geladen.

We luisteren naar de "fileload", "progress" en "complete" evenementen. De fileloadgebeurtenis wordt geactiveerd wanneer een enkel bestand is geladen, de voortgang is om de voortgang van de loadQueue te krijgen en het branden te voltooien wanneer alle bestanden zijn geladen. In de handleFileLoad () functie registreren we het bestandstype, wat erg handig kan zijn. We controleren ook de items ID kaart, dit is hoe u de preloads kunt volgen en iets gepasts kunt doen met de assets.

Let op: om geluid te kunnen laden, moet u bellen installPlugin (createjs.Sound) wat we hebben gedaan binnen de startPreload functie.

TweenJS

De TweenJS-bibliotheek is voor het tweenen en animeren van HTML5- en JavaScript-eigenschappen. Het biedt een eenvoudige maar krachtige tweening-interface. Het ondersteunt het tweenen van zowel numerieke objecteigenschappen als CSS-stijleigenschappen en stelt u in staat om tweens en acties aan elkaar te koppelen om complexe sequenties te maken.

Als u een Tween wilt instellen, belt u de Tween (doel, [rekwisieten], [pluginData]) constructor met de volgende opties.

• doel - Het doelobject waarvan de eigenschappen worden getweend
• rekwisieten - De configuratie-eigenschappen die op deze tween-instantie van toepassing zijn (bijvoorbeeld loop: true, paused: true). Alle eigenschappen standaard ingesteld op false. Ondersteunde rekwisieten zijn:
• loop: stelt de eigenschap loop in voor deze tween.
• useTicks: gebruikt teken voor alle duur in plaats van milliseconden.
• ignoreGlobalPause: stelt de eigenschap ignoreGlobalPause in voor deze tween.
• override: indien waar, wordt Tween.removeTweens (doel) aangeroepen om andere tweens met hetzelfde doel te verwijderen.
• onderbroken: geeft aan of de tween moet worden onderbroken.
• positie: geeft de beginpositie voor deze tween aan.
• onChange: specificeert een listener voor de "change" -gebeurtenis.
• pluginData: een object met gegevens voor gebruik door geïnstalleerde plug-ins

De tween-eigenschappen van de klasse tweens voor één doel. Instance-methoden kunnen worden geketend voor eenvoudige constructie en sequencing. Het is geen erg grote klasse en heeft maar een paar methoden, maar het is erg krachtig.

De tot en met (rekwisieten, de duur, het gemak) methode, wacht een tween van de huidige waarden naar de doeleigenschappen. Stel de duur in op 0 om meteen naar de waarde te springen. Numerieke eigenschappen worden getweend van hun huidige waarde in de tween naar de doelwaarde. Niet-numerieke eigenschappen worden aan het einde van de opgegeven duur ingesteld.

De Wacht (duur, passieve) wacht een wachttijd (in wezen een lege tween).

De oproep (terugbellen, params, scope) methode Wachtrijen een actie om de opgegeven functie aan te roepen

TweenJS ondersteunt een groot aantal eases die door de Ease-klasse worden geleverd.

In de volgende demo kun je op het podium klikken om de demo te bekijken.

In deze demo maken we Bitmap en Tekst voorwerpen. We plaatsen het logo van de bovenkant van het podium en wanneer de gebruiker op het podium klikt, tweenen we het naar het midden van het podium terwijl het de X- en Y-schaal wijzigt. Wij gebruiken de Wacht() methode om een ​​vertraging van één seconde te geven, dan gebruiken we de () aanroepen methode om de tekst te tweenen. In de tekst-tween veranderen we de alpha, doen we een rotatie van 360 graden, de tween links van het werkvlak.

TweenJS is erg leuk, probeer een aantal van de andere eigenschappen van de weergave-objecten te gebruiken

SoundJS

SoundJS is een bibliotheek die een eenvoudige API en krachtige functies biedt om werken met audio in een handomdraai te maken. Het grootste deel van deze bibliotheek wordt op een statische manier gebruikt (u hoeft geen instantie te maken). Het werkt via plug-ins die de feitelijke audio-implementatie abstraheren, dus afspelen is mogelijk op elk platform zonder specifieke kennis van welke mechanismen nodig zijn om geluiden te spelen.

Gebruik de openbare API in de klasse Sound om SoundJS te gebruiken. Deze API is voor:

• Audio-afspeelplug-ins installeren
• Registreren (en vooraf laden) van geluiden
• Geluiden creëren en spelen
• Bedien volume, dempen en stop besturingselementen voor alle geluiden tegelijk

Geluiden creëren creëert SoundInstance instanties, die afzonderlijk kunnen worden beheerd. Jij kan:

• Pauzeer, hervat, zoek en stop geluiden
• Regel het volume van een geluid, demp en pan
• Luister naar gebeurtenissen op geluidsinstanties om een ​​melding te ontvangen wanneer ze zijn voltooid, herhaald of gefaald

Hieronder ziet u de minimale code die u nodig hebt om een ​​audiobestand af te spelen.

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

Ik kon dat echter niet laten werken op mijn machine in Firefox en Chrome, hoewel het bovenstaande werkte in IE. De standaard plug-in was standaard naar WebAudio, ik moest het registreren om de HTMLAudio te gebruiken zoals hieronder.

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

In de bovenstaande secties van code gebruiken we de alternateExtensions eigenschap die zal proberen het bestandstype OGG te laden als het geen MP3 kan laden.

Met de basistechnieken uit de weg, zullen we nu een MP3-speler maken. Zie de demo en screenshot hieronder.

We bellen eerst registerPlugins () om HTMLAudio te gebruiken en alternatieve extensie in te stellen, zodat het zal proberen om OGG te laden als de browser geen MP3 ondersteunt.

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

Binnen de geluid afspelen() functie, we noemen het spelen() methode die een van de geluidsbestanden uit de sporen matrix. We stellen het geluidsvolume in met behulp van de setVolume () methode gebruiken we de "complete" luisteraar om gealarmeerd te worden wanneer het huidige geluid klaar is met spelen.

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

In de rest van de code gebruiken we de spelen(), hou op(),pauze() en hervatten() methoden.

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

Ik heb geen regel voor regel uitleg gegeven over de MP3-speler, maar als u vragen hebt, kunt u deze stellen in de opmerkingen.

Space Invader Game

Zoals vermeld in de eerste helft van deze tutorial, is hier een demo van het spel Space Invaders met vooraf geladen, geluid en tweens toegevoegd in.

Conclusie

Dit is onze tour naar CreateJS. Hopelijk uit de afgelopen twee artikelen, heb je gezien hoe gemakkelijk het is om een ​​rijke interactieve applicatie met CreateJS te maken.

De documentatie is top en het wordt geleverd met een enorme hoeveelheid voorbeelden, dus zorg ervoor dat je ze nakijkt.

Ik hoop dat je deze tutorial nuttig hebt gevonden en dat je enthousiast bent over het gebruik van CreateJS. Ze hebben zojuist op hun blog aangekondigd dat beta-ondersteuning voor WebGL nu ook beschikbaar is. Bedankt voor het lezen!