Verwenden von CreateJs PreloadJS, SoundJS und TweenJS

Im ersten Teil dieser Serie zur Verwendung von CreateJs haben wir uns EaselJs angesehen. In diesem zweiten und letzten Teil werden wir PreloadJs, SoundJs und TweenJs betrachten.

PreloadJS

PreloadJS ist eine Bibliothek, mit der Sie das Laden von Assets verwalten und koordinieren können. Mit PreloadJS können Sie Ihre Assets (Bilder, Sounds, JS, Daten usw.) vorab laden. Es verwendet XHR2, um echte Fortschrittsinformationen bereitzustellen, wenn verfügbar, oder um auf das Laden von Tags zuzugreifen und um den Fortschritt zu verbessern, wenn dies nicht der Fall ist. Es ermöglicht mehrere Warteschlangen, mehrere Verbindungen, Warteschlangen anhalten und vieles mehr.

In PreloadJS ist die LoadQueue-Klasse die Haupt-API für das Vorladen von Inhalt. LoadQueue ist ein Lademanager, der entweder eine einzelne Datei oder eine Warteschlange von Dateien vorladen kann. var queue = new createjs.LoadQueue (true);, Das Weitergeben von false würde das Laden von Tags nach Möglichkeit erzwingen. LoadQueue bietet verschiedene Ereignisse, die Sie abonnieren können:

• complete: Wird ausgelöst, wenn eine Warteschlange alle Dateien geladen hat
• Fehler: Wird ausgelöst, wenn die Warteschlange bei einer Datei einen Fehler feststellt.
• progress: Der Fortschritt, wenn sich die gesamte Warteschlange geändert hat.
• Fileload: wenn eine einzelne Datei vollständig geladen wurde.
• fileprogress: Der Fortschritt, wenn sich eine einzelne Datei geändert hat. Bitte Hinweis dass nur Dateien, die mit XHR (oder möglicherweise durch Plugins) geladen werden, andere Ereignisse als null oder 100% auslösen..

Sie können einzelne Dateien durch Aufrufen laden Ladedatei ("Pfad zur Datei") oder laden Sie mehrere Dateien durch Aufrufen loadManifest () und übergeben Sie ein Array der Dateien, die Sie laden möchten.

Die unterstützten Dateitypen von LoadQueue das Folgende einschließen.

• BINARY: Binäre Rohdaten über XHR
• CSS: CSS-Dateien
• IMAGE: Gängige Bildformate
• JAVASCRIPT: JavaScript-Dateien
• JSON: JSON-Daten
• JSONP: JSON-Dateien domänenübergreifend
• MANIFEST: Eine Liste der Dateien, die im JSON-Format geladen werden sollen, siehe loadManifest
• SOUND: Audiodateiformate
• SVG: SVG-Dateien
• TEXT: Textdateien - nur XHR
• XML: XML-Daten

Hier ein Beispiel für die Verwendung von PreloadJS, um eine JavaScript-Datei, einige PNG-Dateien und eine MP3-Datei zu laden.

var canvas = document.getElementById ("Leinwand"); var stage = new createjs.Stage (Zeichenfläche); var Manifest; var Vorspannung; var progressText = new createjs.Text ("", "20px Arial", "# 000000"); progressText.x = 300 - progressText.getMeasuredWidth () / 2; progressText.y = 20; stage.addChild (progressText); stage.update (); function setupManifest () manifest = [src: "collision.js", id: "myjsfile", src: "logo.png", id: "logo", src: "ForkedDeer.mp3", id : "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();

Innerhalb des setupManifest () Funktion fügen wir eine JavaScript-Datei, eine MP3- und eine PNG-Datei hinzu. Wir übergeben ein Objekt mit den Schlüsseln "src" und "id". Durch die Verwendung von "id" können wir das Asset nach dem Laden identifizieren. Zuletzt führen wir eine Schleife durch und fügen 13 weitere Bilder in das Array ein. Sie benötigen nicht immer eine "ID", wenn Sie lediglich sicherstellen möchten, dass einige Assets geladen werden.

Wir hören auf die Ereignisse "fileload", "progress" und "complete". Das Fileload-Ereignis wird ausgelöst, wenn eine einzelne Datei geladen wurde. Der Fortschritt dient dazu, den Fortschritt der loadQueue abzurufen, und der Abschluss des Vorgangs wird ausgelöst, wenn alle Dateien geladen wurden. In dem handleFileLoad () Funktion Wir protokollieren den Dateityp, was sehr nützlich sein kann. Wir prüfen auch den Artikel Ich würde, Auf diese Weise können Sie die Vorladungen verfolgen und mit den Assets entsprechende Maßnahmen ergreifen.

Beachten Sie, dass Sie anrufen müssen, um Sound laden zu können installPlugin (createjs.Sound) was wir in der getan haben startPreload Funktion.

TweenJS

Die TweenJS-Bibliothek dient zum Tweening und zur Animation von HTML5- und JavaScript-Eigenschaften. Es bietet eine einfache, aber leistungsstarke Tweening-Schnittstelle. Es unterstützt das Tweening von numerischen Objekteigenschaften und CSS-Stileigenschaften. Außerdem können Sie Tweens und Aktionen miteinander verketten, um komplexe Sequenzen zu erstellen.

Um ein Tween einzurichten, rufen Sie die Tween (Ziel, [Requisiten], [PluginData]) Konstruktor mit den folgenden Optionen.

• target - Das Zielobjekt, dessen Eigenschaften getweedet werden sollen
• props - Die Konfigurationseigenschaften, die auf diese Tween-Instanz angewendet werden sollen (z. B. loop: true, paused: true). Alle Eigenschaften sind standardmäßig auf false gesetzt. Unterstützte Requisiten sind:
• loop: Legt die Loop-Eigenschaft für dieses Tween fest.
• useTicks: Verwendet Ticks für alle Dauern anstelle von Millisekunden.
• ignoreGlobalPause: Legt die ignoreGlobalPause-Eigenschaft für dieses Tween fest.
• override: wenn true, werden Tween.removeTweens (target) aufgerufen, um alle anderen Tweens mit demselben Ziel zu entfernen.
• pausiert: Gibt an, ob das Tween pausiert werden soll.
• position: Gibt die Ausgangsposition für dieses Tweens an.
• onChange: Gibt einen Listener für das Ereignis "change" an.
• pluginData - Ein Objekt, das Daten zur Verwendung durch installierte Plugins enthält

Die Eigenschaften der Tween-Klasse für ein einzelnes Ziel. Instanzmethoden können für eine einfache Konstruktion und Sequenzierung verkettet werden. Es ist keine sehr große Klasse und hat nur wenige Methoden, aber es ist sehr mächtig.

Das zu (Requisiten, Dauer, Leichtigkeit) Bei dieser Methode wird ein Tween zwischen den aktuellen Werten und den Zieleigenschaften in eine Warteschlange gestellt. Dauer einstellen auf 0 um sofort auf den Wert zu springen. Numerische Eigenschaften werden von ihrem aktuellen Wert im Tween zum Zielwert getweent. Nicht numerische Eigenschaften werden am Ende der angegebenen Dauer festgelegt.

Das warten (Dauer, passiv) Warteschlangen warten (im Wesentlichen ein leeres Tween).

Das call (callback, params, scope) method Führt eine Aktion zum Aufrufen der angegebenen Funktion in eine Warteschlange ein

TweenJS unterstützt eine Vielzahl von Hilfsmaßnahmen, die von der Ease-Klasse bereitgestellt werden.

In der folgenden Demo können Sie auf die Bühne klicken, um die Demo anzuzeigen.

In dieser Demo erstellen wir Bitmap und Text Objekte. Wir setzen das Logo von der Oberseite der Bühne ab und wenn der Benutzer auf die Bühne klickt, wechseln wir zur Mitte der Bühne, während er die X- und Y-Skala ändert. Wir nehmen das warten() Um eine Sekunde zu verzögern, verwenden wir die Anruf() Methode zum Tween des Textes. Im Text-Tween ändern wir das Alpha, führen eine 360-Grad-Drehung aus, und das Tween-Symbol befindet sich links von der Bühne.

TweenJS macht viel Spaß. Versuchen Sie es mit einigen anderen Eigenschaften der Anzeigeobjekte

SoundJS

SoundJS ist eine Bibliothek, die eine einfache API und leistungsstarke Funktionen bietet, die das Arbeiten mit Audio zu einem Kinderspiel machen. Die meisten dieser Bibliotheken werden statisch verwendet (Sie müssen keine Instanz erstellen). Es funktioniert über Plugins, die die eigentliche Audioimplementierung abstrahieren, sodass die Wiedergabe auf jeder Plattform möglich ist, ohne zu wissen, welche Mechanismen für die Wiedergabe von Sounds erforderlich sind.

Verwenden Sie zur Verwendung von SoundJS die öffentliche API für die Sound-Klasse. Diese API ist für:

• Plugins für die Audio-Wiedergabe installieren
• Sounds registrieren (und vorladen)
• Sounds erstellen und abspielen
• Master Volume, Mute und Stop Regler für alle Sounds gleichzeitig

Klänge spielen schafft SoundInstance Instanzen, die einzeln gesteuert werden können. Sie können:

• Anhalten, Fortsetzen, Suchen und Stoppen von Sounds
• Steuern Sie Lautstärke, Stummschaltung und Panorama eines Sounds
• Hören Sie auf Sound-Instanzen auf Ereignisse, um benachrichtigt zu werden, wenn sie beendet, in einer Schleife abgefallen sind oder nicht

Nachfolgend finden Sie den Mindestcode, den Sie zum Abspielen einer Audiodatei benötigen.

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

Ich konnte das jedoch nicht dazu bringen, auf meinem Rechner in Firefox und Chrome zu arbeiten, obwohl die oben genannten Funktionen im IE funktionieren. Das Standard-Plugin war standardmäßig auf WebAudio eingestellt. Ich musste es registrieren, um HTMLAudio wie folgt verwenden zu können.

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

In den obigen Codeabschnitten verwenden wir die alternateExtensions Diese Eigenschaft versucht, den Dateityp OGG zu laden, wenn MP3 nicht geladen werden kann.

Mit den Grundlagen aus dem Weg zu schaffen, werden wir jetzt einen MP3-Player erstellen. Siehe die Demo und den Screenshot unten.

Wir rufen zuerst an registerPlugins () Verwenden Sie HTMLAudio und legen Sie eine alternative Erweiterung fest, damit OGG geladen wird, wenn der Browser MP3 nicht unterstützt.

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

Innerhalb des Ton abspielen() Funktion nennen wir die abspielen() Methode, die eine der Tondateien von der wiedergibt Spuren Array. Wir stellen die Lautstärke mit dem ein setVolume () Auf diese Weise verwenden wir den Listener "complete", um alarmiert zu werden, wenn der aktuelle Sound beendet ist.

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

Im Rest des Codes verwenden wir die abspielen(), halt(),Pause() und fortsetzen() Methoden.

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

Ich habe keine zeilenweise Erklärung für den MP3-Player gegeben, aber wenn Sie Fragen haben, können Sie gerne in den Kommentaren nachfragen.

Space Invader Spiel

Wie in der ersten Hälfte dieses Tutorials erwähnt, finden Sie hier eine Demo des Space Invaders-Spiels mit Vorspannung, Sound und Tweens.

Fazit

Damit ist unsere Tour durch CreateJS abgeschlossen. Hoffentlich haben Sie aus den letzten beiden Artikeln gesehen, wie einfach es ist, interaktive Anwendungen mit CreateJS zu erstellen.

Die Dokumentation ist erstklassig und enthält eine Vielzahl von Beispielen, also schauen Sie sich diese unbedingt an.

Ich hoffe, dass Sie dieses Tutorial als hilfreich empfunden haben und sich auf die Verwendung von CreateJS freuen. Sie haben gerade in ihrem Blog angekündigt, dass nun auch Beta-Unterstützung für WebGL verfügbar ist. Danke fürs Lesen!