EaselJS: Lift-off und OOP [UPDATE]

Also zuerst mal sollte diese EaselJS-Geschichte nun nicht mehr nur auf der Startseite funktionieren – mea culpa!

Was EaselJS für mich so richtig interessant macht, ist die Tatsache, dass jedes Objekt auf dem Canvas eigenständig bleibt – so wie ich das Canvas-Element verstehe (als eine Art Bitmap/BitmapData), ist das nicht immer so? Dadurch kann man diesem kleinen Ball aus meiner Demo zum Beispiel einen Click-Handler geben, wie soeben geschehen.

Dabei ist mir Folgendes aufgefallen: Wenn ich tatsächlich nach und nach mehrere (ausgefeiltere) Demos bauen will, dann würde es der Übersichtlichkeit dienen, wenn ich diese voneinander separieren könnte. Am Liebsten in ihrem jeweils eigenen Objekt, von denen ich dann jeweils eines instanziiere. Nur: Wie funktioniert objektorientiertes Programmieren in JS? Meine JS-Kenntnisse sind etwas eingerostet, aber hier gibt es eine nette Basic- (!) Einführung.

Das Ergebnis kann man sich im Quellcode ansehen: Alle Variablen, die nur zur (bisher einzigen) Demo gehören, sind in “Klasse” “A” ausgelagert… I like! Nun könnte es eigentlich/vielleicht losgehen.

UPDATE:

Hm, andererseits wäre es auch interessant, “richtiges” OOP zu sehen, z.B. das Beerben von EaselJS’ Klassen. Angenommen, ich möchte ein TicTacToe-Spiel bauen, dann hätte ich Kreuze und Kreise, die beide (mir fällt grad kein besserer Begriff ein) Spielsteine (engl. “Tile”)sind, der wieder meinetwegen ein Shape ist. Wenn ich diese etwas ausgefeiltere Einführung als Ausgangspunkt nehme, sieht das so aus:

Tile.prototype = new Shape();
Tile.prototype.constructor = Tile;
Tile.prototype.g;
function Tile()
{
	this.g = new Graphics();
	Shape.prototype.initialize.call( this, this.g );
}

Circle.prototype = new Tile();
Circle.prototype.constructor = Circle;
function Circle()
{
	this.g.setStrokeStyle( 1 );
	this.g.beginStroke( Graphics.getRGB( 0, 0, 0 ) );
	this.g.drawCircle( 0, 0, 10 );
}

Cross.prototype = new Tile();
Cross.prototype.constructor = Cross;
function Cross()
{
	this.g.setStrokeStyle( 1 );
	this.g.beginStroke( Graphics.getRGB( 0, 0, 0 ) );
	this.g.moveTo( 0, 0 );
	this.g.lineTo( 18, 18 );
	this.g.moveTo( 0, 18 );
	this.g.lineTo( 18, 0 );
}

Tile.prototype = new Shape();

Tile.prototype.constructor = Tile;

Tile.prototype.g;

function Tile()

{

this.g = new Graphics();

Shape.prototype.initialize.call( this, this.g );

}

Circle.prototype = new Tile();

Circle.prototype.constructor = Circle;

function Circle()

{

this.g.setStrokeStyle( 1 );

this.g.beginStroke( Graphics.getRGB( 0, 0, 0 ) );

this.g.drawCircle( 0, 0, 10 );

}

Cross.prototype = new Tile();

Cross.prototype.constructor = Cross;

function Cross()

{

this.g.setStrokeStyle( 1 );

this.g.beginStroke( Graphics.getRGB( 0, 0, 0 ) );

this.g.moveTo( 0, 0 );

this.g.lineTo( 18, 18 );

this.g.moveTo( 0, 18 );

this.g.lineTo( 18, 0 );

}

Potential für Verbesserung sehe ich hier:

Kreis und Kreuz nur je einmal zeichnen und wiederverwenden (siehe Doku zu Shape), statt jedes mal im Konstruktor.
DisplayObject.cache() verwenden.

Meinungen?

EaselJS: Kickoff

So ein Blog ist ein tolles Spielzeug. Eigentlich wollte ich nur meine Tweets anzeigen. Dafür brauchte ich ein neues Theme (das alte hatte keine Sidebar^^). Das neue ist schick, aber hat da oben diesen grauen Header, für den ich eigentlich keine Verwendung habe… lange Rede, kurzer Sinn: Ich benutze es jetzt als Canvas für EaselJS, mit dem ich gerade rumspiele.

Mittelfristig möchte ich da random das anzeigen, was bei meinen Spielereien so abfällt. Bis auf weiteres muss es aber eine Abwandlung einer Demo von Mike Chambers tun.

Robotlegs: Injection funktioniert nicht

Tag,

wer das Problem hat, dass Robotlegs nicht injected, der möge folgende Compiler-Option probieren:

-keep-as3-metadata=Inject,PostConstruct

1	-keep-as3-metadata=Inject,PostConstruct

HTH,

Lennart

Robotlegs: mediatorMap.mapView()

Folgende Situation: Ich habe einen Context, den ich an mehrere Module hänge. Diese Module sind immer vom Typ AbstractStoryPage, aber manchmal auch vom Typ AbstractStoryLastPage. Im Context will ich nur für AbstractStoryLastPages einen Mediator mappen. Erste Experimente zeigen, dass ich nicht

mediatorMap.mapView( AbstractStoryLastPage, LastPageMediator );

1	mediatorMap.mapView( AbstractStoryLastPage, LastPageMediator );

aufrufen kann. Offenbar muss ich die konkrete Klasse nehmen, nicht eine Überklasse. Aber: Anders als der Methodenkopf

public function mapView(viewClassOrName:*, mediatorClass:Class, injectViewAs:* = null, autoCreate:Boolean = true, autoRemove:Boolean = true):void;

1	public function mapView(viewClassOrName:, mediatorClass:Class, injectViewAs: = null, autoCreate:Boolean = true, autoRemove:Boolean = true):void;

nahe legt, kann ich dort nicht nur eine Klasse oder einen Namen übergeben, sondern auch eine Instanz. Und jeder Context hält die Instanz seines Views als DisplayObjectContainer contextView. Was also geht:

if( contextView is AbstractStoryLastPage )
{
    mediatorMap.mapView( contextView, LastPageMediator );
}

if( contextView is AbstractStoryLastPage )

{

mediatorMap.mapView( contextView, LastPageMediator );

}

Now you know. Verzweigungen im Context basierend auf der Überklasse des Views, aber ohne die konkreten Klassen mit reinkompilieren zu müssen.

crusy.net

♪ Commit ins Abenteuerland ♫

Tag Archives for Framework

EaselJS: Lift-off und OOP [UPDATE]

EaselJS: Kickoff

Robotlegs: Injection funktioniert nicht

Robotlegs: mediatorMap.mapView()