Class: ConBox

MC.ConBox() → {ConBox}

new ConBox() → {ConBox}

The MC.ConBox (short for "Control Box") object provides a basic clickable element, or button, on the canvas.
Although they can be manually managed, they are best implemented en-masse with the MS.GUI object
ConBox's constructor calls are made with a value object in key: value pairs (see the MC.ConBox.setValues() method below)
ConBox(es) have a variety of features, namely:
... Axis Aligned Rectangle or Circular form
... configurable to have a "hover over" color change
... text which is auto scaled to fit
... placeholder onClick() function for Developer customisation
This:
  • {ConBox}
Properties:
Name Type Attributes Default Description
type String <optional>
 "r" ConBox type is either "r" for Rectangle, or "c" for Circular
pos MC.Point <optional>
 mid Canvas Screen Co-ordinates of the ConBox CENTRE
width Number <optional>
 250 Width of the Control box
N.B. this is the diameter of any circular ConBox's
height Number <optional>
 50 Height of the ConBox (autoset to match Width for circular ConBox's)
font String <optional>
 MC.game.text.font Desired Font
fSize Number <optional>
 50 Font size to be used displaying any text
Automatically set upon any setting or change of width, height or text properties
colorBody MC.Color | String <optional>
 MC.game.conBoxDefaults.colorBody The base (inactive) colour of the button
colorBodyHover MC.Color | String <optional>
 MC.game.conBoxDefaults.colorBodyHover The base colour of the button, when hover property is true. i.e. the mouse pointer is over it
colorEdge MC.Color | String <optional>
 MC.game.conBoxDefaults.colorEdge The base (inactive) colour of the button edge and text
colorEdgeHover MC.Color | String <optional>
 MC.game.conBoxDefaults.colorEdgeHover The base colour of the button edge and text, when hover property is true
edgeWidth Number <optional>
 MC.game.conBoxDefaults.edgeWidth Size of the border to be applied to the button
text String <optional>
 "To Be Arranged" Text (if any) to be displayed on the button
hover Boolean <optional>
 false Configured in the update() method. True if the mouse cursor is over the button, else false
offset MC.Point <optional>
 Internally used value to reflect the start position of the button text (from centre)
oldText String <optional>
 Internally used flag variable to detect whether text re-size is required
oldWidth Number <optional>
 Internally used flag variable to detect whether text re-size is required
oldHeight Number <optional>
 Internally used flag variable to detect whether text re-size is required
typeface MC.Typeface <optional>
 Internally used object for text rendering
visible Boolean <optional>
 true Visible ConBox's will be rendered, but not if this is set to false
Source:
Returns:
a new ConBox object
Type
ConBox

Methods

checkClick(mouseopt)

Calls the update() method and if the mouse if over the button (i.e. hover == true) calls the onClick() method
Parameters:
Name Type Attributes Default Description
mouse MC.Point <optional>
 MC.game.mouse Screen coordinates to be be checked against
Source:

clone() → {ConBox}

Clones the ConBox, and returns a new one. Useful for rapid prototyping
Source:
Returns:
a new ConBox object (with the same parameters)
WARNING: any custom behaviour defined in the onClick() function are NOT copied
Type
ConBox

onClick()

Developer customisable function determining what is to happen when the button is clicked
Source:

render(positionopt)

Renders the ConBox to the canvas, colours used depend upon the hover value
Parameters:
Name Type Attributes Default Description
position MC.Point <optional>
 this.pos Screen coordinates of the centre point of the button.
N.B. The ConBox pos property will be overwritten by any newly presented position
Source:

setValues(values) → {this}

Configures the ConBox via an object consisting of key: value pairs
Called automatically upon construction, also calls the MC.ConBox.fitText() method
Parameters:
Name Type Description
values Object The values to be applied
Source:
Throws:
Console warning if key value does not exist in the ConBox
Returns:
Enables method chaining
Type
this
Example
var myConBox = new MC.ConBox (
                            {width: 150,
                             height: 30,
                             pos: new MC.Point(300,200),
                             font: "Impact",
                             text: "Print Hello World",
                             onClick: function () { console.log("Hello World");
                                                    myOtherFunction(); },
                             } );

textFit()

Autofits the text to fit within the button.
Called automatically upon construction, setValues or when an update() detects a change between current and "old" values of width, height or text
Source:

update(mouseopt) → {this}

Checks if the mouse coordinates are over the button. Is so, sets the hover property to true
Both the clickCheck() and render() methods depend upon the hover property
N.B. this need only be called once per frame, so in any requestAnimationFrame() gameloop it is recommended that this call is made after any MC.game.physicsUpates loop but before any render calls
Parameters:
Name Type Attributes Default Description
mouse MC.Point <optional>
 MC.game.mouse Mouse coordinates to be checked
Source:
Returns:
Enables method chaining
Type
this