├── 3rdparty ├── phaser.min.js └── webfontloader.js ├── GUIContainer.js ├── GUIFactory.js ├── GUIObject.js ├── README.md ├── components ├── button.js ├── checkbox.js ├── dropdown.js ├── label.js ├── listview.js ├── processbar.js ├── radiobox.js ├── rating.js ├── scrollbar.js ├── textInput.js ├── toggle.js ├── tooltip.js └── window.js ├── dist └── rsgui.min.js ├── index.html ├── rsgui.js └── theme ├── AlexBrush-Regular.ttf ├── images ├── btn_down.png ├── btn_off.png ├── btn_over.png ├── btn_up.png ├── check_off.png ├── check_on.png ├── process_bg.png ├── process_icon.png ├── scroll_bg.png ├── scroll_btn.png ├── window_bg.png └── window_title.png └── theme.json /3rdparty/webfontloader.js: -------------------------------------------------------------------------------- 1 | /* Web Font Loader v1.6.10 - (c) Adobe Systems, Google. License: Apache 2.0 */ 2 | (function(){function aa(a,b,c){return a.call.apply(a.bind,arguments)}function ba(a,b,c){if(!a)throw Error();if(2parseInt(a[1],10)||536===parseInt(a[1],10)&&11>=parseInt(a[2],10))}return R}P.prototype.start=function(){this.s.serif=this.C.m.offsetWidth;this.s["sans-serif"]=this.D.m.offsetWidth;this.ga=p();T(this)};function ja(a,b,c){for(var d in Q)if(Q.hasOwnProperty(d)&&b===a.s[Q[d]]&&c===a.s[Q[d]])return!0;return!1} 8 | function T(a){var b=a.w.m.offsetWidth,c=a.A.m.offsetWidth,d;(d=b===a.s.serif&&c===a.s["sans-serif"])||(d=S()&&ja(a,b,c));d?p()-a.ga>=a.v?S()&&ja(a,b,c)&&(null===a.Z||a.Z.hasOwnProperty(a.f.getName()))?U(a,a.G):U(a,a.J):ka(a):U(a,a.G)}function ka(a){setTimeout(n(function(){T(this)},a),50)}function U(a,b){setTimeout(n(function(){this.w.remove();this.A.remove();this.C.remove();this.D.remove();b(this.f)},a),0)};function V(a,b,c){this.a=a;this.p=b;this.P=0;this.ba=this.Y=!1;this.v=c}var la=!!window.FontFace;V.prototype.V=function(a){var b=this.p;b.u&&t(b.j,[b.e.d(b.g,a.getName(),I(a).toString(),"active")],[b.e.d(b.g,a.getName(),I(a).toString(),"loading"),b.e.d(b.g,a.getName(),I(a).toString(),"inactive")]);J(b,"fontactive",a);this.ba=!0;ma(this)}; 9 | V.prototype.W=function(a){var b=this.p;if(b.u){var c=u(b.j,b.e.d(b.g,a.getName(),I(a).toString(),"active")),d=[],e=[b.e.d(b.g,a.getName(),I(a).toString(),"loading")];c||d.push(b.e.d(b.g,a.getName(),I(a).toString(),"inactive"));t(b.j,d,e)}J(b,"fontinactive",a);ma(this)};function ma(a){0==--a.P&&a.Y&&(a.ba?(a=a.p,a.u&&t(a.j,[a.e.d(a.g,"active")],[a.e.d(a.g,"loading"),a.e.d(a.g,"inactive")]),J(a,"active")):K(a.p))};function na(a){this.F=a;this.q=new ha;this.$=0;this.T=this.U=!0}na.prototype.load=function(a){this.a=new q(this.F,a.context||this.F);this.U=!1!==a.events;this.T=!1!==a.classes;oa(this,new fa(this.a,a),a)}; 10 | function pa(a,b,c,d,e){var f=0==--a.$;(a.T||a.U)&&setTimeout(function(){var a=e||null,l=d||null||{};if(0===c.length&&f)K(b.p);else{b.P+=c.length;f&&(b.Y=f);var h,k=[];for(h=0;h=0;i--){ 44 | child = this.children[i]; 45 | if(child.input!=null){//} && child.input.enabled){ 46 | if(this.hitTest(pointer,child)){ 47 | return child; 48 | } 49 | } 50 | } 51 | return null; 52 | } 53 | GUIContainer.prototype.hitTest=function(point,sprite){ 54 | var m_left=sprite.world.x-sprite.anchor.x*sprite._originWidth;//sprite.width; 55 | var m_right=sprite.world.x+(1-sprite.anchor.x)*sprite._originWidth;//sprite.width; 56 | var m_top=sprite.world.y-sprite.anchor.y*sprite._originHeight;//sprite.height; 57 | var m_bottom=sprite.world.y+(1-sprite.anchor.y)*sprite._originHeight;//sprite.height; 58 | if(point.x>m_left && point.xm_top && point.y=0;i--){ 64 | child = this.children[i]; 65 | if(child.input!=null && child.input.enabled){ 66 | if(child[event]!=null){ 67 | child[event](child, pointer); 68 | } 69 | } 70 | } 71 | } 72 | GUIContainer.prototype.onInputDownHandler=function(sprite,pointer){ 73 | GUIObject.prototype.onInputDownHandler.call(this,sprite,pointer); 74 | this._downChild=this._overChild;//this.getHitChild(pointer); 75 | if(this._downChild!=null){ 76 | this._downChild.input.enabled=true; 77 | this._downChild.events._onInputDown.dispatch(this._downChild,pointer); 78 | if(this.input.draggable) this.input.isDragged=true;//disableDrag(); 79 | }else { 80 | if(this.input.draggable) this.input.isDragged=false; 81 | } 82 | } 83 | GUIContainer.prototype.onInputUpHandler=function(sprite,pointer,isOver){ 84 | GUIObject.prototype.onInputUpHandler.call(this,sprite,pointer,isOver); 85 | if(this._downChild!=null){ 86 | this._downChild.events._onInputUp.dispatch(this._downChild,pointer,this.hitTest(pointer,this._downChild)); 87 | this._downChild.input.enabled=false; 88 | } 89 | this._downChild=null; 90 | } 91 | GUIContainer.prototype.onInputOutHandler=function(sprite,pointer){ 92 | GUIObject.prototype.onInputOutHandler.call(this,sprite,pointer); 93 | if(this._overChild!=null && this._overChild.events._onInputOut!=null){ 94 | this._overChild.events._onInputOut.dispatch(this._overChild,pointer); 95 | this._overChild.input.enabled=false; 96 | } 97 | this._overChild=null; 98 | } 99 | GUIContainer.prototype.addChild=function(object){ 100 | Phaser.Group.prototype.addChild.call(this,object); 101 | object.input.enabled=false; 102 | object.mask=this._childmask; 103 | } 104 | GUIContainer.prototype.removeChild=function(object){ 105 | if(object!=this._mask) 106 | Phaser.Group.prototype.removeChild.call(this,object); 107 | } 108 | GUIContainer.prototype.setAnchor=function(x,y){ 109 | for(var i=this.children.length-1;i>=0;i--){ 110 | child = this.children[i]; 111 | child.x+=this._originWidth*(this.anchor.x-x); 112 | child.y+=this._originHeight*(this.anchor.y-y); 113 | } 114 | this.anchor.x=x;this.anchor.y=y; 115 | } 116 | GUIContainer.prototype.removeAll=function(){ 117 | for(i=this.children.length-1;i>=0;i--){ 118 | child = this.children[i]; 119 | this.removeChild(child); 120 | } 121 | } 122 | GUIContainer.prototype.resize=function(width,height){ 123 | GUIObject.prototype.resize.call(this,width,height); 124 | this._childmask.clear(); 125 | this._childmask.drawRect(0,0,width,height); 126 | } 127 | -------------------------------------------------------------------------------- /GUIFactory.js: -------------------------------------------------------------------------------- 1 | GUIFactory = function(game){ 2 | this.game=game; 3 | this.theme=this.getDefaultTheme(); 4 | this._theme_ready=true; 5 | this.queue=[]; 6 | this.callbacks=[]; 7 | } 8 | 9 | GUIFactory.prototype.constructor = GUIFactory; 10 | GUIFactory.prototype = { 11 | window:function(x,y,width,height,title,container){ 12 | var object = new Window(this.game,x,y,width,height,title); 13 | this.addToGroup(container,object); 14 | this.setObjectTheme(object,'window'); 15 | return object; 16 | }, 17 | listview:function(x,y,width,height,container){ 18 | var object = new ListView(this.game,x,y,width,height); 19 | this.addToGroup(container,object); 20 | this.setObjectTheme(object,'listview'); 21 | return object; 22 | }, 23 | button:function(x,y,text,container){ 24 | var object = new Button(this.game,x,y,text); 25 | this.addToGroup(container,object); 26 | this.setObjectTheme(object,'button'); 27 | return object; 28 | }, 29 | roundbutton:function(x,y,text,container){ 30 | var object = new RoundButton(this.game,x,y,text); 31 | this.addToGroup(container,object); 32 | this.setObjectTheme(object,'button'); 33 | return object; 34 | }, 35 | checkbox:function(x,y,text,container){ 36 | var object = new CheckBox(this.game,x,y,text); 37 | this.addToGroup(container,object); 38 | this.setObjectTheme(object,'checkbox'); 39 | return object; 40 | }, 41 | label:function(x,y,text,container){ 42 | var object = new Label(this.game,x,y,text); 43 | this.addToGroup(container,object); 44 | this.setObjectTheme(object,'label'); 45 | return object; 46 | }, 47 | textinput:function(x,y,text,type,container){ 48 | var object = new TextInput(this.game,x,y,text,type); 49 | this.addToGroup(container,object); 50 | this.setObjectTheme(object,'textinput'); 51 | return object; 52 | }, 53 | rating:function(x,y,stars,container){ 54 | var object = new Rating(this.game,x,y,stars); 55 | this.addToGroup(container,object); 56 | this.setObjectTheme(object,'rating'); 57 | return object; 58 | }, 59 | scrollbar:function(x,y,width,height,type,container){ 60 | var object = new ScrollBar(this.game,x,y,width,height,type); 61 | this.addToGroup(container,object); 62 | this.setObjectTheme(object,'scrollbar'); 63 | return object; 64 | }, 65 | processbar:function(x,y,width,height,type,container){ 66 | var object = new ProcessBar(this.game,x,y,width,height,type); 67 | this.addToGroup(container,object); 68 | this.setObjectTheme(object,'processbar'); 69 | return object; 70 | }, 71 | dropdown:function(x,y,text,container){ 72 | var object = new DropDown(this.game,x,y,text); 73 | this.addToGroup(container,object); 74 | this.setObjectTheme(object,'dropdown'); 75 | return object; 76 | }, 77 | radiobox:function(x,y,text,container){ 78 | var object = new RadioBox(this.game,x,y,text); 79 | this.addToGroup(container,object); 80 | this.setObjectTheme(object,'radiobox'); 81 | return object; 82 | }, 83 | toggle:function(x,y,text,container){ 84 | var object = new ToggleButton(this.game,x,y); 85 | this.addToGroup(container,object); 86 | this.setObjectTheme(object,'toggle'); 87 | return object; 88 | }, 89 | tooltip:function(x,y,text,direct,container){ 90 | var object = new ToolTip(this.game,x,y,text,direct); 91 | this.addToGroup(container,object); 92 | this.setObjectTheme(object,'tooltip'); 93 | return object; 94 | }, 95 | addToGroup:function(container,object){ 96 | if(container==null) 97 | this.game.world.add(object); 98 | else 99 | container.addChild(object); 100 | }, 101 | setFont:function(font){ 102 | 103 | }, 104 | setTheme:function(theme){ 105 | var self=this; 106 | this.loadWebFont(theme.webfont,function(){ 107 | self.loadAsset(theme); 108 | }); 109 | }, 110 | waitTheme:function(){ 111 | this._theme_ready=false; 112 | }, 113 | themeReady:function(theme){ 114 | this._theme_ready=true; 115 | for( key in theme){ 116 | if(key=='webfont'||key=='path')continue; 117 | component=theme[key]; 118 | for(property in component){ 119 | this.theme[key][property]=component[property]; 120 | } 121 | } 122 | for(var i=0;i0){ 166 | loader.onLoadComplete.addOnce(this.themeReady,this,0,theme); 167 | loader.start(); 168 | }else{ 169 | this.themeReady(theme); 170 | } 171 | }, 172 | ready:function(callback){ 173 | if(!this._theme_ready){ 174 | this.callbacks.push(callback); 175 | }else{ 176 | callback(); 177 | } 178 | } 179 | } 180 | GUIFactory.prototype.getDefaultTheme=function(){ 181 | return { 182 | 'label':{ 183 | 'radius':10, 184 | 'bgcolor':'#ddd', 185 | 'headerheight':32, 186 | 'headercolor':'#333', 187 | 'border':'1px #fff', 188 | 'font':'Arial 16px #000' 189 | }, 190 | 'window':{ 191 | 'radius':10, 192 | 'bgcolor':'#ddd', 193 | 'headerheight':32, 194 | 'headercolor':'#333', 195 | 'border':'1px #fff', 196 | 'font':'Arial 16px #000' 197 | }, 198 | 'listview':{ 199 | 'radius':10, 200 | 'bgcolor':'#ccc', 201 | 'border':'0px #fff', 202 | 'font':'Arial 16px #000', 203 | 'item':{ 204 | 'radius':5, 205 | 'height':40, 206 | 'border':'2px #fff', 207 | 'font':'Arial 16px #000' 208 | }, 209 | }, 210 | 'button':{ 211 | 'radius':10, 212 | 'bgcolor':'#eee', 213 | 'border':'2px #fff', 214 | 'font':'Arial 16px #000' 215 | }, 216 | 'dropdown':{ 217 | 'radius':6, 218 | 'bgcolor':'#fff', 219 | 'select':'skyblue', 220 | 'border':'2px #000', 221 | 'font':'Arial 16px #000' 222 | }, 223 | 'checkbox':{ 224 | 'radius':3, 225 | 'bgcolor':'#000', 226 | 'check':'#fff', 227 | 'border':'1px #fff', 228 | 'font':'Arial 16px #000' 229 | }, 230 | 'radiobox':{ 231 | 'radius':3, 232 | 'bgcolor':'#000', 233 | 'check':'#fff', 234 | 'border':'1px #fff', 235 | 'font':'Arial 16px #000' 236 | }, 237 | 'scrollbar':{ 238 | 'radius':5, 239 | 'bgcolor':'#000', 240 | 'button':'#fff', 241 | 'border':'2px #fff', 242 | 'font':'Arial 16px #000' 243 | }, 244 | 'processbar':{ 245 | 'radius':5, 246 | 'bgcolor':'#000', 247 | 'button':'#fff', 248 | 'border':'2px #fff', 249 | 'font':'Arial 16px #000' 250 | }, 251 | 'textinput':{ 252 | 'radius':4, 253 | 'bgcolor':'#fff', 254 | 'border':'2px #000', 255 | 'font':'Arial 16px #000' 256 | }, 257 | 'toggle':{ 258 | 'radius':10, 259 | 'bgcolor':'#ccc', 260 | 'toggle':'#fff', 261 | 'button':'#999', 262 | 'border':'2px #fff', 263 | 'font':'Arial 16px #000' 264 | }, 265 | 'tooltip':{ 266 | 'radius':8, 267 | 'bgcolor':'#ccc', 268 | 'border':'2px #fff', 269 | 'font':'Arial 16px #000' 270 | }, 271 | 'rating':{ 272 | 'radius':16, 273 | 'bgcolor':'#ccc', 274 | 'border':'2px #fff', 275 | 'font':'Arial 16px #000' 276 | } 277 | } 278 | } 279 | -------------------------------------------------------------------------------- /GUIObject.js: -------------------------------------------------------------------------------- 1 | // base gui object 2 | GUIObject = function (game, x, y, width, height) { 3 | //width=256||width; 4 | //height=256||height; 5 | this._bmd=new Phaser.BitmapData(game, '', width, height); 6 | Phaser.Sprite.call(this, game, x ,y, this._bmd); 7 | this._hasTexture=false; 8 | this._texture={}; 9 | this._text=null; 10 | this._state='up'; 11 | this._border=0; 12 | this._radius=1; 13 | this._originWidth=width; 14 | this._originHeight=height; 15 | this._extendWidth=0; 16 | this._extendHeight=0; 17 | this._minWidth=null; 18 | this._minHeight=null; 19 | this._borderColor='#ccc'; 20 | this._focus=false; 21 | this._autofit=true; 22 | this._warp=false; 23 | this._font={'family':'Arial','size':16,'color':'#000'}; 24 | this._enabled=true; 25 | this.inputEnabled = true; 26 | this._redraw=true; 27 | //Redirect the input events to here so we can handle animation updates, etc 28 | //this.events.onInputOver.add(this.onInputOverHandler, this); 29 | //this.events.onInputOut.add(this.onInputOutHandler, this); 30 | this.events.onInputDown.add(this.onInputDownHandler, this); 31 | this.events.onInputUp.add(this.onInputUpHandler, this); 32 | 33 | this.onResize = new Phaser.Signal(); 34 | this.onFocus = new Phaser.Signal(); 35 | this.onBlur = new Phaser.Signal(); 36 | }; 37 | GUIObject.prototype = Object.create(Phaser.Sprite.prototype); 38 | GUIObject.prototype.constructor = GUIObject; 39 | GUIObject.prototype.update = function() { 40 | if(this._redraw){ 41 | this.draw(); 42 | this._redraw=false; 43 | } 44 | }; 45 | 46 | GUIObject.prototype.draw=function(){ } 47 | 48 | GUIObject.prototype.onInputOverHandler = function (sprite, pointer) { 49 | 50 | if (pointer.justReleased()) return; 51 | if (this.onOverMouseOnly && !pointer.isMouse) return; 52 | if (this.onInputOver)this.onInputOver.dispatch(this, pointer); 53 | this._state='over'; 54 | }; 55 | 56 | GUIObject.prototype.onInputOutHandler = function (sprite, pointer) { 57 | 58 | if (this.onInputOut)this.onInputOut.dispatch(this, pointer); 59 | this._state='up'; 60 | }; 61 | 62 | GUIObject.prototype.onInputDownHandler = function (sprite, pointer) { 63 | 64 | if (this.onInputDown) 65 | this.onInputDown.dispatch(this, pointer); 66 | this._state='down'; 67 | this.focus(); 68 | this._redraw=true; 69 | }; 70 | 71 | GUIObject.prototype.onInputUpHandler = function (sprite, pointer, isOver) { 72 | 73 | if (this.onInputUp) 74 | this.onInputUp.dispatch(this, pointer, isOver); 75 | if (this.freezeFrames) return; 76 | this._state='up'; 77 | this._redraw=true; 78 | }; 79 | GUIObject.prototype.focus=function(){ 80 | this._focus=true; 81 | if(this.parent!=null){ 82 | for(i=0;i How are you doing? 100 | property=property.replace(match[0], ''); 101 | property=property.replace(/['"]+/g, ''); 102 | } 103 | data = property.match(/\S+/g); 104 | if(data!=null){ 105 | for(i=0;i **Features** 4 | 5 | - Built-in GUI components 6 | - Theme support 7 | - Easy to use 8 | 9 | ------------------- 10 | > **Usage** 11 | 12 | var game = new Phaser.Game(480, 320, Phaser.CANVAS, 13 | '', {preload:preload,create:create}); 14 | game.gui = new RSCanvasGUI(game); 15 | function preload() { 16 | //load custom theme if required 17 | game.gui.loadTheme('theme.json'); 18 | } 19 | function create() { 20 | //add a gui component -- button 21 | button1 = game.gui.add.button(0,0,"button"); 22 | } 23 | 24 | > **For More Example visit [https://redsheep.github.io/RSGUI-Examples/](https://redsheep.github.io/RSGUI-Examples/)** 25 | -------------------------------------------------------------------------------- /components/button.js: -------------------------------------------------------------------------------- 1 | Button = function (game, x, y, text) { 2 | 3 | GUIObject.call(this, game, x, y); 4 | this._text=text; 5 | this._upFrame='rsgui-button-up'; 6 | this._downFrame='rsgui-button-down'; 7 | this._frame='up'; 8 | this._upColor='#ececec'; 9 | this._downColor='#d5d5d5'; 10 | this.onClick=new Phaser.Signal(); 11 | }; 12 | Button.prototype = Object.create(GUIObject.prototype); 13 | Button.prototype.constructor = Button; 14 | Button.prototype.draw=function(){ 15 | var b=this._border; 16 | var r=this._radius; 17 | var w=this._originWidth; 18 | var h=this._originHeight; 19 | var fontcolor=this._font.color; 20 | var font=this.getFont(); 21 | //var texture=this.game.cache.checkImageKey(this._frame); 22 | this._bmd.cls(); 23 | this._bmd.ctx.lineWidth=b; 24 | this._bmd.ctx.strokeStyle = this._borderColor; 25 | //draw button background 26 | if(!this._hasTexture){// && texture){ 27 | this._bmd.ctx.globalCompositeOperation = "multiply"; 28 | if(this._state=='down'||!this._enabled){ 29 | this._bmd.ctx.fillStyle = this._downColor; 30 | }else{ 31 | var my_gradient = this._bmd.ctx.createLinearGradient(0,0,0,50); 32 | my_gradient.addColorStop(0,this._upColor); 33 | my_gradient.addColorStop(1,this._downColor); 34 | this._bmd.ctx.fillStyle = my_gradient; 35 | } 36 | this._bmd.ctx.roundRect(b, b, w-2*b, h-2*b, r, true); 37 | this._bmd.ctx.fill(); 38 | this._bmd.ctx.fillStyle = this._color; 39 | this._bmd.ctx.roundRect(b, b, w-2*b, h-2*b, r, true); 40 | this._bmd.ctx.fill(); 41 | this._bmd.ctx.strokeBorder(b); 42 | }else{ 43 | var texture = this._texture[this._frame]; 44 | this._bmd.generateNinePatchTexture(texture.key,0,0,w,h,r,texture.width,texture.height); 45 | } 46 | //draw button text 47 | this._bmd.ctx.fillStyle=fontcolor; 48 | this._bmd.ctx.font=font; 49 | this._bmd.ctx.textBaseline='top'; 50 | this._bmd.ctx.fillText(this._text, b+r, b+r); 51 | if(!this._enabled){ 52 | this._bmd.ctx.globalCompositeOperation = "source-atop"; 53 | this._bmd.ctx.fillStyle='rgba(192,192,192,0.5)'; 54 | this._bmd.ctx.fillRect(0,0,w,h); 55 | } 56 | }; 57 | Button.prototype.getType=function(){ 58 | return 'button'; 59 | } 60 | Button.prototype.onInputDownHandler = function (sprite, pointer) { 61 | this._frame='down'; 62 | GUIObject.prototype.onInputDownHandler.call(this,sprite,pointer); 63 | }; 64 | Button.prototype.onInputUpHandler = function (sprite, pointer, isOver) { 65 | this._frame='up'; 66 | GUIObject.prototype.onInputUpHandler.call(this,sprite,pointer); 67 | if(isOver) this.onClick.dispatch(pointer,this); 68 | }; 69 | Button.prototype.setTheme=function(theme){ 70 | GUIObject.prototype.setTheme.call(this,theme); 71 | } 72 | Button.prototype.setText=function(text){ 73 | this._text=text; 74 | this.fit(); 75 | } 76 | -------------------------------------------------------------------------------- /components/checkbox.js: -------------------------------------------------------------------------------- 1 | 2 | CheckBox = function (game, x, y, text) { 3 | GUIObject.call(this, game, x, y); 4 | 5 | this._seprate=2; 6 | this._text=text; 7 | this._check=false; 8 | this._onFrame = "rsgui-radiobox-on"; 9 | this._offFrame = "rsgui-radiobox-off"; 10 | this._frame='on'; 11 | this.onChange=new Phaser.Signal(); 12 | }; 13 | CheckBox.prototype = Object.create(GUIObject.prototype); 14 | CheckBox.prototype.constructor = CheckBox; 15 | CheckBox.prototype.draw=function(){ 16 | var b=this._border; 17 | var r=this._radius; 18 | var w=this._originWidth; 19 | var h=this._originHeight; 20 | var c=h+this._seprate; 21 | var fontcolor=this._font.color; 22 | var font=this.getFont(); 23 | this._bmd.cls(); 24 | this._bmd.ctx.strokeStyle = this._borderColor; 25 | if(!this._hasTexture){ 26 | //draw checkbox background 27 | this._bmd.ctx.fillStyle= this._color; 28 | this._bmd.ctx.roundRect(b+r, b+r, h-2*r-2*b, h-2*r-2*b, r, true); 29 | this._bmd.ctx.fill(); 30 | //draw check on mark 31 | if(this._check){ 32 | this._bmd.ctx.fillStyle= this._checkColor; 33 | this._bmd.ctx.beginPath(); 34 | this._bmd.ctx.arc(h/2,h/2,h/4,0,2*Math.PI); 35 | this._bmd.ctx.closePath(); 36 | this._bmd.ctx.fill(); 37 | } 38 | }else{ 39 | var texture=this._texture[this._frame]; 40 | this._bmd.copy(texture.key,0,0,texture.width,texture.height,r,r,h-2*r,h-2*r); 41 | } 42 | //draw text 43 | this._bmd.ctx.font=font; 44 | this._bmd.ctx.fillStyle=fontcolor; 45 | this._bmd.ctx.textBaseline="middle" 46 | this._bmd.ctx.fillText(this._text, c, h/2); 47 | if(!this._enabled){ 48 | this._bmd.ctx.globalCompositeOperation = "source-atop"; 49 | this._bmd.ctx.fillStyle='rgba(192,192,192,0.5)'; 50 | this._bmd.ctx.fillRect(0,0,w,h); 51 | } 52 | } 53 | CheckBox.prototype.onInputDownHandler = function (sprite, pointer) { 54 | if(this._check) this.uncheck(); 55 | else this.check(); 56 | GUIObject.prototype.onInputDownHandler.call(this,sprite,pointer); 57 | }; 58 | CheckBox.prototype.getType=function(){ 59 | return 'checkbox'; 60 | } 61 | CheckBox.prototype.check=function(){ 62 | if(this._enabled && !this._check){ 63 | this._check=true; 64 | this._frame='on'; 65 | this._redraw=true; 66 | this.onChange.dispatch(true); 67 | } 68 | } 69 | CheckBox.prototype.uncheck=function(){ 70 | if(this._enabled && this._check){ 71 | this._check=false; 72 | this._frame='off'; 73 | this._redraw=true; 74 | this.onChange.dispatch(false); 75 | } 76 | } 77 | CheckBox.prototype.setTheme=function(theme){ 78 | this._checkColor=theme.check; 79 | this._extendWidth=this._font.size+this._seprate; 80 | GUIObject.prototype.setTheme.call(this,theme); 81 | } 82 | CheckBox.prototype.getValue=function(){ 83 | return this._check; 84 | } 85 | CheckBox.prototype.setText=function(text){ 86 | this._text=text; 87 | this.fit(); 88 | } 89 | -------------------------------------------------------------------------------- /components/dropdown.js: -------------------------------------------------------------------------------- 1 | DropDown = function (game, x, y, text) { 2 | 3 | GUIObject.call(this, game, x, y); 4 | this._extendWidth=48; 5 | this._text=text; 6 | this._dropdown=false; 7 | this._options=[text]; 8 | this._selected=this._options[0]; 9 | this._over=0; 10 | this._outbounds=true; 11 | this._bgFrame='rsgui-dropdown-bg'; 12 | this._arrow={width:16,height:8}; 13 | this.onSelect=new Phaser.Signal(); 14 | this.onChange=new Phaser.Signal(); 15 | this.onDataBound=new Phaser.Signal(); 16 | this.onShow=new Phaser.Signal(); 17 | this.onHide=new Phaser.Signal(); 18 | }; 19 | DropDown.prototype = Object.create(GUIObject.prototype); 20 | DropDown.prototype.constructor = DropDown; 21 | DropDown.prototype.update = function() { 22 | var textheight=this._font.size; 23 | var py=this.game.input.worldY-this.parent.y-this.y-2*this._radius-2*this._border-textheight; 24 | this._over=Math.floor(py/textheight); 25 | if(this._over<0 || this._over> this._options.length) 26 | this._outbounds=true; 27 | else this._outbounds=false; 28 | this._over=Math.min(Math.max(this._over,0), this._options.length-1); 29 | this._redraw=true; 30 | GUIObject.prototype.update.call(this); 31 | }; 32 | DropDown.prototype.draw=function(){ 33 | var b=this._border; 34 | var r=this._radius; 35 | var w=this._originWidth; 36 | var h=this._originHeight; 37 | var fontcolor=this._font.color; 38 | var font=this.getFont(); 39 | var textheight=this._font.size; 40 | this._bmd.cls(); 41 | this._bmd.ctx.lineWidth=b; 42 | this._bmd.ctx.strokeStyle = this._borderColor; 43 | //draw background 44 | if(!this._hasTexture){ 45 | this._bmd.ctx.fillStyle= this._color; 46 | this._bmd.ctx.roundRect(b, b, w-2*b, 2*r+textheight, r); 47 | this._bmd.ctx.fill(); 48 | this._bmd.ctx.strokeBorder(b); 49 | }else{ 50 | var texture=this._texture['bg']; 51 | this._bmd.generateNinePatchTexture(texture.key,0,0,w,h,r,texture.width,texture.height); 52 | } 53 | //draw drop down arrow 54 | this._bmd.ctx.beginPath(); 55 | this._bmd.ctx.moveTo(w-r-b-16,r+b+4); 56 | this._bmd.ctx.lineTo(w-r-b, r+b+4); 57 | this._bmd.ctx.lineTo(w-r-b-8, r+b+textheight-4); 58 | this._bmd.ctx.closePath(); 59 | this._bmd.ctx.fillStyle="#000"; 60 | this._bmd.ctx.fill(); 61 | //draw options background 62 | if(this._dropdown){ 63 | if(!this._hasTexture){ 64 | this._bmd.ctx.fillStyle=this._color; 65 | this._bmd.ctx.roundRect(b,2*r+2*b+textheight,w-2*b, textheight*this._options.length+ 2*r+2*b, r); 66 | this._bmd.ctx.fill(); 67 | this._bmd.ctx.strokeBorder(b); 68 | }else{ 69 | var texture=this._texture['bg']; 70 | this._bmd.generateNinePatchTexture(texture.key,0,2*r+textheight,w, 71 | textheight*this._options.length+2*r,r,texture.width,texture.height); 72 | } 73 | this._bmd.ctx.fillStyle=this._selectColor; 74 | this._bmd.ctx.fillRect(b+b/2,r+b+this._over*textheight+2*r+2*b+textheight,w-3*b,textheight); 75 | //draw options text 76 | this._bmd.ctx.save(); 77 | this._bmd.ctx.font=font; 78 | this._bmd.ctx.fillStyle=fontcolor; 79 | this._bmd.ctx.textBaseline="top"; 80 | this._bmd.ctx.beginPath(); 81 | this._bmd.ctx.rect(r+b,2*r+2*b+textheight,w-2*r-2*b, textheight*this._options.length+2*r+2*b); 82 | this._bmd.ctx.closePath(); 83 | this._bmd.ctx.clip(); 84 | for(i=0;i20){ 30 | for(var i=0;i0){ 55 | this._offset=this._items[0].position.y; 56 | if(this._offset>0){ 57 | for(var i=0;i0){ 36 | this._bmd.ctx.fillStyle = this._buttonColor; 37 | if(this._scrolltype=='vertical'){ 38 | this._bmd.ctx.roundRect(b+r/4, b+r/4, w-2*b-r/2, p+b+r/4, r/2, true); 39 | }else{ 40 | this._bmd.ctx.roundRect(b+r/4, b+r/4, p-b-r/4, h-2*b-r/2, r/2, true); 41 | } 42 | this._bmd.ctx.fill(); 43 | } 44 | }else{ 45 | //draw scroll bar and button with texture 46 | var bgtexture=this._texture['bg']; 47 | var btntexture=this._texture['btn']; 48 | if(this._scrolltype=='vertical'){ 49 | this._bmd.verticalThreePatchTexture(bgtexture.key,0,0,w,h,r,bgtexture.width,bgtexture.height); 50 | this._bmd.verticalThreePatchTexture(btntexture.key,0,0,w,p,r,btntexture.width,btntexture.height); 51 | }else{ 52 | this._bmd.horizontalThreePatchTexture(bgtexture.key,0,0,w,h,r,bgtexture.width,bgtexture.height); 53 | this._bmd.horizontalThreePatchTexture(btntexture.key,0,0,p,h,r,btntexture.width,btntexture.height); 54 | } 55 | } 56 | } 57 | ProcessBar.prototype.getType=function(){ 58 | return 'processbar'; 59 | } 60 | ProcessBar.prototype.setTheme=function(theme){ 61 | 62 | GUIObject.prototype.setTheme.call(this,theme); 63 | this._buttonColor=theme.button; 64 | } 65 | ProcessBar.prototype.getValue=function(){ 66 | if(this._scrolltype=='vertical') 67 | maxposition=this.height-this._radius/2-this._border; 68 | else 69 | maxposition=this.width-this._radius/2-this._border; 70 | return (this._position/maxposition)*(this._range.max-this._range.min)+this._range.min; 71 | } 72 | ProcessBar.prototype.setValue=function(value){ 73 | if(this._scrolltype=='vertical') 74 | maxposition=this.height-this._radius/2-this._border; 75 | else 76 | maxposition=this.width-this._radius/2-this._border; 77 | this._position=((value-this._range.min)/(this._range.max-this._range.min))*maxposition; 78 | this.onChange.dispatch(value); 79 | if(value==this._range.max) 80 | this.onComplete.dispatch(); 81 | } 82 | ProcessBar.prototype.setValueRange=function(minvalue,maxvalue){ 83 | currentvalue=this.getValue(); 84 | percent=currentvalue/(this._range.max-this._range.min); 85 | this._range={min:minvalue,max:maxvalue}; 86 | currentvalue=(this._range.max-this._range.min)*percent; 87 | this.setValue(currentvalue); 88 | } 89 | -------------------------------------------------------------------------------- /components/radiobox.js: -------------------------------------------------------------------------------- 1 | 2 | RadioBox = function (game, x, y, text) { 3 | GUIObject.call(this, game, x, y); 4 | 5 | this._seprate=2; 6 | this._text=text; 7 | this._check=false; 8 | this._onFrame = "rsgui-checkbox-on"; 9 | this._offFrame = "rsgui-checkbox-off"; 10 | this._frame='off'; 11 | this.onChange =new Phaser.Signal(); 12 | }; 13 | RadioBox.prototype = Object.create(GUIObject.prototype); 14 | RadioBox.prototype.constructor = RadioBox; 15 | RadioBox.prototype.draw=function(){ 16 | var b=this._border; 17 | var r=this._radius; 18 | var w=this._originWidth; 19 | var h=this._originHeight; 20 | var c=h+this._seprate; 21 | var fontcolor=this._font.color; 22 | var font=this.getFont(); 23 | 24 | this._bmd.cls(); 25 | this._bmd.ctx.strokeStyle = this._borderColor; 26 | if(!this._hasTexture){ 27 | this._bmd.ctx.fillStyle= this._color; 28 | this._bmd.ctx.arc(h/2,h/2,h/3,0,2*Math.PI); 29 | this._bmd.ctx.fill(); 30 | if(this._check){ 31 | this._bmd.ctx.fillStyle= this._checkColor; 32 | this._bmd.ctx.beginPath(); 33 | this._bmd.ctx.arc(h/2,h/2,h/5,0,2*Math.PI); 34 | this._bmd.ctx.closePath(); 35 | this._bmd.ctx.fill(); 36 | } 37 | }else{ 38 | var texture = this._texture[this._frame]; 39 | this._bmd.copy(texture.key,0,0,texture.width,texture.height,r,r,h-2*r,h-2*r); 40 | } 41 | this._bmd.ctx.font=font; 42 | this._bmd.ctx.fillStyle=fontcolor; 43 | this._bmd.ctx.textBaseline="middle" 44 | this._bmd.ctx.fillText(this._text, c, h/2); 45 | if(!this._enabled){ 46 | this._bmd.ctx.globalCompositeOperation = "source-atop"; 47 | this._bmd.ctx.fillStyle='rgba(192,192,192,0.5)'; 48 | this._bmd.ctx.fillRect(0,0,w,h); 49 | } 50 | } 51 | RadioBox.prototype.onInputDownHandler = function (sprite, pointer) { 52 | if(this._check) this.uncheck(); 53 | else this.check(); 54 | GUIObject.prototype.onInputDownHandler.call(this,sprite,pointer); 55 | }; 56 | RadioBox.prototype.getType=function(){ 57 | return 'radiobox'; 58 | } 59 | RadioBox.prototype.check=function(){ 60 | if(this._enabled && !this._check){ 61 | this._check=true; 62 | this._frame='on'; 63 | this._redraw=true; 64 | this.onChange.dispatch(true); 65 | if(this.parent!=null){ 66 | for(i=0;i