Share
In diesem Tutorial werden wir die CreateJS-Bibliothek von Bibliotheken untersuchen. CreateJS ist eine Suite von JavaScript-Bibliotheken und -Tools zum Erstellen umfassender, interaktiver Erfahrungen mit HTML5. Die CreateJS-Suite ist in vier Bibliotheken unterteilt.
Die erste Bibliothek, die wir uns anschauen werden, ist EaselJs. Lass uns anfangen!
EaselJS ist eine Bibliothek zum Arbeiten mit der HTML5-Leinwand. Es besteht aus einer vollständigen, hierarchischen Anzeigeliste, einem Kerninteraktionsmodell und Hilfsklassen, die die Arbeit mit Canvas erheblich erleichtern. Das Einrichten und Starten mit EaselJS könnte nicht einfacher sein. Sie müssen ein Canvas-Element in Ihrem HTML-Code definieren und in Ihrem JavaScript darauf verweisen. EaselJS verwendet für die Anzeigeliste die Vorstellung einer Bühne, die der oberste Container ist (die Bühne wird Ihr Canvas-Element sein). Nachfolgend finden Sie ein HTML-Fragment und das entsprechende JavaScript, um EaselJS einzurichten.
Um auf die obige Leinwand zu verweisen, würden Sie Folgendes verwenden.
Accentsconagua
var canvas = document.getElementById ("testCanvas"); var stage = new createjs.Stage (Zeichenfläche); EaselJS enthält eine Graphics-Klasse, die eine einfach zu verwendende API zum Generieren von Vektorzeichnungsanweisungen und zum Zeichnen dieser Anweisungen in einen angegebenen Kontext bereitstellt. Die Befehle sind dem normalen HTML5-Canvas sehr ähnlich, während EaselJs auch einige seiner eigenen neuen Befehle hinzufügt. Wenn Sie mit der HTML 5-Zeichenfläche und den Zeichenbefehlen nicht vertraut sind, können Sie den kürzlich veröffentlichten Canvas Essentials-Kurs betrachten. Normalerweise verwenden Sie die Graphics-Klasse nicht selbst, sondern greifen über die Shape-Klasse darauf zu. Nachfolgend finden Sie ein JSFiddle, das diese Shape-Klasse zum Zeichnen verwendet.
Wie Sie im obigen Code sehen können, sind die Befehle verkettbar ShapeObject.graphics.setStrokeStyle (1) .beginStroke ("rgba (0,0,0,1)) etc… Möglicherweise haben Sie auch einen Anruf bei bemerkt stage.addChild () innerhalb der Funktionen. Immer wenn Sie etwas auf die Leinwand legen möchten, müssen Sie anrufen stage.addChild (). Innerhalb des drawShapes () Funktion gibt es einen Anruf an stage.update (). Um Ihre Änderungen sehen zu können, müssen Sie anrufen stage.update () nach jeder Änderung der Leinwand. Es gibt eine Möglichkeit, nicht wiederholt anrufen zu müssen stage.update () und das ist durch die Verwendung der Ticker-Klasse. Der Ticker bietet eine zentralisierte Tick- oder Heartbeat-Übertragung in einem festgelegten Intervall. Listener können das Tick-Ereignis abonnieren, um benachrichtigt zu werden, wenn ein festgelegtes Zeitintervall abgelaufen ist. Im Folgenden wird beschrieben, wie Sie die Ticker-Klasse verwenden, um die Bühne automatisch zu aktualisieren.
createjs.Ticker.addEventListener ("tick", handleTick); Funktion handleTick (event) stage.update () Die Shape-Klasse verfügt über eine Reihe von Eigenschaften, die Sie anpassen können, z x, y Positionen, Alpha, scaleX, scaleY und viele andere. Unten ist eine Demo, die einige dieser Eigenschaften zeigt.
Innerhalb des drawTheShapes () Wir erzeugen 15 Kreise mit einer durchgezogenen Linie. Die Verkettung der Zeichenbefehle macht dies einfach. Dann ordnen wir die Position, Skalierung, Rotation und Alpha der Formen zufällig zu.
Sie können Ereignisse an die Formen anhängen, z klicken, mousedown / over / out, etc, indem Sie die auf() Methode. Wenn Sie in dieser Demo auf eine der Shapes klicken, wird eine Warnung ausgelöst, und bei Mouseout protokollieren wir eine Nachricht an der Konsole. Mausereignisse auf der Bühne berücksichtigen mousedown / over / out usw. müssen Sie anrufen stage.enableMouseOver (Häufigkeit) Die Häufigkeit gibt an, wie oft pro Sekunde die Mausereignisse gesendet werden. Dieser Vorgang ist teuer und daher standardmäßig deaktiviert.
Im Lieferumfang von EaselJS ist eine Text-Klasse enthalten, mit der sich Text sehr einfach erstellen und die Eigenschaften dieses Texts ändern können. Sie rufen den Konstruktor an, indem er den Text, eine Schrift und eine Farbe übergeben, d. H. new createjs.Text ("Hello World", "20px Arial", "# ff7700") Wie die Shape-Klasse verfügt sie über eine Vielzahl von Eigenschaften und Methoden. Nachfolgend finden Sie eine Demo mit der Text-Klasse.
Ähnlich wie bei der letzten Demo erstellen wir 25 TextFields und wenden einige zufällige Werte auf ihre Eigenschaften an.
Die folgende Demo ist ein Hangman-Spiel, das mit der Shape- und Text-Klasse erstellt wurde, die wir bisher in diesem Lernprogramm besprochen haben.
Um den Henker zu zeichnen, verwenden wir eine Kombination lineTo (), ziehen nach(), und für den Kopf benutzen wir die Bogen() Methode. Innerhalb des drawCanvas () Funktion nennen wir die klar() Methode auf der hangmanShape.graphics Dadurch werden alle vorherigen Zeichnungen, die wir in dieser Form gemacht haben, gelöscht. Wir ändern die Farbe des Textfelds abhängig davon, ob der Spieler sein Spiel gewonnen oder verloren hat.
Sie können Bilder mithilfe der Bitmap-Klasse verwenden. Eine Bitmap stellt ein Bild, einen Canvas oder ein Video in der Anzeigeliste dar. Sie kann mit einem vorhandenen HTML-Element oder einer Zeichenfolge (Base64) instanziiert werden. Zum Beispiel neue createjs.Bitmap ("imagePath.jpg").
<
Sehr ähnlich zu früheren Demos erstellen wir hier drei Bitmaps und geben ihnen zufällige Eigenschaften.
Wir verwenden die Shadow-Klasse, um Schatten zu erzeugen. Die Schattenklasse nimmt als Parameter die Farbe, offsetX, offsetY und die Größe des Unschärfeeffekts usw. An. myImage.shadow = new createjs.Shadow ("# 000000", 5, 5, 10). Sie können Schatten auf jedes Anzeigeobjekt anwenden, damit dies auch für Text funktioniert.
Ein Sprite zeigt einen Frame oder eine Folge von Frames (wie eine Animation) aus einer SpriteSheet-Instanz an. Ein Sprite-Sheet ist eine Serie von Bildern (normalerweise Animationsframes), die zu einem Bild kombiniert werden. Eine Animation, die aus acht 100 x 100 Bildern besteht, könnte beispielsweise zu einem 400 x 200-Sprite-Blatt (vier Frames und zwei hoch) kombiniert werden. Sie können einzelne Bilder anzeigen, Bilder als Animation abspielen und sogar Animationen zusammen anzeigen. Um eine Sprite-Instanz zu initialisieren, übergeben Sie zum Beispiel ein SpriteSheet und eine optionale Bildnummer oder Animation, new createjs.Sprite (spriteSheet, "run"). Die an den SpriteSheet-Konstruktor übergebenen Daten definieren drei wichtige Informationen:
Nachfolgend finden Sie einige Beispielcodes, die ein Sprite mit "Zeichen" initialisieren würden.
var data = new createjs.SpriteSheet ("images": ["pfad / to / image.png"], "frames": "regX": 0, "height": 96, "count": 10, "regY") ": 0," width ": 75," animations ": " walk ": [0, 9]); character = new createjs.Sprite (data, "walk"); character.play (); Hier ist eine Demo mit der Sprite- und SpriteSheet-Klasse. Sie müssen auf die Bühne klicken und dann können Sie "A" verwenden, um sich nach links zu bewegen, und "D", um sich nach rechts zu bewegen. Zu dieser Demo ist anzumerken, dass ich Base64-codierte Bilder habe, die in der externen Ressource "imagestrings.js" enthalten sind. Da wir ein SpriteSheet verwenden und mit der Maus interagieren, wird die Leinwand durch die domänenübergreifende Image-Richtlinie (CORS) beschädigt. Durch die Verwendung von Base64-Strings können wir dies überwinden. Wenn dies auf Ihrer eigenen Domain gehostet würde, würden Sie die Bitmap-Klasse wie üblich verwenden, indem Sie ein Element oder einen Pfad übergeben.
Innerhalb des Konfiguration() Funktion, die wir schaffen Spritesheet. Für die "Bilder" -Taste gehe ich vorbei characterImage Dies ist eine Base64-codierte Zeichenfolge. Für die "Frames" -Taste sind die Zeichenbilder 96 Pixel hoch, 75 Pixel breit und es gibt zehn Frames (separate Bilder). Unten sehen Sie das Bild, das wir für die verwenden Spritesheet So können Sie sich vorstellen, wie es aussieht.
Für die "Animation" -Taste definieren wir eine "Lauf" -Animation, die von "Frame" null bis neun ist. Zuletzt erstellen wir die Charakter von dem Spritesheet.
Wenn Sie den Charakter nach links oder rechts bewegen, rufen wir an character.play (). und wenn Sie aufhören, den Charakter zu bewegen, rufen wir ancharacter.gotoAndStop (0). Da wir nur eine "Animation" haben, können wir sie einfach anrufen abspielen() und gotoAndStop () Wenn Sie mehrere Animationen hätten, würden Sie eine Kombination dieser beiden Pluspunkte verwenden gotoAndPlay ().
Die Containerklasse ist eine verschachtelbare Anzeigeliste, in der Sie mit zusammengesetzten Anzeigeelementen arbeiten können. Sie können beispielsweise Bitmap-Instanzen für Arme, Beine, Rumpf und Kopf in einem Personencontainer zusammenfassen und als Gruppe umwandeln, während Sie dennoch die einzelnen Teile relativ zueinander verschieben können. Untergeordnete Elemente von Containern haben ihre Transformations- und Alpha-Eigenschaften mit ihrem übergeordneten Container verkettet. Nachfolgend finden Sie eine Demo mit der Containerklasse. Klicken Sie auf die Bühne, um den Container um 20 Pixel zu verschieben.
Hier erstellen wir drei Bitmaps und fügen sie dem hinzu Container, Wir sind in der Lage, sie alle auf einmal zu bewegen Container, und obwohl sie sich in einem Container befinden, können Sie sie trotzdem einzeln verschieben.
Die cache () -Methode des Anzeigeobjekts zeichnet das Anzeigeobjekt in eine neue Leinwand, die dann für nachfolgende Zeichnungen verwendet wird. Für komplexe Inhalte, die sich nicht häufig ändern (z. B. ein Container mit vielen untergeordneten Objekten, die sich nicht bewegen, oder eine komplexe Vektorform), kann dies für ein wesentlich schnelleres Rendering sorgen, da der Inhalt nicht bei jedem Tick erneut gerendert werden muss.
Das zwischengespeicherte Anzeigeobjekt kann frei verschoben, gedreht, ausgeblendet usw. werden. Wenn sich jedoch der Inhalt ändert, müssen Sie den Cache manuell aktualisieren, indem Sie ihn aufrufen updateCache () oder Zwischenspeicher() nochmal. Sie müssen den Cache-Bereich über die Parameter x, y, w und h angeben. Dies definiert das Rechteck, das mit den Koordinaten dieses Anzeigeobjekts gerendert und zwischengespeichert wird. Caching sollte normalerweise nicht für die verwendet werden Bitmap Klasse, da dies die Leistung beeinträchtigen kann, wenn Sie jedoch einen Filter für eine Bitmap dann muss es zwischengespeichert werden.
Aufgrund von Größenbeschränkungen bei den JSFiddle-Einbettungen werde ich keine Demo für diese Methode bereitstellen, sondern Sie mit einer Demo auf der CreateJs-Website verlinken.
Die Filterklasse ist die Basisklasse, von der alle Filter erben sollten. Filter müssen auf Objekte angewendet werden, die mit der Cache-Methode zwischengespeichert wurden. Wenn sich ein Objekt ändert, müssen Sie es erneut zwischenspeichern oder verwenden updateCache (). Beachten Sie, dass die Filter angewendet werden müssen Vor Caching EaselJS wird mit einer Reihe vorgefertigter Filter geliefert. Beachten Sie, dass einzelne Filter nicht in die minimierte Version von EaselJS kompiliert werden. Um sie verwenden zu können, müssen Sie sie manuell in den HTML-Code aufnehmen.
In der folgenden Demo wird der Farbfilter verwendet. Wenn Sie auf die Bühne klicken, wird der grüne Kanal aus dem Bild entfernt. Das Farbfilter hat die folgenden Parameter.
ColorFilter ([redMultiplier = 1] [greenMultiplier = 1] [blueMultiplier = 1] [alphaMultiplier = 1] [redOffset = 0] [greenOffset = 0] [blueOffset = 0] [alphaOffset = 0])
Es wird erwartet, dass die Multiplikatoren für Rot, Grün, Blau und Alpha eine Zahl von Null bis Eins sind und Rot, Grün, Blau und Alpha Offset eine Zahl zwischen 255 und 255 sein sollen.
Wir erstellen ein normales Bitmap-Objekt, wenden den Filter an und speichern die Bitmap im Cache.
Ich habe eine letzte Demo erstellt, auf der wir im nächsten Teil dieser Serie aufbauen werden, indem Sie Sound hinzufügen, die Assets vorladen und Tweens verwenden.
In dieser Demo verwenden wir das Bitmap, Text, und Gestalten, Klassen, um ein Space Invaders-Spiel zu erstellen. Ich werde hier nicht jeden Schritt durchgehen, nur um zu zeigen, wie man die Konzepte zusammenhält, aber wenn Sie Fragen zum Code haben, können Sie sich gerne in den Kommentaren fragen. Die Kollisionserkennung wird von osln über Github bereitgestellt.
In diesem Tutorial haben wir uns EaselJS angesehen und ein paar Demoanwendungen erstellt. Ich hoffe, dass Sie diesen Artikel hilfreich fanden und Sie auf EaselJS aufmerksam werden. Danke fürs Lesen!
