• Javascript provides native inheritance by having this.prototype = superclass
  • CreateJS wrapped inheritance into its library by using var x = createjs.extend(subclass, superclass);
  • And use window.subclass = createjs.promote(subclass, identifier); after all class methods are defined to promote superclass method on
  • In this example, we are going to inherit from container as reference to tutorial here : https://github.com/CreateJS/EaselJS/tree/master/tutorials/Inheritance

alternate content  

Class code after the main program ???

Source code
	<script>
		var stage;
		function init() {
			stage = new createjs.Stage("demoCanvas");
			stage.enableMouseOver();
			
 			// The main program needs very little code because simpleButton is packed into a class
            var btnUp = stage.addChild(new simpleButton(40, 40,"W", "#F00"));	// The main program become very clean
            btnUp.x = 80;
            btnUp.y = 30;

            var btnLeft = stage.addChild(new simpleButton(40, 40,"A", "#0F0"));
            btnLeft.x = 30;
            btnLeft.y = 80;

            var btnRight = stage.addChild(new simpleButton(40, 40,"D", "#00F"));
            btnRight.x = 130;
            btnRight.y = 80;

            var btnDown = stage.addChild(new simpleButton(40, 40,"S", "#FF0"));
            btnDown.x = 80;
            btnDown.y = 80;
			
			createjs.Ticker.addEventListener("tick", tick);
		}
		
		function tick() {
			stage.update();
		}
	</script>

	<canvas id="demoCanvas" width="300" height="100">
		alternate content
	</canvas>
 
	<script>
		init();
	</script>

simpleButton Class
(function() {
function simpleButton(width,height,label, color) {	// This will be the constructor of your class, will be executed when new an object
	this.Container_constructor();
	
	this.color = color;
	this.label = label;
    this.width = width;
    this.height = height;
	
	this.setup();
}
var p = createjs.extend(simpleButton, createjs.Container);

p.setup = function() {
	this.text = new createjs.Text(this.label, "20px Arial", "#000");
	this.text.textBaseline = "middle";
	this.text.textAlign = "center";
	
	var width = this.width;
	var height = this.height;
	
	this.text.x = 0;
	this.text.y = 0;
	
	this.background = new createjs.Shape();
	this.background.graphics.beginFill(this.color);
    this.background.graphics.beginStroke(createjs.Graphics.getRGB(0,0,0)).drawRoundRect(-width/2,-height/2,width,height,5).endStroke();
    this.background.graphics.beginStroke(createjs.Graphics.getRGB(0,0,0)).drawRoundRect(-width/2 + 3,-height/2 + 2,width - 6,height - 8,5).endStroke();
	
	this.addChild(this.background, this.text); 
	this.on("rollover", this.handleRollOver);
	this.on("rollout", this.handleRollOver);
    this.on("mousedown", this.handleMouseDown);
    this.on("pressup", this.handlePressUp);
	this.cursor = "pointer";
	this.mouseChildren = false;
} ;
 
p.handleMouseDown = function(event){	// Press the button
	this.background.y = 2;
    this.text.y = 2;
}


p.handlePressUp = function(event){		// Release the button
	this.background.y = 0;

    this.text.y = 0;
}
 
p.handleRollOver = function(event) {	// Change the shape when mouse over
	var width = this.width;
	var height = this.height;

	if( event.type == "rollover" ){
		this.background.graphics.clear().beginFill(this.color);
	    this.background.graphics.beginStroke(createjs.Graphics.getRGB(0,0,0)).drawRoundRect(-width/2 + 1,-height/2,width - 2,height - 2,5).endStroke();
    	this.background.graphics.beginStroke(createjs.Graphics.getRGB(0,0,0)).drawRoundRect(-width/2 + 4,-height/2 + 2,width - 8,height - 8,5).endStroke();
    }else{
		this.background.graphics.clear().beginFill(this.color);
    	this.background.graphics.beginStroke(createjs.Graphics.getRGB(0,0,0)).drawRoundRect(-width/2,-height/2,width,height,5).endStroke();
	    this.background.graphics.beginStroke(createjs.Graphics.getRGB(0,0,0)).drawRoundRect(-width/2 + 3,-height/2 + 2,width - 6,height - 8,5).endStroke();
    }
};

window.simpleButton = createjs.promote(simpleButton, "Container");	// Need to promote after all the methods are implemented
}());
  • No labels