var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new ButtonLayer();
this.addChild(layer);
}
});
var ButtonLayer = cc.Layer.extend({
/**
* Width in pixels
*/
maxWidth: 0,
/**
* Height in pixels
*/
maxHeight: 0,
/**
* Small Button
*/
button: null,
/**
* Medium Button
*/
buttonSmall: null,
/**
* Large Button
*/
buttonLarge: null,
/**
* Constructor
*/
ctor: function () {
this._super();
this.init();
},
/**
* Init
*/
init: function () {
this.maxWidth = cc.director.getWinSizeInPixels().width;
this.maxHeight = cc.director.getWinSizeInPixels().height;
this.scheduleUpdate();
},
/**
* Update function
*/
update: function () {
if (this.button == null || this.buttonSmall == null || this.buttonLarge == null) {
// create buttons
this.button = this.createButton();
this.buttonSmall = this.createButton();
this.buttonLarge = this.createButton();
// draw a button at location 10%,10% of the screen that\'s 10% of the screen wide and 10% of the screen high
this.drawButton(this.buttonSmall, this.getWidthPercent(10), this.getHeightPercent(10), this.getWidthPercent(10), this.getHeightPercent(10));
// draw a button at location 10%,30% of the screen that\'s 30% of the screen wide and 20% of the screen high
this.drawButton(this.button, this.getWidthPercent(10), this.getHeightPercent(30), this.getWidthPercent(30), this.getHeightPercent(20));
// draw a button at location 10%,60% of the screen that\'s 80% of the screen wide and 30% of the screen high
this.drawButton(this.buttonLarge, this.getWidthPercent(10), this.getHeightPercent(60), this.getWidthPercent(80), this.getHeightPercent(30));
}
},
/**
* Draw a button
*/
drawButton : function (button, x, y, scaleX, scaleY) {
button.setAnchorPoint(0,0);
button.setContentSize(scaleX, scaleY);
button.setPositionX(x);
button.setPositionY(y);
this.addChild(button);
},
/**
* Create button
*/
createButton: function () {
var rect = new cc.rect(2, 2, 44, 47); // hardcoded "magic numbers" don\'t do this in production
var capInsets = new cc.rect(8, 7, 32, 36); // hardcoded "magic numbers" don\'t do this in production
var button = cc.Scale9Sprite.create(res.BtnRedMatte9_png, rect, capInsets);
return button;
},
getWidthPercent: function (percent) {
return percent / 100 * this.maxWidth;
},
getHeightPercent: function (percent) {
return percent / 100 * this.maxHeight;
}
});