NCCanvas – Ein HTML5-Canvas-Framework

Ja, genau – noch ein HTML5-Canvas-Framework! Du magst jetzt nach dem speziellen Zweck oder Hintergrund dieses speziellen Frameworks fragen, aber den gibt es nicht wirklich – mir war einfach danach!
Angefangen hat das Projekt, als ich einfach einmal einen Multi-Layer-Scroller auf einem HTML5-Canvas programmieren wollte. Da ein solcher Versuch erfahrungsgemäß nur Lust auf mehr macht, legte ich halt von Anfang an viel Wert auf Modularität, Skalierbarkeit und Wiederverwertbarkeit des Codes. Also ging die allgemeine Stoßrichtung des Projektes – entgegen der ursprünglichen Intention – nicht in die, des einfachen Runterproggens einer solchen Lösung, sondern vielmehr in die Erstellung eines Frameworks, welches mir diese Möglichkeiten eröffenet. Das Resultat sieht derzeit etwa so aus:


Was Du hier siehst, ist eine Landschaft, die über 3 Ebenen scrollt. In der Mitte befindet ein Sprite. Ein Blick auf den Sourcecode der Indexseite offenbart einen schlichten AppStarter:

Wie man sieht, setzte ich zur Realisierung einer Klassenhierarchie auf das ‚prototype.js‘-Framework. Auch wenn der Ansatz überholt ist, in JavaScript auf Klassenhierarchien im konventionellen Sinne zu setzen, wollte ich aus Gewohnheit doch nicht darauf verzichten. So erstellte ich auf diesem Wege folgende Klassenhierarchie:

Klassenhierarchie des NCCanvas HTML5 Frameworks

Klassenhierarchie des NCCanvas HTML5 Frameworks


Auf diese Weise ist es jetzt recht simpel, eine Anwendung zu erstellen und mit entsprechenden Widgets zu arbeiten. Hier ein komprimierter Auszug aus der NCTestApp – welche im o.g. Schaubild ‚MyApplication‘ entspricht:

Wie man deutlich sieht, werden die benötigten Widgets in der Initialisierungsmethode der Anwendung lediglich instantiiert, initialisiert und im NCCanvas abgelegt. Der Rest passiert quasi automatisch, wenn die Anwendung gestartet wird. Die Anwendung erhält (z.B. beim Klick auf einen Button) Objekte vom Typ NCEvent zurück. Auf diese Weise ist der Eventhandler realisiert.

Wer mehr ins Detail gehen möchte, kann sich gerne durch den Sourcecode klicken und / oder mich kontaktieren. Da das eigentliche Ziel des Landschaftsscrollers damit nun realisiert ist und ich durch die Realisierung von Button-Widgets die Erweiterbarkeit demonstrieren konnte, parke ich das Projekt vorerst einmal. Nächste Schritte könnten der Ausbau der Widgets um Eingabefelder etc. sein, triggered Keyboard-Events oder die Implementierung von weiteren Basismodulen, wie einer Physics-Engine zur Realisierung komplexerer Animationsabläufe.