Im just learning javascript (trying create a game for windows 8 ui).
And this is my button on easeljs, but I think this code too (toooooo) ugly. Button must change texture on mouseEvents using one 3x texture of all button states.
Maybe other 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
