- 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
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 }());