COCOS2D-JS Development Record: Custom button

Game development is always some special general pre-fabricated UI can not meet the requirements, in fact, for the non-complex features, rather than looking at the document itself to write one. For example, a virtual keyboard in the game, where the keys will grow when pressed, in the original twice times the height of the original height above the display of key words such as:

Overall keyboard:

/*implementation Element (key button) used by keyboard*/varKeymenuitem =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); varNormal_sprite =Newcc.        Sprite (NORMAL_IMG); varPress_sprite =Newcc.        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; varLabel =NewCc. 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 () {        varLabel = This. _label; varNsprite = This. _normal_sprite; Label.setposition (Nsprite.width/2.0, This. Height * (0.5 + This.    Font_bottom_padding_factor)); }, setlabelpressed:function() {        varLabel = This. _label; varPsprite = This. _press_sprite; varFactor = This.        Font_extended_bottom_padding_factor; Label.setposition (Psprite.width/2.0, Psprite.height *factor); }, Setspritenormal:function () {        varNsprite = This. _normal_sprite; varPsprite = 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() {        varNsprite = This. _normal_sprite; varPsprite = 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) {varNsprite = This. _normal_sprite; varPsprite = This. _press_sprite; varLabel = 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 Development Record: Custom button