首页 > 代码库 > Cocos2d-js 开发记录:自定义按钮
Cocos2d-js 开发记录:自定义按钮
游戏开发总是有些特殊一般的预制的UI无法满足要求,其实对于不复杂的功能,与其看文档还不如自己写一个。比如游戏中一个虚拟键盘,其中的按键在按下时会增长,在变为原来的两倍高度,在原来高度上方显示按键的字如:
整体键盘:
/* implementation element(key button) used by keyboard */var KeyMenuItem = cc.MenuItem.extend({ _label: null, _extending: null, _hiding: null, _normal_sprite: null, _press_sprite: null, FONT_EXTENDED_BOTTOM_PADDING_FACTOR: 0.75, FONT_BOTTOM_PADDING_FACTOR: 0, FONT_SIZE_FACTOR: 0.4, ctor: function(normal_img, press_img, text, callback, target) { cc.MenuItem.prototype.ctor.call(this); this.initWithCallback(callback, target); var normal_sprite = new cc.Sprite(normal_img); var press_sprite = new cc.Sprite(press_img); this._normal_sprite = normal_sprite; this._press_sprite = press_sprite; this.width = normal_sprite.width; this.height= normal_sprite.height; this._extending = false; this._hiding = false; var label = new cc.LabelTTF(text, "Arial", Math.ceil(normal_sprite.width * this.FONT_SIZE_FACTOR)); label.setColor(cc.color(0, 0, 0, 255)); this._label = label; this.setNormal(); this.addChild(label, 2); this.addChild(press_sprite, 0); this.addChild(normal_sprite, 1); this.cascadeColor = true; this.cascadeOpacity = true; }, selected: function() { cc.MenuItem.prototype.selected.call(this); if (this._enabled) { this.setPress(); cc.log("custom button selected"); } cc.audioEngine.playMusic(res.button_press_mp3, false); }, unselected: function() { cc.MenuItem.prototype.unselected.call(this); if (this._enabled) { this.setNormal(); cc.log("custom button unselected"); } }, setNormal: function() { this.setLabelNormal(); this.setSpriteNormal(); }, setPress: function() { this.setLabelPressed(); this.setSpritePressed(); }, setLabelNormal: function () { var label = this._label; var nsprite = this._normal_sprite; label.setPosition(nsprite.width / 2.0, this.height * (0.5 + this.FONT_BOTTOM_PADDING_FACTOR)); }, setLabelPressed: function() { var label = this._label; var psprite = this._press_sprite; var factor = this.FONT_EXTENDED_BOTTOM_PADDING_FACTOR; label.setPosition(psprite.width / 2.0, psprite.height * factor); }, setSpriteNormal: function () { var nsprite = this._normal_sprite; var psprite = this._press_sprite; psprite.visible = false; nsprite.visible = true; nsprite.setPosition(this.width / 2.0, this.height / 2.0); psprite.setPosition(psprite.width / 2.0, psprite.height / 2.0); }, setSpritePressed: function() { var nsprite = this._normal_sprite; var psprite = this._press_sprite; psprite.visible = true; nsprite.visible = false; psprite.setPosition(psprite.width / 2.0, psprite.height / 2.0); nsprite.setPosition(this.width / 2.0, this.height / 2.0); }, setEnabled: function(enabled) { var nsprite = this._normal_sprite; var psprite = this._press_sprite; var label = this._label; if (this._enabled != enabled) { if (enabled == false) { this.setOpacity(0); } else { this.setOpacity(255); } } cc.MenuItem.prototype.setEnabled.call(this, enabled); }, getString: function () { return this._label.getString(); }});
Cocos2d-js 开发记录:自定义按钮
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。