Verschiedene Experimente haben gezeigt, dass es keinen Nutzen bringt, einen universellen WebGL–Renderer für EaselJS zu entwickeln. Moderne Canvas-Implementierungen leisten bereits gute Arbeit bei der Darstellung beliebiger 2D-Inhalte auf dem Grafikprozessor und sie verwenden nativen Code, um das Heavy Lifting durchzuführen.
Es ist jedoch möglich, mit WebGL enorme Leistungsvorteile zu realisieren, wenn Sie die Inhalte entsprechend einschränken. Die neuen SpriteStage & SpriteContainer Anzeigeobjekte bieten die bekannten EaselJS APIs, fügen aber einige Einschränkungen hinzu, damit Ihre Inhalte aggressiv für das WebGL-Rendering optimiert werden können.
Die neuen APIs können nahtlos auf Canvas 2D zurückgreifen, wenn WebGL nicht unterstützt wird, um sicherzustellen, dass Ihre Inhalte überall ausgeführt werden können. Darüber hinaus ermöglichen Ihnen eine Reihe von Integrationspunkten, den leistungsstarken WebGL- und den robusteren Canvas-Renderer problemlos zusammen zu nutzen, so dass Sie das Beste aus beiden Möglichkeiten herausholen können.
SpriteStage & SpriteContainer.
SpriteStage verwaltet eine WebGL-Phase. Es erweitert die bestehende EaselJS Stage, die Sie kennen. Es fügt ein paar neue Methoden hinzu, aber vor allem beschränkt es addChild() darauf, nur Anzeigenobjekte zu erlauben, die leicht in WebGL gezeichnet werden können. Dazu gehören Bitmap, Sprite, BitmapText und SpriteContainer, aber nicht Shape, Text oder Container.
Ebenso erweitert SpriteContainer den Container und setzt eigenen Contentbeschränkungen durch. Jeder SpriteContainer hat ein zugeordnetes SpriteSheet angegeben, das von den darin enthaltenen Sprite-, BitmapText- und SpriteContainer-Instanzen gemeinsam genutzt werden muss. Außerdem sind nur Sprite Sheets mit einem einzigen Bild erlaubt.
Das bedeutet letztendlich, dass jeder „Branch“ der SpriteStage „root“, unabhängig davon wie tief oder komplex, mit einem einzigen Bild gezeichnet und dass jeder Branch der Anzeigeliste zu einem einzigen Draw Call zusammengefasst werden kann. Das sorgt dafür, dass Ihr Content wirklich schnell wird.
In den meisten Fällen können Anzeigeobjekte normal manipuliert werden (x, y, Rotation, scale X/Y, alpha etc.), aber einige erweiterte Funktionen wie Masken und Filter werden in WebGL ignoriert.
Auch wenn es zunächst restriktiv klingen mag, ist es doch ein mächtiges Mittel. In einem Spiel könnte Ihre Bühne einen Bitmap-Hintergrund, einen SpriteContainer mit Ihren Terrain-Sprites, einen weiteren SpriteContainer mit Charakter-Sprites und einen Top-SpriteContainer mit BitmapText-Instanzen und Sprites zur Anzeige Ihrer UI/Partituren enthalten. Jeder dieser SpriteContainer kann ein eigenes SpriteSheet verwenden.
Es ist auch erwähnenswert, dass DOMElement als Child von SpriteStage und SpriteContainer sehr gut funktioniert, da es nicht in WebGL gerendert werden muss.
Automatic Fallback.
Wenn WebGL nicht auf einem Gerät unterstützt wird, greift das SpriteStage automatisch auf die Verwendung des Canvas 2D-Renderers zurück. Dies kann natürlich zu ernsthaften Performance-Problemen führen, wenn Ihre Inhalte von der Rendering-Leistung von WebGL abhängig sind. Mit SpriteStage.isWebGL können Sie überprüfen, welcher Renderer verwendet wird. Anschließend macht es Sinn, Ihre Inhalte entsprechend anzupassen.
SpriteStage + Stage.
Es gibt auch eine Reihe von Möglichkeiten, den schnellen WebGL-Renderer mit dem robusteren Canvas-Renderer zu verwenden.
Da Sie eine Canvas als Source Image verwenden können, ist es möglich, das Target-Canvas einer Stage in eine Bitmap einzupacken und zu einer SpriteStage hinzuzufügen. Sie Stage kann komplexe animierte Vektorinhalte haben und sie sollte in der SpriteStage gut sichtbar sein. Es ist auch möglich, diesen Trick umzukehren, um das WebGL-Canvas eines SpriteStage in eine Stage einzubinden.
Ebenso können Sie die Klasse SpriteSheetBuilder nutzen, zm SpriteSheets mit dem Canvas-Renderer zu erstellen und sie anschließend in WebGL zu verwenden. Dies kann beispielsweise verwendet werden, um Bitmap-Fonts aus vorhandenen TFF-Fonts zur Laufzeit zu erstellen, Filter wie Farbverschiebungen auf geladene SpriteSheets anzuwenden oder SpriteSheets aus Vektorinhalten zu erzeugen.
Schließlich ist es einfach, eine Stage-Canvas mit einem SpriteStage-Canvas zu überlagern und Maus/Touch-Interaktionen mit der aktualisierten Stage.nextStage-API zu durchlaufen. Auch Interaktionen wie Mouseover/Out funktionieren zwischen den Stages korrekt.
Sie können mehrere Stufen haben, die ale auf diese Weise miteinander verbunden sind. Die Canvases können unterschiedlich groß sein und sogar unabhängig voneinander aktualisiert werden, so dass Sie eine ultraschnelle, vollbildschirmfüllende Game-Engine-Rendering zu WebGL bei 60 fps haben können, mit einem schönen Vektor-Overlay-Rendering in halber Höhe bei 20 fps.
Wir hoffen, dass Sie sich einen ersten Überblick über WebGL & EaselJS verschaffen konnten. Wenn Sie noch Fragen oder Anmerkungen haben sollten, hinterlassen Sie uns unten einen Kommentar.
Vielen Dank für Ihren Besuch.