201419Aug

PlayCanvas: WebGL-Game-Engine für HTML5/JS-Games

Auch wenn sich in Sachen JavaScript-3D-Engines THREE.js inzwischen zum Platzhirsch gemausert haben dürfte, kann es nicht schaden, Alternativen auszuprobieren. Die im April 2011 gestartete WebGL-Game-Engine PlayCanvas ist Mitte diesen Jahres bei GitHub als Open-Source-Projekt unter der MIT-Lizenz veröffentlicht worden. Im Gegensatz zu THREE.js kommt PlayCanvas gleich noch mit einer integrierten Physik-Engine, mit der sich Rigid Bodies, Joints und auch Fahrzeuge umsetzen lassen.

PlayCanvas - 3D HTML5 Game Engine

Natürlich sind auch die Grundfunktionalitäten einer Game-Engine in PlayCanvas vertreten: 3D-Model Loading, Shadow Mapping, Post-Effekte, Keyframes, Skeletal Blending, Skinning, Audio-Integration sowie Support für sämtliche Eingabegeräte (Maus, Tastatur, Touch, Gamepad, Leap Motion) sind in PlayCanvas integriert. Weiterhin steht ein Entity-Component-System zur Verfügung, mit dem sich im Szenengraph sehr leicht Objekte hinzufügen lassen. Ein Beispiel:

  • var game = new pc.fw.Application(canvas, {});
  • game.start();
  •  
  • var cube = new pc.fw.Entity();
  • game.context.systems.model.addComponent(cube, {
  • type: "box"
  • });
  •  
  • game.context.root.addChild(cube);

Weiterhin steht mit dem "PlayCanvas Designer" ein Echtzeit-Editor zur Verfügung, in den 3D-Modelle per Drag 'n' Drop importiert werden können und auch Änderungen in einem kollaborativen Projekt direkt für andere Teilnehmer sichtbar werden.
Demos von bestehenden PlayCanvas-Projekten finden sich hier.

201418Aug

Dominus: Skript für einfache DOM-Manipulationen

Moderne Webbrowser bieten mit querySelector, querySelectorAll oder dem className-Attribut schon native Wege an, um DOM-Strukturen auszulesen und zu verändern. Ein paar erweiterte Funktionalitäten wie Chaining oder etwa "find()", "findOne()", "prev()", "next()", "html(), "text()", "attr()" und Event-Zuweisungen per ".on()" können aber nicht schaden. Hierfür bietet sich eine minimalistische Bibliothek wie Dominus an, die genau wie jQuery die Sizzle-Engine für CSS-Selektoren verwendet.

Sizzle CSS Selector Engine

Dominus versteht sich daher als unkomplizierte Erweiterung zu nativen DOM-Funktionen und bietet dennoch die Flexibilität von neuere JavaScript-Methoden: Elemente, die mit Dominus ausgelesen werden, sind als Array verfügbar und daher können Transformationen wie ".filter()", ".forEach()" oder ".filter()" weiterhin genutzt werden.
Wer auf das beliebte Dollarzeichen ($) von jQuery nicht verzichten möchte, erhält mit dem Skript Cash ein Pendant zu Dominus, das allerdings die $-Funktion für den Aufruf verwendet.

201414Aug

Next-Gen-JS-Frameworks: Pro, Contra und Neuansatz

Sie heißen AngularJS, Backbone.js, Ember.js, Polymer und React: Die Next-Gen-JavaScript-Frameworks, mit denen schon jetzt moderne Webanwendungen und Portale realisiert werden. Die Frameworks bieten in der Regel keine gewöhnlichen Funktionen wie DOM-Manipulationen, Effekte oder Ähnliches, sondern warten mit neuartigen Konzepten für Client-Templates, Bindings und Model-View-Controller-Alternativen auf. Ende letzten Jahres hatte ich einen Artikel darüber verfasst, wie sich die Welt der JavaScript-Frameworks in den kommenden Jahren verändern wird.

Google Trends - angularjs, knockoutjs, ember js, backbone.js

Auch gibt es bereits ausführliche Vergleiche der Next-Gen-Frameworks, in denen die Bibliotheken beleuchtet und mit einem Fazit versehen werden. Im Blog von "&yet" findet sich nun ein aktueller "Opinionated Rundown of JS Frameworks", in dem auch React und Polymer betrachtet werden. Neben Pros und Contras stellen die Entwickler am Ende des Artikels schließlich ihr eigenes Framework Ampersand.js vor, das die genannten Punkte verbessern will. Ob sich das "highly modular, loosely coupled, non-frameworky" Framework durchsetzen wird, dürfte sich bald herausstellen.
AngularJS erfreut sich immer größerer Beliebtheit und inzwischen gibt es mit Ionic sogar schon eine PhoneGap-/Cordova-Erweiterung, die auf AngularJS basiert und eine solide Basis für native Smartphone-Apps darstellt, die mit JavaScript entwickelt werden können.

201413Aug

JavaScript: Schlüsselwort 'this' übernehmen mit bind()

Manchmal gibt es Situationen in JavaScript, in denen das Schlüsselwort "this" in einem anderen Kontext überschrieben wird, ohne dass dies gewünscht ist. Ein klassisches Beispiel dafür sind Event-Listener, bei denen sich "this" nach dem Binden des Events auf das Listener-Scope und nicht mehr auf das gewünschte Objekt bezieht:

  • function a() {
  • this.abc = 123;
  •  
  • this.func = function(event) {
  • alert(this.abc);
  • };
  •  
  • return this;
  • }
  •  
  • var b = a();
  •  
  • document.querySelector("#btn").addEventListener("click", b.func);

In dem Beispiel wird beim Klick auf die Schaltfläche mit der ID "btn" also nicht etwa "123" ausgegeben, sondern "undefined". Das Problem mit dem "this"-Schlüsselwort erstreckt sich natürlich noch auf weitere Bereiche, wie beispielsweise asynchrone Ajax-Callbacks. Der Entwickler Krasimir Tsonev hat in diesem Beitrag das Problem noch einmal beleuchtet und den entsprechenden Lösungsansatz inklusive Polyfill für ältere Browser vorgestellt: Die native JavaScript-Funktion Function.prototype.bind(). Hiermit lässt sich der Kontext bzw. das Scope einer Funktion neu definieren und somit kann auch "this" an anderen Stellen genutzt werden, ohne eine Hilfsvariable "self", "that" oder Ähnliches erstellen zu müssen. Das obige Beispiel kann also mit dem Hinzufügen von ".bind(this)" korrigiert werden. Die entsprechende Zeile sieht dann aus wie folgt:

  • document.querySelector("#btn").addEventListener("click", b.func.bind(this));

Die Problematik von Event-Listenern und "this" wird übrigens auch mit ES6 und den Arrow Functions verschwunden sein.