I am just learning javascript (trying to create a game for Windows 8 ui).
And this is my easeljs button, but I think this code too (toooooo) is ugly. The button should change the texture on mouseEvents using one 3x texture of all button states.
Maybe a different solution for this purpose?
Using:
btn_newgame = new my_controls.Button("button.png", "New Game", "30px sans-serif"); btn_newgame.set_position("center", 300); btn_newgame.click = function (event) { console.log('newgame click'); };
Button Code:
(function () { Button.prototype = new createjs.Container(); Button.prototype.constructor = Button; function Button(source_img, text, font, font_color) { this.initialize(); this.mouseEventsEnabled = true; this.set_scale = set_scale; this.set_position = set_position; text = text || ""; font = font || "12px sans-serif"; font_color = font_color || "black"; this.img_bitmap = new createjs.Bitmap(source_img) this.btn_text = new createjs.Text(text, font, font_color); this.btn_text.x = source_img.naturalWidth / 2 - this.btn_text.getMeasuredWidth() / 2; this.btn_text.y = this.btn_text.getMeasuredHeight() / 8; this.addChild(this.img_bitmap); this.addChild(this.btn_text); this.width = source_img.naturalWidth, this.height = source_img.naturalHeight / 4; // for different states = different pieces of one texture. this.states = { out: new createjs.Rectangle(0, 0, this.width, this.height), over: new createjs.Rectangle(0, this.height, this.width, this.height), down: new createjs.Rectangle(0, this.height * 2, this.width, this.height) }; this.img_bitmap.sourceRect = this.states['out']; this.press; this.over; this.out; this.click; this.onPress = onPress; this.onMouseOver = onMouseOver; this.onMouseOut = onMouseOut; this.onClick = onClick; } function set_scale (scale_x, scale_y) { this.scaleX = scale_x || 1; this.scaleY = scale_y || 1; } function set_position (posX, posY) { posX = posX || 0; posY = posY || 0; if (typeof posX == "number") { this.x = posX; } else { switch (posX) { case "center": this.x = canvas.width / 2 - Math.floor(this.width / 2 * this.scaleX); break; case "left": this.x = 0; break; case "right": this.x = canvas.width - Math.floor(this.width * this.scaleX); break; default: this.x = 0; } } if (typeof posY == "number") { this.y = posY; } else { switch (posY) { case "center": this.y = canvas.height / 2 - Math.floor(this.height / 2 * this.scaleY); break; case "top": this.y = 0; break; case "bottom": this.y = canvas.height - Math.floor(this.height * this.scaleY); break; default: this.y = 0; } } } function onPress (event) { this.img_bitmap.sourceRect = this.states['down']; this.btn_text.x += 1; this.btn_text.y += 1; if (this.press) this.press(event); } function onMouseOver (event) { this.img_bitmap.sourceRect = this.states['over']; this.last_state = 'over'; if (this.over) this.over(event); } function onMouseOut (event) { this.img_bitmap.sourceRect = this.states['out']; this.last_state = 'out'; if (this.out) this.out(event); } function onClick (event) { this.img_bitmap.sourceRect = this.states['over']; this.btn_text.x -= 1; this.btn_text.y -= 1; if (this.click) this.click(event); } my_controls.Button = Button; })(my_controls); // Button
source share