diff --git a/dist/phaser-ui-tools.js b/dist/phaser-ui-tools.js
index 90e8fce..e5e2dd9 100644
--- a/dist/phaser-ui-tools.js
+++ b/dist/phaser-ui-tools.js
@@ -1,4 +1,5 @@
-var uiWidgets = uiWidgets || {};
+var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 uiWidgets.utils = {};
 
@@ -18,14 +19,16 @@ uiWidgets.utils.operators = {
     "+": function (a, b) { return a + b; },
     "-": function (a, b) { return a - b; }
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Group with a dedicated background image.
  * Children added to the group will always be above the background image.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
  * @param {string} bg - The background image to use.
  */
 uiWidgets.Frame = function (game, x, y, bg) {
@@ -50,20 +53,32 @@ uiWidgets.Frame = function (game, x, y, bg) {
 uiWidgets.Frame.prototype = Object.create(Phaser.Group.prototype);
 uiWidgets.Frame.constructor = uiWidgets.Frame;
 
-/** Adds a new object to the Frame.
- * @param {Object} node - The sprite to add to the Frame.
+/** Adds a new object into the Column, then aligns it under the previous object.
+ * @param {Object} node - The sprite to add to the Column.
+ * @param {Number} alignment - The alignment relative to the previous child.
+ * @param {Number} padding_x - The amount of horizontal space between objects.
+ * @param {Number} padding_y - The amount of vertical space between objects.
  */
-uiWidgets.Frame.prototype.addNode = function (node) {
+uiWidgets.Frame.prototype.addNode = function (node, alignment, padding_x, padding_y) {
     "use strict";
+    alignment = alignment || this.alignment;
+    padding_x = padding_x || 0;
+    padding_y = padding_y || 0;
+
     this.add(node);
+    var previousNode = this.children[this.children.length - 2];
+
+    if (previousNode !== undefined) {
+        node.alignTo(previousNode, alignment, padding_x, padding_y);
+    }
 
     // Reset the positions for the bar's draggable area.
     if ("enableBarDrag" in node) {
         node.enableBarDrag();
     }
-
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 
 /** Base object for all Bars. */
@@ -175,7 +190,8 @@ uiWidgets.DraggableBar.prototype.enableBarDrag = function () {
         draggableArea.h)
     ;
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Bar that adjusts the size of a static sprite based on a value.
@@ -367,7 +383,8 @@ uiWidgets.QuantityBar.prototype.getBarSize = function () {
 
     return barSize;
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 
 /** Used by a QuantityBar to hold the bar's values.
@@ -501,7 +518,8 @@ uiWidgets.ViewportRange.prototype.getCurrentValue = function () {
 
     return currentValue;
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * A bar that moves along a track. The bar is resized relative to the size of the track and size of the content to be scrolled.
@@ -533,7 +551,7 @@ uiWidgets.Scrollbar = function (game, content, draggable, vertical, trackImage,
     // The smallest pixel size allowed for the bar.
     this.minBarSize = 44;
 
-    this.tweenParams = tweenParams || {'duration': 300, 'ease': Phaser.Easing.Quadratic.Out};
+    this.tweenParams = tweenParams || {"duration": 300, "ease": Phaser.Easing.Quadratic.Out};
 
     // Flag switched on when the track is clicked, switched off after the bar movement is finished.
     this.trackClicked = false;
@@ -880,7 +898,8 @@ uiWidgets.Scrollbar.prototype.moveContent = function () {
 
     this.onMovement.dispatch(this);
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Bar that adjusts a number.
@@ -1017,9 +1036,9 @@ uiWidgets.ValueBar.prototype.setInitialBarPosition = function () {
 
     // The bar should always be in centered on it's current position.
     if (this.vertical) {
-	       this.bar.y = gripPositionOnTrack + this.track.y - (this.bar.height / 2);
+            this.bar.y = gripPositionOnTrack + this.track.y - (this.bar.height / 2);
     } else {
-	       this.bar.x = gripPositionOnTrack + this.track.x - (this.bar.width / 2);
+            this.bar.x = gripPositionOnTrack + this.track.x - (this.bar.width / 2);
     }
 
 };
@@ -1100,7 +1119,8 @@ uiWidgets.ValueBar.prototype.getGripPositionRatio = function () {
 
     return newGripPositionRatio;
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 
 /**
@@ -1153,13 +1173,16 @@ uiWidgets.textButton = function (game, image, label, style, x, y, callback, call
 
 uiWidgets.textButton.prototype = Object.create(Phaser.Button.prototype);
 uiWidgets.textButton.constructor = uiWidgets.textButton;
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Frame that places new child nodes directly under the previous child.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
+ * @param {string} bg - The background image to use.
  */
 uiWidgets.Column = function (game, x, y, bg) {
     "use strict";
@@ -1169,35 +1192,17 @@ uiWidgets.Column = function (game, x, y, bg) {
 uiWidgets.Column.prototype = Object.create(uiWidgets.Frame.prototype);
 uiWidgets.Column.constructor = uiWidgets.Column;
 
-/** Adds a new object into the Column, then aligns it under the previous object.
- * @param {Object} node - The sprite to add to the Column.
- * @param {Number} alignment - The alignment relative to the previous child.
- * @param {Number} padding - The amount of space between objects.
- */
-uiWidgets.Column.prototype.addNode = function (node, alignment, padding) {
-    "use strict";
-    alignment = alignment || Phaser.BOTTOM_CENTER;
-    padding = padding || 0;
-
-    this.add(node);
-    var previousNode = this.children[this.children.length - 2];
-
-    if (previousNode !== undefined) {
-        node.alignTo(previousNode, alignment, 0, padding);
-    }
-
-    // Reset the positions for the bar's draggable area.
-    if ("enableBarDrag" in node) {
-        node.enableBarDrag();
-    }
-};
-;var uiWidgets = uiWidgets || {};
+uiWidgets.Column.prototype.alignment = Phaser.BOTTOM_CENTER;
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Frame that places new child nodes directly next to the previous child.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
+ * @param {string} bg - The background image to use.
  */
 uiWidgets.Row = function (game, x, y, bg) {
     "use strict";
@@ -1207,29 +1212,9 @@ uiWidgets.Row = function (game, x, y, bg) {
 uiWidgets.Row.prototype = Object.create(uiWidgets.Frame.prototype);
 uiWidgets.Row.constructor = uiWidgets.Row;
 
-/** Adds a new object into the Row, then aligns it next to the previous object.
- * @param {Object} node - The sprite to add to the row.
- * @param {Number} alignment - The alignment relative to the previous child.
- * @param {Number} padding - The amount of space between objects.
- */
-uiWidgets.Row.prototype.addNode = function (node, alignment, padding) {
-    "use strict";
-    alignment = alignment || Phaser.RIGHT_CENTER;
-    padding = padding || 0;
-
-    this.add(node);
-    var previousNode = this.children[this.children.length - 2];
-
-    if (previousNode !== undefined) {
-        node.alignTo(previousNode, alignment, padding);
-    }
-
-    // Reset the positions for the bar's draggable area.
-    if ("enableBarDrag" in node) {
-        node.enableBarDrag();
-    }
-};
-;var uiWidgets = uiWidgets || {};
+uiWidgets.Row.prototype.alignment = Phaser.RIGHT_CENTER;
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * A container with a limited viewable area. Uses a mask to hide children outside of the specified x/y/width/height area.
@@ -1310,7 +1295,8 @@ uiWidgets.Viewport.prototype.disableOutOfBounds = function (children, context, v
         }
     }
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /** Collection of sprites that can be selected with the keyboard.
   * When the select key is hit, the sprite that was selected is now connected to the keyboard.
@@ -1429,7 +1415,8 @@ uiWidgets.KeyboardGroup.prototype.useBar = function () {
         this.downKey.onDown.add(this.selected.downEvent, this.selected);
     }
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Represents a single point in a Wheel3D.
diff --git a/dist/phaser-ui-tools.min.js b/dist/phaser-ui-tools.min.js
index 3c79179..23207f1 100644
--- a/dist/phaser-ui-tools.min.js
+++ b/dist/phaser-ui-tools.min.js
@@ -1,3 +1,3 @@
-/*! phaser-ui-tools 2018-02-17 */
+/*! phaser-ui-tools 2018-03-23 */
 
-(uiWidgets=uiWidgets||{}).utils={},uiWidgets.utils.modulo=function(t,i){"use strict";return(t%i+i)%i},uiWidgets.utils.operators={"+":function(t,i){return t+i},"-":function(t,i){return t-i}},(uiWidgets=uiWidgets||{}).Frame=function(t,i,s,e){"use strict";if(Phaser.Group.call(this,t),t.add.existing(this),this.x=i||0,this.y=s||0,this.game=t,this.bg=e||null,null!==e){var a=t.add.sprite(0,0,e);a.sendToBack(),a.alignIn(this,Phaser.TOP_LEFT)}},uiWidgets.Frame.prototype=Object.create(Phaser.Group.prototype),uiWidgets.Frame.constructor=uiWidgets.Frame,uiWidgets.Frame.prototype.addNode=function(t){"use strict";this.add(t),"enableBarDrag"in t&&t.enableBarDrag()},(uiWidgets=uiWidgets||{}).Bar=function(){},uiWidgets.Bar.prototype=Object.create(Phaser.Group.prototype),uiWidgets.Bar.constructor=uiWidgets.Bar,uiWidgets.Bar.prototype.setTrackScrollAreaSize=function(){"use strict";this.vertical?this.trackScrollAreaSize=this.track.height-this.vslice:this.trackScrollAreaSize=this.track.width-this.hslice},uiWidgets.Bar.prototype.centerStaticAxis=function(){"use strict";this.vertical?this.bar.x=this.track.x+this.track.width/2-this.bar.width/2:this.bar.y=this.track.y+this.track.height/2-this.bar.height/2},uiWidgets.DraggableBar=function(){},uiWidgets.DraggableBar.prototype=Object.create(uiWidgets.Bar.prototype),uiWidgets.DraggableBar.constructor=uiWidgets.DraggableBar,uiWidgets.DraggableBar.prototype.verticalTrackClick=function(){"use strict";this.game.input.mousePointer.y>this.bar.y+this.bar.height+this.worldPosition.y?this.scrollDown():this.game.input.mousePointer.y<this.bar.y+this.worldPosition.y&&this.scrollUp()},uiWidgets.DraggableBar.prototype.horizontalTrackClick=function(){"use strict";this.game.input.mousePointer.x>this.bar.x+this.bar.width+this.worldPosition.x?this.scrollRight():this.game.input.mousePointer.x<this.bar.x+this.worldPosition.x&&this.scrollLeft()},uiWidgets.DraggableBar.prototype.enableTrackClick=function(){"use strict";var t;this.track.inputEnabled=!0,t=this.vertical?this.verticalTrackClick:this.horizontalTrackClick,this.track.events.onInputDown.add(t,this)},uiWidgets.DraggableBar.prototype.enableBarInput=function(){"use strict";this.trackClicked=!1,this.barMoving=!1,this.bar.inputEnabled=!0},uiWidgets.DraggableBar.prototype.enableBarDrag=function(){"use strict";this.setDraggableArea(),this.bar.inputEnabled=!0,this.bar.input.enableDrag(),this.snapping&&this.bar.events.onInputUp.add(this.snapToClosestPosition,this),this.bar.events.onInputDown.add(this.saveMousePosition,this),this.bar.events.onDragUpdate.add(this.moveContent,this);var t;this.vertical?(this.bar.input.allowHorizontalDrag=!1,t=this.verticalDraggableArea):(this.bar.input.allowVerticalDrag=!1,t=this.horizontalDraggableArea),this.bar.input.boundsRect=new Phaser.Rectangle(t.x,t.y,t.w,t.h)},(uiWidgets=uiWidgets||{}).QuantityBar=function(t,i,s,e,a,r,h,o){"use strict";Phaser.Group.call(this,t),t.add.existing(this),this.game=t,this.x=i.x,this.y=i.y,this.valueRange=new uiWidgets.QuantityRange(this,s.startValue,s.maxValue),this.vertical=e||!1,this.reverse=a||!1,this.trackImage=r,this.barImage=h,this.tweenParams=o||{duration:300,ease:Phaser.Easing.Quadratic.Out},this.track=this.game.add.sprite(0,0,this.trackImage),this.add(this.track),this.bar=this.game.add.button(0,0,this.barImage,this.moveContent,this,1,0),this.add(this.bar),this.create()},uiWidgets.QuantityBar.prototype=Object.create(uiWidgets.Bar.prototype),uiWidgets.QuantityBar.constructor=uiWidgets.QuantityBar,uiWidgets.QuantityBar.prototype.setMask=function(){"use strict";null!==this.bar.mask&&(this.bar.mask.destroy(),this.bar.mask=null);var t=this.game.add.graphics(this.maskX,this.maskY);t.beginFill(255),t.drawRect(0,0,this.maskW,this.maskH),this.bar.mask=t,this.add(t)},uiWidgets.QuantityBar.prototype.getBarPosition=function(){"use strict";var t=this.valueRange.getRatio()/this.windowScrollAreaSize;return this.trackScrollAreaSize*t},uiWidgets.QuantityBar.prototype.create=function(){"use strict";this.centerStaticAxis(),this.maskW=this.bar.width,this.maskH=this.bar.height,this.maskX=this.bar.x,this.maskY=this.bar.y,this.vertical?this.maskH=this.getBarSize():this.maskW=this.getBarSize(),this.reverse&&(this.vertical?this.maskY=this.getBarFraction():this.maskX=this.getBarFraction()),this.setMask(),this.windowScrollAreaSize=this.valueRange.maxValue,this.vslice=this.track.height*this.valueRange.getRatio(),this.hslice=this.track.width*this.valueRange.getRatio(),this.setTrackScrollAreaSize()},uiWidgets.QuantityBar.prototype.addScrollTweenMask=function(t){"use strict";this.game.add.tween(this.bar.mask).to(t,this.tweenParams.duration,this.tweenParams.ease,!0)},uiWidgets.QuantityBar.prototype.adjustBar=function(t){"use strict";this.valueRange.currentValue+=t;var i,s=this.getBarSize();i=this.reverse?this.vertical?{height:s,y:this.getBarFraction()}:{width:s,x:this.getBarFraction()}:this.vertical?{height:s}:{width:s},this.addScrollTweenMask(i)},uiWidgets.QuantityBar.prototype.getBarFraction=function(){"use strict";return this.vertical?this.track.height*this.valueRange.getRatio():this.track.width*this.valueRange.getRatio()},uiWidgets.QuantityBar.prototype.getBarSize=function(){"use strict";return this.reverse?this.vertical?this.track.height-this.valueRange.getRatio():this.track.width-this.valueRange.getRatio():this.getBarFraction()},(uiWidgets=uiWidgets||{}).QuantityRange=function(t,i,s){"use strict";this.bar=t,this.startValue=i,this.maxValue=s,this.currentValue=i},uiWidgets.QuantityRange.prototype.getRatio=function(){"use strict";return this.currentValue/this.maxValue},uiWidgets.QuantityRange.prototype.getCurrentValue=function(){"use strict";return this.currentValue},uiWidgets.ValueRange=function(t,i,s){"use strict";this.step=t,this.startValue=i,this.maxValue=s+t,this.ratio=t/s,this.ratio>1&&(this.ratio=1),this.currentValue=i,this.steps=[];for(var e=0;e<this.maxValue;e+=t)this.steps.push(e)},uiWidgets.ValueRange.prototype.adjustValue=function(t){"use strict";this.currentValue=t},uiWidgets.ValueRange.prototype.getCurrentValue=function(){"use strict";return this.currentValue},uiWidgets.ViewportRange=function(t,i){"use strict";this.viewport=t,this.vertical=i,i?(this.step=t.area.height,this.maxValue=t.height):(this.step=t.area.width,this.maxValue=t.width),this.ratio=this.step/this.maxValue,this.ratio>1&&(this.ratio=1)},uiWidgets.ViewportRange.prototype.adjustValue=function(t){"use strict";this.vertical?this.viewport.y=t+this.viewport.area.y:this.viewport.x=t+this.viewport.area.x,this.viewport.disableOutOfBounds(this.viewport.children,this,this.vertical)},uiWidgets.ViewportRange.prototype.getCurrentValue=function(){"use strict";return this.vertical?this.viewport.y-this.viewport.area.y:this.viewport.x-this.viewport.area.x},(uiWidgets=uiWidgets||{}).Scrollbar=function(t,i,s,e,a,r,h){"use strict";Phaser.Group.call(this,t),t.add.existing(this),this.game=t,this.content=i,this.valueRange=new uiWidgets.ViewportRange(i,e),this.vertical=e||!1,this.draggable=s||!1,this.trackImage=a,this.barImage=r,this.minBarSize=44,this.tweenParams=h||{duration:300,ease:Phaser.Easing.Quadratic.Out},this.trackClicked=!1,this.barMoving=!1,this.mousePointer=null,this.track=this.game.add.sprite(0,0,this.trackImage),this.add(this.track),this.draggable&&this.enableTrackClick(),this.bar=this.game.add.button(this.x,this.y,this.barImage,this.moveContent,this,1,0),this.add(this.bar),this.resizeBar(),this.minY=this.track.y,this.maxY=this.track.y+this.track.height-this.bar.height,this.minX=this.track.x,this.maxX=this.track.x+this.track.width-this.bar.width,this.create(),this.onMovement=new Phaser.Signal},uiWidgets.Scrollbar.prototype=Object.create(uiWidgets.DraggableBar.prototype),uiWidgets.Scrollbar.constructor=uiWidgets.Scrollbar,uiWidgets.Scrollbar.prototype.setDraggableArea=function(){"use strict";this.verticalDraggableArea={x:this.track.x-(this.bar.width-this.track.width)/2,y:this.track.y,w:this.bar.width,h:this.track.height},this.horizontalDraggableArea={x:this.track.x,y:this.track.y-(this.bar.height-this.track.height)/2,w:this.track.width,h:this.bar.height}},uiWidgets.Scrollbar.prototype.resizeBar=function(){"use strict";var t;(t=this.vertical?this.track.height*this.valueRange.ratio:this.track.width*this.valueRange.ratio)<this.minBarSize&&(t=this.minBarSize),this.vertical?this.bar.height=t:this.bar.width=t},uiWidgets.Scrollbar.prototype.create=function(){"use strict";this.centerStaticAxis(),this.draggable&&this.enableBarDrag(),this.windowScrollAreaSize=this.valueRange.maxValue-this.valueRange.step,this.vslice=this.track.height*this.valueRange.ratio,this.hslice=this.track.width*this.valueRange.ratio,this.setTrackScrollAreaSize(),this.mousePointer={x:this.bar.x,y:this.bar.y},this.setInitialBarPosition()},uiWidgets.Scrollbar.prototype.setInitialBarPosition=function(){"use strict";var t=this.getBarPosition();this.vertical?this.bar.y=t+this.track.y:this.bar.x=t+this.track.x},uiWidgets.Scrollbar.prototype.addScrollTween=function(t){"use strict";this.mousePointer={x:this.bar.x,y:this.bar.y},this.trackClicked=!0;var i;i=this.game.add.tween(this.bar).to(t,this.tweenParams.duration,this.tweenParams.ease,!0),this.addScrollTweenEvents(i)},uiWidgets.Scrollbar.prototype.addScrollTweenEvents=function(t){"use strict";t.onUpdateCallback(this.moveContent,this),t.onComplete.add(this.enableBarInput,this)},uiWidgets.Scrollbar.prototype.scrollUp=function(){"use strict";if(this.bar.y!==this.track.y&&!this.barMoving){var t=this.bar.y-this.vslice,i=null;this.barMoving=!0,i=t<=this.track.y?this.minY:this.bar.y-this.vslice,this.addScrollTween({y:i})}},uiWidgets.Scrollbar.prototype.scrollDown=function(){"use strict";if(this.bar.y+this.bar.height!==this.track.y+this.track.height&&!this.barMoving){var t=this.bar.y+2*this.vslice,i=null;this.barMoving=!0,this.bar.inputEnabled=!1,i=t>=this.track.y+this.track.height?this.maxY:this.bar.y+this.vslice,this.addScrollTween({y:i})}},uiWidgets.Scrollbar.prototype.scrollLeft=function(){"use strict";if(this.bar.x!==this.track.x&&!this.barMoving){var t=this.bar.x-this.hslice,i=null;this.barMoving=!0,this.bar.inputEnabled=!1,i=t<=this.track.x?this.minX:this.bar.x-this.hslice,this.addScrollTween({x:i})}},uiWidgets.Scrollbar.prototype.scrollRight=function(){"use strict";if(this.bar.x+this.bar.width!==this.track.x+this.track.width&&!this.barMoving){var t=this.bar.x+2*this.hslice,i=null;this.barMoving=!0,this.bar.inputEnabled=!1,i=t>=this.track.x+this.track.width?this.maxX:this.bar.x+this.hslice,this.addScrollTween({x:i})}},uiWidgets.Scrollbar.prototype.saveMousePosition=function(t,i){"use strict";this.mousePointer={x:i.x,y:i.y}},uiWidgets.Scrollbar.prototype.getBarPosition=function(){"use strict";var t=this.valueRange.getCurrentValue()/this.windowScrollAreaSize;return this.trackScrollAreaSize*t},uiWidgets.Scrollbar.prototype.getMouseDelta=function(){"use strict";var t,i,s,e;return t=this.vertical?this.mousePointer.y:this.mousePointer.x,s=this.trackClicked?{x:this.bar.x,y:this.bar.y}:{x:this.game.input.mousePointer.x,y:this.game.input.mousePointer.y},i=this.vertical?s.y:s.x,this.mousePointer=s,e=this.vertical?this.track.height+this.worldPosition.y:this.track.width+this.worldPosition.x,i<e?t-i:0},uiWidgets.Scrollbar.prototype.getGripPositionRatio=function(){"use strict";var t=this.getBarPosition()+this.getMouseDelta();t>0?t=0:t<=-this.trackScrollAreaSize&&(t=-this.trackScrollAreaSize),this.vertical?this.bar.y<=this.track.y?t=0:this.bar.y+this.bar.height>=this.track.y+this.track.height&&(t=-this.trackScrollAreaSize):this.bar.x<=this.track.x?t=0:this.bar.x+this.bar.width>=this.track.x+this.track.width&&(t=-this.trackScrollAreaSize);var i=t/this.trackScrollAreaSize;return isNaN(i)&&(i=0),i},uiWidgets.Scrollbar.prototype.moveContent=function(){"use strict";var t=this.getGripPositionRatio()*this.windowScrollAreaSize;this.valueRange.adjustValue(t),this.onMovement.dispatch(this)},(uiWidgets=uiWidgets||{}).ValueBar=function(t,i,s,e,a,r,h,o){"use strict";Phaser.Group.call(this,t),t.add.existing(this),this.game=t,this.x=i.x,this.y=i.y,this.valueRange=new uiWidgets.ValueRange(s.step,s.startValue,s.maxValue),this.vertical=a||!1,this.draggable=e||!1,this.trackImage=r,this.barImage=h,this.tweenParams=o||{duration:300,ease:Phaser.Easing.Quadratic.Out},this.trackClicked=!1,this.barMoving=!1,this.mousePointer=null,this.track=this.game.add.sprite(0,0,this.trackImage),this.add(this.track),this.draggable&&this.enableTrackClick(),this.bar=this.game.add.button(this.x,this.y,this.barImage,this.moveContent,this,1,0),this.bg=this.game.add.graphics(0,0),this.add(this.bg),this.sendToBack(this.bg),this.bg.beginFill(16711680,0),this.vertical?this.bg.drawRect(0,0-this.bar.height/2,1,this.track.height+this.bar.height):this.bg.drawRect(0-this.bar.width/2,0,this.track.width+this.bar.width,1),this.bg.endFill(),this.snapping=!0,this.add(this.bar),this.minY=this.track.y-this.bar.height/2,this.maxY=this.track.y+this.track.height-this.bar.height/2,this.minX=this.track.x-this.bar.width/2,this.maxX=this.track.x+this.track.width-this.bar.width/2,this.create(),this.vertical?(this.upEvent=this.scrollUp,this.downEvent=this.scrollDown):(this.upEvent=this.scrollLeft,this.downEvent=this.scrollRight),this.onMovement=new Phaser.Signal},uiWidgets.ValueBar.prototype=Object.create(uiWidgets.Scrollbar.prototype),uiWidgets.ValueBar.constructor=uiWidgets.ValueBar,uiWidgets.ValueBar.prototype.setDraggableArea=function(){"use strict";this.verticalDraggableArea={x:this.track.x-(this.bar.width-this.track.width)/2,y:this.track.y-this.bar.height/2,w:this.bar.width,h:this.track.height+this.bar.height},this.horizontalDraggableArea={x:this.track.x-this.bar.width/2,y:this.track.y-(this.bar.height-this.track.height)/2,w:this.track.width+this.bar.width,h:this.bar.height}},uiWidgets.ValueBar.prototype.setTrackScrollAreaSize=function(){"use strict";this.vertical?this.trackScrollAreaSize=this.track.height:this.trackScrollAreaSize=this.track.width},uiWidgets.ValueBar.prototype.setInitialBarPosition=function(){"use strict";var t=this.getBarPosition();this.vertical?this.bar.y=t+this.track.y-this.bar.height/2:this.bar.x=t+this.track.x-this.bar.width/2},uiWidgets.ValueBar.prototype.getClosestPosition=function(){"use strict";for(var t=this.valueRange.getCurrentValue(),i=Math.abs(t-this.valueRange.steps[0]),s=this.valueRange.steps[0],e=0;e<this.valueRange.steps.length;e++){var a=Math.abs(t-this.valueRange.steps[e]);a<i&&(i=a,s=this.valueRange.steps[e])}return s},uiWidgets.ValueBar.prototype.snapToClosestPosition=function(){"use strict";var t=this.getClosestPosition();this.valueRange.adjustValue(t),this.moveContent(),this.setInitialBarPosition()},uiWidgets.ValueBar.prototype.addScrollTweenEvents=function(t){"use strict";t.onComplete.add(this.moveContent,this),t.onComplete.add(this.enableBarInput,this)},uiWidgets.ValueBar.prototype.getGripPositionRatio=function(){"use strict";var t=this.getBarPosition()-this.getMouseDelta();t<0?t=0:t>=this.trackScrollAreaSize&&(t=this.trackScrollAreaSize),this.vertical?this.bar.y<=this.track.y?t=0:this.bar.y+this.bar.height>=this.track.y+this.track.height&&(t=this.trackScrollAreaSize):this.bar.x<=this.track.x?t=0:this.bar.x+this.bar.width>=this.track.x+this.track.width&&(t=this.trackScrollAreaSize);var i=t/this.trackScrollAreaSize;return isNaN(i)&&(i=0),i},(uiWidgets=uiWidgets||{}).textSprite=function(t,i,s,e,a,r){"use strict";Phaser.Sprite.call(this,t,a,r,i),t.add.existing(this),this.text=this.game.add.text(0,0,s,e),this.text.anchor.set(.5,.5),this.addChild(this.text)},uiWidgets.textSprite.prototype=Object.create(Phaser.Sprite.prototype),uiWidgets.textSprite.constructor=uiWidgets.textSprite,uiWidgets.textButton=function(t,i,s,e,a,r,h,o){"use strict";Phaser.Button.call(this,t,a,r,i,h,o),t.add.existing(this),this.text=this.game.add.text(0,0,s,e),this.text.anchor.set(.5,.5),this.addChild(this.text)},uiWidgets.textButton.prototype=Object.create(Phaser.Button.prototype),uiWidgets.textButton.constructor=uiWidgets.textButton,(uiWidgets=uiWidgets||{}).Column=function(t,i,s,e){"use strict";uiWidgets.Frame.apply(this,arguments)},uiWidgets.Column.prototype=Object.create(uiWidgets.Frame.prototype),uiWidgets.Column.constructor=uiWidgets.Column,uiWidgets.Column.prototype.addNode=function(t,i,s){"use strict";i=i||Phaser.BOTTOM_CENTER,s=s||0,this.add(t);var e=this.children[this.children.length-2];void 0!==e&&t.alignTo(e,i,0,s),"enableBarDrag"in t&&t.enableBarDrag()},(uiWidgets=uiWidgets||{}).Row=function(t,i,s,e){"use strict";uiWidgets.Frame.apply(this,arguments)},uiWidgets.Row.prototype=Object.create(uiWidgets.Frame.prototype),uiWidgets.Row.constructor=uiWidgets.Row,uiWidgets.Row.prototype.addNode=function(t,i,s){"use strict";i=i||Phaser.RIGHT_CENTER,s=s||0,this.add(t);var e=this.children[this.children.length-2];void 0!==e&&t.alignTo(e,i,s),"enableBarDrag"in t&&t.enableBarDrag()},(uiWidgets=uiWidgets||{}).Viewport=function(t,i,s,e,a){"use strict";Phaser.Group.call(this,t),t.add.existing(this),this.x=i,this.y=s,this.area={x:i,y:s,width:e,height:a},this.mask=this.game.add.graphics(this.area.x,this.area.y),this.mask.beginFill(255),this.mask.drawRect(0,0,e,a),this.mask.endFill()},uiWidgets.Viewport.prototype=Object.create(Phaser.Group.prototype),uiWidgets.Viewport.constructor=uiWidgets.Viewport,uiWidgets.Viewport.prototype.addNode=function(t){"use strict";this.add(t)},uiWidgets.Viewport.prototype.disableOutOfBounds=function(t,i,s){"use strict";var e,a,r,h;if(void 0!==t)for(var o=0;o<t.length;o++)(e=t[o]).inputEnabled=!0,h=e.world||e,s?(a=h.y,r=i.viewport.area.y):(a=h.x,r=i.viewport.area.x),a<r&&(e.inputEnabled=!1),this.disableOutOfBounds(e.children,i,s)},(uiWidgets=uiWidgets||{}).KeyboardGroup=function(t,i,s){"use strict";this.game=t,this.vertical=i||!1,this.callbackContext=s,this.children=[],this.selected=null,this.idx=0,this.upKey=this.game.input.keyboard.addKey(Phaser.Keyboard.UP),this.downKey=this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN),this.leftKey=this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT),this.rightKey=this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT),this.upEvent=this.prevItem,this.downEvent=this.nextItem,this.onPrevious=new Phaser.Signal,this.onNext=new Phaser.Signal,this.activateGroup()},uiWidgets.KeyboardGroup.constructor=uiWidgets.KeyboardGroup,uiWidgets.KeyboardGroup.prototype.addNode=function(t){"use strict";this.children.push(t),this.selected=this.children[0],this.useBar()},uiWidgets.KeyboardGroup.prototype.prevItem=function(){"use strict";this.idx=this.idx-1,this.idx<0&&(this.idx=this.children.length-1),this.selected=this.children[this.idx],this.useBar(),this.onPrevious.dispatch(this,this.callbackContext)},uiWidgets.KeyboardGroup.prototype.nextItem=function(){"use strict";this.idx=(this.idx+1)%this.children.length,this.selected=this.children[this.idx],this.useBar(),this.onNext.dispatch(this,this.callbackContext)},uiWidgets.KeyboardGroup.prototype.activateGroup=function(){"use strict";this.vertical?(this.upKey.onDown.add(this.upEvent,this),this.downKey.onDown.add(this.downEvent,this)):(this.leftKey.onDown.add(this.upEvent,this),this.rightKey.onDown.add(this.downEvent,this))},uiWidgets.KeyboardGroup.prototype.useBar=function(){"use strict";this.vertical?(this.leftKey.onDown.removeAll(),this.rightKey.onDown.removeAll(),this.leftKey.onDown.add(this.selected.upEvent,this.selected),this.rightKey.onDown.add(this.selected.downEvent,this.selected)):(this.upKey.onDown.removeAll(),this.downKey.onDown.removeAll(),this.upKey.onDown.add(this.selected.upEvent,this.selected),this.downKey.onDown.add(this.selected.downEvent,this.selected))};var uiWidgets=uiWidgets||{},VectorPoint=function(t,i,s,e,a){"use strict";this.x=t||0,this.y=i||0,this.z=s||0,this.sprite=e||null,this.position=a||0};VectorPoint.prototype={getSinCosOfAngle:function(t){"use strict";var i=t*Math.PI/180;return{cosine:Math.cos(i),sine:Math.sin(i)}},rotateY:function(t){"use strict";var i=this.getSinCosOfAngle(t),s=this.z*i.cosine-this.x*i.sine,e=this.z*i.sine+this.x*i.cosine;return new VectorPoint(e,this.y,s)},rotateX:function(t){"use strict";var i=this.getSinCosOfAngle(t),s=this.y*i.cosine-this.z*i.sine,e=this.y*i.sine+this.z*i.cosine;return new VectorPoint(this.x,s,e)},rotateZ:function(t){"use strict";var i=this.getSinCosOfAngle(t),s=this.x*i.cosine-this.y*i.sine,e=this.x*i.sine+this.y*i.cosine;return new VectorPoint(s,e,this.z)},rotate:function(t,i){"use strict";return"x"===t?this.rotateX(i):"y"===t?this.rotateY(i):"z"===t?this.rotateZ(i):void 0},project:function(t,i,s){"use strict";var e=this.x*s+t,a=-this.y*s+i;return new VectorPoint(e,a,this.z)}},uiWidgets.Wheel3D=function(t,i,s,e,a,r,h,o,n){"use strict";this.game=t,this.xy=i,this.sprites=s,this.firstPlace=e,this.zoom=a,this.axis=r,this.rotationAxis=h,this.visibleRange=o||null,this.tweenParams=n||{duration:300,ease:Phaser.Easing.Quadratic.Out},this.onStart=new Phaser.Signal,this.onComplete=new Phaser.Signal,this.onBackComplete=new Phaser.Signal,this.onForwardComplete=new Phaser.Signal,this.group=this.game.add.group()},uiWidgets.Wheel3D.prototype={activate:function(){"use strict";var t,i,s,e,a,r,h,o;if(this.pointsAmount=this.sprites.length,this.totalPositions=this.pointsAmount-1,this.rotationAmount=360/this.pointsAmount,null!==this.visibleRange){var n=[];for(o=0;o<=this.totalPositions;o++)n.push(o);var c=n.slice(0,this.visibleRange.max),u=n.slice(this.visibleRange.min);this.visiblePositions=c.concat(u)}for(this.moving=!1,this.direction=null,this.wheelItems=[],1,t=2*Math.PI/this.pointsAmount,o=0;o<this.pointsAmount;o++)this.sprites[o].wheelPosition=o,this.group.add(this.sprites[o]),i=t*o,s=1*Math.cos(i),e=1*Math.sin(i),"x"===this.axis?(a=-1,r=s,h=e):"y"===this.axis?(a=s,r=-1,h=e):"z"===this.axis&&(a=s,r=e,h=-1),this.wheelItems.push(new VectorPoint(a,r,h,this.sprites[o],o));this.active=this.wheelItems[this.firstPlace].sprite,this.project()},moveBack:function(){"use strict";!1===this.moving&&(this.moving=!0,this.direction=0,"x"===this.axis||"z"===this.axis?this.rotationAxis[this.axis]+=this.rotationAmount:this.rotationAxis[this.axis]-=this.rotationAmount,this.updatePosition("+"),this.project(),this.resetAngle())},moveForward:function(){"use strict";!1===this.moving&&(this.moving=!0,this.direction=1,"x"===this.axis||"z"===this.axis?this.rotationAxis[this.axis]-=this.rotationAmount:this.rotationAxis[this.axis]+=this.rotationAmount,this.updatePosition("-"),this.project(),this.resetAngle())},project:function(){"use strict";var t,i,s=["x","y","z"],e=s.indexOf(this.axis);s.splice(e,1);for(var a=0;a<this.wheelItems.length;a++){var r=this.wheelItems[a].rotate(this.axis,this.rotationAxis[this.axis]).rotate(s[0],this.rotationAxis[s[0]]).rotate(s[1],this.rotationAxis[s[1]]).project(this.xy.x,this.xy.y,this.zoom);if(t=this.wheelItems[a].sprite,t.lz=r.z,this.wheelItems[a].position===this.firstPlace)t.alpha=1,this.active=this.wheelItems[a].sprite;else if(null!==this.visibleRange){var h=_.includes(this.visiblePositions,this.wheelItems[a].position);t.alpha=h?1:0}(i=this.game.add.tween(t).to({x:r.x,y:r.y},this.tweenParams.duration,this.tweenParams.ease,!0)).onComplete.add(this.enableMoving,this)}this.group.sort("lz",Phaser.Group.SORT_ASCENDING),i.onStart.add(this.dispatchOnStart,this),i.onComplete.add(this.dispatchOnComplete,this)},dispatchOnStart:function(){"use strict";this.onStart.dispatch(this)},dispatchOnComplete:function(){"use strict";0===this.direction?this.onBackComplete.dispatch(this):1===this.direction&&this.onForwardComplete.dispatch(this),this.onComplete.dispatch(this)},enableMoving:function(){"use strict";this.moving=!1},updatePosition:function(t){"use strict";for(var i,s=0;s<this.wheelItems.length;s++){var e=this.wheelItems[s].position;this.wheelItems[s].position=uiWidgets.utils.operators[t](e,1),i=uiWidgets.utils.modulo(this.wheelItems[s].position,this.pointsAmount),this.wheelItems[s].position=i,this.wheelItems[s].sprite.wheelPosition=i}},resetAngle:function(){"use strict";var t=this.rotationAxis[this.axis];360!==t&&-360!==t||(this.rotationAxis[this.axis]=0)}};
\ No newline at end of file
+var uiWidgets;(uiWidgets=uiWidgets||{}).utils={},uiWidgets.utils.modulo=function(t,i){"use strict";return(t%i+i)%i},uiWidgets.utils.operators={"+":function(t,i){return t+i},"-":function(t,i){return t-i}};var uiWidgets;(uiWidgets=uiWidgets||{}).Frame=function(t,i,s,e){"use strict";if(Phaser.Group.call(this,t),t.add.existing(this),this.x=i||0,this.y=s||0,this.game=t,this.bg=e||null,null!==e){var a=t.add.sprite(0,0,e);a.sendToBack(),a.alignIn(this,Phaser.TOP_LEFT)}},uiWidgets.Frame.prototype=Object.create(Phaser.Group.prototype),uiWidgets.Frame.constructor=uiWidgets.Frame,uiWidgets.Frame.prototype.addNode=function(t,i,s,e){"use strict";i=i||this.alignment,s=s||0,e=e||0,this.add(t);var a=this.children[this.children.length-2];void 0!==a&&t.alignTo(a,i,s,e),"enableBarDrag"in t&&t.enableBarDrag()};var uiWidgets;(uiWidgets=uiWidgets||{}).Bar=function(){},uiWidgets.Bar.prototype=Object.create(Phaser.Group.prototype),uiWidgets.Bar.constructor=uiWidgets.Bar,uiWidgets.Bar.prototype.setTrackScrollAreaSize=function(){"use strict";this.vertical?this.trackScrollAreaSize=this.track.height-this.vslice:this.trackScrollAreaSize=this.track.width-this.hslice},uiWidgets.Bar.prototype.centerStaticAxis=function(){"use strict";this.vertical?this.bar.x=this.track.x+this.track.width/2-this.bar.width/2:this.bar.y=this.track.y+this.track.height/2-this.bar.height/2},uiWidgets.DraggableBar=function(){},uiWidgets.DraggableBar.prototype=Object.create(uiWidgets.Bar.prototype),uiWidgets.DraggableBar.constructor=uiWidgets.DraggableBar,uiWidgets.DraggableBar.prototype.verticalTrackClick=function(){"use strict";this.game.input.mousePointer.y>this.bar.y+this.bar.height+this.worldPosition.y?this.scrollDown():this.game.input.mousePointer.y<this.bar.y+this.worldPosition.y&&this.scrollUp()},uiWidgets.DraggableBar.prototype.horizontalTrackClick=function(){"use strict";this.game.input.mousePointer.x>this.bar.x+this.bar.width+this.worldPosition.x?this.scrollRight():this.game.input.mousePointer.x<this.bar.x+this.worldPosition.x&&this.scrollLeft()},uiWidgets.DraggableBar.prototype.enableTrackClick=function(){"use strict";var t;this.track.inputEnabled=!0,t=this.vertical?this.verticalTrackClick:this.horizontalTrackClick,this.track.events.onInputDown.add(t,this)},uiWidgets.DraggableBar.prototype.enableBarInput=function(){"use strict";this.trackClicked=!1,this.barMoving=!1,this.bar.inputEnabled=!0},uiWidgets.DraggableBar.prototype.enableBarDrag=function(){"use strict";this.setDraggableArea(),this.bar.inputEnabled=!0,this.bar.input.enableDrag(),this.snapping&&this.bar.events.onInputUp.add(this.snapToClosestPosition,this),this.bar.events.onInputDown.add(this.saveMousePosition,this),this.bar.events.onDragUpdate.add(this.moveContent,this);var t;this.vertical?(this.bar.input.allowHorizontalDrag=!1,t=this.verticalDraggableArea):(this.bar.input.allowVerticalDrag=!1,t=this.horizontalDraggableArea),this.bar.input.boundsRect=new Phaser.Rectangle(t.x,t.y,t.w,t.h)};var uiWidgets;(uiWidgets=uiWidgets||{}).QuantityBar=function(t,i,s,e,a,r,h,o){"use strict";Phaser.Group.call(this,t),t.add.existing(this),this.game=t,this.x=i.x,this.y=i.y,this.valueRange=new uiWidgets.QuantityRange(this,s.startValue,s.maxValue),this.vertical=e||!1,this.reverse=a||!1,this.trackImage=r,this.barImage=h,this.tweenParams=o||{duration:300,ease:Phaser.Easing.Quadratic.Out},this.track=this.game.add.sprite(0,0,this.trackImage),this.add(this.track),this.bar=this.game.add.button(0,0,this.barImage,this.moveContent,this,1,0),this.add(this.bar),this.create()},uiWidgets.QuantityBar.prototype=Object.create(uiWidgets.Bar.prototype),uiWidgets.QuantityBar.constructor=uiWidgets.QuantityBar,uiWidgets.QuantityBar.prototype.setMask=function(){"use strict";null!==this.bar.mask&&(this.bar.mask.destroy(),this.bar.mask=null);var t=this.game.add.graphics(this.maskX,this.maskY);t.beginFill(255),t.drawRect(0,0,this.maskW,this.maskH),this.bar.mask=t,this.add(t)},uiWidgets.QuantityBar.prototype.getBarPosition=function(){"use strict";var t=this.valueRange.getRatio()/this.windowScrollAreaSize;return this.trackScrollAreaSize*t},uiWidgets.QuantityBar.prototype.create=function(){"use strict";this.centerStaticAxis(),this.maskW=this.bar.width,this.maskH=this.bar.height,this.maskX=this.bar.x,this.maskY=this.bar.y,this.vertical?this.maskH=this.getBarSize():this.maskW=this.getBarSize(),this.reverse&&(this.vertical?this.maskY=this.getBarFraction():this.maskX=this.getBarFraction()),this.setMask(),this.windowScrollAreaSize=this.valueRange.maxValue,this.vslice=this.track.height*this.valueRange.getRatio(),this.hslice=this.track.width*this.valueRange.getRatio(),this.setTrackScrollAreaSize()},uiWidgets.QuantityBar.prototype.addScrollTweenMask=function(t){"use strict";this.game.add.tween(this.bar.mask).to(t,this.tweenParams.duration,this.tweenParams.ease,!0)},uiWidgets.QuantityBar.prototype.adjustBar=function(t){"use strict";this.valueRange.currentValue+=t;var i,s=this.getBarSize();i=this.reverse?this.vertical?{height:s,y:this.getBarFraction()}:{width:s,x:this.getBarFraction()}:this.vertical?{height:s}:{width:s},this.addScrollTweenMask(i)},uiWidgets.QuantityBar.prototype.getBarFraction=function(){"use strict";return this.vertical?this.track.height*this.valueRange.getRatio():this.track.width*this.valueRange.getRatio()},uiWidgets.QuantityBar.prototype.getBarSize=function(){"use strict";return this.reverse?this.vertical?this.track.height-this.valueRange.getRatio():this.track.width-this.valueRange.getRatio():this.getBarFraction()};var uiWidgets;(uiWidgets=uiWidgets||{}).QuantityRange=function(t,i,s){"use strict";this.bar=t,this.startValue=i,this.maxValue=s,this.currentValue=i},uiWidgets.QuantityRange.prototype.getRatio=function(){"use strict";return this.currentValue/this.maxValue},uiWidgets.QuantityRange.prototype.getCurrentValue=function(){"use strict";return this.currentValue},uiWidgets.ValueRange=function(t,i,s){"use strict";this.step=t,this.startValue=i,this.maxValue=s+t,this.ratio=t/s,this.ratio>1&&(this.ratio=1),this.currentValue=i,this.steps=[];for(var e=0;e<this.maxValue;e+=t)this.steps.push(e)},uiWidgets.ValueRange.prototype.adjustValue=function(t){"use strict";this.currentValue=t},uiWidgets.ValueRange.prototype.getCurrentValue=function(){"use strict";return this.currentValue},uiWidgets.ViewportRange=function(t,i){"use strict";this.viewport=t,this.vertical=i,i?(this.step=t.area.height,this.maxValue=t.height):(this.step=t.area.width,this.maxValue=t.width),this.ratio=this.step/this.maxValue,this.ratio>1&&(this.ratio=1)},uiWidgets.ViewportRange.prototype.adjustValue=function(t){"use strict";this.vertical?this.viewport.y=t+this.viewport.area.y:this.viewport.x=t+this.viewport.area.x,this.viewport.disableOutOfBounds(this.viewport.children,this,this.vertical)},uiWidgets.ViewportRange.prototype.getCurrentValue=function(){"use strict";return this.vertical?this.viewport.y-this.viewport.area.y:this.viewport.x-this.viewport.area.x};var uiWidgets;(uiWidgets=uiWidgets||{}).Scrollbar=function(t,i,s,e,a,r,h){"use strict";Phaser.Group.call(this,t),t.add.existing(this),this.game=t,this.content=i,this.valueRange=new uiWidgets.ViewportRange(i,e),this.vertical=e||!1,this.draggable=s||!1,this.trackImage=a,this.barImage=r,this.minBarSize=44,this.tweenParams=h||{duration:300,ease:Phaser.Easing.Quadratic.Out},this.trackClicked=!1,this.barMoving=!1,this.mousePointer=null,this.track=this.game.add.sprite(0,0,this.trackImage),this.add(this.track),this.draggable&&this.enableTrackClick(),this.bar=this.game.add.button(this.x,this.y,this.barImage,this.moveContent,this,1,0),this.add(this.bar),this.resizeBar(),this.minY=this.track.y,this.maxY=this.track.y+this.track.height-this.bar.height,this.minX=this.track.x,this.maxX=this.track.x+this.track.width-this.bar.width,this.create(),this.onMovement=new Phaser.Signal},uiWidgets.Scrollbar.prototype=Object.create(uiWidgets.DraggableBar.prototype),uiWidgets.Scrollbar.constructor=uiWidgets.Scrollbar,uiWidgets.Scrollbar.prototype.setDraggableArea=function(){"use strict";this.verticalDraggableArea={x:this.track.x-(this.bar.width-this.track.width)/2,y:this.track.y,w:this.bar.width,h:this.track.height},this.horizontalDraggableArea={x:this.track.x,y:this.track.y-(this.bar.height-this.track.height)/2,w:this.track.width,h:this.bar.height}},uiWidgets.Scrollbar.prototype.resizeBar=function(){"use strict";var t;(t=this.vertical?this.track.height*this.valueRange.ratio:this.track.width*this.valueRange.ratio)<this.minBarSize&&(t=this.minBarSize),this.vertical?this.bar.height=t:this.bar.width=t},uiWidgets.Scrollbar.prototype.create=function(){"use strict";this.centerStaticAxis(),this.draggable&&this.enableBarDrag(),this.windowScrollAreaSize=this.valueRange.maxValue-this.valueRange.step,this.vslice=this.track.height*this.valueRange.ratio,this.hslice=this.track.width*this.valueRange.ratio,this.setTrackScrollAreaSize(),this.mousePointer={x:this.bar.x,y:this.bar.y},this.setInitialBarPosition()},uiWidgets.Scrollbar.prototype.setInitialBarPosition=function(){"use strict";var t=this.getBarPosition();this.vertical?this.bar.y=t+this.track.y:this.bar.x=t+this.track.x},uiWidgets.Scrollbar.prototype.addScrollTween=function(t){"use strict";this.mousePointer={x:this.bar.x,y:this.bar.y},this.trackClicked=!0;var i;i=this.game.add.tween(this.bar).to(t,this.tweenParams.duration,this.tweenParams.ease,!0),this.addScrollTweenEvents(i)},uiWidgets.Scrollbar.prototype.addScrollTweenEvents=function(t){"use strict";t.onUpdateCallback(this.moveContent,this),t.onComplete.add(this.enableBarInput,this)},uiWidgets.Scrollbar.prototype.scrollUp=function(){"use strict";if(this.bar.y!==this.track.y&&!this.barMoving){var t=this.bar.y-this.vslice,i=null;this.barMoving=!0,i=t<=this.track.y?this.minY:this.bar.y-this.vslice,this.addScrollTween({y:i})}},uiWidgets.Scrollbar.prototype.scrollDown=function(){"use strict";if(this.bar.y+this.bar.height!==this.track.y+this.track.height&&!this.barMoving){var t=this.bar.y+2*this.vslice,i=null;this.barMoving=!0,this.bar.inputEnabled=!1,i=t>=this.track.y+this.track.height?this.maxY:this.bar.y+this.vslice,this.addScrollTween({y:i})}},uiWidgets.Scrollbar.prototype.scrollLeft=function(){"use strict";if(this.bar.x!==this.track.x&&!this.barMoving){var t=this.bar.x-this.hslice,i=null;this.barMoving=!0,this.bar.inputEnabled=!1,i=t<=this.track.x?this.minX:this.bar.x-this.hslice,this.addScrollTween({x:i})}},uiWidgets.Scrollbar.prototype.scrollRight=function(){"use strict";if(this.bar.x+this.bar.width!==this.track.x+this.track.width&&!this.barMoving){var t=this.bar.x+2*this.hslice,i=null;this.barMoving=!0,this.bar.inputEnabled=!1,i=t>=this.track.x+this.track.width?this.maxX:this.bar.x+this.hslice,this.addScrollTween({x:i})}},uiWidgets.Scrollbar.prototype.saveMousePosition=function(t,i){"use strict";this.mousePointer={x:i.x,y:i.y}},uiWidgets.Scrollbar.prototype.getBarPosition=function(){"use strict";var t=this.valueRange.getCurrentValue()/this.windowScrollAreaSize;return this.trackScrollAreaSize*t},uiWidgets.Scrollbar.prototype.getMouseDelta=function(){"use strict";var t,i,s,e;return t=this.vertical?this.mousePointer.y:this.mousePointer.x,s=this.trackClicked?{x:this.bar.x,y:this.bar.y}:{x:this.game.input.mousePointer.x,y:this.game.input.mousePointer.y},i=this.vertical?s.y:s.x,this.mousePointer=s,e=this.vertical?this.track.height+this.worldPosition.y:this.track.width+this.worldPosition.x,i<e?t-i:0},uiWidgets.Scrollbar.prototype.getGripPositionRatio=function(){"use strict";var t=this.getBarPosition()+this.getMouseDelta();t>0?t=0:t<=-this.trackScrollAreaSize&&(t=-this.trackScrollAreaSize),this.vertical?this.bar.y<=this.track.y?t=0:this.bar.y+this.bar.height>=this.track.y+this.track.height&&(t=-this.trackScrollAreaSize):this.bar.x<=this.track.x?t=0:this.bar.x+this.bar.width>=this.track.x+this.track.width&&(t=-this.trackScrollAreaSize);var i=t/this.trackScrollAreaSize;return isNaN(i)&&(i=0),i},uiWidgets.Scrollbar.prototype.moveContent=function(){"use strict";var t=this.getGripPositionRatio()*this.windowScrollAreaSize;this.valueRange.adjustValue(t),this.onMovement.dispatch(this)};var uiWidgets;(uiWidgets=uiWidgets||{}).ValueBar=function(t,i,s,e,a,r,h,o){"use strict";Phaser.Group.call(this,t),t.add.existing(this),this.game=t,this.x=i.x,this.y=i.y,this.valueRange=new uiWidgets.ValueRange(s.step,s.startValue,s.maxValue),this.vertical=a||!1,this.draggable=e||!1,this.trackImage=r,this.barImage=h,this.tweenParams=o||{duration:300,ease:Phaser.Easing.Quadratic.Out},this.trackClicked=!1,this.barMoving=!1,this.mousePointer=null,this.track=this.game.add.sprite(0,0,this.trackImage),this.add(this.track),this.draggable&&this.enableTrackClick(),this.bar=this.game.add.button(this.x,this.y,this.barImage,this.moveContent,this,1,0),this.bg=this.game.add.graphics(0,0),this.add(this.bg),this.sendToBack(this.bg),this.bg.beginFill(16711680,0),this.vertical?this.bg.drawRect(0,0-this.bar.height/2,1,this.track.height+this.bar.height):this.bg.drawRect(0-this.bar.width/2,0,this.track.width+this.bar.width,1),this.bg.endFill(),this.snapping=!0,this.add(this.bar),this.minY=this.track.y-this.bar.height/2,this.maxY=this.track.y+this.track.height-this.bar.height/2,this.minX=this.track.x-this.bar.width/2,this.maxX=this.track.x+this.track.width-this.bar.width/2,this.create(),this.vertical?(this.upEvent=this.scrollUp,this.downEvent=this.scrollDown):(this.upEvent=this.scrollLeft,this.downEvent=this.scrollRight),this.onMovement=new Phaser.Signal},uiWidgets.ValueBar.prototype=Object.create(uiWidgets.Scrollbar.prototype),uiWidgets.ValueBar.constructor=uiWidgets.ValueBar,uiWidgets.ValueBar.prototype.setDraggableArea=function(){"use strict";this.verticalDraggableArea={x:this.track.x-(this.bar.width-this.track.width)/2,y:this.track.y-this.bar.height/2,w:this.bar.width,h:this.track.height+this.bar.height},this.horizontalDraggableArea={x:this.track.x-this.bar.width/2,y:this.track.y-(this.bar.height-this.track.height)/2,w:this.track.width+this.bar.width,h:this.bar.height}},uiWidgets.ValueBar.prototype.setTrackScrollAreaSize=function(){"use strict";this.vertical?this.trackScrollAreaSize=this.track.height:this.trackScrollAreaSize=this.track.width},uiWidgets.ValueBar.prototype.setInitialBarPosition=function(){"use strict";var t=this.getBarPosition();this.vertical?this.bar.y=t+this.track.y-this.bar.height/2:this.bar.x=t+this.track.x-this.bar.width/2},uiWidgets.ValueBar.prototype.getClosestPosition=function(){"use strict";for(var t=this.valueRange.getCurrentValue(),i=Math.abs(t-this.valueRange.steps[0]),s=this.valueRange.steps[0],e=0;e<this.valueRange.steps.length;e++){var a=Math.abs(t-this.valueRange.steps[e]);a<i&&(i=a,s=this.valueRange.steps[e])}return s},uiWidgets.ValueBar.prototype.snapToClosestPosition=function(){"use strict";var t=this.getClosestPosition();this.valueRange.adjustValue(t),this.moveContent(),this.setInitialBarPosition()},uiWidgets.ValueBar.prototype.addScrollTweenEvents=function(t){"use strict";t.onComplete.add(this.moveContent,this),t.onComplete.add(this.enableBarInput,this)},uiWidgets.ValueBar.prototype.getGripPositionRatio=function(){"use strict";var t=this.getBarPosition()-this.getMouseDelta();t<0?t=0:t>=this.trackScrollAreaSize&&(t=this.trackScrollAreaSize),this.vertical?this.bar.y<=this.track.y?t=0:this.bar.y+this.bar.height>=this.track.y+this.track.height&&(t=this.trackScrollAreaSize):this.bar.x<=this.track.x?t=0:this.bar.x+this.bar.width>=this.track.x+this.track.width&&(t=this.trackScrollAreaSize);var i=t/this.trackScrollAreaSize;return isNaN(i)&&(i=0),i};var uiWidgets;(uiWidgets=uiWidgets||{}).textSprite=function(t,i,s,e,a,r){"use strict";Phaser.Sprite.call(this,t,a,r,i),t.add.existing(this),this.text=this.game.add.text(0,0,s,e),this.text.anchor.set(.5,.5),this.addChild(this.text)},uiWidgets.textSprite.prototype=Object.create(Phaser.Sprite.prototype),uiWidgets.textSprite.constructor=uiWidgets.textSprite,uiWidgets.textButton=function(t,i,s,e,a,r,h,o){"use strict";Phaser.Button.call(this,t,a,r,i,h,o),t.add.existing(this),this.text=this.game.add.text(0,0,s,e),this.text.anchor.set(.5,.5),this.addChild(this.text)},uiWidgets.textButton.prototype=Object.create(Phaser.Button.prototype),uiWidgets.textButton.constructor=uiWidgets.textButton;var uiWidgets;(uiWidgets=uiWidgets||{}).Column=function(t,i,s,e){"use strict";uiWidgets.Frame.apply(this,arguments)},uiWidgets.Column.prototype=Object.create(uiWidgets.Frame.prototype),uiWidgets.Column.constructor=uiWidgets.Column,uiWidgets.Column.prototype.alignment=Phaser.BOTTOM_CENTER;var uiWidgets;(uiWidgets=uiWidgets||{}).Row=function(t,i,s,e){"use strict";uiWidgets.Frame.apply(this,arguments)},uiWidgets.Row.prototype=Object.create(uiWidgets.Frame.prototype),uiWidgets.Row.constructor=uiWidgets.Row,uiWidgets.Row.prototype.alignment=Phaser.RIGHT_CENTER;var uiWidgets;(uiWidgets=uiWidgets||{}).Viewport=function(t,i,s,e,a){"use strict";Phaser.Group.call(this,t),t.add.existing(this),this.x=i,this.y=s,this.area={x:i,y:s,width:e,height:a},this.mask=this.game.add.graphics(this.area.x,this.area.y),this.mask.beginFill(255),this.mask.drawRect(0,0,e,a),this.mask.endFill()},uiWidgets.Viewport.prototype=Object.create(Phaser.Group.prototype),uiWidgets.Viewport.constructor=uiWidgets.Viewport,uiWidgets.Viewport.prototype.addNode=function(t){"use strict";this.add(t)},uiWidgets.Viewport.prototype.disableOutOfBounds=function(t,i,s){"use strict";var e,a,r,h;if(void 0!==t)for(var o=0;o<t.length;o++)(e=t[o]).inputEnabled=!0,h=e.world||e,s?(a=h.y,r=i.viewport.area.y):(a=h.x,r=i.viewport.area.x),a<r&&(e.inputEnabled=!1),this.disableOutOfBounds(e.children,i,s)};var uiWidgets;(uiWidgets=uiWidgets||{}).KeyboardGroup=function(t,i,s){"use strict";this.game=t,this.vertical=i||!1,this.callbackContext=s,this.children=[],this.selected=null,this.idx=0,this.upKey=this.game.input.keyboard.addKey(Phaser.Keyboard.UP),this.downKey=this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN),this.leftKey=this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT),this.rightKey=this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT),this.upEvent=this.prevItem,this.downEvent=this.nextItem,this.onPrevious=new Phaser.Signal,this.onNext=new Phaser.Signal,this.activateGroup()},uiWidgets.KeyboardGroup.constructor=uiWidgets.KeyboardGroup,uiWidgets.KeyboardGroup.prototype.addNode=function(t){"use strict";this.children.push(t),this.selected=this.children[0],this.useBar()},uiWidgets.KeyboardGroup.prototype.prevItem=function(){"use strict";this.idx=this.idx-1,this.idx<0&&(this.idx=this.children.length-1),this.selected=this.children[this.idx],this.useBar(),this.onPrevious.dispatch(this,this.callbackContext)},uiWidgets.KeyboardGroup.prototype.nextItem=function(){"use strict";this.idx=(this.idx+1)%this.children.length,this.selected=this.children[this.idx],this.useBar(),this.onNext.dispatch(this,this.callbackContext)},uiWidgets.KeyboardGroup.prototype.activateGroup=function(){"use strict";this.vertical?(this.upKey.onDown.add(this.upEvent,this),this.downKey.onDown.add(this.downEvent,this)):(this.leftKey.onDown.add(this.upEvent,this),this.rightKey.onDown.add(this.downEvent,this))},uiWidgets.KeyboardGroup.prototype.useBar=function(){"use strict";this.vertical?(this.leftKey.onDown.removeAll(),this.rightKey.onDown.removeAll(),this.leftKey.onDown.add(this.selected.upEvent,this.selected),this.rightKey.onDown.add(this.selected.downEvent,this.selected)):(this.upKey.onDown.removeAll(),this.downKey.onDown.removeAll(),this.upKey.onDown.add(this.selected.upEvent,this.selected),this.downKey.onDown.add(this.selected.downEvent,this.selected))};var uiWidgets;uiWidgets=uiWidgets||{};var VectorPoint=function(t,i,s,e,a){"use strict";this.x=t||0,this.y=i||0,this.z=s||0,this.sprite=e||null,this.position=a||0};VectorPoint.prototype={getSinCosOfAngle:function(t){"use strict";var i=t*Math.PI/180;return{cosine:Math.cos(i),sine:Math.sin(i)}},rotateY:function(t){"use strict";var i=this.getSinCosOfAngle(t),s=this.z*i.cosine-this.x*i.sine,e=this.z*i.sine+this.x*i.cosine;return new VectorPoint(e,this.y,s)},rotateX:function(t){"use strict";var i=this.getSinCosOfAngle(t),s=this.y*i.cosine-this.z*i.sine,e=this.y*i.sine+this.z*i.cosine;return new VectorPoint(this.x,s,e)},rotateZ:function(t){"use strict";var i=this.getSinCosOfAngle(t),s=this.x*i.cosine-this.y*i.sine,e=this.x*i.sine+this.y*i.cosine;return new VectorPoint(s,e,this.z)},rotate:function(t,i){"use strict";return"x"===t?this.rotateX(i):"y"===t?this.rotateY(i):"z"===t?this.rotateZ(i):void 0},project:function(t,i,s){"use strict";var e=this.x*s+t,a=-this.y*s+i;return new VectorPoint(e,a,this.z)}},uiWidgets.Wheel3D=function(t,i,s,e,a,r,h,o,n){"use strict";this.game=t,this.xy=i,this.sprites=s,this.firstPlace=e,this.zoom=a,this.axis=r,this.rotationAxis=h,this.visibleRange=o||null,this.tweenParams=n||{duration:300,ease:Phaser.Easing.Quadratic.Out},this.onStart=new Phaser.Signal,this.onComplete=new Phaser.Signal,this.onBackComplete=new Phaser.Signal,this.onForwardComplete=new Phaser.Signal,this.group=this.game.add.group()},uiWidgets.Wheel3D.prototype={activate:function(){"use strict";var t,i,s,e,a,r,h,o;if(this.pointsAmount=this.sprites.length,this.totalPositions=this.pointsAmount-1,this.rotationAmount=360/this.pointsAmount,null!==this.visibleRange){var n=[];for(o=0;o<=this.totalPositions;o++)n.push(o);var u=n.slice(0,this.visibleRange.max),c=n.slice(this.visibleRange.min);this.visiblePositions=u.concat(c)}for(this.moving=!1,this.direction=null,this.wheelItems=[],1,t=2*Math.PI/this.pointsAmount,o=0;o<this.pointsAmount;o++)this.sprites[o].wheelPosition=o,this.group.add(this.sprites[o]),i=t*o,s=1*Math.cos(i),e=1*Math.sin(i),"x"===this.axis?(a=-1,r=s,h=e):"y"===this.axis?(a=s,r=-1,h=e):"z"===this.axis&&(a=s,r=e,h=-1),this.wheelItems.push(new VectorPoint(a,r,h,this.sprites[o],o));this.active=this.wheelItems[this.firstPlace].sprite,this.project()},moveBack:function(){"use strict";!1===this.moving&&(this.moving=!0,this.direction=0,"x"===this.axis||"z"===this.axis?this.rotationAxis[this.axis]+=this.rotationAmount:this.rotationAxis[this.axis]-=this.rotationAmount,this.updatePosition("+"),this.project(),this.resetAngle())},moveForward:function(){"use strict";!1===this.moving&&(this.moving=!0,this.direction=1,"x"===this.axis||"z"===this.axis?this.rotationAxis[this.axis]-=this.rotationAmount:this.rotationAxis[this.axis]+=this.rotationAmount,this.updatePosition("-"),this.project(),this.resetAngle())},project:function(){"use strict";var t,i,s=["x","y","z"],e=s.indexOf(this.axis);s.splice(e,1);for(var a=0;a<this.wheelItems.length;a++){var r=this.wheelItems[a].rotate(this.axis,this.rotationAxis[this.axis]).rotate(s[0],this.rotationAxis[s[0]]).rotate(s[1],this.rotationAxis[s[1]]).project(this.xy.x,this.xy.y,this.zoom);if(t=this.wheelItems[a].sprite,t.lz=r.z,this.wheelItems[a].position===this.firstPlace)t.alpha=1,this.active=this.wheelItems[a].sprite;else if(null!==this.visibleRange){var h=_.includes(this.visiblePositions,this.wheelItems[a].position);t.alpha=h?1:0}(i=this.game.add.tween(t).to({x:r.x,y:r.y},this.tweenParams.duration,this.tweenParams.ease,!0)).onComplete.add(this.enableMoving,this)}this.group.sort("lz",Phaser.Group.SORT_ASCENDING),i.onStart.add(this.dispatchOnStart,this),i.onComplete.add(this.dispatchOnComplete,this)},dispatchOnStart:function(){"use strict";this.onStart.dispatch(this)},dispatchOnComplete:function(){"use strict";0===this.direction?this.onBackComplete.dispatch(this):1===this.direction&&this.onForwardComplete.dispatch(this),this.onComplete.dispatch(this)},enableMoving:function(){"use strict";this.moving=!1},updatePosition:function(t){"use strict";for(var i,s=0;s<this.wheelItems.length;s++){var e=this.wheelItems[s].position;this.wheelItems[s].position=uiWidgets.utils.operators[t](e,1),i=uiWidgets.utils.modulo(this.wheelItems[s].position,this.pointsAmount),this.wheelItems[s].position=i,this.wheelItems[s].sprite.wheelPosition=i}},resetAngle:function(){"use strict";var t=this.rotationAxis[this.axis];360!==t&&-360!==t||(this.rotationAxis[this.axis]=0)}};
\ No newline at end of file
diff --git a/docs/bars_bar.js.html b/docs/bars_bar.js.html
index 8a9478c..aa881fd 100644
--- a/docs/bars_bar.js.html
+++ b/docs/bars_bar.js.html
@@ -70,7 +70,8 @@ <h1 class="page-title">Source: bars/bar.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 
 /** Base object for all Bars. */
@@ -225,9 +226,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/bars_quantitybar.js.html b/docs/bars_quantitybar.js.html
index 4516a2a..9191ebd 100644
--- a/docs/bars_quantitybar.js.html
+++ b/docs/bars_quantitybar.js.html
@@ -70,7 +70,8 @@ <h1 class="page-title">Source: bars/quantitybar.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Bar that adjusts the size of a static sprite based on a value.
@@ -305,9 +306,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/bars_ranges.js.html b/docs/bars_ranges.js.html
index 10a1d0c..e0cc26d 100644
--- a/docs/bars_ranges.js.html
+++ b/docs/bars_ranges.js.html
@@ -70,7 +70,8 @@ <h1 class="page-title">Source: bars/ranges.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 
 /** Used by a QuantityBar to hold the bar's values.
@@ -247,9 +248,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/bars_scrollbar.js.html b/docs/bars_scrollbar.js.html
index f9b5e47..9136879 100644
--- a/docs/bars_scrollbar.js.html
+++ b/docs/bars_scrollbar.js.html
@@ -70,7 +70,8 @@ <h1 class="page-title">Source: bars/scrollbar.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * A bar that moves along a track. The bar is resized relative to the size of the track and size of the content to be scrolled.
@@ -102,7 +103,7 @@ <h1 class="page-title">Source: bars/scrollbar.js</h1>
     // The smallest pixel size allowed for the bar.
     this.minBarSize = 44;
 
-    this.tweenParams = tweenParams || {'duration': 300, 'ease': Phaser.Easing.Quadratic.Out};
+    this.tweenParams = tweenParams || {"duration": 300, "ease": Phaser.Easing.Quadratic.Out};
 
     // Flag switched on when the track is clicked, switched off after the bar movement is finished.
     this.trackClicked = false;
@@ -492,9 +493,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/bars_valuebar.js.html b/docs/bars_valuebar.js.html
index 705a664..4fd2935 100644
--- a/docs/bars_valuebar.js.html
+++ b/docs/bars_valuebar.js.html
@@ -70,7 +70,8 @@ <h1 class="page-title">Source: bars/valuebar.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Bar that adjusts a number.
@@ -207,9 +208,9 @@ <h1 class="page-title">Source: bars/valuebar.js</h1>
 
     // The bar should always be in centered on it's current position.
     if (this.vertical) {
-	       this.bar.y = gripPositionOnTrack + this.track.y - (this.bar.height / 2);
+            this.bar.y = gripPositionOnTrack + this.track.y - (this.bar.height / 2);
     } else {
-	       this.bar.x = gripPositionOnTrack + this.track.x - (this.bar.width / 2);
+            this.bar.x = gripPositionOnTrack + this.track.x - (this.bar.width / 2);
     }
 
 };
@@ -333,9 +334,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/buttons.js.html b/docs/buttons.js.html
index 282f532..6bb2f86 100644
--- a/docs/buttons.js.html
+++ b/docs/buttons.js.html
@@ -70,7 +70,8 @@ <h1 class="page-title">Source: buttons.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 
 /**
@@ -166,9 +167,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/classes.list.html b/docs/classes.list.html
index 737f5b6..3b31d50 100644
--- a/docs/classes.list.html
+++ b/docs/classes.list.html
@@ -236,9 +236,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/containers_column.js.html b/docs/containers_column.js.html
index 15e2c08..cb6a208 100644
--- a/docs/containers_column.js.html
+++ b/docs/containers_column.js.html
@@ -70,13 +70,16 @@ <h1 class="page-title">Source: containers/column.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Frame that places new child nodes directly under the previous child.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
+ * @param {string} bg - The background image to use.
  */
 uiWidgets.Column = function (game, x, y, bg) {
     "use strict";
@@ -86,28 +89,7 @@ <h1 class="page-title">Source: containers/column.js</h1>
 uiWidgets.Column.prototype = Object.create(uiWidgets.Frame.prototype);
 uiWidgets.Column.constructor = uiWidgets.Column;
 
-/** Adds a new object into the Column, then aligns it under the previous object.
- * @param {Object} node - The sprite to add to the Column.
- * @param {Number} alignment - The alignment relative to the previous child.
- * @param {Number} padding - The amount of space between objects.
- */
-uiWidgets.Column.prototype.addNode = function (node, alignment, padding) {
-    "use strict";
-    alignment = alignment || Phaser.BOTTOM_CENTER;
-    padding = padding || 0;
-
-    this.add(node);
-    var previousNode = this.children[this.children.length - 2];
-
-    if (previousNode !== undefined) {
-        node.alignTo(previousNode, alignment, 0, padding);
-    }
-
-    // Reset the positions for the bar's draggable area.
-    if ("enableBarDrag" in node) {
-        node.enableBarDrag();
-    }
-};
+uiWidgets.Column.prototype.alignment = Phaser.BOTTOM_CENTER;
 </pre>
     </article>
 </section>
@@ -151,9 +133,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/containers_frame.js.html b/docs/containers_frame.js.html
index 258dabe..0ea5f6d 100644
--- a/docs/containers_frame.js.html
+++ b/docs/containers_frame.js.html
@@ -70,14 +70,16 @@ <h1 class="page-title">Source: containers/frame.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Group with a dedicated background image.
  * Children added to the group will always be above the background image.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
  * @param {string} bg - The background image to use.
  */
 uiWidgets.Frame = function (game, x, y, bg) {
@@ -102,18 +104,29 @@ <h1 class="page-title">Source: containers/frame.js</h1>
 uiWidgets.Frame.prototype = Object.create(Phaser.Group.prototype);
 uiWidgets.Frame.constructor = uiWidgets.Frame;
 
-/** Adds a new object to the Frame.
- * @param {Object} node - The sprite to add to the Frame.
+/** Adds a new object into the Column, then aligns it under the previous object.
+ * @param {Object} node - The sprite to add to the Column.
+ * @param {Number} alignment - The alignment relative to the previous child.
+ * @param {Number} padding_x - The amount of horizontal space between objects.
+ * @param {Number} padding_y - The amount of vertical space between objects.
  */
-uiWidgets.Frame.prototype.addNode = function (node) {
+uiWidgets.Frame.prototype.addNode = function (node, alignment, padding_x, padding_y) {
     "use strict";
+    alignment = alignment || this.alignment;
+    padding_x = padding_x || 0;
+    padding_y = padding_y || 0;
+
     this.add(node);
+    var previousNode = this.children[this.children.length - 2];
+
+    if (previousNode !== undefined) {
+        node.alignTo(previousNode, alignment, padding_x, padding_y);
+    }
 
     // Reset the positions for the bar's draggable area.
     if ("enableBarDrag" in node) {
         node.enableBarDrag();
     }
-
 };
 </pre>
     </article>
@@ -158,9 +171,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/containers_row.js.html b/docs/containers_row.js.html
index 66353f7..a257aa4 100644
--- a/docs/containers_row.js.html
+++ b/docs/containers_row.js.html
@@ -70,13 +70,16 @@ <h1 class="page-title">Source: containers/row.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Frame that places new child nodes directly next to the previous child.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
+ * @param {string} bg - The background image to use.
  */
 uiWidgets.Row = function (game, x, y, bg) {
     "use strict";
@@ -86,28 +89,7 @@ <h1 class="page-title">Source: containers/row.js</h1>
 uiWidgets.Row.prototype = Object.create(uiWidgets.Frame.prototype);
 uiWidgets.Row.constructor = uiWidgets.Row;
 
-/** Adds a new object into the Row, then aligns it next to the previous object.
- * @param {Object} node - The sprite to add to the row.
- * @param {Number} alignment - The alignment relative to the previous child.
- * @param {Number} padding - The amount of space between objects.
- */
-uiWidgets.Row.prototype.addNode = function (node, alignment, padding) {
-    "use strict";
-    alignment = alignment || Phaser.RIGHT_CENTER;
-    padding = padding || 0;
-
-    this.add(node);
-    var previousNode = this.children[this.children.length - 2];
-
-    if (previousNode !== undefined) {
-        node.alignTo(previousNode, alignment, padding);
-    }
-
-    // Reset the positions for the bar's draggable area.
-    if ("enableBarDrag" in node) {
-        node.enableBarDrag();
-    }
-};
+uiWidgets.Row.prototype.alignment = Phaser.RIGHT_CENTER;
 </pre>
     </article>
 </section>
@@ -151,9 +133,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/containers_viewport.js.html b/docs/containers_viewport.js.html
index 6e0563d..468268e 100644
--- a/docs/containers_viewport.js.html
+++ b/docs/containers_viewport.js.html
@@ -70,7 +70,8 @@ <h1 class="page-title">Source: containers/viewport.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * A container with a limited viewable area. Uses a mask to hide children outside of the specified x/y/width/height area.
@@ -194,9 +195,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/examples/lib/phaser-ui-tools.js b/docs/examples/lib/phaser-ui-tools.js
index 90e8fce..e5e2dd9 100644
--- a/docs/examples/lib/phaser-ui-tools.js
+++ b/docs/examples/lib/phaser-ui-tools.js
@@ -1,4 +1,5 @@
-var uiWidgets = uiWidgets || {};
+var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 uiWidgets.utils = {};
 
@@ -18,14 +19,16 @@ uiWidgets.utils.operators = {
     "+": function (a, b) { return a + b; },
     "-": function (a, b) { return a - b; }
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Group with a dedicated background image.
  * Children added to the group will always be above the background image.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
  * @param {string} bg - The background image to use.
  */
 uiWidgets.Frame = function (game, x, y, bg) {
@@ -50,20 +53,32 @@ uiWidgets.Frame = function (game, x, y, bg) {
 uiWidgets.Frame.prototype = Object.create(Phaser.Group.prototype);
 uiWidgets.Frame.constructor = uiWidgets.Frame;
 
-/** Adds a new object to the Frame.
- * @param {Object} node - The sprite to add to the Frame.
+/** Adds a new object into the Column, then aligns it under the previous object.
+ * @param {Object} node - The sprite to add to the Column.
+ * @param {Number} alignment - The alignment relative to the previous child.
+ * @param {Number} padding_x - The amount of horizontal space between objects.
+ * @param {Number} padding_y - The amount of vertical space between objects.
  */
-uiWidgets.Frame.prototype.addNode = function (node) {
+uiWidgets.Frame.prototype.addNode = function (node, alignment, padding_x, padding_y) {
     "use strict";
+    alignment = alignment || this.alignment;
+    padding_x = padding_x || 0;
+    padding_y = padding_y || 0;
+
     this.add(node);
+    var previousNode = this.children[this.children.length - 2];
+
+    if (previousNode !== undefined) {
+        node.alignTo(previousNode, alignment, padding_x, padding_y);
+    }
 
     // Reset the positions for the bar's draggable area.
     if ("enableBarDrag" in node) {
         node.enableBarDrag();
     }
-
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 
 /** Base object for all Bars. */
@@ -175,7 +190,8 @@ uiWidgets.DraggableBar.prototype.enableBarDrag = function () {
         draggableArea.h)
     ;
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Bar that adjusts the size of a static sprite based on a value.
@@ -367,7 +383,8 @@ uiWidgets.QuantityBar.prototype.getBarSize = function () {
 
     return barSize;
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 
 /** Used by a QuantityBar to hold the bar's values.
@@ -501,7 +518,8 @@ uiWidgets.ViewportRange.prototype.getCurrentValue = function () {
 
     return currentValue;
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * A bar that moves along a track. The bar is resized relative to the size of the track and size of the content to be scrolled.
@@ -533,7 +551,7 @@ uiWidgets.Scrollbar = function (game, content, draggable, vertical, trackImage,
     // The smallest pixel size allowed for the bar.
     this.minBarSize = 44;
 
-    this.tweenParams = tweenParams || {'duration': 300, 'ease': Phaser.Easing.Quadratic.Out};
+    this.tweenParams = tweenParams || {"duration": 300, "ease": Phaser.Easing.Quadratic.Out};
 
     // Flag switched on when the track is clicked, switched off after the bar movement is finished.
     this.trackClicked = false;
@@ -880,7 +898,8 @@ uiWidgets.Scrollbar.prototype.moveContent = function () {
 
     this.onMovement.dispatch(this);
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Bar that adjusts a number.
@@ -1017,9 +1036,9 @@ uiWidgets.ValueBar.prototype.setInitialBarPosition = function () {
 
     // The bar should always be in centered on it's current position.
     if (this.vertical) {
-	       this.bar.y = gripPositionOnTrack + this.track.y - (this.bar.height / 2);
+            this.bar.y = gripPositionOnTrack + this.track.y - (this.bar.height / 2);
     } else {
-	       this.bar.x = gripPositionOnTrack + this.track.x - (this.bar.width / 2);
+            this.bar.x = gripPositionOnTrack + this.track.x - (this.bar.width / 2);
     }
 
 };
@@ -1100,7 +1119,8 @@ uiWidgets.ValueBar.prototype.getGripPositionRatio = function () {
 
     return newGripPositionRatio;
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 
 /**
@@ -1153,13 +1173,16 @@ uiWidgets.textButton = function (game, image, label, style, x, y, callback, call
 
 uiWidgets.textButton.prototype = Object.create(Phaser.Button.prototype);
 uiWidgets.textButton.constructor = uiWidgets.textButton;
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Frame that places new child nodes directly under the previous child.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
+ * @param {string} bg - The background image to use.
  */
 uiWidgets.Column = function (game, x, y, bg) {
     "use strict";
@@ -1169,35 +1192,17 @@ uiWidgets.Column = function (game, x, y, bg) {
 uiWidgets.Column.prototype = Object.create(uiWidgets.Frame.prototype);
 uiWidgets.Column.constructor = uiWidgets.Column;
 
-/** Adds a new object into the Column, then aligns it under the previous object.
- * @param {Object} node - The sprite to add to the Column.
- * @param {Number} alignment - The alignment relative to the previous child.
- * @param {Number} padding - The amount of space between objects.
- */
-uiWidgets.Column.prototype.addNode = function (node, alignment, padding) {
-    "use strict";
-    alignment = alignment || Phaser.BOTTOM_CENTER;
-    padding = padding || 0;
-
-    this.add(node);
-    var previousNode = this.children[this.children.length - 2];
-
-    if (previousNode !== undefined) {
-        node.alignTo(previousNode, alignment, 0, padding);
-    }
-
-    // Reset the positions for the bar's draggable area.
-    if ("enableBarDrag" in node) {
-        node.enableBarDrag();
-    }
-};
-;var uiWidgets = uiWidgets || {};
+uiWidgets.Column.prototype.alignment = Phaser.BOTTOM_CENTER;
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Frame that places new child nodes directly next to the previous child.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
+ * @param {string} bg - The background image to use.
  */
 uiWidgets.Row = function (game, x, y, bg) {
     "use strict";
@@ -1207,29 +1212,9 @@ uiWidgets.Row = function (game, x, y, bg) {
 uiWidgets.Row.prototype = Object.create(uiWidgets.Frame.prototype);
 uiWidgets.Row.constructor = uiWidgets.Row;
 
-/** Adds a new object into the Row, then aligns it next to the previous object.
- * @param {Object} node - The sprite to add to the row.
- * @param {Number} alignment - The alignment relative to the previous child.
- * @param {Number} padding - The amount of space between objects.
- */
-uiWidgets.Row.prototype.addNode = function (node, alignment, padding) {
-    "use strict";
-    alignment = alignment || Phaser.RIGHT_CENTER;
-    padding = padding || 0;
-
-    this.add(node);
-    var previousNode = this.children[this.children.length - 2];
-
-    if (previousNode !== undefined) {
-        node.alignTo(previousNode, alignment, padding);
-    }
-
-    // Reset the positions for the bar's draggable area.
-    if ("enableBarDrag" in node) {
-        node.enableBarDrag();
-    }
-};
-;var uiWidgets = uiWidgets || {};
+uiWidgets.Row.prototype.alignment = Phaser.RIGHT_CENTER;
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * A container with a limited viewable area. Uses a mask to hide children outside of the specified x/y/width/height area.
@@ -1310,7 +1295,8 @@ uiWidgets.Viewport.prototype.disableOutOfBounds = function (children, context, v
         }
     }
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /** Collection of sprites that can be selected with the keyboard.
   * When the select key is hit, the sprite that was selected is now connected to the keyboard.
@@ -1429,7 +1415,8 @@ uiWidgets.KeyboardGroup.prototype.useBar = function () {
         this.downKey.onDown.add(this.selected.downEvent, this.selected);
     }
 };
-;var uiWidgets = uiWidgets || {};
+;var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Represents a single point in a Wheel3D.
diff --git a/docs/index.html b/docs/index.html
index de61ed5..33156d4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -130,9 +130,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/keyboard_group.js.html b/docs/keyboard_group.js.html
index 43b129b..e866b1e 100644
--- a/docs/keyboard_group.js.html
+++ b/docs/keyboard_group.js.html
@@ -70,7 +70,8 @@ <h1 class="page-title">Source: keyboard_group.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /** Collection of sprites that can be selected with the keyboard.
   * When the select key is hit, the sprite that was selected is now connected to the keyboard.
@@ -232,9 +233,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/quicksearch.html b/docs/quicksearch.html
index e218fa3..c66e483 100644
--- a/docs/quicksearch.html
+++ b/docs/quicksearch.html
@@ -7,7 +7,7 @@
     <script src="scripts/fulltext-search.js"></script>
 
     <script type="text/x-docstrap-searchdb">
-    {"bars_bar.js.html":{"id":"bars_bar.js.html","title":"Source: bars/bar.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: bars/bar.js var uiWidgets = uiWidgets || {}; /** Base object for all Bars. */ uiWidgets.Bar = function () {}; uiWidgets.Bar.prototype = Object.create(Phaser.Group.prototype); uiWidgets.Bar.constructor = uiWidgets.Bar; /** Determine the distance the bar can scroll over. */ uiWidgets.Bar.prototype.setTrackScrollAreaSize = function () { &quot;use strict&quot;; if (this.vertical) { this.trackScrollAreaSize = this.track.height - this.vslice; } else { this.trackScrollAreaSize = this.track.width - this.hslice; } }; /** Sets position for the bar's non-moving axis. Centers it inside the track. */ uiWidgets.Bar.prototype.centerStaticAxis = function () { &quot;use strict&quot;; if (this.vertical) { this.bar.x = this.track.x + (this.track.width / 2) - (this.bar.width / 2); } else { this.bar.y = this.track.y + (this.track.height / 2) - (this.bar.height / 2); } }; /** Base object for Bars that can be dragged with a mouse. */ uiWidgets.DraggableBar = function () {}; uiWidgets.DraggableBar.prototype = Object.create(uiWidgets.Bar.prototype); uiWidgets.DraggableBar.constructor = uiWidgets.DraggableBar; /** If the vertical scrollbar is draggable, this function is called when the track is clicked. */ uiWidgets.DraggableBar.prototype.verticalTrackClick = function () { &quot;use strict&quot;; // Don't register mouse clicks on the bar itself. if (this.game.input.mousePointer.y &gt; this.bar.y + this.bar.height + this.worldPosition.y) { this.scrollDown(); } else if (this.game.input.mousePointer.y &lt; this.bar.y + this.worldPosition.y) { this.scrollUp(); } }; /** If the horizontal scrollbar is draggable, this function is called when the track is clicked. */ uiWidgets.DraggableBar.prototype.horizontalTrackClick = function () { &quot;use strict&quot;; // Don't register mouse clicks on the bar itself. if (this.game.input.mousePointer.x &gt; this.bar.x + this.bar.width + this.worldPosition.x) { this.scrollRight(); } else if (this.game.input.mousePointer.x &lt; (this.bar.x + this.worldPosition.x)) { this.scrollLeft(); } }; /** Allows the bar to scroll when the track is clicked directly. */ uiWidgets.DraggableBar.prototype.enableTrackClick = function () { &quot;use strict&quot;; var event; this.track.inputEnabled = true; if (this.vertical) { event = this.verticalTrackClick; } else { event = this.horizontalTrackClick; } this.track.events.onInputDown.add(event, this); }; /** When called, ensures the bar can be moved. Must be called once the bar has finished scrolling. */ uiWidgets.DraggableBar.prototype.enableBarInput = function () { &quot;use strict&quot;; this.trackClicked = false; this.barMoving = false; this.bar.inputEnabled = true; }; /** Enables clicking and dragging on the bar. */ uiWidgets.DraggableBar.prototype.enableBarDrag = function () { &quot;use strict&quot;; this.setDraggableArea(); this.bar.inputEnabled = true; this.bar.input.enableDrag(); if (this.snapping) { this.bar.events.onInputUp.add(this.snapToClosestPosition, this); } this.bar.events.onInputDown.add(this.saveMousePosition, this); this.bar.events.onDragUpdate.add(this.moveContent, this); var draggableArea; if (this.vertical) { this.bar.input.allowHorizontalDrag = false; draggableArea = this.verticalDraggableArea; } else { this.bar.input.allowVerticalDrag = false; draggableArea = this.horizontalDraggableArea; } this.bar.input.boundsRect = new Phaser.Rectangle( draggableArea.x, draggableArea.y, draggableArea.w, draggableArea.h) ; }; × Search results Close "},"containers_column.js.html":{"id":"containers_column.js.html","title":"Source: containers/column.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: containers/column.js var uiWidgets = uiWidgets || {}; /** * Frame that places new child nodes directly under the previous child. * @constructor * @param {Object} game - Current game instance. * @param {Object} context - The context this object is called in. */ uiWidgets.Column = function (game, x, y, bg) { &quot;use strict&quot;; uiWidgets.Frame.apply(this, arguments); }; uiWidgets.Column.prototype = Object.create(uiWidgets.Frame.prototype); uiWidgets.Column.constructor = uiWidgets.Column; /** Adds a new object into the Column, then aligns it under the previous object. * @param {Object} node - The sprite to add to the Column. * @param {Number} alignment - The alignment relative to the previous child. * @param {Number} padding - The amount of space between objects. */ uiWidgets.Column.prototype.addNode = function (node, alignment, padding) { &quot;use strict&quot;; alignment = alignment || Phaser.BOTTOM_CENTER; padding = padding || 0; this.add(node); var previousNode = this.children[this.children.length - 2]; if (previousNode !== undefined) { node.alignTo(previousNode, alignment, 0, padding); } // Reset the positions for the bar's draggable area. if (&quot;enableBarDrag&quot; in node) { node.enableBarDrag(); } }; × Search results Close "},"containers_frame.js.html":{"id":"containers_frame.js.html","title":"Source: containers/frame.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: containers/frame.js var uiWidgets = uiWidgets || {}; /** * Group with a dedicated background image. * Children added to the group will always be above the background image. * @constructor * @param {Object} game - Current game instance. * @param {Object} context - The context this object is called in. * @param {string} bg - The background image to use. */ uiWidgets.Frame = function (game, x, y, bg) { &quot;use strict&quot;; Phaser.Group.call(this, game); game.add.existing(this); this.x = x || 0; this.y = y || 0; this.game = game; this.bg = bg || null; // Add background to Frame. if (bg !== null) { var bgSprite = game.add.sprite(0, 0, bg); bgSprite.sendToBack(); bgSprite.alignIn(this, Phaser.TOP_LEFT); } }; uiWidgets.Frame.prototype = Object.create(Phaser.Group.prototype); uiWidgets.Frame.constructor = uiWidgets.Frame; /** Adds a new object to the Frame. * @param {Object} node - The sprite to add to the Frame. */ uiWidgets.Frame.prototype.addNode = function (node) { &quot;use strict&quot;; this.add(node); // Reset the positions for the bar's draggable area. if (&quot;enableBarDrag&quot; in node) { node.enableBarDrag(); } }; × Search results Close "},"keyboard_group.js.html":{"id":"keyboard_group.js.html","title":"Source: keyboard_group.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: keyboard_group.js var uiWidgets = uiWidgets || {}; /** Collection of sprites that can be selected with the keyboard. * When the select key is hit, the sprite that was selected is now connected to the keyboard. * @constructor * @param {Object} game - Current game instance. * @param {Boolean} vertical - If the selection should be controlled with up/down or left/right arrow keys. * @param {Object} callbackContext - The context for the onPrevious and onNext Signals. */ uiWidgets.KeyboardGroup = function (game, vertical, callbackContext) { &quot;use strict&quot;; this.game = game; this.vertical = vertical || false; this.callbackContext = callbackContext; this.children = []; this.selected = null; this.idx = 0; this.upKey = this.game.input.keyboard.addKey(Phaser.Keyboard.UP); this.downKey = this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN); this.leftKey = this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT); this.rightKey = this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT); this.upEvent = this.prevItem; this.downEvent = this.nextItem; /** * Dispatched when the selected child is set from the current child to the previous child. * @property {Phaser.Signal} */ this.onPrevious = new Phaser.Signal(); /** * Dispatched when the selected child is set from the current child to the next child. * @property {Phaser.Signal} */ this.onNext = new Phaser.Signal(); this.activateGroup(); }; uiWidgets.KeyboardGroup.constructor = uiWidgets.KeyboardGroup; /** Add a new child to the group * @param {Object} newNode - The sprite to add to the group. */ uiWidgets.KeyboardGroup.prototype.addNode = function (newNode) { &quot;use strict&quot;; this.children.push(newNode); // Ensure the first child is already selected when the game loads. this.selected = this.children[0]; this.useBar(); }; /** Selects the previous child. */ uiWidgets.KeyboardGroup.prototype.prevItem = function () { &quot;use strict&quot;; this.idx = this.idx - 1; if (this.idx &lt; 0) { this.idx = this.children.length - 1; } this.selected = this.children[this.idx]; this.useBar(); this.onPrevious.dispatch(this, this.callbackContext); }; /** Selects the next child. */ uiWidgets.KeyboardGroup.prototype.nextItem = function () { &quot;use strict&quot;; this.idx = (this.idx + 1) % (this.children.length); this.selected = this.children[this.idx]; this.useBar(); this.onNext.dispatch(this, this.callbackContext); }; /** * Enables keyboard input for the group. * @private */ uiWidgets.KeyboardGroup.prototype.activateGroup = function () { &quot;use strict&quot;; if (this.vertical) { this.upKey.onDown.add(this.upEvent, this); this.downKey.onDown.add(this.downEvent, this); } else { this.leftKey.onDown.add(this.upEvent, this); this.rightKey.onDown.add(this.downEvent, this); } }; /** * Enables keyboard input on a child. * @private */ uiWidgets.KeyboardGroup.prototype.useBar = function () { &quot;use strict&quot;; if (this.vertical) { this.leftKey.onDown.removeAll(); this.rightKey.onDown.removeAll(); this.leftKey.onDown.add(this.selected.upEvent, this.selected); this.rightKey.onDown.add(this.selected.downEvent, this.selected); } else { this.upKey.onDown.removeAll(); this.downKey.onDown.removeAll(); this.upKey.onDown.add(this.selected.upEvent, this.selected); this.downKey.onDown.add(this.selected.downEvent, this.selected); } }; × Search results Close "},"bars_quantitybar.js.html":{"id":"bars_quantitybar.js.html","title":"Source: bars/quantitybar.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: bars/quantitybar.js var uiWidgets = uiWidgets || {}; /** * Bar that adjusts the size of a static sprite based on a value. * This is done by masking the sprite and then resizing the mask. * @constructor * @param {Object} game - Current game instance. * @param {Object} xy - Dictionary with the values for the bar's x and y position. * @param {Object} values - The numerical values for the bar. * @param {boolean} vertical - Determines if the bar should be vertical or horizontal. * @param {boolean} reverse - Determines the direction the bar moves when adjusted. * @param {string} trackImage - The image key to use for the track. * @param {string} barImage - The image key to use for the bar. Will be automatically resized to fit. * @param {Object} tweenParams - Dictionary with the duration and easing function for the scrolling tween. */ uiWidgets.QuantityBar = function (game, xy, values, vertical, reverse, trackImage, barImage, tweenParams) { &quot;use strict&quot;; Phaser.Group.call(this, game); game.add.existing(this); this.game = game; this.x = xy.x; this.y = xy.y; this.valueRange = new uiWidgets.QuantityRange(this, values.startValue, values.maxValue); this.vertical = vertical || false; this.reverse = reverse || false; this.trackImage = trackImage; this.barImage = barImage; this.tweenParams = tweenParams || {&quot;duration&quot;: 300, &quot;ease&quot;: Phaser.Easing.Quadratic.Out}; // The track is the static area the bar will move along. this.track = this.game.add.sprite(0, 0, this.trackImage); this.add(this.track); // The bar is a static image taking up the width of the track. this.bar = this.game.add.button( 0, 0, this.barImage, this.moveContent, this, 1, 0 ); this.add(this.bar); this.create(); }; uiWidgets.QuantityBar.prototype = Object.create(uiWidgets.Bar.prototype); uiWidgets.QuantityBar.constructor = uiWidgets.QuantityBar; /** Sets the bar's mask. */ uiWidgets.QuantityBar.prototype.setMask = function () { &quot;use strict&quot;; if (this.bar.mask !== null) { this.bar.mask.destroy(); this.bar.mask = null; } var mask = this.game.add.graphics(this.maskX, this.maskY); mask.beginFill(0x0000ff); mask.drawRect(0, 0, this.maskW, this.maskH); //mask.endFill(); this.bar.mask = mask; this.add(mask); }; uiWidgets.QuantityBar.prototype.getBarPosition = function () { &quot;use strict&quot;; var windowPositionRatio = this.valueRange.getRatio() / this.windowScrollAreaSize; return this.trackScrollAreaSize * windowPositionRatio; }; uiWidgets.QuantityBar.prototype.create = function () { &quot;use strict&quot;; this.centerStaticAxis(); // Values for the bar's mask. this.maskW = this.bar.width; this.maskH = this.bar.height; this.maskX = this.bar.x; this.maskY = this.bar.y; // Resizes the bar. if (this.vertical) { this.maskH = this.getBarSize(); } else { this.maskW = this.getBarSize(); } if (this.reverse) { if (this.vertical) { this.maskY = this.getBarFraction(); } else { this.maskX = this.getBarFraction(); } } this.setMask(); // Determine the distance the window can scroll over this.windowScrollAreaSize = this.valueRange.maxValue; // Represents one fraction of the track. this.vslice = (this.track.height * this.valueRange.getRatio()); this.hslice = (this.track.width * this.valueRange.getRatio()); this.setTrackScrollAreaSize(); }; /** Creates the tween for adjusting the size of the mask. * @param {Object} properties - Values for the tween's movement. */ uiWidgets.QuantityBar.prototype.addScrollTweenMask = function (properties) { &quot;use strict&quot;; var newTween; newTween = this.game.add.tween(this.bar.mask).to( properties, this.tweenParams.duration, this.tweenParams.ease, true ); }; /** Adjusts the bar by a given value. * @param {number} newValue - The value to adjust the bar by. */ uiWidgets.QuantityBar.prototype.adjustBar = function (newValue) { &quot;use strict&quot;; this.valueRange.currentValue += newValue; var tween; var barSize = this.getBarSize(); if (this.reverse) { if (this.vertical) { tween = {height: barSize, y: this.getBarFraction()}; } else { tween = {width: barSize, x: this.getBarFraction()}; } } else { if (this.vertical) { tween = {height: barSize}; } else { tween = {width: barSize}; } } this.addScrollTweenMask(tween); }; uiWidgets.QuantityBar.prototype.getBarFraction = function () { &quot;use strict&quot;; var fraction; if (this.vertical) { fraction = this.track.height * this.valueRange.getRatio(); } else { fraction = this.track.width * this.valueRange.getRatio(); } return fraction; }; /** Given a ratio between total content size and viewport size, * return an appropriate percentage of the track. */ uiWidgets.QuantityBar.prototype.getBarSize = function () { &quot;use strict&quot;; var barSize; if (this.reverse) { if (this.vertical) { barSize = this.track.height - this.valueRange.getRatio(); } else { barSize = this.track.width - this.valueRange.getRatio(); } } else { barSize = this.getBarFraction(); } return barSize; }; × Search results Close "},"bars_ranges.js.html":{"id":"bars_ranges.js.html","title":"Source: bars/ranges.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: bars/ranges.js var uiWidgets = uiWidgets || {}; /** Used by a QuantityBar to hold the bar's values. * @constructor * @param {number} bar - The QuantityBar object that uses the range. * @param {number} startValue - The initial value for the bar. * @param {number} maxValue - The maximum value the bar can have. */ uiWidgets.QuantityRange = function (bar, startValue, maxValue) { &quot;use strict&quot;; this.bar = bar; this.startValue = startValue; this.maxValue = maxValue; this.currentValue = startValue; }; /** Returns the current ratio for how large the bar is compared to the track. */ uiWidgets.QuantityRange.prototype.getRatio = function () { &quot;use strict&quot;; var ratio = this.currentValue / this.maxValue; return ratio; }; /** Returns the bar's current value. */ uiWidgets.QuantityRange.prototype.getCurrentValue = function () { &quot;use strict&quot;; return this.currentValue; }; /** * Used by a ValueBar to hold the bar's values. * @constructor * @param {number} step - The amount the bar is changed by. * @param {number} startValue - The initial value for the bar. * @param {number} maxValue - The maximum value the bar can have. */ uiWidgets.ValueRange = function (step, startValue, maxValue) { &quot;use strict&quot;; this.step = step; this.startValue = startValue; this.maxValue = maxValue + step; this.ratio = step / maxValue; // The ratio between the step and max can't be greater than 1. // ie: There can't be more steps than the max value. if (this.ratio &gt; 1) { this.ratio = 1; } this.currentValue = startValue; // List of every possible step. Used for snapping into position by the ValueBar. this.steps = []; for (var i = 0; i &lt; this.maxValue; i += step) { this.steps.push(i); } }; /** Adjusts the current value for the bar. * @param {number} newValue - The new current value. */ uiWidgets.ValueRange.prototype.adjustValue = function (newValue) { &quot;use strict&quot;; this.currentValue = newValue; }; /** Returns the bar's current value. */ uiWidgets.ValueRange.prototype.getCurrentValue = function () { &quot;use strict&quot;; return this.currentValue; }; /** * Used by a Scrollbar to hold the values and adjust a viewport's position. * @constructor * @param {Object} viewport - The viewport to adjust. * @param {boolean} vertical - If the viewport is vertical or horizontal. */ uiWidgets.ViewportRange = function (viewport, vertical) { &quot;use strict&quot;; this.viewport = viewport; this.vertical = vertical; if (vertical) { this.step = viewport.area.height; this.maxValue = viewport.height; } else { this.step = viewport.area.width; this.maxValue = viewport.width; } this.ratio = this.step / this.maxValue; // The ratio between the step and max can't be greater than 1. // ie: There can't be more steps than the max value. if (this.ratio &gt; 1) { this.ratio = 1; } }; /** Adjusts the viewport's position. */ uiWidgets.ViewportRange.prototype.adjustValue = function (newValue) { &quot;use strict&quot;; // Set the content's new position. Uses an offset for where the viewport is on screen. if (this.vertical) { this.viewport.y = newValue + this.viewport.area.y; } else { this.viewport.x = newValue + this.viewport.area.x; } this.viewport.disableOutOfBounds(this.viewport.children, this, this.vertical); }; uiWidgets.ViewportRange.prototype.getCurrentValue = function () { &quot;use strict&quot;; var currentValue; if (this.vertical) { // y - an offset for where the viewport is on screen. currentValue = this.viewport.y - this.viewport.area.y; } else { currentValue = this.viewport.x - this.viewport.area.x; } return currentValue; }; × Search results Close "},"containers_row.js.html":{"id":"containers_row.js.html","title":"Source: containers/row.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: containers/row.js var uiWidgets = uiWidgets || {}; /** * Frame that places new child nodes directly next to the previous child. * @constructor * @param {Object} game - Current game instance. * @param {Object} context - The context this object is called in. */ uiWidgets.Row = function (game, x, y, bg) { &quot;use strict&quot;; uiWidgets.Frame.apply(this, arguments); }; uiWidgets.Row.prototype = Object.create(uiWidgets.Frame.prototype); uiWidgets.Row.constructor = uiWidgets.Row; /** Adds a new object into the Row, then aligns it next to the previous object. * @param {Object} node - The sprite to add to the row. * @param {Number} alignment - The alignment relative to the previous child. * @param {Number} padding - The amount of space between objects. */ uiWidgets.Row.prototype.addNode = function (node, alignment, padding) { &quot;use strict&quot;; alignment = alignment || Phaser.RIGHT_CENTER; padding = padding || 0; this.add(node); var previousNode = this.children[this.children.length - 2]; if (previousNode !== undefined) { node.alignTo(previousNode, alignment, padding); } // Reset the positions for the bar's draggable area. if (&quot;enableBarDrag&quot; in node) { node.enableBarDrag(); } }; × Search results Close "},"bars_scrollbar.js.html":{"id":"bars_scrollbar.js.html","title":"Source: bars/scrollbar.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: bars/scrollbar.js var uiWidgets = uiWidgets || {}; /** * A bar that moves along a track. The bar is resized relative to the size of the track and size of the content to be scrolled. * @constructor * @param {Object} game - Current game instance. * @param {Object} content - Anything that you want to move via the scrollbar. * @param {boolean} draggable - Determines if the scrollbar responds to mouse clicks. * @param {boolean} vertical - Determines if the scrollbar should be vertical or horizontal. * @param {string} trackImage - The image key to use for the track. * @param {string} barImage - The image key to use for the bar. Will be automatically resized to fit. * @param {Object} tweenParams - Dictionary with the duration and easing function for the scrolling tween. */ uiWidgets.Scrollbar = function (game, content, draggable, vertical, trackImage, barImage, tweenParams) { &quot;use strict&quot;; Phaser.Group.call(this, game); game.add.existing(this); this.game = game; this.content = content; this.valueRange = new uiWidgets.ViewportRange(content, vertical); this.vertical = vertical || false; this.draggable = draggable || false; this.trackImage = trackImage; this.barImage = barImage; // The smallest pixel size allowed for the bar. this.minBarSize = 44; this.tweenParams = tweenParams || {'duration': 300, 'ease': Phaser.Easing.Quadratic.Out}; // Flag switched on when the track is clicked, switched off after the bar movement is finished. this.trackClicked = false; this.barMoving = false; // Records mouse pointer when clicking the bar. this.mousePointer = null; // The track is the static area the bar will move along. this.track = this.game.add.sprite(0, 0, this.trackImage); this.add(this.track); if (this.draggable) { // If the bar is draggable, clicking the track will move the bar up or down. this.enableTrackClick(); } // The bar is the part that moves, controlling the value of the scrollbar. this.bar = this.game.add.button( this.x, this.y, this.barImage, this.moveContent, this, 1, 0 ); this.add(this.bar); this.resizeBar(); this.minY = this.track.y; this.maxY = this.track.y + this.track.height - this.bar.height; this.minX = this.track.x; this.maxX = this.track.x + this.track.width - this.bar.width; this.create(); /** * Dispatched when the bar is moved. * @property {Phaser.Signal} */ this.onMovement = new Phaser.Signal(); }; uiWidgets.Scrollbar.prototype = Object.create(uiWidgets.DraggableBar.prototype); uiWidgets.Scrollbar.constructor = uiWidgets.Scrollbar; /** Sets the draggable area of the bar. */ uiWidgets.Scrollbar.prototype.setDraggableArea = function () { &quot;use strict&quot;; this.verticalDraggableArea = { &quot;x&quot;: this.track.x - ((this.bar.width - this.track.width) / 2), &quot;y&quot;: this.track.y, &quot;w&quot;: this.bar.width, &quot;h&quot;: this.track.height }; this.horizontalDraggableArea = { &quot;x&quot;: this.track.x, &quot;y&quot;: this.track.y - ((this.bar.height - this.track.height) / 2), &quot;w&quot;: this.track.width, &quot;h&quot;: this.bar.height }; }; /** Given a ratio between total content size and viewport size, * resize the bar sprite to the appropriate percentage of the track. */ uiWidgets.Scrollbar.prototype.resizeBar = function () { &quot;use strict&quot;; var barSize; if (this.vertical) { barSize = this.track.height * this.valueRange.ratio; } else { barSize = this.track.width * this.valueRange.ratio; } // Prevents bar from becoming microscopic. if (barSize &lt; this.minBarSize) { barSize = this.minBarSize; } // Resizes the bar. if (this.vertical) { this.bar.height = barSize; } else { this.bar.width = barSize; } }; uiWidgets.Scrollbar.prototype.create = function () { &quot;use strict&quot;; this.centerStaticAxis(); if (this.draggable) { this.enableBarDrag(); } // Determine the distance the window can scroll over this.windowScrollAreaSize = this.valueRange.maxValue - this.valueRange.step; // Represents one fraction of the track. this.vslice = (this.track.height * this.valueRange.ratio); this.hslice = (this.track.width * this.valueRange.ratio); this.setTrackScrollAreaSize(); // Initial position for the bar. this.mousePointer = {&quot;x&quot;: this.bar.x, &quot;y&quot;: this.bar.y}; this.setInitialBarPosition(); }; /** Ensure the bar starts off where it should be, according to the bar's logical position. */ uiWidgets.Scrollbar.prototype.setInitialBarPosition = function () { &quot;use strict&quot;; var gripPositionOnTrack = this.getBarPosition(); // Make sure the bar is physically where it should be. if (this.vertical) { this.bar.y = gripPositionOnTrack + this.track.y; } else { this.bar.x = gripPositionOnTrack + this.track.x; } }; /** Creates the tween for moving the bar to a new position. */ uiWidgets.Scrollbar.prototype.addScrollTween = function (properties) { &quot;use strict&quot;; this.mousePointer = {&quot;x&quot;: this.bar.x, &quot;y&quot;: this.bar.y}; this.trackClicked = true; var newTween; newTween = this.game.add.tween(this.bar).to( properties, this.tweenParams.duration, this.tweenParams.ease, true ); this.addScrollTweenEvents(newTween); }; /** Called after a scroll tween is added. Adds the necessary events to the tween. */ uiWidgets.Scrollbar.prototype.addScrollTweenEvents = function (tween) { &quot;use strict&quot;; // Update the values as the bar moves. tween.onUpdateCallback(this.moveContent, this); tween.onComplete.add(this.enableBarInput, this); }; /** For Vertical Scrollbars. Scrolls up by one step. */ uiWidgets.Scrollbar.prototype.scrollUp = function () { &quot;use strict&quot;; // Prevents users from moving the bar while it's moving. if (this.bar.y !== this.track.y &amp;&amp; !this.barMoving) { var testPosition = this.bar.y - this.vslice; var moveToY = null; this.barMoving = true; // Ensure the bar can't move above the track. if (testPosition &lt;= this.track.y) { moveToY = this.minY; } else { moveToY = this.bar.y - this.vslice; } this.addScrollTween({y: moveToY}); } }; /** For Vertical Scrollbars. Scrolls down by one step. */ uiWidgets.Scrollbar.prototype.scrollDown = function () { &quot;use strict&quot;; if (this.bar.y + this.bar.height !== this.track.y + this.track.height &amp;&amp; !this.barMoving) { var testPosition = this.bar.y + (this.vslice * 2); var moveToY = null; this.barMoving = true; this.bar.inputEnabled = false; // Ensure the bar can't move below the track. if (testPosition &gt;= this.track.y + this.track.height) { moveToY = this.maxY; } else { moveToY = this.bar.y + this.vslice; } this.addScrollTween({y: moveToY}); } }; /** For Horizontal Scrollbars. Scrolls left by one step. */ uiWidgets.Scrollbar.prototype.scrollLeft = function () { &quot;use strict&quot;; if (this.bar.x !== this.track.x &amp;&amp; !this.barMoving) { var testPosition = this.bar.x - this.hslice; var moveToX = null; this.barMoving = true; this.bar.inputEnabled = false; // Ensure the bar can't move above the track. if (testPosition &lt;= this.track.x) { moveToX = this.minX; } else { moveToX = this.bar.x - this.hslice; } this.addScrollTween({x: moveToX}); } }; /** For Horizontal Scrollbars. Scrolls right by one step. */ uiWidgets.Scrollbar.prototype.scrollRight = function () { &quot;use strict&quot;; if (this.bar.x + this.bar.width !== this.track.x + this.track.width &amp;&amp; !this.barMoving) { var testPosition = this.bar.x + (this.hslice * 2); var moveToX = null; this.barMoving = true; this.bar.inputEnabled = false; // Ensure the bar can't move below the track. if (testPosition &gt;= this.track.x + this.track.width) { moveToX = this.maxX; } else { moveToX = this.bar.x + this.hslice; } this.addScrollTween({x: moveToX}); } }; uiWidgets.Scrollbar.prototype.saveMousePosition = function (sprite, pointer) { &quot;use strict&quot;; // When the bar is dragged, record where the mouse clicked down. this.mousePointer = {&quot;x&quot;: pointer.x, &quot;y&quot;: pointer.y}; }; uiWidgets.Scrollbar.prototype.getBarPosition = function () { &quot;use strict&quot;; var currentValue = this.valueRange.getCurrentValue(); var windowPositionRatio = currentValue / this.windowScrollAreaSize; return this.trackScrollAreaSize * windowPositionRatio; }; uiWidgets.Scrollbar.prototype.getMouseDelta = function () { &quot;use strict&quot;; var oldMousePosition, newMousePosition, newMousePointer, maxValue, mousePositionDelta; if (this.vertical) { oldMousePosition = this.mousePointer.y; } else { oldMousePosition = this.mousePointer.x; } // Only difference between clicking the track/using the keyboard vs mouse drag. if (this.trackClicked) { newMousePointer = {&quot;x&quot;: this.bar.x, &quot;y&quot;: this.bar.y}; } else { newMousePointer = {&quot;x&quot;: this.game.input.mousePointer.x, &quot;y&quot;: this.game.input.mousePointer.y}; } if (this.vertical) { newMousePosition = newMousePointer.y; } else { newMousePosition = newMousePointer.x; } this.mousePointer = newMousePointer; // Maximum value for the mouse position. Only update when the new position is inside the track. if (this.vertical) { maxValue = this.track.height + this.worldPosition.y; } else { maxValue = this.track.width + this.worldPosition.x; } if (newMousePosition &lt; maxValue) { mousePositionDelta = oldMousePosition - newMousePosition; } else { mousePositionDelta = 0; } return mousePositionDelta; }; uiWidgets.Scrollbar.prototype.getGripPositionRatio = function () { &quot;use strict&quot;; var gripPositionOnTrack = this.getBarPosition(); var mousePositionDelta = this.getMouseDelta(); var newGripPosition = gripPositionOnTrack + mousePositionDelta; // Don't let the content scroll above or below the track's size if (newGripPosition &gt; 0) { newGripPosition = 0; } else if (newGripPosition &lt;= -this.trackScrollAreaSize) { newGripPosition = -this.trackScrollAreaSize; } // When the scrollbar is at the top or bottom, prevent a mouse movement that // doesn't move the scrollbar from moving the content. if (this.vertical) { if (this.bar.y &lt;= this.track.y) { newGripPosition = 0; } else if (this.bar.y + this.bar.height &gt;= this.track.y + this.track.height) { newGripPosition = -this.trackScrollAreaSize; } } else { if (this.bar.x &lt;= this.track.x) { newGripPosition = 0; } else if (this.bar.x + this.bar.width &gt;= this.track.x + this.track.width) { newGripPosition = -this.trackScrollAreaSize; } } var newGripPositionRatio = newGripPosition / this.trackScrollAreaSize; // If the scrollable area is less than the size of the scrollbar, the bar and track will be the same size. // In this scenario, a divide by zero occurs. Capture that and turn it into zero. if (isNaN(newGripPositionRatio)) { newGripPositionRatio = 0; } return newGripPositionRatio; }; /** Called when the scrollbar needs to move the viewport. Causes the content to move relative to the bar's position on the track. */ uiWidgets.Scrollbar.prototype.moveContent = function () { &quot;use strict&quot;; var newGripPositionRatio = this.getGripPositionRatio(); var newContentPosition = newGripPositionRatio * this.windowScrollAreaSize; this.valueRange.adjustValue(newContentPosition); this.onMovement.dispatch(this); }; × Search results Close "},"buttons.js.html":{"id":"buttons.js.html","title":"Source: buttons.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: buttons.js var uiWidgets = uiWidgets || {}; /** * Sprite with text added as a child. * @constructor * @param {Object} game - Current game instance. * @param {string} image - The image to create a sprite with. * @param {string} label - The text to place on top of the sprite. * @param {Object} style - The style properties to be set on the Text. * @param {number} x - The x coordinate on screen where the textSprite will be placed. * @param {number} y - The y coordinate on screen where the textSprite will be placed. */ uiWidgets.textSprite = function (game, image, label, style, x, y) { &quot;use strict&quot;; Phaser.Sprite.call(this, game, x, y, image); game.add.existing(this); this.text = this.game.add.text(0, 0, label, style); this.text.anchor.set(0.5, 0.5); this.addChild(this.text); }; uiWidgets.textSprite.prototype = Object.create(Phaser.Sprite.prototype); uiWidgets.textSprite.constructor = uiWidgets.textSprite; /** * Phaser Button with text added as a child. * @constructor * @param {Object} game - Current game instance. * @param {string} image - The image to create a sprite with. * @param {string} label - The text to place on top of the sprite. * @param {Object} style - The style properties to be set on the Text. * @param {number} x - The x coordinate on screen where the textSprite will be placed. * @param {number} y - The y coordinate on screen where the textSprite will be placed. * @param {Object} callback - Callback to use when the button is clicked. * @param {Object} callbackContext - The context the callback is called in. */ uiWidgets.textButton = function (game, image, label, style, x, y, callback, callbackContext) { &quot;use strict&quot;; Phaser.Button.call(this, game, x, y, image, callback, callbackContext); game.add.existing(this); this.text = this.game.add.text(0, 0, label, style); this.text.anchor.set(0.5, 0.5); this.addChild(this.text); }; uiWidgets.textButton.prototype = Object.create(Phaser.Button.prototype); uiWidgets.textButton.constructor = uiWidgets.textButton; × Search results Close "},"utils.js.html":{"id":"utils.js.html","title":"Source: utils.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: utils.js var uiWidgets = uiWidgets || {}; uiWidgets.utils = {}; /** * A modulo operator that doesn't allow negative numbers. * @param divdend * @param divisor */ uiWidgets.utils.modulo = function(dividend, divisor) { &quot;use strict&quot;; return ((((dividend) % divisor) + divisor) % divisor); }; /** * Select an operator action using a string value */ uiWidgets.utils.operators = { &quot;+&quot;: function (a, b) { return a + b; }, &quot;-&quot;: function (a, b) { return a - b; } }; × Search results Close "},"bars_valuebar.js.html":{"id":"bars_valuebar.js.html","title":"Source: bars/valuebar.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: bars/valuebar.js var uiWidgets = uiWidgets || {}; /** * Bar that adjusts a number. * This is done by masking the sprite and then resizing the mask. * @constructor * @param {Object} game - Current game instance. * @param {Object} xy - Dictionary with the values for the bar's x and y position. * @param {Object} values - The numerical values for the bar. * @param {boolean} draggable - Determines if the scrollbar responds to mouse clicks. * @param {boolean} vertical - Determines if the bar should be vertical or horizontal. * @param {string} trackImage - The image key to use for the track. * @param {string} barImage - The image key to use for the bar. Will be automatically resized to fit. * @param {Object} tweenParams - Dictionary with the duration and easing function for the scrolling tween. */ uiWidgets.ValueBar = function (game, xy, values, draggable, vertical, trackImage, barImage, tweenParams) { &quot;use strict&quot;; Phaser.Group.call(this, game); game.add.existing(this); this.game = game; this.x = xy.x; this.y = xy.y; this.valueRange = new uiWidgets.ValueRange(values.step, values.startValue, values.maxValue); this.vertical = vertical || false; this.draggable = draggable || false; this.trackImage = trackImage; this.barImage = barImage; this.tweenParams = tweenParams || {&quot;duration&quot;: 300, &quot;ease&quot;: Phaser.Easing.Quadratic.Out}; // Flag switched on when the track is clicked, switched off after the bar movement is finished. this.trackClicked = false; this.barMoving = false; // Records mouse pointer when clicking the bar. this.mousePointer = null; // The track is the static area the bar will move along. this.track = this.game.add.sprite(0, 0, this.trackImage); this.add(this.track); // If the bar is draggable, clicking the track will move the bar up or down. if (this.draggable) { this.enableTrackClick(); } // The bar is the part that moves, controlling the value of the scrollbar. this.bar = this.game.add.button( this.x, this.y, this.barImage, this.moveContent, this, 1, 0 ); // Add an invisible background. This ensures the bar can always be entered correctly, no matter where the grip is. this.bg = this.game.add.graphics(0, 0); this.add(this.bg); this.sendToBack(this.bg); this.bg.beginFill(0xff0000, 0); if (this.vertical) { this.bg.drawRect(0, 0 - (this.bar.height / 2), 1, this.track.height + this.bar.height); } else { this.bg.drawRect(0 - (this.bar.width / 2), 0, this.track.width + this.bar.width, 1); } this.bg.endFill(); this.snapping = true; this.add(this.bar); this.minY = this.track.y - (this.bar.height / 2); this.maxY = this.track.y + this.track.height - (this.bar.height / 2); this.minX = this.track.x - (this.bar.width / 2); this.maxX = this.track.x + this.track.width - (this.bar.width / 2); this.create(); if (this.vertical) { this.upEvent = this.scrollUp; this.downEvent = this.scrollDown; } else { this.upEvent = this.scrollLeft; this.downEvent = this.scrollRight; } /** * Dispatched when the bar is moved. * @property {Phaser.Signal} */ this.onMovement = new Phaser.Signal(); }; uiWidgets.ValueBar.prototype = Object.create(uiWidgets.Scrollbar.prototype); uiWidgets.ValueBar.constructor = uiWidgets.ValueBar; /** Sets the draggable area of the bar. */ uiWidgets.ValueBar.prototype.setDraggableArea = function () { &quot;use strict&quot;; this.verticalDraggableArea = { &quot;x&quot;: this.track.x - ((this.bar.width - this.track.width) / 2), &quot;y&quot;: this.track.y - (this.bar.height / 2), &quot;w&quot;: this.bar.width, &quot;h&quot;: this.track.height + this.bar.height }; this.horizontalDraggableArea = { &quot;x&quot;: this.track.x - (this.bar.width / 2), &quot;y&quot;: this.track.y - ((this.bar.height - this.track.height) / 2), &quot;w&quot;: this.track.width + this.bar.width, &quot;h&quot;: this.bar.height }; }; /** Determine the distance the bar can scroll over */ uiWidgets.ValueBar.prototype.setTrackScrollAreaSize = function () { &quot;use strict&quot;; if (this.vertical) { this.trackScrollAreaSize = this.track.height; } else { this.trackScrollAreaSize = this.track.width; } }; /** Ensure the bar starts off where it should be, according to the bar's logical position. */ uiWidgets.ValueBar.prototype.setInitialBarPosition = function () { &quot;use strict&quot;; var gripPositionOnTrack = this.getBarPosition(); // The bar should always be in centered on it's current position. if (this.vertical) { this.bar.y = gripPositionOnTrack + this.track.y - (this.bar.height / 2); } else { this.bar.x = gripPositionOnTrack + this.track.x - (this.bar.width / 2); } }; /** Returns the closest valid value.*/ uiWidgets.ValueBar.prototype.getClosestPosition = function () { &quot;use strict&quot;; var currentValue = this.valueRange.getCurrentValue(); var diff = Math.abs(currentValue - this.valueRange.steps[0]); var closestPosition = this.valueRange.steps[0]; for (var i = 0; i &lt; this.valueRange.steps.length; i++) { var newdiff = Math.abs(currentValue - this.valueRange.steps[i]); if (newdiff &lt; diff) { diff = newdiff; closestPosition = this.valueRange.steps[i]; } } return closestPosition; }; /** On mouse up, forces the value to equal the closest step. */ uiWidgets.ValueBar.prototype.snapToClosestPosition = function () { &quot;use strict&quot;; var closestPosition = this.getClosestPosition(); this.valueRange.adjustValue(closestPosition); this.moveContent(); this.setInitialBarPosition(); }; /** Called after a scroll tween is added. Adds the necessary events to the tween. */ uiWidgets.ValueBar.prototype.addScrollTweenEvents = function (tween) { &quot;use strict&quot;; // Only update the values once the bar has finished moving. tween.onComplete.add(this.moveContent, this); tween.onComplete.add(this.enableBarInput, this); }; uiWidgets.ValueBar.prototype.getGripPositionRatio = function () { &quot;use strict&quot;; var gripPositionOnTrack = this.getBarPosition(); var mousePositionDelta = this.getMouseDelta(); var newGripPosition = gripPositionOnTrack - mousePositionDelta; // Don't let the content scroll above or below the track's size if (newGripPosition &lt; 0) { newGripPosition = 0; } else if (newGripPosition &gt;= this.trackScrollAreaSize) { newGripPosition = this.trackScrollAreaSize; } // When the scrollbar is at the top or bottom, prevent a mouse movement that // doesn't move the scrollbar from moving the content. if (this.vertical) { if (this.bar.y &lt;= this.track.y) { newGripPosition = 0; } else if (this.bar.y + this.bar.height &gt;= this.track.y + this.track.height) { newGripPosition = this.trackScrollAreaSize; } } else { if (this.bar.x &lt;= this.track.x) { newGripPosition = 0; } else if (this.bar.x + this.bar.width &gt;= this.track.x + this.track.width) { newGripPosition = this.trackScrollAreaSize; } } var newGripPositionRatio = newGripPosition / this.trackScrollAreaSize; // If the scrollable area is less than the size of the scrollbar, the bar and track will be the same size. // In this scenario, a divide by zero occurs. Capture that and turn it into zero. if (isNaN(newGripPositionRatio)) { newGripPositionRatio = 0; } return newGripPositionRatio; }; × Search results Close "},"containers_viewport.js.html":{"id":"containers_viewport.js.html","title":"Source: containers/viewport.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: containers/viewport.js var uiWidgets = uiWidgets || {}; /** * A container with a limited viewable area. Uses a mask to hide children outside of the specified x/y/width/height area. * Content outside the viewport has their input disabled. * @constructor * @param {Object} game - Current game instance. * @param {number} x - The x coordinate on screen where the viewport will be placed. * @param {number} y - The y coordinate on screen where the viewport will be placed. * @param {number} width - The width of the viewport. * @param {number} height - The height of the viewport. */ uiWidgets.Viewport = function (game, x, y, width, height) { &quot;use strict&quot;; Phaser.Group.call(this, game); game.add.existing(this); this.x = x; this.y = y; // Viewport size and position, distinct from the total window size. this.area = { &quot;x&quot;: x, &quot;y&quot;: y, &quot;width&quot;: width, &quot;height&quot;: height }; // Adding the mask attribute to a group hides objects outside the mask. this.mask = this.game.add.graphics(this.area.x, this.area.y); this.mask.beginFill(0x0000ff); this.mask.drawRect(0, 0, width, height); this.mask.endFill(); }; uiWidgets.Viewport.prototype = Object.create(Phaser.Group.prototype); uiWidgets.Viewport.constructor = uiWidgets.Viewport; /** Adds a new object into the Viewport. */ uiWidgets.Viewport.prototype.addNode = function (node) { &quot;use strict&quot;; this.add(node); }; /** Disable input for all objets outside the viewport's visible area. * Recursively checks all the object's children. * @param {Object} children - The objects to disable, if they're outside the viewport. * @param {Object} context - The context the function is run in. * @param {boolean} vertical - If the bounds should be checked horizontally or vertically. */ uiWidgets.Viewport.prototype.disableOutOfBounds = function (children, context, vertical) { &quot;use strict&quot;; var child, location, contentLocation, trueCoords; // Makes sure the recursive function stops when there's no children. if (children !== undefined) { for (var i = 0; i &lt; children.length; i++) { child = children[i]; child.inputEnabled = true; // An object's x/y is relative to it's parent. // The world gives an x/y relative to the whole game. trueCoords = child.world || child; if (vertical) { location = trueCoords.y; contentLocation = context.viewport.area.y; } else { location = trueCoords.x; contentLocation = context.viewport.area.x; } if (location &lt; contentLocation) { child.inputEnabled = false; } this.disableOutOfBounds(child.children, context, vertical); } } }; × Search results Close "},"wheel3D.js.html":{"id":"wheel3D.js.html","title":"Source: wheel3D.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: wheel3D.js var uiWidgets = uiWidgets || {}; /** * Represents a single point in a Wheel3D. * @ignore * @constructor * @param {number} x - The point's virtual x location. * @param {number} y - The point's virtual y location. * @param {number} z - The point's virtual z location. * @param {Object} sprite - The sprite associated with this point. * @param {number} position - The point's position on the Wheel3D. */ var VectorPoint = function (x, y, z, sprite, position) { &quot;use strict&quot;; this.x = x || 0; this.y = y || 0; this.z = z || 0; this.sprite = sprite || null; this.position = position || 0; }; VectorPoint.prototype = { getSinCosOfAngle: function (angle) { &quot;use strict&quot;; var rad = angle * Math.PI / 180, cosAngle = Math.cos(rad), sinAngle = Math.sin(rad); return {cosine: cosAngle, sine: sinAngle}; }, rotateY: function (angle) { &quot;use strict&quot;; var angles = this.getSinCosOfAngle(angle), z = this.z * angles.cosine - this.x * angles.sine, x = this.z * angles.sine + this.x * angles.cosine; return new VectorPoint(x, this.y, z); }, rotateX: function (angle) { &quot;use strict&quot;; var angles = this.getSinCosOfAngle(angle), y = this.y * angles.cosine - this.z * angles.sine, z = this.y * angles.sine + this.z * angles.cosine; return new VectorPoint(this.x, y, z); }, rotateZ: function (angle) { &quot;use strict&quot;; var angles = this.getSinCosOfAngle(angle), x = this.x * angles.cosine - this.y * angles.sine, y = this.x * angles.sine + this.y * angles.cosine; return new VectorPoint(x, y, this.z); }, /** Rotate the point along the given axis by the given angle. * @param {string} axis - The axis to rotate. * @param {number} angle - The angle to rotate by. */ rotate: function (axis, angle) { &quot;use strict&quot;; if (axis === &quot;x&quot;) { return this.rotateX(angle); } else if (axis === &quot;y&quot;) { return this.rotateY(angle); } else if (axis === &quot;z&quot;) { return this.rotateZ(angle); } }, /** Project the point to the correct physical location on screen. * z axis is not projected, because screens are 2D. */ project: function (width, height, factor) { &quot;use strict&quot;; var x = (this.x * factor) + width, y = (-this.y * factor) + height; return new VectorPoint(x, y, this.z); } }; /** * A Wheel of sprites where each item's position is projected in 3D space. * The number of points is automatically determined by the number of items. * @constructor * @param {Object} game - Reference to current game instance. * @param {array} sprites - List of sprites to use in the wheel. * @param {Number} firstPlace - Determines which position on the wheel is the active one. * @param {Number} zoom - Determines how far to project the points. * @param {String} axis - The axis the wheel3D places items around. * @param {Object} rotations - Axis and angle to rotate the entire wheel after the initial projection. * @param {Object} visibleRange - Determines which items on the wheel should be visible. If none provided, assumes all items should be visible. * @param {Object} tweenParams - Array with the duration and easing function for the movement tween. */ uiWidgets.Wheel3D = function (game, xy, sprites, firstPlace, zoom, axis, rotations, visibleRange, tweenParams) { &quot;use strict&quot;; this.game = game; this.xy = xy; this.sprites = sprites; this.firstPlace = firstPlace; this.zoom = zoom; this.axis = axis; this.rotationAxis = rotations; this.visibleRange = visibleRange || null; this.tweenParams = tweenParams || {&quot;duration&quot;: 300, &quot;ease&quot;: Phaser.Easing.Quadratic.Out}; // Signals this.onStart = new Phaser.Signal(); this.onComplete = new Phaser.Signal(); this.onBackComplete = new Phaser.Signal(); this.onForwardComplete = new Phaser.Signal(); // Group to store wheel sprites in, used for zindex sorting. this.group = this.game.add.group(); }; uiWidgets.Wheel3D.prototype = { activate: function () { &quot;use strict&quot;; var radius, slice, angle, radCos, radSin, nx, ny, nz, i; this.pointsAmount = this.sprites.length; this.totalPositions = this.pointsAmount - 1; this.rotationAmount = 360 / this.pointsAmount; // Determines which items in the wheel should be visible. if (this.visibleRange !== null) { var allPositions = []; for (i = 0; i &lt;= this.totalPositions; i++) { allPositions.push(i); } var maxV = allPositions.slice(0, this.visibleRange.max); var minV = allPositions.slice(this.visibleRange.min); this.visiblePositions = maxV.concat(minV); } // Prevents slamming down the move keys. this.moving = false; // Stores the direction the wheel is moving in. this.direction = null; // Set point positions on logical circle. this.wheelItems = []; radius = 1; slice = (2 * Math.PI) / this.pointsAmount; // For a vertical wheel, the X axis is -1. Points are laid out on the Y axis (height) and Z axis (depth). The wheel rotates around the X axis. // For a horizontal wheel, the Y Axis is -1. Points are laid out on the X axis (width) and Z axis (depth). The wheel rotates around the Y axis. // For flat circular wheel, the Z Axis is -1. Points are laid out on the X axis (width) and Y axis (height). The wheel rotates around the Z axis. for (i = 0; i &lt; this.pointsAmount; i++) { // Add sprite to group. this.sprites[i].wheelPosition = i; this.group.add(this.sprites[i]); angle = slice * i; radCos = radius * Math.cos(angle); radSin = radius * Math.sin(angle); if (this.axis === &quot;x&quot;) { nx = -1; ny = radCos; nz = radSin; } else if (this.axis === &quot;y&quot;) { nx = radCos; ny = -1; nz = radSin; } else if (this.axis === &quot;z&quot;) { nx = radCos; ny = radSin; nz = -1; } this.wheelItems.push(new VectorPoint(nx, ny, nz, this.sprites[i], i)); } // Active Point this.active = this.wheelItems[this.firstPlace].sprite; this.project(); }, /** Move the wheel backwards. */ moveBack: function () { &quot;use strict&quot;; if (this.moving === false) { this.moving = true; this.direction = 0; if (this.axis === &quot;x&quot; || this.axis === &quot;z&quot;) { this.rotationAxis[this.axis] += this.rotationAmount; } else { // y axis needs to go in the opposite direction. this.rotationAxis[this.axis] -= this.rotationAmount; } this.updatePosition(&quot;+&quot;); this.project(); this.resetAngle(); } }, /** Move the wheel forward. */ moveForward: function () { &quot;use strict&quot;; if (this.moving === false) { this.moving = true; this.direction = 1; if (this.axis === &quot;x&quot; || this.axis === &quot;z&quot;) { this.rotationAxis[this.axis] -= this.rotationAmount; } else { // y axis needs to go in the opposite direction. this.rotationAxis[this.axis] += this.rotationAmount; } this.updatePosition(&quot;-&quot;); this.project(); this.resetAngle(); } }, /** Project every item in the wheel to it's physical location. */ project: function () { &quot;use strict&quot;; var transformed, newTween; // Create a list with the axes, then remove the projected axis. var arr = [&quot;x&quot;, &quot;y&quot;, &quot;z&quot;]; var idx = arr.indexOf(this.axis); arr.splice(idx, 1); // We only need to call all this when moving. It doesn't need to be done // every update for (var i = 0; i &lt; this.wheelItems.length; i++) { // Rotate along the projected axis var rotationOne = this.wheelItems[i].rotate( this.axis, this.rotationAxis[this.axis] ); // Rotate the other 2 axes var rotationTwo = rotationOne.rotate(arr[0], this.rotationAxis[arr[0]]); var rotationThree = rotationTwo.rotate(arr[1], this.rotationAxis[arr[1]]); var p = rotationThree.project( this.xy.x, this.xy.y, this.zoom ); transformed = this.wheelItems[i].sprite; transformed.lz = p.z; // Ensure active sprite has no scale/alpha changes. if (this.wheelItems[i].position === this.firstPlace) { transformed.alpha = 1.0; this.active = this.wheelItems[i].sprite; } else { if (this.visibleRange !== null) { var includes = _.includes( this.visiblePositions, this.wheelItems[i].position ); if (includes) { transformed.alpha = 1.0; } else { transformed.alpha = 0.0; } } } // Tween to new position newTween = this.game.add.tween(transformed).to( {x: p.x, y: p.y}, this.tweenParams.duration, this.tweenParams.ease, true ); newTween.onComplete.add(this.enableMoving, this); } // Sort wheelItems by the projection's z axis for correct z-order when drawing. this.group.sort(&quot;lz&quot;, Phaser.Group.SORT_ASCENDING); // Wheel's signals are dispatched by the tween's. newTween.onStart.add(this.dispatchOnStart, this); newTween.onComplete.add(this.dispatchOnComplete, this); }, /** Called after movement starts. */ dispatchOnStart: function () { &quot;use strict&quot;; this.onStart.dispatch(this); }, /** Called after movement is finished. */ dispatchOnComplete: function () { &quot;use strict&quot;; if (this.direction === 0) { this.onBackComplete.dispatch(this); } else if (this.direction === 1) { this.onForwardComplete.dispatch(this); } this.onComplete.dispatch(this); }, /** Once the buttons have finished their move animation, allow them to move again. */ enableMoving: function () { &quot;use strict&quot;; this.moving = false; }, /** Move all the WheelItem's position by 1. */ updatePosition: function (operator) { &quot;use strict&quot;; var m; for (var i = 0; i &lt; this.wheelItems.length; i++) { var position = this.wheelItems[i].position; this.wheelItems[i].position = uiWidgets.utils.operators[operator](position, 1); m = uiWidgets.utils.modulo(this.wheelItems[i].position, this.pointsAmount); this.wheelItems[i].position = m; this.wheelItems[i].sprite.wheelPosition = m; } }, /** Make sure rotation can't go past 360 in either direction. */ resetAngle: function () { &quot;use strict&quot;; var angle = this.rotationAxis[this.axis]; if (angle === 360 || angle === -360 ) { this.rotationAxis[this.axis] = 0; } } }; × Search results Close "},"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Classes Classes Column Frame KeyboardGroup QuantityBar QuantityRange Row Scrollbar textButton textSprite ValueBar ValueRange Viewport ViewportRange Wheel3D × Search results Close "},"index.html":{"id":"index.html","title":"Index","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D × Search results Close "},"uiWidgets.Column.html":{"id":"uiWidgets.Column.html","title":"Class: Column","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Column Column new Column(game, context) Frame that places new child nodes directly under the previous child. Parameters: Name Type Description game Object Current game instance. context Object The context this object is called in. Source: containers/column.js, line 9 Methods addNode(node, alignment, padding) Adds a new object into the Column, then aligns it under the previous object. Parameters: Name Type Description node Object The sprite to add to the Column. alignment Number The alignment relative to the previous child. padding Number The amount of space between objects. Source: containers/column.js, line 22 × Search results Close "},"uiWidgets.Frame.html":{"id":"uiWidgets.Frame.html","title":"Class: Frame","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Frame Frame new Frame(game, context, bg) Group with a dedicated background image.Children added to the group will always be above the background image. Parameters: Name Type Description game Object Current game instance. context Object The context this object is called in. bg string The background image to use. Source: containers/frame.js, line 11 Methods addNode(node) Adds a new object to the Frame. Parameters: Name Type Description node Object The sprite to add to the Frame. Source: containers/frame.js, line 36 × Search results Close "},"uiWidgets.KeyboardGroup.html":{"id":"uiWidgets.KeyboardGroup.html","title":"Class: KeyboardGroup","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: KeyboardGroup KeyboardGroup new KeyboardGroup(game, vertical, callbackContext) Collection of sprites that can be selected with the keyboard.When the select key is hit, the sprite that was selected is now connected to the keyboard. Parameters: Name Type Description game Object Current game instance. vertical Boolean If the selection should be controlled with up/down or left/right arrow keys. callbackContext Object The context for the onPrevious and onNext Signals. Source: keyboard_group.js, line 10 Members onNext Dispatched when the selected child is set from the current child to the next child. Properties: Type Description Phaser.Signal Source: keyboard_group.js, line 39 onPrevious Dispatched when the selected child is set from the current child to the previous child. Properties: Type Description Phaser.Signal Source: keyboard_group.js, line 33 Methods addNode(newNode) Add a new child to the group Parameters: Name Type Description newNode Object The sprite to add to the group. Source: keyboard_group.js, line 49 nextItem() Selects the next child. Source: keyboard_group.js, line 75 prevItem() Selects the previous child. Source: keyboard_group.js, line 59 × Search results Close "},"uiWidgets.QuantityBar.html":{"id":"uiWidgets.QuantityBar.html","title":"Class: QuantityBar","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: QuantityBar QuantityBar new QuantityBar(game, xy, values, vertical, reverse, trackImage, barImage, tweenParams) Bar that adjusts the size of a static sprite based on a value.This is done by masking the sprite and then resizing the mask. Parameters: Name Type Description game Object Current game instance. xy Object Dictionary with the values for the bar's x and y position. values Object The numerical values for the bar. vertical boolean Determines if the bar should be vertical or horizontal. reverse boolean Determines the direction the bar moves when adjusted. trackImage string The image key to use for the track. barImage string The image key to use for the bar. Will be automatically resized to fit. tweenParams Object Dictionary with the duration and easing function for the scrolling tween. Source: bars/quantitybar.js, line 16 Methods addScrollTweenMask(properties) Creates the tween for adjusting the size of the mask. Parameters: Name Type Description properties Object Values for the tween's movement. Source: bars/quantitybar.js, line 122 adjustBar(newValue) Adjusts the bar by a given value. Parameters: Name Type Description newValue number The value to adjust the bar by. Source: bars/quantitybar.js, line 137 getBarSize() Given a ratio between total content size and viewport size,return an appropriate percentage of the track. Source: bars/quantitybar.js, line 177 setMask() Sets the bar's mask. Source: bars/quantitybar.js, line 58 × Search results Close "},"uiWidgets.QuantityRange.html":{"id":"uiWidgets.QuantityRange.html","title":"Class: QuantityRange","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: QuantityRange QuantityRange new QuantityRange(bar, startValue, maxValue) Used by a QuantityBar to hold the bar's values. Parameters: Name Type Description bar number The QuantityBar object that uses the range. startValue number The initial value for the bar. maxValue number The maximum value the bar can have. Source: bars/ranges.js, line 10 Methods getCurrentValue() Returns the bar's current value. Source: bars/ranges.js, line 28 getRatio() Returns the current ratio for how large the bar is compared to the track. Source: bars/ranges.js, line 21 × Search results Close "},"uiWidgets.Row.html":{"id":"uiWidgets.Row.html","title":"Class: Row","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Row Row new Row(game, context) Frame that places new child nodes directly next to the previous child. Parameters: Name Type Description game Object Current game instance. context Object The context this object is called in. Source: containers/row.js, line 9 Methods addNode(node, alignment, padding) Adds a new object into the Row, then aligns it next to the previous object. Parameters: Name Type Description node Object The sprite to add to the row. alignment Number The alignment relative to the previous child. padding Number The amount of space between objects. Source: containers/row.js, line 22 × Search results Close "},"uiWidgets.Scrollbar.html":{"id":"uiWidgets.Scrollbar.html","title":"Class: Scrollbar","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Scrollbar Scrollbar new Scrollbar(game, content, draggable, vertical, trackImage, barImage, tweenParams) A bar that moves along a track. The bar is resized relative to the size of the track and size of the content to be scrolled. Parameters: Name Type Description game Object Current game instance. content Object Anything that you want to move via the scrollbar. draggable boolean Determines if the scrollbar responds to mouse clicks. vertical boolean Determines if the scrollbar should be vertical or horizontal. trackImage string The image key to use for the track. barImage string The image key to use for the bar. Will be automatically resized to fit. tweenParams Object Dictionary with the duration and easing function for the scrolling tween. Source: bars/scrollbar.js, line 14 Members onMovement Dispatched when the bar is moved. Properties: Type Description Phaser.Signal Source: bars/scrollbar.js, line 76 Methods addScrollTween() Creates the tween for moving the bar to a new position. Source: bars/scrollbar.js, line 165 addScrollTweenEvents() Called after a scroll tween is added. Adds the necessary events to the tween. Source: bars/scrollbar.js, line 182 moveContent() Called when the scrollbar needs to move the viewport. Causes the content to move relative to the bar's position on the track. Source: bars/scrollbar.js, line 370 resizeBar() Given a ratio between total content size and viewport size,resize the bar sprite to the appropriate percentage of the track. Source: bars/scrollbar.js, line 103 scrollDown() For Vertical Scrollbars. Scrolls down by one step. Source: bars/scrollbar.js, line 210 scrollLeft() For Horizontal Scrollbars. Scrolls left by one step. Source: bars/scrollbar.js, line 230 scrollRight() For Horizontal Scrollbars. Scrolls right by one step. Source: bars/scrollbar.js, line 250 scrollUp() For Vertical Scrollbars. Scrolls up by one step. Source: bars/scrollbar.js, line 190 setDraggableArea() Sets the draggable area of the bar. Source: bars/scrollbar.js, line 83 setInitialBarPosition() Ensure the bar starts off where it should be, according to the bar's logical position. Source: bars/scrollbar.js, line 151 × Search results Close "},"uiWidgets.textButton.html":{"id":"uiWidgets.textButton.html","title":"Class: textButton","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: textButton textButton new textButton(game, image, label, style, x, y, callback, callbackContext) Phaser Button with text added as a child. Parameters: Name Type Description game Object Current game instance. image string The image to create a sprite with. label string The text to place on top of the sprite. style Object The style properties to be set on the Text. x number The x coordinate on screen where the textSprite will be placed. y number The y coordinate on screen where the textSprite will be placed. callback Object Callback to use when the button is clicked. callbackContext Object The context the callback is called in. Source: buttons.js, line 41 × Search results Close "},"uiWidgets.textSprite.html":{"id":"uiWidgets.textSprite.html","title":"Class: textSprite","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: textSprite textSprite new textSprite(game, image, label, style, x, y) Sprite with text added as a child. Parameters: Name Type Description game Object Current game instance. image string The image to create a sprite with. label string The text to place on top of the sprite. style Object The style properties to be set on the Text. x number The x coordinate on screen where the textSprite will be placed. y number The y coordinate on screen where the textSprite will be placed. Source: buttons.js, line 14 × Search results Close "},"uiWidgets.ValueBar.html":{"id":"uiWidgets.ValueBar.html","title":"Class: ValueBar","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: ValueBar ValueBar new ValueBar(game, xy, values, draggable, vertical, trackImage, barImage, tweenParams) Bar that adjusts a number.This is done by masking the sprite and then resizing the mask. Parameters: Name Type Description game Object Current game instance. xy Object Dictionary with the values for the bar's x and y position. values Object The numerical values for the bar. draggable boolean Determines if the scrollbar responds to mouse clicks. vertical boolean Determines if the bar should be vertical or horizontal. trackImage string The image key to use for the track. barImage string The image key to use for the bar. Will be automatically resized to fit. tweenParams Object Dictionary with the duration and easing function for the scrolling tween. Source: bars/valuebar.js, line 16 Members onMovement Dispatched when the bar is moved. Properties: Type Description Phaser.Signal Source: bars/valuebar.js, line 97 Methods addScrollTweenEvents() Called after a scroll tween is added. Adds the necessary events to the tween. Source: bars/valuebar.js, line 175 getClosestPosition() Returns the closest valid value. Source: bars/valuebar.js, line 146 setDraggableArea() Sets the draggable area of the bar. Source: bars/valuebar.js, line 104 setInitialBarPosition() Ensure the bar starts off where it should be, according to the bar's logical position. Source: bars/valuebar.js, line 132 setTrackScrollAreaSize() Determine the distance the bar can scroll over Source: bars/valuebar.js, line 122 snapToClosestPosition() On mouse up, forces the value to equal the closest step. Source: bars/valuebar.js, line 165 × Search results Close "},"uiWidgets.ValueRange.html":{"id":"uiWidgets.ValueRange.html","title":"Class: ValueRange","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: ValueRange ValueRange new ValueRange(step, startValue, maxValue) Used by a ValueBar to hold the bar's values. Parameters: Name Type Description step number The amount the bar is changed by. startValue number The initial value for the bar. maxValue number The maximum value the bar can have. Source: bars/ranges.js, line 41 Methods adjustValue(newValue) Adjusts the current value for the bar. Parameters: Name Type Description newValue number The new current value. Source: bars/ranges.js, line 69 getCurrentValue() Returns the bar's current value. Source: bars/ranges.js, line 76 × Search results Close "},"uiWidgets.Viewport.html":{"id":"uiWidgets.Viewport.html","title":"Class: Viewport","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Viewport Viewport new Viewport(game, x, y, width, height) A container with a limited viewable area. Uses a mask to hide children outside of the specified x/y/width/height area.Content outside the viewport has their input disabled. Parameters: Name Type Description game Object Current game instance. x number The x coordinate on screen where the viewport will be placed. y number The y coordinate on screen where the viewport will be placed. width number The width of the viewport. height number The height of the viewport. Source: containers/viewport.js, line 13 Methods addNode() Adds a new object into the Viewport. Source: containers/viewport.js, line 40 disableOutOfBounds(children, context, vertical) Disable input for all objets outside the viewport's visible area.Recursively checks all the object's children. Parameters: Name Type Description children Object The objects to disable, if they're outside the viewport. context Object The context the function is run in. vertical boolean If the bounds should be checked horizontally or vertically. Source: containers/viewport.js, line 52 × Search results Close "},"uiWidgets.ViewportRange.html":{"id":"uiWidgets.ViewportRange.html","title":"Class: ViewportRange","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: ViewportRange ViewportRange new ViewportRange(viewport, vertical) Used by a Scrollbar to hold the values and adjust a viewport's position. Parameters: Name Type Description viewport Object The viewport to adjust. vertical boolean If the viewport is vertical or horizontal. Source: bars/ranges.js, line 88 Methods adjustValue() Adjusts the viewport's position. Source: bars/ranges.js, line 111 × Search results Close "},"uiWidgets.Wheel3D.html":{"id":"uiWidgets.Wheel3D.html","title":"Class: Wheel3D","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Wheel3D Wheel3D new Wheel3D(game, sprites, firstPlace, zoom, axis, rotations, visibleRange, tweenParams) A Wheel of sprites where each item's position is projected in 3D space.The number of points is automatically determined by the number of items. Parameters: Name Type Description game Object Reference to current game instance. sprites array List of sprites to use in the wheel. firstPlace Number Determines which position on the wheel is the active one. zoom Number Determines how far to project the points. axis String The axis the wheel3D places items around. rotations Object Axis and angle to rotate the entire wheel after the initial projection. visibleRange Object Determines which items on the wheel should be visible. If none provided, assumes all items should be visible. tweenParams Object Array with the duration and easing function for the movement tween. Source: wheel3D.js, line 96 Methods dispatchOnComplete() Called after movement is finished. Source: wheel3D.js, line 315 dispatchOnStart() Called after movement starts. Source: wheel3D.js, line 309 enableMoving() Once the buttons have finished their move animation, allow them to move again. Source: wheel3D.js, line 327 moveBack() Move the wheel backwards. Source: wheel3D.js, line 196 moveForward() Move the wheel forward. Source: wheel3D.js, line 216 project() Project every item in the wheel to it's physical location. Source: wheel3D.js, line 236 resetAngle() Make sure rotation can't go past 360 in either direction. Source: wheel3D.js, line 348 updatePosition() Move all the WheelItem's position by 1. Source: wheel3D.js, line 333 × Search results Close "}}
+    {"bars_bar.js.html":{"id":"bars_bar.js.html","title":"Source: bars/bar.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: bars/bar.js var uiWidgets; uiWidgets = uiWidgets || {}; /** Base object for all Bars. */ uiWidgets.Bar = function () {}; uiWidgets.Bar.prototype = Object.create(Phaser.Group.prototype); uiWidgets.Bar.constructor = uiWidgets.Bar; /** Determine the distance the bar can scroll over. */ uiWidgets.Bar.prototype.setTrackScrollAreaSize = function () { &quot;use strict&quot;; if (this.vertical) { this.trackScrollAreaSize = this.track.height - this.vslice; } else { this.trackScrollAreaSize = this.track.width - this.hslice; } }; /** Sets position for the bar's non-moving axis. Centers it inside the track. */ uiWidgets.Bar.prototype.centerStaticAxis = function () { &quot;use strict&quot;; if (this.vertical) { this.bar.x = this.track.x + (this.track.width / 2) - (this.bar.width / 2); } else { this.bar.y = this.track.y + (this.track.height / 2) - (this.bar.height / 2); } }; /** Base object for Bars that can be dragged with a mouse. */ uiWidgets.DraggableBar = function () {}; uiWidgets.DraggableBar.prototype = Object.create(uiWidgets.Bar.prototype); uiWidgets.DraggableBar.constructor = uiWidgets.DraggableBar; /** If the vertical scrollbar is draggable, this function is called when the track is clicked. */ uiWidgets.DraggableBar.prototype.verticalTrackClick = function () { &quot;use strict&quot;; // Don't register mouse clicks on the bar itself. if (this.game.input.mousePointer.y &gt; this.bar.y + this.bar.height + this.worldPosition.y) { this.scrollDown(); } else if (this.game.input.mousePointer.y &lt; this.bar.y + this.worldPosition.y) { this.scrollUp(); } }; /** If the horizontal scrollbar is draggable, this function is called when the track is clicked. */ uiWidgets.DraggableBar.prototype.horizontalTrackClick = function () { &quot;use strict&quot;; // Don't register mouse clicks on the bar itself. if (this.game.input.mousePointer.x &gt; this.bar.x + this.bar.width + this.worldPosition.x) { this.scrollRight(); } else if (this.game.input.mousePointer.x &lt; (this.bar.x + this.worldPosition.x)) { this.scrollLeft(); } }; /** Allows the bar to scroll when the track is clicked directly. */ uiWidgets.DraggableBar.prototype.enableTrackClick = function () { &quot;use strict&quot;; var event; this.track.inputEnabled = true; if (this.vertical) { event = this.verticalTrackClick; } else { event = this.horizontalTrackClick; } this.track.events.onInputDown.add(event, this); }; /** When called, ensures the bar can be moved. Must be called once the bar has finished scrolling. */ uiWidgets.DraggableBar.prototype.enableBarInput = function () { &quot;use strict&quot;; this.trackClicked = false; this.barMoving = false; this.bar.inputEnabled = true; }; /** Enables clicking and dragging on the bar. */ uiWidgets.DraggableBar.prototype.enableBarDrag = function () { &quot;use strict&quot;; this.setDraggableArea(); this.bar.inputEnabled = true; this.bar.input.enableDrag(); if (this.snapping) { this.bar.events.onInputUp.add(this.snapToClosestPosition, this); } this.bar.events.onInputDown.add(this.saveMousePosition, this); this.bar.events.onDragUpdate.add(this.moveContent, this); var draggableArea; if (this.vertical) { this.bar.input.allowHorizontalDrag = false; draggableArea = this.verticalDraggableArea; } else { this.bar.input.allowVerticalDrag = false; draggableArea = this.horizontalDraggableArea; } this.bar.input.boundsRect = new Phaser.Rectangle( draggableArea.x, draggableArea.y, draggableArea.w, draggableArea.h) ; }; × Search results Close "},"containers_column.js.html":{"id":"containers_column.js.html","title":"Source: containers/column.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: containers/column.js var uiWidgets; uiWidgets = uiWidgets || {}; /** * Frame that places new child nodes directly under the previous child. * @constructor * @param {Object} game - Current game instance. * @param {Number} x - The x position of the Frame. * @param {Number} y - The y position of the Frame. * @param {string} bg - The background image to use. */ uiWidgets.Column = function (game, x, y, bg) { &quot;use strict&quot;; uiWidgets.Frame.apply(this, arguments); }; uiWidgets.Column.prototype = Object.create(uiWidgets.Frame.prototype); uiWidgets.Column.constructor = uiWidgets.Column; uiWidgets.Column.prototype.alignment = Phaser.BOTTOM_CENTER; × Search results Close "},"containers_frame.js.html":{"id":"containers_frame.js.html","title":"Source: containers/frame.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: containers/frame.js var uiWidgets; uiWidgets = uiWidgets || {}; /** * Group with a dedicated background image. * Children added to the group will always be above the background image. * @constructor * @param {Object} game - Current game instance. * @param {Number} x - The x position of the Frame. * @param {Number} y - The y position of the Frame. * @param {string} bg - The background image to use. */ uiWidgets.Frame = function (game, x, y, bg) { &quot;use strict&quot;; Phaser.Group.call(this, game); game.add.existing(this); this.x = x || 0; this.y = y || 0; this.game = game; this.bg = bg || null; // Add background to Frame. if (bg !== null) { var bgSprite = game.add.sprite(0, 0, bg); bgSprite.sendToBack(); bgSprite.alignIn(this, Phaser.TOP_LEFT); } }; uiWidgets.Frame.prototype = Object.create(Phaser.Group.prototype); uiWidgets.Frame.constructor = uiWidgets.Frame; /** Adds a new object into the Column, then aligns it under the previous object. * @param {Object} node - The sprite to add to the Column. * @param {Number} alignment - The alignment relative to the previous child. * @param {Number} padding_x - The amount of horizontal space between objects. * @param {Number} padding_y - The amount of vertical space between objects. */ uiWidgets.Frame.prototype.addNode = function (node, alignment, padding_x, padding_y) { &quot;use strict&quot;; alignment = alignment || this.alignment; padding_x = padding_x || 0; padding_y = padding_y || 0; this.add(node); var previousNode = this.children[this.children.length - 2]; if (previousNode !== undefined) { node.alignTo(previousNode, alignment, padding_x, padding_y); } // Reset the positions for the bar's draggable area. if (&quot;enableBarDrag&quot; in node) { node.enableBarDrag(); } }; × Search results Close "},"keyboard_group.js.html":{"id":"keyboard_group.js.html","title":"Source: keyboard_group.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: keyboard_group.js var uiWidgets; uiWidgets = uiWidgets || {}; /** Collection of sprites that can be selected with the keyboard. * When the select key is hit, the sprite that was selected is now connected to the keyboard. * @constructor * @param {Object} game - Current game instance. * @param {Boolean} vertical - If the selection should be controlled with up/down or left/right arrow keys. * @param {Object} callbackContext - The context for the onPrevious and onNext Signals. */ uiWidgets.KeyboardGroup = function (game, vertical, callbackContext) { &quot;use strict&quot;; this.game = game; this.vertical = vertical || false; this.callbackContext = callbackContext; this.children = []; this.selected = null; this.idx = 0; this.upKey = this.game.input.keyboard.addKey(Phaser.Keyboard.UP); this.downKey = this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN); this.leftKey = this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT); this.rightKey = this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT); this.upEvent = this.prevItem; this.downEvent = this.nextItem; /** * Dispatched when the selected child is set from the current child to the previous child. * @property {Phaser.Signal} */ this.onPrevious = new Phaser.Signal(); /** * Dispatched when the selected child is set from the current child to the next child. * @property {Phaser.Signal} */ this.onNext = new Phaser.Signal(); this.activateGroup(); }; uiWidgets.KeyboardGroup.constructor = uiWidgets.KeyboardGroup; /** Add a new child to the group * @param {Object} newNode - The sprite to add to the group. */ uiWidgets.KeyboardGroup.prototype.addNode = function (newNode) { &quot;use strict&quot;; this.children.push(newNode); // Ensure the first child is already selected when the game loads. this.selected = this.children[0]; this.useBar(); }; /** Selects the previous child. */ uiWidgets.KeyboardGroup.prototype.prevItem = function () { &quot;use strict&quot;; this.idx = this.idx - 1; if (this.idx &lt; 0) { this.idx = this.children.length - 1; } this.selected = this.children[this.idx]; this.useBar(); this.onPrevious.dispatch(this, this.callbackContext); }; /** Selects the next child. */ uiWidgets.KeyboardGroup.prototype.nextItem = function () { &quot;use strict&quot;; this.idx = (this.idx + 1) % (this.children.length); this.selected = this.children[this.idx]; this.useBar(); this.onNext.dispatch(this, this.callbackContext); }; /** * Enables keyboard input for the group. * @private */ uiWidgets.KeyboardGroup.prototype.activateGroup = function () { &quot;use strict&quot;; if (this.vertical) { this.upKey.onDown.add(this.upEvent, this); this.downKey.onDown.add(this.downEvent, this); } else { this.leftKey.onDown.add(this.upEvent, this); this.rightKey.onDown.add(this.downEvent, this); } }; /** * Enables keyboard input on a child. * @private */ uiWidgets.KeyboardGroup.prototype.useBar = function () { &quot;use strict&quot;; if (this.vertical) { this.leftKey.onDown.removeAll(); this.rightKey.onDown.removeAll(); this.leftKey.onDown.add(this.selected.upEvent, this.selected); this.rightKey.onDown.add(this.selected.downEvent, this.selected); } else { this.upKey.onDown.removeAll(); this.downKey.onDown.removeAll(); this.upKey.onDown.add(this.selected.upEvent, this.selected); this.downKey.onDown.add(this.selected.downEvent, this.selected); } }; × Search results Close "},"bars_quantitybar.js.html":{"id":"bars_quantitybar.js.html","title":"Source: bars/quantitybar.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: bars/quantitybar.js var uiWidgets; uiWidgets = uiWidgets || {}; /** * Bar that adjusts the size of a static sprite based on a value. * This is done by masking the sprite and then resizing the mask. * @constructor * @param {Object} game - Current game instance. * @param {Object} xy - Dictionary with the values for the bar's x and y position. * @param {Object} values - The numerical values for the bar. * @param {boolean} vertical - Determines if the bar should be vertical or horizontal. * @param {boolean} reverse - Determines the direction the bar moves when adjusted. * @param {string} trackImage - The image key to use for the track. * @param {string} barImage - The image key to use for the bar. Will be automatically resized to fit. * @param {Object} tweenParams - Dictionary with the duration and easing function for the scrolling tween. */ uiWidgets.QuantityBar = function (game, xy, values, vertical, reverse, trackImage, barImage, tweenParams) { &quot;use strict&quot;; Phaser.Group.call(this, game); game.add.existing(this); this.game = game; this.x = xy.x; this.y = xy.y; this.valueRange = new uiWidgets.QuantityRange(this, values.startValue, values.maxValue); this.vertical = vertical || false; this.reverse = reverse || false; this.trackImage = trackImage; this.barImage = barImage; this.tweenParams = tweenParams || {&quot;duration&quot;: 300, &quot;ease&quot;: Phaser.Easing.Quadratic.Out}; // The track is the static area the bar will move along. this.track = this.game.add.sprite(0, 0, this.trackImage); this.add(this.track); // The bar is a static image taking up the width of the track. this.bar = this.game.add.button( 0, 0, this.barImage, this.moveContent, this, 1, 0 ); this.add(this.bar); this.create(); }; uiWidgets.QuantityBar.prototype = Object.create(uiWidgets.Bar.prototype); uiWidgets.QuantityBar.constructor = uiWidgets.QuantityBar; /** Sets the bar's mask. */ uiWidgets.QuantityBar.prototype.setMask = function () { &quot;use strict&quot;; if (this.bar.mask !== null) { this.bar.mask.destroy(); this.bar.mask = null; } var mask = this.game.add.graphics(this.maskX, this.maskY); mask.beginFill(0x0000ff); mask.drawRect(0, 0, this.maskW, this.maskH); //mask.endFill(); this.bar.mask = mask; this.add(mask); }; uiWidgets.QuantityBar.prototype.getBarPosition = function () { &quot;use strict&quot;; var windowPositionRatio = this.valueRange.getRatio() / this.windowScrollAreaSize; return this.trackScrollAreaSize * windowPositionRatio; }; uiWidgets.QuantityBar.prototype.create = function () { &quot;use strict&quot;; this.centerStaticAxis(); // Values for the bar's mask. this.maskW = this.bar.width; this.maskH = this.bar.height; this.maskX = this.bar.x; this.maskY = this.bar.y; // Resizes the bar. if (this.vertical) { this.maskH = this.getBarSize(); } else { this.maskW = this.getBarSize(); } if (this.reverse) { if (this.vertical) { this.maskY = this.getBarFraction(); } else { this.maskX = this.getBarFraction(); } } this.setMask(); // Determine the distance the window can scroll over this.windowScrollAreaSize = this.valueRange.maxValue; // Represents one fraction of the track. this.vslice = (this.track.height * this.valueRange.getRatio()); this.hslice = (this.track.width * this.valueRange.getRatio()); this.setTrackScrollAreaSize(); }; /** Creates the tween for adjusting the size of the mask. * @param {Object} properties - Values for the tween's movement. */ uiWidgets.QuantityBar.prototype.addScrollTweenMask = function (properties) { &quot;use strict&quot;; var newTween; newTween = this.game.add.tween(this.bar.mask).to( properties, this.tweenParams.duration, this.tweenParams.ease, true ); }; /** Adjusts the bar by a given value. * @param {number} newValue - The value to adjust the bar by. */ uiWidgets.QuantityBar.prototype.adjustBar = function (newValue) { &quot;use strict&quot;; this.valueRange.currentValue += newValue; var tween; var barSize = this.getBarSize(); if (this.reverse) { if (this.vertical) { tween = {height: barSize, y: this.getBarFraction()}; } else { tween = {width: barSize, x: this.getBarFraction()}; } } else { if (this.vertical) { tween = {height: barSize}; } else { tween = {width: barSize}; } } this.addScrollTweenMask(tween); }; uiWidgets.QuantityBar.prototype.getBarFraction = function () { &quot;use strict&quot;; var fraction; if (this.vertical) { fraction = this.track.height * this.valueRange.getRatio(); } else { fraction = this.track.width * this.valueRange.getRatio(); } return fraction; }; /** Given a ratio between total content size and viewport size, * return an appropriate percentage of the track. */ uiWidgets.QuantityBar.prototype.getBarSize = function () { &quot;use strict&quot;; var barSize; if (this.reverse) { if (this.vertical) { barSize = this.track.height - this.valueRange.getRatio(); } else { barSize = this.track.width - this.valueRange.getRatio(); } } else { barSize = this.getBarFraction(); } return barSize; }; × Search results Close "},"bars_ranges.js.html":{"id":"bars_ranges.js.html","title":"Source: bars/ranges.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: bars/ranges.js var uiWidgets; uiWidgets = uiWidgets || {}; /** Used by a QuantityBar to hold the bar's values. * @constructor * @param {number} bar - The QuantityBar object that uses the range. * @param {number} startValue - The initial value for the bar. * @param {number} maxValue - The maximum value the bar can have. */ uiWidgets.QuantityRange = function (bar, startValue, maxValue) { &quot;use strict&quot;; this.bar = bar; this.startValue = startValue; this.maxValue = maxValue; this.currentValue = startValue; }; /** Returns the current ratio for how large the bar is compared to the track. */ uiWidgets.QuantityRange.prototype.getRatio = function () { &quot;use strict&quot;; var ratio = this.currentValue / this.maxValue; return ratio; }; /** Returns the bar's current value. */ uiWidgets.QuantityRange.prototype.getCurrentValue = function () { &quot;use strict&quot;; return this.currentValue; }; /** * Used by a ValueBar to hold the bar's values. * @constructor * @param {number} step - The amount the bar is changed by. * @param {number} startValue - The initial value for the bar. * @param {number} maxValue - The maximum value the bar can have. */ uiWidgets.ValueRange = function (step, startValue, maxValue) { &quot;use strict&quot;; this.step = step; this.startValue = startValue; this.maxValue = maxValue + step; this.ratio = step / maxValue; // The ratio between the step and max can't be greater than 1. // ie: There can't be more steps than the max value. if (this.ratio &gt; 1) { this.ratio = 1; } this.currentValue = startValue; // List of every possible step. Used for snapping into position by the ValueBar. this.steps = []; for (var i = 0; i &lt; this.maxValue; i += step) { this.steps.push(i); } }; /** Adjusts the current value for the bar. * @param {number} newValue - The new current value. */ uiWidgets.ValueRange.prototype.adjustValue = function (newValue) { &quot;use strict&quot;; this.currentValue = newValue; }; /** Returns the bar's current value. */ uiWidgets.ValueRange.prototype.getCurrentValue = function () { &quot;use strict&quot;; return this.currentValue; }; /** * Used by a Scrollbar to hold the values and adjust a viewport's position. * @constructor * @param {Object} viewport - The viewport to adjust. * @param {boolean} vertical - If the viewport is vertical or horizontal. */ uiWidgets.ViewportRange = function (viewport, vertical) { &quot;use strict&quot;; this.viewport = viewport; this.vertical = vertical; if (vertical) { this.step = viewport.area.height; this.maxValue = viewport.height; } else { this.step = viewport.area.width; this.maxValue = viewport.width; } this.ratio = this.step / this.maxValue; // The ratio between the step and max can't be greater than 1. // ie: There can't be more steps than the max value. if (this.ratio &gt; 1) { this.ratio = 1; } }; /** Adjusts the viewport's position. */ uiWidgets.ViewportRange.prototype.adjustValue = function (newValue) { &quot;use strict&quot;; // Set the content's new position. Uses an offset for where the viewport is on screen. if (this.vertical) { this.viewport.y = newValue + this.viewport.area.y; } else { this.viewport.x = newValue + this.viewport.area.x; } this.viewport.disableOutOfBounds(this.viewport.children, this, this.vertical); }; uiWidgets.ViewportRange.prototype.getCurrentValue = function () { &quot;use strict&quot;; var currentValue; if (this.vertical) { // y - an offset for where the viewport is on screen. currentValue = this.viewport.y - this.viewport.area.y; } else { currentValue = this.viewport.x - this.viewport.area.x; } return currentValue; }; × Search results Close "},"containers_row.js.html":{"id":"containers_row.js.html","title":"Source: containers/row.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: containers/row.js var uiWidgets; uiWidgets = uiWidgets || {}; /** * Frame that places new child nodes directly next to the previous child. * @constructor * @param {Object} game - Current game instance. * @param {Number} x - The x position of the Frame. * @param {Number} y - The y position of the Frame. * @param {string} bg - The background image to use. */ uiWidgets.Row = function (game, x, y, bg) { &quot;use strict&quot;; uiWidgets.Frame.apply(this, arguments); }; uiWidgets.Row.prototype = Object.create(uiWidgets.Frame.prototype); uiWidgets.Row.constructor = uiWidgets.Row; uiWidgets.Row.prototype.alignment = Phaser.RIGHT_CENTER; × Search results Close "},"bars_scrollbar.js.html":{"id":"bars_scrollbar.js.html","title":"Source: bars/scrollbar.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: bars/scrollbar.js var uiWidgets; uiWidgets = uiWidgets || {}; /** * A bar that moves along a track. The bar is resized relative to the size of the track and size of the content to be scrolled. * @constructor * @param {Object} game - Current game instance. * @param {Object} content - Anything that you want to move via the scrollbar. * @param {boolean} draggable - Determines if the scrollbar responds to mouse clicks. * @param {boolean} vertical - Determines if the scrollbar should be vertical or horizontal. * @param {string} trackImage - The image key to use for the track. * @param {string} barImage - The image key to use for the bar. Will be automatically resized to fit. * @param {Object} tweenParams - Dictionary with the duration and easing function for the scrolling tween. */ uiWidgets.Scrollbar = function (game, content, draggable, vertical, trackImage, barImage, tweenParams) { &quot;use strict&quot;; Phaser.Group.call(this, game); game.add.existing(this); this.game = game; this.content = content; this.valueRange = new uiWidgets.ViewportRange(content, vertical); this.vertical = vertical || false; this.draggable = draggable || false; this.trackImage = trackImage; this.barImage = barImage; // The smallest pixel size allowed for the bar. this.minBarSize = 44; this.tweenParams = tweenParams || {&quot;duration&quot;: 300, &quot;ease&quot;: Phaser.Easing.Quadratic.Out}; // Flag switched on when the track is clicked, switched off after the bar movement is finished. this.trackClicked = false; this.barMoving = false; // Records mouse pointer when clicking the bar. this.mousePointer = null; // The track is the static area the bar will move along. this.track = this.game.add.sprite(0, 0, this.trackImage); this.add(this.track); if (this.draggable) { // If the bar is draggable, clicking the track will move the bar up or down. this.enableTrackClick(); } // The bar is the part that moves, controlling the value of the scrollbar. this.bar = this.game.add.button( this.x, this.y, this.barImage, this.moveContent, this, 1, 0 ); this.add(this.bar); this.resizeBar(); this.minY = this.track.y; this.maxY = this.track.y + this.track.height - this.bar.height; this.minX = this.track.x; this.maxX = this.track.x + this.track.width - this.bar.width; this.create(); /** * Dispatched when the bar is moved. * @property {Phaser.Signal} */ this.onMovement = new Phaser.Signal(); }; uiWidgets.Scrollbar.prototype = Object.create(uiWidgets.DraggableBar.prototype); uiWidgets.Scrollbar.constructor = uiWidgets.Scrollbar; /** Sets the draggable area of the bar. */ uiWidgets.Scrollbar.prototype.setDraggableArea = function () { &quot;use strict&quot;; this.verticalDraggableArea = { &quot;x&quot;: this.track.x - ((this.bar.width - this.track.width) / 2), &quot;y&quot;: this.track.y, &quot;w&quot;: this.bar.width, &quot;h&quot;: this.track.height }; this.horizontalDraggableArea = { &quot;x&quot;: this.track.x, &quot;y&quot;: this.track.y - ((this.bar.height - this.track.height) / 2), &quot;w&quot;: this.track.width, &quot;h&quot;: this.bar.height }; }; /** Given a ratio between total content size and viewport size, * resize the bar sprite to the appropriate percentage of the track. */ uiWidgets.Scrollbar.prototype.resizeBar = function () { &quot;use strict&quot;; var barSize; if (this.vertical) { barSize = this.track.height * this.valueRange.ratio; } else { barSize = this.track.width * this.valueRange.ratio; } // Prevents bar from becoming microscopic. if (barSize &lt; this.minBarSize) { barSize = this.minBarSize; } // Resizes the bar. if (this.vertical) { this.bar.height = barSize; } else { this.bar.width = barSize; } }; uiWidgets.Scrollbar.prototype.create = function () { &quot;use strict&quot;; this.centerStaticAxis(); if (this.draggable) { this.enableBarDrag(); } // Determine the distance the window can scroll over this.windowScrollAreaSize = this.valueRange.maxValue - this.valueRange.step; // Represents one fraction of the track. this.vslice = (this.track.height * this.valueRange.ratio); this.hslice = (this.track.width * this.valueRange.ratio); this.setTrackScrollAreaSize(); // Initial position for the bar. this.mousePointer = {&quot;x&quot;: this.bar.x, &quot;y&quot;: this.bar.y}; this.setInitialBarPosition(); }; /** Ensure the bar starts off where it should be, according to the bar's logical position. */ uiWidgets.Scrollbar.prototype.setInitialBarPosition = function () { &quot;use strict&quot;; var gripPositionOnTrack = this.getBarPosition(); // Make sure the bar is physically where it should be. if (this.vertical) { this.bar.y = gripPositionOnTrack + this.track.y; } else { this.bar.x = gripPositionOnTrack + this.track.x; } }; /** Creates the tween for moving the bar to a new position. */ uiWidgets.Scrollbar.prototype.addScrollTween = function (properties) { &quot;use strict&quot;; this.mousePointer = {&quot;x&quot;: this.bar.x, &quot;y&quot;: this.bar.y}; this.trackClicked = true; var newTween; newTween = this.game.add.tween(this.bar).to( properties, this.tweenParams.duration, this.tweenParams.ease, true ); this.addScrollTweenEvents(newTween); }; /** Called after a scroll tween is added. Adds the necessary events to the tween. */ uiWidgets.Scrollbar.prototype.addScrollTweenEvents = function (tween) { &quot;use strict&quot;; // Update the values as the bar moves. tween.onUpdateCallback(this.moveContent, this); tween.onComplete.add(this.enableBarInput, this); }; /** For Vertical Scrollbars. Scrolls up by one step. */ uiWidgets.Scrollbar.prototype.scrollUp = function () { &quot;use strict&quot;; // Prevents users from moving the bar while it's moving. if (this.bar.y !== this.track.y &amp;&amp; !this.barMoving) { var testPosition = this.bar.y - this.vslice; var moveToY = null; this.barMoving = true; // Ensure the bar can't move above the track. if (testPosition &lt;= this.track.y) { moveToY = this.minY; } else { moveToY = this.bar.y - this.vslice; } this.addScrollTween({y: moveToY}); } }; /** For Vertical Scrollbars. Scrolls down by one step. */ uiWidgets.Scrollbar.prototype.scrollDown = function () { &quot;use strict&quot;; if (this.bar.y + this.bar.height !== this.track.y + this.track.height &amp;&amp; !this.barMoving) { var testPosition = this.bar.y + (this.vslice * 2); var moveToY = null; this.barMoving = true; this.bar.inputEnabled = false; // Ensure the bar can't move below the track. if (testPosition &gt;= this.track.y + this.track.height) { moveToY = this.maxY; } else { moveToY = this.bar.y + this.vslice; } this.addScrollTween({y: moveToY}); } }; /** For Horizontal Scrollbars. Scrolls left by one step. */ uiWidgets.Scrollbar.prototype.scrollLeft = function () { &quot;use strict&quot;; if (this.bar.x !== this.track.x &amp;&amp; !this.barMoving) { var testPosition = this.bar.x - this.hslice; var moveToX = null; this.barMoving = true; this.bar.inputEnabled = false; // Ensure the bar can't move above the track. if (testPosition &lt;= this.track.x) { moveToX = this.minX; } else { moveToX = this.bar.x - this.hslice; } this.addScrollTween({x: moveToX}); } }; /** For Horizontal Scrollbars. Scrolls right by one step. */ uiWidgets.Scrollbar.prototype.scrollRight = function () { &quot;use strict&quot;; if (this.bar.x + this.bar.width !== this.track.x + this.track.width &amp;&amp; !this.barMoving) { var testPosition = this.bar.x + (this.hslice * 2); var moveToX = null; this.barMoving = true; this.bar.inputEnabled = false; // Ensure the bar can't move below the track. if (testPosition &gt;= this.track.x + this.track.width) { moveToX = this.maxX; } else { moveToX = this.bar.x + this.hslice; } this.addScrollTween({x: moveToX}); } }; uiWidgets.Scrollbar.prototype.saveMousePosition = function (sprite, pointer) { &quot;use strict&quot;; // When the bar is dragged, record where the mouse clicked down. this.mousePointer = {&quot;x&quot;: pointer.x, &quot;y&quot;: pointer.y}; }; uiWidgets.Scrollbar.prototype.getBarPosition = function () { &quot;use strict&quot;; var currentValue = this.valueRange.getCurrentValue(); var windowPositionRatio = currentValue / this.windowScrollAreaSize; return this.trackScrollAreaSize * windowPositionRatio; }; uiWidgets.Scrollbar.prototype.getMouseDelta = function () { &quot;use strict&quot;; var oldMousePosition, newMousePosition, newMousePointer, maxValue, mousePositionDelta; if (this.vertical) { oldMousePosition = this.mousePointer.y; } else { oldMousePosition = this.mousePointer.x; } // Only difference between clicking the track/using the keyboard vs mouse drag. if (this.trackClicked) { newMousePointer = {&quot;x&quot;: this.bar.x, &quot;y&quot;: this.bar.y}; } else { newMousePointer = {&quot;x&quot;: this.game.input.mousePointer.x, &quot;y&quot;: this.game.input.mousePointer.y}; } if (this.vertical) { newMousePosition = newMousePointer.y; } else { newMousePosition = newMousePointer.x; } this.mousePointer = newMousePointer; // Maximum value for the mouse position. Only update when the new position is inside the track. if (this.vertical) { maxValue = this.track.height + this.worldPosition.y; } else { maxValue = this.track.width + this.worldPosition.x; } if (newMousePosition &lt; maxValue) { mousePositionDelta = oldMousePosition - newMousePosition; } else { mousePositionDelta = 0; } return mousePositionDelta; }; uiWidgets.Scrollbar.prototype.getGripPositionRatio = function () { &quot;use strict&quot;; var gripPositionOnTrack = this.getBarPosition(); var mousePositionDelta = this.getMouseDelta(); var newGripPosition = gripPositionOnTrack + mousePositionDelta; // Don't let the content scroll above or below the track's size if (newGripPosition &gt; 0) { newGripPosition = 0; } else if (newGripPosition &lt;= -this.trackScrollAreaSize) { newGripPosition = -this.trackScrollAreaSize; } // When the scrollbar is at the top or bottom, prevent a mouse movement that // doesn't move the scrollbar from moving the content. if (this.vertical) { if (this.bar.y &lt;= this.track.y) { newGripPosition = 0; } else if (this.bar.y + this.bar.height &gt;= this.track.y + this.track.height) { newGripPosition = -this.trackScrollAreaSize; } } else { if (this.bar.x &lt;= this.track.x) { newGripPosition = 0; } else if (this.bar.x + this.bar.width &gt;= this.track.x + this.track.width) { newGripPosition = -this.trackScrollAreaSize; } } var newGripPositionRatio = newGripPosition / this.trackScrollAreaSize; // If the scrollable area is less than the size of the scrollbar, the bar and track will be the same size. // In this scenario, a divide by zero occurs. Capture that and turn it into zero. if (isNaN(newGripPositionRatio)) { newGripPositionRatio = 0; } return newGripPositionRatio; }; /** Called when the scrollbar needs to move the viewport. Causes the content to move relative to the bar's position on the track. */ uiWidgets.Scrollbar.prototype.moveContent = function () { &quot;use strict&quot;; var newGripPositionRatio = this.getGripPositionRatio(); var newContentPosition = newGripPositionRatio * this.windowScrollAreaSize; this.valueRange.adjustValue(newContentPosition); this.onMovement.dispatch(this); }; × Search results Close "},"buttons.js.html":{"id":"buttons.js.html","title":"Source: buttons.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: buttons.js var uiWidgets; uiWidgets = uiWidgets || {}; /** * Sprite with text added as a child. * @constructor * @param {Object} game - Current game instance. * @param {string} image - The image to create a sprite with. * @param {string} label - The text to place on top of the sprite. * @param {Object} style - The style properties to be set on the Text. * @param {number} x - The x coordinate on screen where the textSprite will be placed. * @param {number} y - The y coordinate on screen where the textSprite will be placed. */ uiWidgets.textSprite = function (game, image, label, style, x, y) { &quot;use strict&quot;; Phaser.Sprite.call(this, game, x, y, image); game.add.existing(this); this.text = this.game.add.text(0, 0, label, style); this.text.anchor.set(0.5, 0.5); this.addChild(this.text); }; uiWidgets.textSprite.prototype = Object.create(Phaser.Sprite.prototype); uiWidgets.textSprite.constructor = uiWidgets.textSprite; /** * Phaser Button with text added as a child. * @constructor * @param {Object} game - Current game instance. * @param {string} image - The image to create a sprite with. * @param {string} label - The text to place on top of the sprite. * @param {Object} style - The style properties to be set on the Text. * @param {number} x - The x coordinate on screen where the textSprite will be placed. * @param {number} y - The y coordinate on screen where the textSprite will be placed. * @param {Object} callback - Callback to use when the button is clicked. * @param {Object} callbackContext - The context the callback is called in. */ uiWidgets.textButton = function (game, image, label, style, x, y, callback, callbackContext) { &quot;use strict&quot;; Phaser.Button.call(this, game, x, y, image, callback, callbackContext); game.add.existing(this); this.text = this.game.add.text(0, 0, label, style); this.text.anchor.set(0.5, 0.5); this.addChild(this.text); }; uiWidgets.textButton.prototype = Object.create(Phaser.Button.prototype); uiWidgets.textButton.constructor = uiWidgets.textButton; × Search results Close "},"utils.js.html":{"id":"utils.js.html","title":"Source: utils.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: utils.js var uiWidgets; uiWidgets = uiWidgets || {}; uiWidgets.utils = {}; /** * A modulo operator that doesn't allow negative numbers. * @param divdend * @param divisor */ uiWidgets.utils.modulo = function(dividend, divisor) { &quot;use strict&quot;; return ((((dividend) % divisor) + divisor) % divisor); }; /** * Select an operator action using a string value */ uiWidgets.utils.operators = { &quot;+&quot;: function (a, b) { return a + b; }, &quot;-&quot;: function (a, b) { return a - b; } }; × Search results Close "},"bars_valuebar.js.html":{"id":"bars_valuebar.js.html","title":"Source: bars/valuebar.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: bars/valuebar.js var uiWidgets; uiWidgets = uiWidgets || {}; /** * Bar that adjusts a number. * This is done by masking the sprite and then resizing the mask. * @constructor * @param {Object} game - Current game instance. * @param {Object} xy - Dictionary with the values for the bar's x and y position. * @param {Object} values - The numerical values for the bar. * @param {boolean} draggable - Determines if the scrollbar responds to mouse clicks. * @param {boolean} vertical - Determines if the bar should be vertical or horizontal. * @param {string} trackImage - The image key to use for the track. * @param {string} barImage - The image key to use for the bar. Will be automatically resized to fit. * @param {Object} tweenParams - Dictionary with the duration and easing function for the scrolling tween. */ uiWidgets.ValueBar = function (game, xy, values, draggable, vertical, trackImage, barImage, tweenParams) { &quot;use strict&quot;; Phaser.Group.call(this, game); game.add.existing(this); this.game = game; this.x = xy.x; this.y = xy.y; this.valueRange = new uiWidgets.ValueRange(values.step, values.startValue, values.maxValue); this.vertical = vertical || false; this.draggable = draggable || false; this.trackImage = trackImage; this.barImage = barImage; this.tweenParams = tweenParams || {&quot;duration&quot;: 300, &quot;ease&quot;: Phaser.Easing.Quadratic.Out}; // Flag switched on when the track is clicked, switched off after the bar movement is finished. this.trackClicked = false; this.barMoving = false; // Records mouse pointer when clicking the bar. this.mousePointer = null; // The track is the static area the bar will move along. this.track = this.game.add.sprite(0, 0, this.trackImage); this.add(this.track); // If the bar is draggable, clicking the track will move the bar up or down. if (this.draggable) { this.enableTrackClick(); } // The bar is the part that moves, controlling the value of the scrollbar. this.bar = this.game.add.button( this.x, this.y, this.barImage, this.moveContent, this, 1, 0 ); // Add an invisible background. This ensures the bar can always be entered correctly, no matter where the grip is. this.bg = this.game.add.graphics(0, 0); this.add(this.bg); this.sendToBack(this.bg); this.bg.beginFill(0xff0000, 0); if (this.vertical) { this.bg.drawRect(0, 0 - (this.bar.height / 2), 1, this.track.height + this.bar.height); } else { this.bg.drawRect(0 - (this.bar.width / 2), 0, this.track.width + this.bar.width, 1); } this.bg.endFill(); this.snapping = true; this.add(this.bar); this.minY = this.track.y - (this.bar.height / 2); this.maxY = this.track.y + this.track.height - (this.bar.height / 2); this.minX = this.track.x - (this.bar.width / 2); this.maxX = this.track.x + this.track.width - (this.bar.width / 2); this.create(); if (this.vertical) { this.upEvent = this.scrollUp; this.downEvent = this.scrollDown; } else { this.upEvent = this.scrollLeft; this.downEvent = this.scrollRight; } /** * Dispatched when the bar is moved. * @property {Phaser.Signal} */ this.onMovement = new Phaser.Signal(); }; uiWidgets.ValueBar.prototype = Object.create(uiWidgets.Scrollbar.prototype); uiWidgets.ValueBar.constructor = uiWidgets.ValueBar; /** Sets the draggable area of the bar. */ uiWidgets.ValueBar.prototype.setDraggableArea = function () { &quot;use strict&quot;; this.verticalDraggableArea = { &quot;x&quot;: this.track.x - ((this.bar.width - this.track.width) / 2), &quot;y&quot;: this.track.y - (this.bar.height / 2), &quot;w&quot;: this.bar.width, &quot;h&quot;: this.track.height + this.bar.height }; this.horizontalDraggableArea = { &quot;x&quot;: this.track.x - (this.bar.width / 2), &quot;y&quot;: this.track.y - ((this.bar.height - this.track.height) / 2), &quot;w&quot;: this.track.width + this.bar.width, &quot;h&quot;: this.bar.height }; }; /** Determine the distance the bar can scroll over */ uiWidgets.ValueBar.prototype.setTrackScrollAreaSize = function () { &quot;use strict&quot;; if (this.vertical) { this.trackScrollAreaSize = this.track.height; } else { this.trackScrollAreaSize = this.track.width; } }; /** Ensure the bar starts off where it should be, according to the bar's logical position. */ uiWidgets.ValueBar.prototype.setInitialBarPosition = function () { &quot;use strict&quot;; var gripPositionOnTrack = this.getBarPosition(); // The bar should always be in centered on it's current position. if (this.vertical) { this.bar.y = gripPositionOnTrack + this.track.y - (this.bar.height / 2); } else { this.bar.x = gripPositionOnTrack + this.track.x - (this.bar.width / 2); } }; /** Returns the closest valid value.*/ uiWidgets.ValueBar.prototype.getClosestPosition = function () { &quot;use strict&quot;; var currentValue = this.valueRange.getCurrentValue(); var diff = Math.abs(currentValue - this.valueRange.steps[0]); var closestPosition = this.valueRange.steps[0]; for (var i = 0; i &lt; this.valueRange.steps.length; i++) { var newdiff = Math.abs(currentValue - this.valueRange.steps[i]); if (newdiff &lt; diff) { diff = newdiff; closestPosition = this.valueRange.steps[i]; } } return closestPosition; }; /** On mouse up, forces the value to equal the closest step. */ uiWidgets.ValueBar.prototype.snapToClosestPosition = function () { &quot;use strict&quot;; var closestPosition = this.getClosestPosition(); this.valueRange.adjustValue(closestPosition); this.moveContent(); this.setInitialBarPosition(); }; /** Called after a scroll tween is added. Adds the necessary events to the tween. */ uiWidgets.ValueBar.prototype.addScrollTweenEvents = function (tween) { &quot;use strict&quot;; // Only update the values once the bar has finished moving. tween.onComplete.add(this.moveContent, this); tween.onComplete.add(this.enableBarInput, this); }; uiWidgets.ValueBar.prototype.getGripPositionRatio = function () { &quot;use strict&quot;; var gripPositionOnTrack = this.getBarPosition(); var mousePositionDelta = this.getMouseDelta(); var newGripPosition = gripPositionOnTrack - mousePositionDelta; // Don't let the content scroll above or below the track's size if (newGripPosition &lt; 0) { newGripPosition = 0; } else if (newGripPosition &gt;= this.trackScrollAreaSize) { newGripPosition = this.trackScrollAreaSize; } // When the scrollbar is at the top or bottom, prevent a mouse movement that // doesn't move the scrollbar from moving the content. if (this.vertical) { if (this.bar.y &lt;= this.track.y) { newGripPosition = 0; } else if (this.bar.y + this.bar.height &gt;= this.track.y + this.track.height) { newGripPosition = this.trackScrollAreaSize; } } else { if (this.bar.x &lt;= this.track.x) { newGripPosition = 0; } else if (this.bar.x + this.bar.width &gt;= this.track.x + this.track.width) { newGripPosition = this.trackScrollAreaSize; } } var newGripPositionRatio = newGripPosition / this.trackScrollAreaSize; // If the scrollable area is less than the size of the scrollbar, the bar and track will be the same size. // In this scenario, a divide by zero occurs. Capture that and turn it into zero. if (isNaN(newGripPositionRatio)) { newGripPositionRatio = 0; } return newGripPositionRatio; }; × Search results Close "},"containers_viewport.js.html":{"id":"containers_viewport.js.html","title":"Source: containers/viewport.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: containers/viewport.js var uiWidgets; uiWidgets = uiWidgets || {}; /** * A container with a limited viewable area. Uses a mask to hide children outside of the specified x/y/width/height area. * Content outside the viewport has their input disabled. * @constructor * @param {Object} game - Current game instance. * @param {number} x - The x coordinate on screen where the viewport will be placed. * @param {number} y - The y coordinate on screen where the viewport will be placed. * @param {number} width - The width of the viewport. * @param {number} height - The height of the viewport. */ uiWidgets.Viewport = function (game, x, y, width, height) { &quot;use strict&quot;; Phaser.Group.call(this, game); game.add.existing(this); this.x = x; this.y = y; // Viewport size and position, distinct from the total window size. this.area = { &quot;x&quot;: x, &quot;y&quot;: y, &quot;width&quot;: width, &quot;height&quot;: height }; // Adding the mask attribute to a group hides objects outside the mask. this.mask = this.game.add.graphics(this.area.x, this.area.y); this.mask.beginFill(0x0000ff); this.mask.drawRect(0, 0, width, height); this.mask.endFill(); }; uiWidgets.Viewport.prototype = Object.create(Phaser.Group.prototype); uiWidgets.Viewport.constructor = uiWidgets.Viewport; /** Adds a new object into the Viewport. */ uiWidgets.Viewport.prototype.addNode = function (node) { &quot;use strict&quot;; this.add(node); }; /** Disable input for all objets outside the viewport's visible area. * Recursively checks all the object's children. * @param {Object} children - The objects to disable, if they're outside the viewport. * @param {Object} context - The context the function is run in. * @param {boolean} vertical - If the bounds should be checked horizontally or vertically. */ uiWidgets.Viewport.prototype.disableOutOfBounds = function (children, context, vertical) { &quot;use strict&quot;; var child, location, contentLocation, trueCoords; // Makes sure the recursive function stops when there's no children. if (children !== undefined) { for (var i = 0; i &lt; children.length; i++) { child = children[i]; child.inputEnabled = true; // An object's x/y is relative to it's parent. // The world gives an x/y relative to the whole game. trueCoords = child.world || child; if (vertical) { location = trueCoords.y; contentLocation = context.viewport.area.y; } else { location = trueCoords.x; contentLocation = context.viewport.area.x; } if (location &lt; contentLocation) { child.inputEnabled = false; } this.disableOutOfBounds(child.children, context, vertical); } } }; × Search results Close "},"wheel3D.js.html":{"id":"wheel3D.js.html","title":"Source: wheel3D.js","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Source: wheel3D.js var uiWidgets; uiWidgets = uiWidgets || {}; /** * Represents a single point in a Wheel3D. * @ignore * @constructor * @param {number} x - The point's virtual x location. * @param {number} y - The point's virtual y location. * @param {number} z - The point's virtual z location. * @param {Object} sprite - The sprite associated with this point. * @param {number} position - The point's position on the Wheel3D. */ var VectorPoint = function (x, y, z, sprite, position) { &quot;use strict&quot;; this.x = x || 0; this.y = y || 0; this.z = z || 0; this.sprite = sprite || null; this.position = position || 0; }; VectorPoint.prototype = { getSinCosOfAngle: function (angle) { &quot;use strict&quot;; var rad = angle * Math.PI / 180, cosAngle = Math.cos(rad), sinAngle = Math.sin(rad); return {cosine: cosAngle, sine: sinAngle}; }, rotateY: function (angle) { &quot;use strict&quot;; var angles = this.getSinCosOfAngle(angle), z = this.z * angles.cosine - this.x * angles.sine, x = this.z * angles.sine + this.x * angles.cosine; return new VectorPoint(x, this.y, z); }, rotateX: function (angle) { &quot;use strict&quot;; var angles = this.getSinCosOfAngle(angle), y = this.y * angles.cosine - this.z * angles.sine, z = this.y * angles.sine + this.z * angles.cosine; return new VectorPoint(this.x, y, z); }, rotateZ: function (angle) { &quot;use strict&quot;; var angles = this.getSinCosOfAngle(angle), x = this.x * angles.cosine - this.y * angles.sine, y = this.x * angles.sine + this.y * angles.cosine; return new VectorPoint(x, y, this.z); }, /** Rotate the point along the given axis by the given angle. * @param {string} axis - The axis to rotate. * @param {number} angle - The angle to rotate by. */ rotate: function (axis, angle) { &quot;use strict&quot;; if (axis === &quot;x&quot;) { return this.rotateX(angle); } else if (axis === &quot;y&quot;) { return this.rotateY(angle); } else if (axis === &quot;z&quot;) { return this.rotateZ(angle); } }, /** Project the point to the correct physical location on screen. * z axis is not projected, because screens are 2D. */ project: function (width, height, factor) { &quot;use strict&quot;; var x = (this.x * factor) + width, y = (-this.y * factor) + height; return new VectorPoint(x, y, this.z); } }; /** * A Wheel of sprites where each item's position is projected in 3D space. * The number of points is automatically determined by the number of items. * @constructor * @param {Object} game - Reference to current game instance. * @param {array} sprites - List of sprites to use in the wheel. * @param {Number} firstPlace - Determines which position on the wheel is the active one. * @param {Number} zoom - Determines how far to project the points. * @param {String} axis - The axis the wheel3D places items around. * @param {Object} rotations - Axis and angle to rotate the entire wheel after the initial projection. * @param {Object} visibleRange - Determines which items on the wheel should be visible. If none provided, assumes all items should be visible. * @param {Object} tweenParams - Array with the duration and easing function for the movement tween. */ uiWidgets.Wheel3D = function (game, xy, sprites, firstPlace, zoom, axis, rotations, visibleRange, tweenParams) { &quot;use strict&quot;; this.game = game; this.xy = xy; this.sprites = sprites; this.firstPlace = firstPlace; this.zoom = zoom; this.axis = axis; this.rotationAxis = rotations; this.visibleRange = visibleRange || null; this.tweenParams = tweenParams || {&quot;duration&quot;: 300, &quot;ease&quot;: Phaser.Easing.Quadratic.Out}; // Signals this.onStart = new Phaser.Signal(); this.onComplete = new Phaser.Signal(); this.onBackComplete = new Phaser.Signal(); this.onForwardComplete = new Phaser.Signal(); // Group to store wheel sprites in, used for zindex sorting. this.group = this.game.add.group(); }; uiWidgets.Wheel3D.prototype = { activate: function () { &quot;use strict&quot;; var radius, slice, angle, radCos, radSin, nx, ny, nz, i; this.pointsAmount = this.sprites.length; this.totalPositions = this.pointsAmount - 1; this.rotationAmount = 360 / this.pointsAmount; // Determines which items in the wheel should be visible. if (this.visibleRange !== null) { var allPositions = []; for (i = 0; i &lt;= this.totalPositions; i++) { allPositions.push(i); } var maxV = allPositions.slice(0, this.visibleRange.max); var minV = allPositions.slice(this.visibleRange.min); this.visiblePositions = maxV.concat(minV); } // Prevents slamming down the move keys. this.moving = false; // Stores the direction the wheel is moving in. this.direction = null; // Set point positions on logical circle. this.wheelItems = []; radius = 1; slice = (2 * Math.PI) / this.pointsAmount; // For a vertical wheel, the X axis is -1. Points are laid out on the Y axis (height) and Z axis (depth). The wheel rotates around the X axis. // For a horizontal wheel, the Y Axis is -1. Points are laid out on the X axis (width) and Z axis (depth). The wheel rotates around the Y axis. // For flat circular wheel, the Z Axis is -1. Points are laid out on the X axis (width) and Y axis (height). The wheel rotates around the Z axis. for (i = 0; i &lt; this.pointsAmount; i++) { // Add sprite to group. this.sprites[i].wheelPosition = i; this.group.add(this.sprites[i]); angle = slice * i; radCos = radius * Math.cos(angle); radSin = radius * Math.sin(angle); if (this.axis === &quot;x&quot;) { nx = -1; ny = radCos; nz = radSin; } else if (this.axis === &quot;y&quot;) { nx = radCos; ny = -1; nz = radSin; } else if (this.axis === &quot;z&quot;) { nx = radCos; ny = radSin; nz = -1; } this.wheelItems.push(new VectorPoint(nx, ny, nz, this.sprites[i], i)); } // Active Point this.active = this.wheelItems[this.firstPlace].sprite; this.project(); }, /** Move the wheel backwards. */ moveBack: function () { &quot;use strict&quot;; if (this.moving === false) { this.moving = true; this.direction = 0; if (this.axis === &quot;x&quot; || this.axis === &quot;z&quot;) { this.rotationAxis[this.axis] += this.rotationAmount; } else { // y axis needs to go in the opposite direction. this.rotationAxis[this.axis] -= this.rotationAmount; } this.updatePosition(&quot;+&quot;); this.project(); this.resetAngle(); } }, /** Move the wheel forward. */ moveForward: function () { &quot;use strict&quot;; if (this.moving === false) { this.moving = true; this.direction = 1; if (this.axis === &quot;x&quot; || this.axis === &quot;z&quot;) { this.rotationAxis[this.axis] -= this.rotationAmount; } else { // y axis needs to go in the opposite direction. this.rotationAxis[this.axis] += this.rotationAmount; } this.updatePosition(&quot;-&quot;); this.project(); this.resetAngle(); } }, /** Project every item in the wheel to it's physical location. */ project: function () { &quot;use strict&quot;; var transformed, newTween; // Create a list with the axes, then remove the projected axis. var arr = [&quot;x&quot;, &quot;y&quot;, &quot;z&quot;]; var idx = arr.indexOf(this.axis); arr.splice(idx, 1); // We only need to call all this when moving. It doesn't need to be done // every update for (var i = 0; i &lt; this.wheelItems.length; i++) { // Rotate along the projected axis var rotationOne = this.wheelItems[i].rotate( this.axis, this.rotationAxis[this.axis] ); // Rotate the other 2 axes var rotationTwo = rotationOne.rotate(arr[0], this.rotationAxis[arr[0]]); var rotationThree = rotationTwo.rotate(arr[1], this.rotationAxis[arr[1]]); var p = rotationThree.project( this.xy.x, this.xy.y, this.zoom ); transformed = this.wheelItems[i].sprite; transformed.lz = p.z; // Ensure active sprite has no scale/alpha changes. if (this.wheelItems[i].position === this.firstPlace) { transformed.alpha = 1.0; this.active = this.wheelItems[i].sprite; } else { if (this.visibleRange !== null) { var includes = _.includes( this.visiblePositions, this.wheelItems[i].position ); if (includes) { transformed.alpha = 1.0; } else { transformed.alpha = 0.0; } } } // Tween to new position newTween = this.game.add.tween(transformed).to( {x: p.x, y: p.y}, this.tweenParams.duration, this.tweenParams.ease, true ); newTween.onComplete.add(this.enableMoving, this); } // Sort wheelItems by the projection's z axis for correct z-order when drawing. this.group.sort(&quot;lz&quot;, Phaser.Group.SORT_ASCENDING); // Wheel's signals are dispatched by the tween's. newTween.onStart.add(this.dispatchOnStart, this); newTween.onComplete.add(this.dispatchOnComplete, this); }, /** Called after movement starts. */ dispatchOnStart: function () { &quot;use strict&quot;; this.onStart.dispatch(this); }, /** Called after movement is finished. */ dispatchOnComplete: function () { &quot;use strict&quot;; if (this.direction === 0) { this.onBackComplete.dispatch(this); } else if (this.direction === 1) { this.onForwardComplete.dispatch(this); } this.onComplete.dispatch(this); }, /** Once the buttons have finished their move animation, allow them to move again. */ enableMoving: function () { &quot;use strict&quot;; this.moving = false; }, /** Move all the WheelItem's position by 1. */ updatePosition: function (operator) { &quot;use strict&quot;; var m; for (var i = 0; i &lt; this.wheelItems.length; i++) { var position = this.wheelItems[i].position; this.wheelItems[i].position = uiWidgets.utils.operators[operator](position, 1); m = uiWidgets.utils.modulo(this.wheelItems[i].position, this.pointsAmount); this.wheelItems[i].position = m; this.wheelItems[i].sprite.wheelPosition = m; } }, /** Make sure rotation can't go past 360 in either direction. */ resetAngle: function () { &quot;use strict&quot;; var angle = this.rotationAxis[this.axis]; if (angle === 360 || angle === -360 ) { this.rotationAxis[this.axis] = 0; } } }; × Search results Close "},"classes.list.html":{"id":"classes.list.html","title":"Classes","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Classes Classes Column Frame KeyboardGroup QuantityBar QuantityRange Row Scrollbar textButton textSprite ValueBar ValueRange Viewport ViewportRange Wheel3D × Search results Close "},"index.html":{"id":"index.html","title":"Index","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D × Search results Close "},"uiWidgets.Column.html":{"id":"uiWidgets.Column.html","title":"Class: Column","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Column Column new Column(game, x, y, bg) Frame that places new child nodes directly under the previous child. Parameters: Name Type Description game Object Current game instance. x Number The x position of the Frame. y Number The y position of the Frame. bg string The background image to use. Source: containers/column.js, line 12 × Search results Close "},"uiWidgets.Frame.html":{"id":"uiWidgets.Frame.html","title":"Class: Frame","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Frame Frame new Frame(game, x, y, bg) Group with a dedicated background image.Children added to the group will always be above the background image. Parameters: Name Type Description game Object Current game instance. x Number The x position of the Frame. y Number The y position of the Frame. bg string The background image to use. Source: containers/frame.js, line 13 Methods addNode(node, alignment, padding_x, padding_y) Adds a new object into the Column, then aligns it under the previous object. Parameters: Name Type Description node Object The sprite to add to the Column. alignment Number The alignment relative to the previous child. padding_x Number The amount of horizontal space between objects. padding_y Number The amount of vertical space between objects. Source: containers/frame.js, line 41 × Search results Close "},"uiWidgets.KeyboardGroup.html":{"id":"uiWidgets.KeyboardGroup.html","title":"Class: KeyboardGroup","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: KeyboardGroup KeyboardGroup new KeyboardGroup(game, vertical, callbackContext) Collection of sprites that can be selected with the keyboard.When the select key is hit, the sprite that was selected is now connected to the keyboard. Parameters: Name Type Description game Object Current game instance. vertical Boolean If the selection should be controlled with up/down or left/right arrow keys. callbackContext Object The context for the onPrevious and onNext Signals. Source: keyboard_group.js, line 11 Members onNext Dispatched when the selected child is set from the current child to the next child. Properties: Type Description Phaser.Signal Source: keyboard_group.js, line 40 onPrevious Dispatched when the selected child is set from the current child to the previous child. Properties: Type Description Phaser.Signal Source: keyboard_group.js, line 34 Methods addNode(newNode) Add a new child to the group Parameters: Name Type Description newNode Object The sprite to add to the group. Source: keyboard_group.js, line 50 nextItem() Selects the next child. Source: keyboard_group.js, line 76 prevItem() Selects the previous child. Source: keyboard_group.js, line 60 × Search results Close "},"uiWidgets.QuantityBar.html":{"id":"uiWidgets.QuantityBar.html","title":"Class: QuantityBar","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: QuantityBar QuantityBar new QuantityBar(game, xy, values, vertical, reverse, trackImage, barImage, tweenParams) Bar that adjusts the size of a static sprite based on a value.This is done by masking the sprite and then resizing the mask. Parameters: Name Type Description game Object Current game instance. xy Object Dictionary with the values for the bar's x and y position. values Object The numerical values for the bar. vertical boolean Determines if the bar should be vertical or horizontal. reverse boolean Determines the direction the bar moves when adjusted. trackImage string The image key to use for the track. barImage string The image key to use for the bar. Will be automatically resized to fit. tweenParams Object Dictionary with the duration and easing function for the scrolling tween. Source: bars/quantitybar.js, line 17 Methods addScrollTweenMask(properties) Creates the tween for adjusting the size of the mask. Parameters: Name Type Description properties Object Values for the tween's movement. Source: bars/quantitybar.js, line 123 adjustBar(newValue) Adjusts the bar by a given value. Parameters: Name Type Description newValue number The value to adjust the bar by. Source: bars/quantitybar.js, line 138 getBarSize() Given a ratio between total content size and viewport size,return an appropriate percentage of the track. Source: bars/quantitybar.js, line 178 setMask() Sets the bar's mask. Source: bars/quantitybar.js, line 59 × Search results Close "},"uiWidgets.QuantityRange.html":{"id":"uiWidgets.QuantityRange.html","title":"Class: QuantityRange","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: QuantityRange QuantityRange new QuantityRange(bar, startValue, maxValue) Used by a QuantityBar to hold the bar's values. Parameters: Name Type Description bar number The QuantityBar object that uses the range. startValue number The initial value for the bar. maxValue number The maximum value the bar can have. Source: bars/ranges.js, line 11 Methods getCurrentValue() Returns the bar's current value. Source: bars/ranges.js, line 29 getRatio() Returns the current ratio for how large the bar is compared to the track. Source: bars/ranges.js, line 22 × Search results Close "},"uiWidgets.Row.html":{"id":"uiWidgets.Row.html","title":"Class: Row","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Row Row new Row(game, x, y, bg) Frame that places new child nodes directly next to the previous child. Parameters: Name Type Description game Object Current game instance. x Number The x position of the Frame. y Number The y position of the Frame. bg string The background image to use. Source: containers/row.js, line 12 × Search results Close "},"uiWidgets.Scrollbar.html":{"id":"uiWidgets.Scrollbar.html","title":"Class: Scrollbar","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Scrollbar Scrollbar new Scrollbar(game, content, draggable, vertical, trackImage, barImage, tweenParams) A bar that moves along a track. The bar is resized relative to the size of the track and size of the content to be scrolled. Parameters: Name Type Description game Object Current game instance. content Object Anything that you want to move via the scrollbar. draggable boolean Determines if the scrollbar responds to mouse clicks. vertical boolean Determines if the scrollbar should be vertical or horizontal. trackImage string The image key to use for the track. barImage string The image key to use for the bar. Will be automatically resized to fit. tweenParams Object Dictionary with the duration and easing function for the scrolling tween. Source: bars/scrollbar.js, line 15 Members onMovement Dispatched when the bar is moved. Properties: Type Description Phaser.Signal Source: bars/scrollbar.js, line 77 Methods addScrollTween() Creates the tween for moving the bar to a new position. Source: bars/scrollbar.js, line 166 addScrollTweenEvents() Called after a scroll tween is added. Adds the necessary events to the tween. Source: bars/scrollbar.js, line 183 moveContent() Called when the scrollbar needs to move the viewport. Causes the content to move relative to the bar's position on the track. Source: bars/scrollbar.js, line 371 resizeBar() Given a ratio between total content size and viewport size,resize the bar sprite to the appropriate percentage of the track. Source: bars/scrollbar.js, line 104 scrollDown() For Vertical Scrollbars. Scrolls down by one step. Source: bars/scrollbar.js, line 211 scrollLeft() For Horizontal Scrollbars. Scrolls left by one step. Source: bars/scrollbar.js, line 231 scrollRight() For Horizontal Scrollbars. Scrolls right by one step. Source: bars/scrollbar.js, line 251 scrollUp() For Vertical Scrollbars. Scrolls up by one step. Source: bars/scrollbar.js, line 191 setDraggableArea() Sets the draggable area of the bar. Source: bars/scrollbar.js, line 84 setInitialBarPosition() Ensure the bar starts off where it should be, according to the bar's logical position. Source: bars/scrollbar.js, line 152 × Search results Close "},"uiWidgets.textButton.html":{"id":"uiWidgets.textButton.html","title":"Class: textButton","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: textButton textButton new textButton(game, image, label, style, x, y, callback, callbackContext) Phaser Button with text added as a child. Parameters: Name Type Description game Object Current game instance. image string The image to create a sprite with. label string The text to place on top of the sprite. style Object The style properties to be set on the Text. x number The x coordinate on screen where the textSprite will be placed. y number The y coordinate on screen where the textSprite will be placed. callback Object Callback to use when the button is clicked. callbackContext Object The context the callback is called in. Source: buttons.js, line 42 × Search results Close "},"uiWidgets.textSprite.html":{"id":"uiWidgets.textSprite.html","title":"Class: textSprite","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: textSprite textSprite new textSprite(game, image, label, style, x, y) Sprite with text added as a child. Parameters: Name Type Description game Object Current game instance. image string The image to create a sprite with. label string The text to place on top of the sprite. style Object The style properties to be set on the Text. x number The x coordinate on screen where the textSprite will be placed. y number The y coordinate on screen where the textSprite will be placed. Source: buttons.js, line 15 × Search results Close "},"uiWidgets.ValueBar.html":{"id":"uiWidgets.ValueBar.html","title":"Class: ValueBar","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: ValueBar ValueBar new ValueBar(game, xy, values, draggable, vertical, trackImage, barImage, tweenParams) Bar that adjusts a number.This is done by masking the sprite and then resizing the mask. Parameters: Name Type Description game Object Current game instance. xy Object Dictionary with the values for the bar's x and y position. values Object The numerical values for the bar. draggable boolean Determines if the scrollbar responds to mouse clicks. vertical boolean Determines if the bar should be vertical or horizontal. trackImage string The image key to use for the track. barImage string The image key to use for the bar. Will be automatically resized to fit. tweenParams Object Dictionary with the duration and easing function for the scrolling tween. Source: bars/valuebar.js, line 17 Members onMovement Dispatched when the bar is moved. Properties: Type Description Phaser.Signal Source: bars/valuebar.js, line 98 Methods addScrollTweenEvents() Called after a scroll tween is added. Adds the necessary events to the tween. Source: bars/valuebar.js, line 176 getClosestPosition() Returns the closest valid value. Source: bars/valuebar.js, line 147 setDraggableArea() Sets the draggable area of the bar. Source: bars/valuebar.js, line 105 setInitialBarPosition() Ensure the bar starts off where it should be, according to the bar's logical position. Source: bars/valuebar.js, line 133 setTrackScrollAreaSize() Determine the distance the bar can scroll over Source: bars/valuebar.js, line 123 snapToClosestPosition() On mouse up, forces the value to equal the closest step. Source: bars/valuebar.js, line 166 × Search results Close "},"uiWidgets.ValueRange.html":{"id":"uiWidgets.ValueRange.html","title":"Class: ValueRange","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: ValueRange ValueRange new ValueRange(step, startValue, maxValue) Used by a ValueBar to hold the bar's values. Parameters: Name Type Description step number The amount the bar is changed by. startValue number The initial value for the bar. maxValue number The maximum value the bar can have. Source: bars/ranges.js, line 42 Methods adjustValue(newValue) Adjusts the current value for the bar. Parameters: Name Type Description newValue number The new current value. Source: bars/ranges.js, line 70 getCurrentValue() Returns the bar's current value. Source: bars/ranges.js, line 77 × Search results Close "},"uiWidgets.Viewport.html":{"id":"uiWidgets.Viewport.html","title":"Class: Viewport","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Viewport Viewport new Viewport(game, x, y, width, height) A container with a limited viewable area. Uses a mask to hide children outside of the specified x/y/width/height area.Content outside the viewport has their input disabled. Parameters: Name Type Description game Object Current game instance. x number The x coordinate on screen where the viewport will be placed. y number The y coordinate on screen where the viewport will be placed. width number The width of the viewport. height number The height of the viewport. Source: containers/viewport.js, line 14 Methods addNode() Adds a new object into the Viewport. Source: containers/viewport.js, line 41 disableOutOfBounds(children, context, vertical) Disable input for all objets outside the viewport's visible area.Recursively checks all the object's children. Parameters: Name Type Description children Object The objects to disable, if they're outside the viewport. context Object The context the function is run in. vertical boolean If the bounds should be checked horizontally or vertically. Source: containers/viewport.js, line 53 × Search results Close "},"uiWidgets.ViewportRange.html":{"id":"uiWidgets.ViewportRange.html","title":"Class: ViewportRange","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: ViewportRange ViewportRange new ViewportRange(viewport, vertical) Used by a Scrollbar to hold the values and adjust a viewport's position. Parameters: Name Type Description viewport Object The viewport to adjust. vertical boolean If the viewport is vertical or horizontal. Source: bars/ranges.js, line 89 Methods adjustValue() Adjusts the viewport's position. Source: bars/ranges.js, line 112 × Search results Close "},"uiWidgets.Wheel3D.html":{"id":"uiWidgets.Wheel3D.html","title":"Class: Wheel3D","body":" DocStrap Classes uiWidgets.ColumnuiWidgets.FrameuiWidgets.KeyboardGroupuiWidgets.QuantityBaruiWidgets.QuantityRangeuiWidgets.RowuiWidgets.ScrollbaruiWidgets.textButtonuiWidgets.textSpriteuiWidgets.ValueBaruiWidgets.ValueRangeuiWidgets.ViewportuiWidgets.ViewportRangeuiWidgets.Wheel3D Class: Wheel3D Wheel3D new Wheel3D(game, sprites, firstPlace, zoom, axis, rotations, visibleRange, tweenParams) A Wheel of sprites where each item's position is projected in 3D space.The number of points is automatically determined by the number of items. Parameters: Name Type Description game Object Reference to current game instance. sprites array List of sprites to use in the wheel. firstPlace Number Determines which position on the wheel is the active one. zoom Number Determines how far to project the points. axis String The axis the wheel3D places items around. rotations Object Axis and angle to rotate the entire wheel after the initial projection. visibleRange Object Determines which items on the wheel should be visible. If none provided, assumes all items should be visible. tweenParams Object Array with the duration and easing function for the movement tween. Source: wheel3D.js, line 97 Methods dispatchOnComplete() Called after movement is finished. Source: wheel3D.js, line 316 dispatchOnStart() Called after movement starts. Source: wheel3D.js, line 310 enableMoving() Once the buttons have finished their move animation, allow them to move again. Source: wheel3D.js, line 328 moveBack() Move the wheel backwards. Source: wheel3D.js, line 197 moveForward() Move the wheel forward. Source: wheel3D.js, line 217 project() Project every item in the wheel to it's physical location. Source: wheel3D.js, line 237 resetAngle() Make sure rotation can't go past 360 in either direction. Source: wheel3D.js, line 349 updatePosition() Move all the WheelItem's position by 1. Source: wheel3D.js, line 334 × Search results Close "}}
     </script>
 
     <script type="text/javascript">
diff --git a/docs/uiWidgets.Column.html b/docs/uiWidgets.Column.html
index e15fb60..d7bb98e 100644
--- a/docs/uiWidgets.Column.html
+++ b/docs/uiWidgets.Column.html
@@ -84,7 +84,7 @@ <h2>
         
 <hr>
 <dt>
-    <h4 class="name" id="Column"><span class="type-signature"></span>new Column(game, context)</h4>
+    <h4 class="name" id="Column"><span class="type-signature"></span>new Column(game, x, y, bg)</h4>
     
     
 </dt>
@@ -151,169 +151,13 @@ <h5>Parameters:</h5>
 
         <tr>
             
-                <td class="name"><code>context</code></td>
+                <td class="name"><code>x</code></td>
             
 
             <td class="type">
             
                 
-<span class="param-type">Object</span>
-
-
-
-            
-            </td>
-
-            
-
-            
-
-            <td class="description last"><p>The context this object is called in.</p></td>
-        </tr>
-
-    
-    </tbody>
-</table>
-
-    
-
-    
-<dl class="details">
-    
-
-	
-
-	
-
-	
-
-    
-
-    
-
-    
-
-    
-
-	
-
-	
-
-	
-
-	
-
-	
-
-
-
-	
-	<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
-	<dd class="tag-source">
-		<ul class="dummy">
-			<li>
-				<a href="containers_column.js.html">containers/column.js</a>,
-				 <a href="containers_column.js.html#sunlight-1-line-9">line 9</a>
-			</li>
-		</ul>
-	</dd>
-	
-
-	
-
-	
-
-	
-</dl>
-
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-</dd>
-
-    
-    </div>
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-        <h3 class="subsection-title">Methods</h3>
-
-        <dl>
-            
-<hr>
-<dt>
-    <h4 class="name" id="addNode"><span class="type-signature"></span>addNode(node, alignment, padding)</h4>
-    
-    
-</dt>
-<dd>
-
-    
-    <div class="description">
-        <p>Adds a new object into the Column, then aligns it under the previous object.</p>
-    </div>
-    
-
-    
-
-    
-
-    
-    
-        <h5>Parameters:</h5>
-        
-
-<table class="params table table-striped">
-    <thead>
-    <tr>
-        
-        <th>Name</th>
-        
-
-        <th>Type</th>
-
-        
-
-        
-
-        <th class="last">Description</th>
-    </tr>
-    </thead>
-
-    <tbody>
-    
-
-        <tr>
-            
-                <td class="name"><code>node</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">Object</span>
+<span class="param-type">Number</span>
 
 
 
@@ -324,14 +168,14 @@ <h5>Parameters:</h5>
 
             
 
-            <td class="description last"><p>The sprite to add to the Column.</p></td>
+            <td class="description last"><p>The x position of the Frame.</p></td>
         </tr>
 
     
 
         <tr>
             
-                <td class="name"><code>alignment</code></td>
+                <td class="name"><code>y</code></td>
             
 
             <td class="type">
@@ -348,20 +192,20 @@ <h5>Parameters:</h5>
 
             
 
-            <td class="description last"><p>The alignment relative to the previous child.</p></td>
+            <td class="description last"><p>The y position of the Frame.</p></td>
         </tr>
 
     
 
         <tr>
             
-                <td class="name"><code>padding</code></td>
+                <td class="name"><code>bg</code></td>
             
 
             <td class="type">
             
                 
-<span class="param-type">Number</span>
+<span class="param-type">string</span>
 
 
 
@@ -372,7 +216,7 @@ <h5>Parameters:</h5>
 
             
 
-            <td class="description last"><p>The amount of space between objects.</p></td>
+            <td class="description last"><p>The background image to use.</p></td>
         </tr>
 
     
@@ -417,7 +261,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="containers_column.js.html">containers/column.js</a>,
-				 <a href="containers_column.js.html#sunlight-1-line-22">line 22</a>
+				 <a href="containers_column.js.html#sunlight-1-line-12">line 12</a>
 			</li>
 		</ul>
 	</dd>
@@ -446,7 +290,21 @@ <h5>Parameters:</h5>
     
 </dd>
 
-        </dl>
+    
+    </div>
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
     
 
     
@@ -498,9 +356,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.Frame.html b/docs/uiWidgets.Frame.html
index dc7404b..e435775 100644
--- a/docs/uiWidgets.Frame.html
+++ b/docs/uiWidgets.Frame.html
@@ -84,7 +84,7 @@ <h2>
         
 <hr>
 <dt>
-    <h4 class="name" id="Frame"><span class="type-signature"></span>new Frame(game, context, bg)</h4>
+    <h4 class="name" id="Frame"><span class="type-signature"></span>new Frame(game, x, y, bg)</h4>
     
     
 </dt>
@@ -151,13 +151,37 @@ <h5>Parameters:</h5>
 
         <tr>
             
-                <td class="name"><code>context</code></td>
+                <td class="name"><code>x</code></td>
             
 
             <td class="type">
             
                 
-<span class="param-type">Object</span>
+<span class="param-type">Number</span>
+
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"><p>The x position of the Frame.</p></td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>y</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Number</span>
 
 
 
@@ -168,7 +192,7 @@ <h5>Parameters:</h5>
 
             
 
-            <td class="description last"><p>The context this object is called in.</p></td>
+            <td class="description last"><p>The y position of the Frame.</p></td>
         </tr>
 
     
@@ -237,7 +261,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="containers_frame.js.html">containers/frame.js</a>,
-				 <a href="containers_frame.js.html#sunlight-1-line-11">line 11</a>
+				 <a href="containers_frame.js.html#sunlight-1-line-13">line 13</a>
 			</li>
 		</ul>
 	</dd>
@@ -288,7 +312,7 @@ <h3 class="subsection-title">Methods</h3>
             
 <hr>
 <dt>
-    <h4 class="name" id="addNode"><span class="type-signature"></span>addNode(node)</h4>
+    <h4 class="name" id="addNode"><span class="type-signature"></span>addNode(node, alignment, padding_x, padding_y)</h4>
     
     
 </dt>
@@ -296,7 +320,7 @@ <h4 class="name" id="addNode"><span class="type-signature"></span>addNode(node)<
 
     
     <div class="description">
-        <p>Adds a new object to the Frame.</p>
+        <p>Adds a new object into the Column, then aligns it under the previous object.</p>
     </div>
     
 
@@ -348,7 +372,79 @@ <h5>Parameters:</h5>
 
             
 
-            <td class="description last"><p>The sprite to add to the Frame.</p></td>
+            <td class="description last"><p>The sprite to add to the Column.</p></td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>alignment</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Number</span>
+
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"><p>The alignment relative to the previous child.</p></td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>padding_x</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Number</span>
+
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"><p>The amount of horizontal space between objects.</p></td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>padding_y</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Number</span>
+
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"><p>The amount of vertical space between objects.</p></td>
         </tr>
 
     
@@ -393,7 +489,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="containers_frame.js.html">containers/frame.js</a>,
-				 <a href="containers_frame.js.html#sunlight-1-line-36">line 36</a>
+				 <a href="containers_frame.js.html#sunlight-1-line-41">line 41</a>
 			</li>
 		</ul>
 	</dd>
@@ -474,9 +570,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.KeyboardGroup.html b/docs/uiWidgets.KeyboardGroup.html
index 4b7b507..025c345 100644
--- a/docs/uiWidgets.KeyboardGroup.html
+++ b/docs/uiWidgets.KeyboardGroup.html
@@ -237,7 +237,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="keyboard_group.js.html">keyboard_group.js</a>,
-				 <a href="keyboard_group.js.html#sunlight-1-line-10">line 10</a>
+				 <a href="keyboard_group.js.html#sunlight-1-line-11">line 11</a>
 			</li>
 		</ul>
 	</dd>
@@ -384,7 +384,7 @@ <h5 class="subsection-title">Properties:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="keyboard_group.js.html">keyboard_group.js</a>,
-				 <a href="keyboard_group.js.html#sunlight-1-line-39">line 39</a>
+				 <a href="keyboard_group.js.html#sunlight-1-line-40">line 40</a>
 			</li>
 		</ul>
 	</dd>
@@ -503,7 +503,7 @@ <h5 class="subsection-title">Properties:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="keyboard_group.js.html">keyboard_group.js</a>,
-				 <a href="keyboard_group.js.html#sunlight-1-line-33">line 33</a>
+				 <a href="keyboard_group.js.html#sunlight-1-line-34">line 34</a>
 			</li>
 		</ul>
 	</dd>
@@ -635,7 +635,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="keyboard_group.js.html">keyboard_group.js</a>,
-				 <a href="keyboard_group.js.html#sunlight-1-line-49">line 49</a>
+				 <a href="keyboard_group.js.html#sunlight-1-line-50">line 50</a>
 			</li>
 		</ul>
 	</dd>
@@ -723,7 +723,7 @@ <h4 class="name" id="nextItem"><span class="type-signature"></span>nextItem()</h
 		<ul class="dummy">
 			<li>
 				<a href="keyboard_group.js.html">keyboard_group.js</a>,
-				 <a href="keyboard_group.js.html#sunlight-1-line-75">line 75</a>
+				 <a href="keyboard_group.js.html#sunlight-1-line-76">line 76</a>
 			</li>
 		</ul>
 	</dd>
@@ -811,7 +811,7 @@ <h4 class="name" id="prevItem"><span class="type-signature"></span>prevItem()</h
 		<ul class="dummy">
 			<li>
 				<a href="keyboard_group.js.html">keyboard_group.js</a>,
-				 <a href="keyboard_group.js.html#sunlight-1-line-59">line 59</a>
+				 <a href="keyboard_group.js.html#sunlight-1-line-60">line 60</a>
 			</li>
 		</ul>
 	</dd>
@@ -892,9 +892,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.QuantityBar.html b/docs/uiWidgets.QuantityBar.html
index 7f26cb4..a109527 100644
--- a/docs/uiWidgets.QuantityBar.html
+++ b/docs/uiWidgets.QuantityBar.html
@@ -357,7 +357,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_quantitybar.js.html">bars/quantitybar.js</a>,
-				 <a href="bars_quantitybar.js.html#sunlight-1-line-16">line 16</a>
+				 <a href="bars_quantitybar.js.html#sunlight-1-line-17">line 17</a>
 			</li>
 		</ul>
 	</dd>
@@ -513,7 +513,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_quantitybar.js.html">bars/quantitybar.js</a>,
-				 <a href="bars_quantitybar.js.html#sunlight-1-line-122">line 122</a>
+				 <a href="bars_quantitybar.js.html#sunlight-1-line-123">line 123</a>
 			</li>
 		</ul>
 	</dd>
@@ -651,7 +651,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_quantitybar.js.html">bars/quantitybar.js</a>,
-				 <a href="bars_quantitybar.js.html#sunlight-1-line-137">line 137</a>
+				 <a href="bars_quantitybar.js.html#sunlight-1-line-138">line 138</a>
 			</li>
 		</ul>
 	</dd>
@@ -739,7 +739,7 @@ <h4 class="name" id="getBarSize"><span class="type-signature"></span>getBarSize(
 		<ul class="dummy">
 			<li>
 				<a href="bars_quantitybar.js.html">bars/quantitybar.js</a>,
-				 <a href="bars_quantitybar.js.html#sunlight-1-line-177">line 177</a>
+				 <a href="bars_quantitybar.js.html#sunlight-1-line-178">line 178</a>
 			</li>
 		</ul>
 	</dd>
@@ -827,7 +827,7 @@ <h4 class="name" id="setMask"><span class="type-signature"></span>setMask()</h4>
 		<ul class="dummy">
 			<li>
 				<a href="bars_quantitybar.js.html">bars/quantitybar.js</a>,
-				 <a href="bars_quantitybar.js.html#sunlight-1-line-58">line 58</a>
+				 <a href="bars_quantitybar.js.html#sunlight-1-line-59">line 59</a>
 			</li>
 		</ul>
 	</dd>
@@ -908,9 +908,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.QuantityRange.html b/docs/uiWidgets.QuantityRange.html
index 69e13b9..d9dfbdb 100644
--- a/docs/uiWidgets.QuantityRange.html
+++ b/docs/uiWidgets.QuantityRange.html
@@ -237,7 +237,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_ranges.js.html">bars/ranges.js</a>,
-				 <a href="bars_ranges.js.html#sunlight-1-line-10">line 10</a>
+				 <a href="bars_ranges.js.html#sunlight-1-line-11">line 11</a>
 			</li>
 		</ul>
 	</dd>
@@ -343,7 +343,7 @@ <h4 class="name" id="getCurrentValue"><span class="type-signature"></span>getCur
 		<ul class="dummy">
 			<li>
 				<a href="bars_ranges.js.html">bars/ranges.js</a>,
-				 <a href="bars_ranges.js.html#sunlight-1-line-28">line 28</a>
+				 <a href="bars_ranges.js.html#sunlight-1-line-29">line 29</a>
 			</li>
 		</ul>
 	</dd>
@@ -431,7 +431,7 @@ <h4 class="name" id="getRatio"><span class="type-signature"></span>getRatio()</h
 		<ul class="dummy">
 			<li>
 				<a href="bars_ranges.js.html">bars/ranges.js</a>,
-				 <a href="bars_ranges.js.html#sunlight-1-line-21">line 21</a>
+				 <a href="bars_ranges.js.html#sunlight-1-line-22">line 22</a>
 			</li>
 		</ul>
 	</dd>
@@ -512,9 +512,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.Row.html b/docs/uiWidgets.Row.html
index 7b6a027..f83f34b 100644
--- a/docs/uiWidgets.Row.html
+++ b/docs/uiWidgets.Row.html
@@ -84,7 +84,7 @@ <h2>
         
 <hr>
 <dt>
-    <h4 class="name" id="Row"><span class="type-signature"></span>new Row(game, context)</h4>
+    <h4 class="name" id="Row"><span class="type-signature"></span>new Row(game, x, y, bg)</h4>
     
     
 </dt>
@@ -151,169 +151,13 @@ <h5>Parameters:</h5>
 
         <tr>
             
-                <td class="name"><code>context</code></td>
+                <td class="name"><code>x</code></td>
             
 
             <td class="type">
             
                 
-<span class="param-type">Object</span>
-
-
-
-            
-            </td>
-
-            
-
-            
-
-            <td class="description last"><p>The context this object is called in.</p></td>
-        </tr>
-
-    
-    </tbody>
-</table>
-
-    
-
-    
-<dl class="details">
-    
-
-	
-
-	
-
-	
-
-    
-
-    
-
-    
-
-    
-
-	
-
-	
-
-	
-
-	
-
-	
-
-
-
-	
-	<dt class="tag-source method-doc-label method-doc-details-label">Source:</dt>
-	<dd class="tag-source">
-		<ul class="dummy">
-			<li>
-				<a href="containers_row.js.html">containers/row.js</a>,
-				 <a href="containers_row.js.html#sunlight-1-line-9">line 9</a>
-			</li>
-		</ul>
-	</dd>
-	
-
-	
-
-	
-
-	
-</dl>
-
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-</dd>
-
-    
-    </div>
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-        <h3 class="subsection-title">Methods</h3>
-
-        <dl>
-            
-<hr>
-<dt>
-    <h4 class="name" id="addNode"><span class="type-signature"></span>addNode(node, alignment, padding)</h4>
-    
-    
-</dt>
-<dd>
-
-    
-    <div class="description">
-        <p>Adds a new object into the Row, then aligns it next to the previous object.</p>
-    </div>
-    
-
-    
-
-    
-
-    
-    
-        <h5>Parameters:</h5>
-        
-
-<table class="params table table-striped">
-    <thead>
-    <tr>
-        
-        <th>Name</th>
-        
-
-        <th>Type</th>
-
-        
-
-        
-
-        <th class="last">Description</th>
-    </tr>
-    </thead>
-
-    <tbody>
-    
-
-        <tr>
-            
-                <td class="name"><code>node</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">Object</span>
+<span class="param-type">Number</span>
 
 
 
@@ -324,14 +168,14 @@ <h5>Parameters:</h5>
 
             
 
-            <td class="description last"><p>The sprite to add to the row.</p></td>
+            <td class="description last"><p>The x position of the Frame.</p></td>
         </tr>
 
     
 
         <tr>
             
-                <td class="name"><code>alignment</code></td>
+                <td class="name"><code>y</code></td>
             
 
             <td class="type">
@@ -348,20 +192,20 @@ <h5>Parameters:</h5>
 
             
 
-            <td class="description last"><p>The alignment relative to the previous child.</p></td>
+            <td class="description last"><p>The y position of the Frame.</p></td>
         </tr>
 
     
 
         <tr>
             
-                <td class="name"><code>padding</code></td>
+                <td class="name"><code>bg</code></td>
             
 
             <td class="type">
             
                 
-<span class="param-type">Number</span>
+<span class="param-type">string</span>
 
 
 
@@ -372,7 +216,7 @@ <h5>Parameters:</h5>
 
             
 
-            <td class="description last"><p>The amount of space between objects.</p></td>
+            <td class="description last"><p>The background image to use.</p></td>
         </tr>
 
     
@@ -417,7 +261,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="containers_row.js.html">containers/row.js</a>,
-				 <a href="containers_row.js.html#sunlight-1-line-22">line 22</a>
+				 <a href="containers_row.js.html#sunlight-1-line-12">line 12</a>
 			</li>
 		</ul>
 	</dd>
@@ -446,7 +290,21 @@ <h5>Parameters:</h5>
     
 </dd>
 
-        </dl>
+    
+    </div>
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
     
 
     
@@ -498,9 +356,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.Scrollbar.html b/docs/uiWidgets.Scrollbar.html
index a36e906..1bab0ac 100644
--- a/docs/uiWidgets.Scrollbar.html
+++ b/docs/uiWidgets.Scrollbar.html
@@ -333,7 +333,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-14">line 14</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-15">line 15</a>
 			</li>
 		</ul>
 	</dd>
@@ -480,7 +480,7 @@ <h5 class="subsection-title">Properties:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-76">line 76</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-77">line 77</a>
 			</li>
 		</ul>
 	</dd>
@@ -562,7 +562,7 @@ <h4 class="name" id="addScrollTween"><span class="type-signature"></span>addScro
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-165">line 165</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-166">line 166</a>
 			</li>
 		</ul>
 	</dd>
@@ -650,7 +650,7 @@ <h4 class="name" id="addScrollTweenEvents"><span class="type-signature"></span>a
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-182">line 182</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-183">line 183</a>
 			</li>
 		</ul>
 	</dd>
@@ -738,7 +738,7 @@ <h4 class="name" id="moveContent"><span class="type-signature"></span>moveConten
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-370">line 370</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-371">line 371</a>
 			</li>
 		</ul>
 	</dd>
@@ -826,7 +826,7 @@ <h4 class="name" id="resizeBar"><span class="type-signature"></span>resizeBar()<
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-103">line 103</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-104">line 104</a>
 			</li>
 		</ul>
 	</dd>
@@ -914,7 +914,7 @@ <h4 class="name" id="scrollDown"><span class="type-signature"></span>scrollDown(
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-210">line 210</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-211">line 211</a>
 			</li>
 		</ul>
 	</dd>
@@ -1002,7 +1002,7 @@ <h4 class="name" id="scrollLeft"><span class="type-signature"></span>scrollLeft(
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-230">line 230</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-231">line 231</a>
 			</li>
 		</ul>
 	</dd>
@@ -1090,7 +1090,7 @@ <h4 class="name" id="scrollRight"><span class="type-signature"></span>scrollRigh
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-250">line 250</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-251">line 251</a>
 			</li>
 		</ul>
 	</dd>
@@ -1178,7 +1178,7 @@ <h4 class="name" id="scrollUp"><span class="type-signature"></span>scrollUp()</h
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-190">line 190</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-191">line 191</a>
 			</li>
 		</ul>
 	</dd>
@@ -1266,7 +1266,7 @@ <h4 class="name" id="setDraggableArea"><span class="type-signature"></span>setDr
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-83">line 83</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-84">line 84</a>
 			</li>
 		</ul>
 	</dd>
@@ -1354,7 +1354,7 @@ <h4 class="name" id="setInitialBarPosition"><span class="type-signature"></span>
 		<ul class="dummy">
 			<li>
 				<a href="bars_scrollbar.js.html">bars/scrollbar.js</a>,
-				 <a href="bars_scrollbar.js.html#sunlight-1-line-151">line 151</a>
+				 <a href="bars_scrollbar.js.html#sunlight-1-line-152">line 152</a>
 			</li>
 		</ul>
 	</dd>
@@ -1435,9 +1435,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.ValueBar.html b/docs/uiWidgets.ValueBar.html
index 4d64d4f..e2ee2fe 100644
--- a/docs/uiWidgets.ValueBar.html
+++ b/docs/uiWidgets.ValueBar.html
@@ -357,7 +357,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_valuebar.js.html">bars/valuebar.js</a>,
-				 <a href="bars_valuebar.js.html#sunlight-1-line-16">line 16</a>
+				 <a href="bars_valuebar.js.html#sunlight-1-line-17">line 17</a>
 			</li>
 		</ul>
 	</dd>
@@ -504,7 +504,7 @@ <h5 class="subsection-title">Properties:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_valuebar.js.html">bars/valuebar.js</a>,
-				 <a href="bars_valuebar.js.html#sunlight-1-line-97">line 97</a>
+				 <a href="bars_valuebar.js.html#sunlight-1-line-98">line 98</a>
 			</li>
 		</ul>
 	</dd>
@@ -586,7 +586,7 @@ <h4 class="name" id="addScrollTweenEvents"><span class="type-signature"></span>a
 		<ul class="dummy">
 			<li>
 				<a href="bars_valuebar.js.html">bars/valuebar.js</a>,
-				 <a href="bars_valuebar.js.html#sunlight-1-line-175">line 175</a>
+				 <a href="bars_valuebar.js.html#sunlight-1-line-176">line 176</a>
 			</li>
 		</ul>
 	</dd>
@@ -674,7 +674,7 @@ <h4 class="name" id="getClosestPosition"><span class="type-signature"></span>get
 		<ul class="dummy">
 			<li>
 				<a href="bars_valuebar.js.html">bars/valuebar.js</a>,
-				 <a href="bars_valuebar.js.html#sunlight-1-line-146">line 146</a>
+				 <a href="bars_valuebar.js.html#sunlight-1-line-147">line 147</a>
 			</li>
 		</ul>
 	</dd>
@@ -762,7 +762,7 @@ <h4 class="name" id="setDraggableArea"><span class="type-signature"></span>setDr
 		<ul class="dummy">
 			<li>
 				<a href="bars_valuebar.js.html">bars/valuebar.js</a>,
-				 <a href="bars_valuebar.js.html#sunlight-1-line-104">line 104</a>
+				 <a href="bars_valuebar.js.html#sunlight-1-line-105">line 105</a>
 			</li>
 		</ul>
 	</dd>
@@ -850,7 +850,7 @@ <h4 class="name" id="setInitialBarPosition"><span class="type-signature"></span>
 		<ul class="dummy">
 			<li>
 				<a href="bars_valuebar.js.html">bars/valuebar.js</a>,
-				 <a href="bars_valuebar.js.html#sunlight-1-line-132">line 132</a>
+				 <a href="bars_valuebar.js.html#sunlight-1-line-133">line 133</a>
 			</li>
 		</ul>
 	</dd>
@@ -938,7 +938,7 @@ <h4 class="name" id="setTrackScrollAreaSize"><span class="type-signature"></span
 		<ul class="dummy">
 			<li>
 				<a href="bars_valuebar.js.html">bars/valuebar.js</a>,
-				 <a href="bars_valuebar.js.html#sunlight-1-line-122">line 122</a>
+				 <a href="bars_valuebar.js.html#sunlight-1-line-123">line 123</a>
 			</li>
 		</ul>
 	</dd>
@@ -1026,7 +1026,7 @@ <h4 class="name" id="snapToClosestPosition"><span class="type-signature"></span>
 		<ul class="dummy">
 			<li>
 				<a href="bars_valuebar.js.html">bars/valuebar.js</a>,
-				 <a href="bars_valuebar.js.html#sunlight-1-line-165">line 165</a>
+				 <a href="bars_valuebar.js.html#sunlight-1-line-166">line 166</a>
 			</li>
 		</ul>
 	</dd>
@@ -1107,9 +1107,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.ValueRange.html b/docs/uiWidgets.ValueRange.html
index f45fc24..1afe426 100644
--- a/docs/uiWidgets.ValueRange.html
+++ b/docs/uiWidgets.ValueRange.html
@@ -237,7 +237,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_ranges.js.html">bars/ranges.js</a>,
-				 <a href="bars_ranges.js.html#sunlight-1-line-41">line 41</a>
+				 <a href="bars_ranges.js.html#sunlight-1-line-42">line 42</a>
 			</li>
 		</ul>
 	</dd>
@@ -393,7 +393,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_ranges.js.html">bars/ranges.js</a>,
-				 <a href="bars_ranges.js.html#sunlight-1-line-69">line 69</a>
+				 <a href="bars_ranges.js.html#sunlight-1-line-70">line 70</a>
 			</li>
 		</ul>
 	</dd>
@@ -481,7 +481,7 @@ <h4 class="name" id="getCurrentValue"><span class="type-signature"></span>getCur
 		<ul class="dummy">
 			<li>
 				<a href="bars_ranges.js.html">bars/ranges.js</a>,
-				 <a href="bars_ranges.js.html#sunlight-1-line-76">line 76</a>
+				 <a href="bars_ranges.js.html#sunlight-1-line-77">line 77</a>
 			</li>
 		</ul>
 	</dd>
@@ -562,9 +562,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.Viewport.html b/docs/uiWidgets.Viewport.html
index 7d4a30a..777cb9c 100644
--- a/docs/uiWidgets.Viewport.html
+++ b/docs/uiWidgets.Viewport.html
@@ -285,7 +285,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="containers_viewport.js.html">containers/viewport.js</a>,
-				 <a href="containers_viewport.js.html#sunlight-1-line-13">line 13</a>
+				 <a href="containers_viewport.js.html#sunlight-1-line-14">line 14</a>
 			</li>
 		</ul>
 	</dd>
@@ -391,7 +391,7 @@ <h4 class="name" id="addNode"><span class="type-signature"></span>addNode()</h4>
 		<ul class="dummy">
 			<li>
 				<a href="containers_viewport.js.html">containers/viewport.js</a>,
-				 <a href="containers_viewport.js.html#sunlight-1-line-40">line 40</a>
+				 <a href="containers_viewport.js.html#sunlight-1-line-41">line 41</a>
 			</li>
 		</ul>
 	</dd>
@@ -577,7 +577,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="containers_viewport.js.html">containers/viewport.js</a>,
-				 <a href="containers_viewport.js.html#sunlight-1-line-52">line 52</a>
+				 <a href="containers_viewport.js.html#sunlight-1-line-53">line 53</a>
 			</li>
 		</ul>
 	</dd>
@@ -658,9 +658,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.ViewportRange.html b/docs/uiWidgets.ViewportRange.html
index 7998f50..bfe7445 100644
--- a/docs/uiWidgets.ViewportRange.html
+++ b/docs/uiWidgets.ViewportRange.html
@@ -213,7 +213,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="bars_ranges.js.html">bars/ranges.js</a>,
-				 <a href="bars_ranges.js.html#sunlight-1-line-88">line 88</a>
+				 <a href="bars_ranges.js.html#sunlight-1-line-89">line 89</a>
 			</li>
 		</ul>
 	</dd>
@@ -319,7 +319,7 @@ <h4 class="name" id="adjustValue"><span class="type-signature"></span>adjustValu
 		<ul class="dummy">
 			<li>
 				<a href="bars_ranges.js.html">bars/ranges.js</a>,
-				 <a href="bars_ranges.js.html#sunlight-1-line-111">line 111</a>
+				 <a href="bars_ranges.js.html#sunlight-1-line-112">line 112</a>
 			</li>
 		</ul>
 	</dd>
@@ -400,9 +400,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.Wheel3D.html b/docs/uiWidgets.Wheel3D.html
index 38b120b..e1c0985 100644
--- a/docs/uiWidgets.Wheel3D.html
+++ b/docs/uiWidgets.Wheel3D.html
@@ -357,7 +357,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="wheel3D.js.html">wheel3D.js</a>,
-				 <a href="wheel3D.js.html#sunlight-1-line-96">line 96</a>
+				 <a href="wheel3D.js.html#sunlight-1-line-97">line 97</a>
 			</li>
 		</ul>
 	</dd>
@@ -463,7 +463,7 @@ <h4 class="name" id="dispatchOnComplete"><span class="type-signature"></span>dis
 		<ul class="dummy">
 			<li>
 				<a href="wheel3D.js.html">wheel3D.js</a>,
-				 <a href="wheel3D.js.html#sunlight-1-line-315">line 315</a>
+				 <a href="wheel3D.js.html#sunlight-1-line-316">line 316</a>
 			</li>
 		</ul>
 	</dd>
@@ -551,7 +551,7 @@ <h4 class="name" id="dispatchOnStart"><span class="type-signature"></span>dispat
 		<ul class="dummy">
 			<li>
 				<a href="wheel3D.js.html">wheel3D.js</a>,
-				 <a href="wheel3D.js.html#sunlight-1-line-309">line 309</a>
+				 <a href="wheel3D.js.html#sunlight-1-line-310">line 310</a>
 			</li>
 		</ul>
 	</dd>
@@ -639,7 +639,7 @@ <h4 class="name" id="enableMoving"><span class="type-signature"></span>enableMov
 		<ul class="dummy">
 			<li>
 				<a href="wheel3D.js.html">wheel3D.js</a>,
-				 <a href="wheel3D.js.html#sunlight-1-line-327">line 327</a>
+				 <a href="wheel3D.js.html#sunlight-1-line-328">line 328</a>
 			</li>
 		</ul>
 	</dd>
@@ -727,7 +727,7 @@ <h4 class="name" id="moveBack"><span class="type-signature"></span>moveBack()</h
 		<ul class="dummy">
 			<li>
 				<a href="wheel3D.js.html">wheel3D.js</a>,
-				 <a href="wheel3D.js.html#sunlight-1-line-196">line 196</a>
+				 <a href="wheel3D.js.html#sunlight-1-line-197">line 197</a>
 			</li>
 		</ul>
 	</dd>
@@ -815,7 +815,7 @@ <h4 class="name" id="moveForward"><span class="type-signature"></span>moveForwar
 		<ul class="dummy">
 			<li>
 				<a href="wheel3D.js.html">wheel3D.js</a>,
-				 <a href="wheel3D.js.html#sunlight-1-line-216">line 216</a>
+				 <a href="wheel3D.js.html#sunlight-1-line-217">line 217</a>
 			</li>
 		</ul>
 	</dd>
@@ -903,7 +903,7 @@ <h4 class="name" id="project"><span class="type-signature"></span>project()</h4>
 		<ul class="dummy">
 			<li>
 				<a href="wheel3D.js.html">wheel3D.js</a>,
-				 <a href="wheel3D.js.html#sunlight-1-line-236">line 236</a>
+				 <a href="wheel3D.js.html#sunlight-1-line-237">line 237</a>
 			</li>
 		</ul>
 	</dd>
@@ -991,7 +991,7 @@ <h4 class="name" id="resetAngle"><span class="type-signature"></span>resetAngle(
 		<ul class="dummy">
 			<li>
 				<a href="wheel3D.js.html">wheel3D.js</a>,
-				 <a href="wheel3D.js.html#sunlight-1-line-348">line 348</a>
+				 <a href="wheel3D.js.html#sunlight-1-line-349">line 349</a>
 			</li>
 		</ul>
 	</dd>
@@ -1079,7 +1079,7 @@ <h4 class="name" id="updatePosition"><span class="type-signature"></span>updateP
 		<ul class="dummy">
 			<li>
 				<a href="wheel3D.js.html">wheel3D.js</a>,
-				 <a href="wheel3D.js.html#sunlight-1-line-333">line 333</a>
+				 <a href="wheel3D.js.html#sunlight-1-line-334">line 334</a>
 			</li>
 		</ul>
 	</dd>
@@ -1160,9 +1160,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.textButton.html b/docs/uiWidgets.textButton.html
index f90ef85..0a5e3b5 100644
--- a/docs/uiWidgets.textButton.html
+++ b/docs/uiWidgets.textButton.html
@@ -357,7 +357,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="buttons.js.html">buttons.js</a>,
-				 <a href="buttons.js.html#sunlight-1-line-41">line 41</a>
+				 <a href="buttons.js.html#sunlight-1-line-42">line 42</a>
 			</li>
 		</ul>
 	</dd>
@@ -452,9 +452,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/uiWidgets.textSprite.html b/docs/uiWidgets.textSprite.html
index fafad6e..ae35ec5 100644
--- a/docs/uiWidgets.textSprite.html
+++ b/docs/uiWidgets.textSprite.html
@@ -309,7 +309,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="buttons.js.html">buttons.js</a>,
-				 <a href="buttons.js.html#sunlight-1-line-14">line 14</a>
+				 <a href="buttons.js.html#sunlight-1-line-15">line 15</a>
 			</li>
 		</ul>
 	</dd>
@@ -404,9 +404,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/utils.js.html b/docs/utils.js.html
index 36e6e91..2b5a630 100644
--- a/docs/utils.js.html
+++ b/docs/utils.js.html
@@ -70,7 +70,8 @@ <h1 class="page-title">Source: utils.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 uiWidgets.utils = {};
 
@@ -133,9 +134,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>
diff --git a/docs/wheel3D.js.html b/docs/wheel3D.js.html
index 5319295..6e0878e 100644
--- a/docs/wheel3D.js.html
+++ b/docs/wheel3D.js.html
@@ -70,7 +70,8 @@ <h1 class="page-title">Source: wheel3D.js</h1>
 <section>
     <article>
         <pre
-            class="sunlight-highlight-javascript linenums">var uiWidgets = uiWidgets || {};
+            class="sunlight-highlight-javascript linenums">var uiWidgets;
+uiWidgets = uiWidgets || {};
 
 /**
  * Represents a single point in a Wheel3D.
@@ -469,9 +470,9 @@ <h4 class="modal-title">Search results</h4>
 	</span>
 
 <span class="jsdoc-message">
-	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a>
+	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>
 	
-		on Sat Feb 17th 2018
+		on Fri Mar 23rd 2018
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>