board-common v0.1.5

Common board elements

Library that contains commonly used elements for board games

• colors - set of standard colors
• shapes - functions to draw/fill circles
• Status - status bar that can be used to display messages like "Your turn", "X did Y" etc.
• ImageButton - button that can use images for it's states can be changed on the fly
• RoundedBox - Base for creating custom dialogs with rounded corners
• ScoreIndicator - colored circle with text inside that can be used to show scores or other information on game field
• Cell - element of the field that can display board elements (pieces, dices etc) and iteract with user actions

Colors

Just a set of some most common used colors

    WHITE: 0xFFFFFFFF,
    BLACK: 0xFF383830,
    GRAY: 0xFF919191,
    DARK_GRAY: 0xFF2E2E2E,
    LIGHT_GRAY: 0xFFC2C2C2,
    BLUE: 0xFF1687EF,
    DARK_BLUE: 0xFF1776CD,
    RED: 0xFFFF5F5F,
    DARK_RED: 0xFFEA4D4D,
    GREEN: 0xFF7ED321,
    MASK_BLACK: 0x59000000

Shapes

Functions that are used to draw filled shapes

fillCircle(renderer, x, y, radius, sides, color) - fill "circle" with center in (x,y) with defined radius that is created as sides-sided polygon with color, using some renderer

Example

this._circle._render = function (renderer) {
        shapes.fillCircle(renderer, this.width/2, this.height/2, this.width/2, 50, this._col);
    };

fillPill(renderer, x, y, width, height, color) - same as for fillCircle, but tries to create circle using arcs instead of lines

Status

Status bar to display informational messages

var status = new Status();

setStatusText(text) - sets text to status bar

getStatusText() - returns text set to status bar

setTextSize(size) - sets text size (in pixels)

setTextColor(color) - sets text color

ImageButton

Button that contains image(s) and text

Constructor

ImageButton(states, text, fontSize, fontColor, fontStyle)

Usage

var button = new ImageButton( {
        default: {
            image: new Sprite("button")
        },
        active: {
            image: new Sprite("button_tapped")
        },
        disabled: {
            image: new Sprite("button_disabled")
        }
    }, plato.translate(["BUTTON_TEXT"]), utils.pointsToPixels(6), COLORS.WHITE, "bold");

disable() - sets button state to disabled and loads image from disabled state if available

enable() - sets button state to default and loads image from default state if available

setStates(states) - replaces button states config with new set of states and updates the image

getState() - returns current button state (default, active, disabled)

RoundedBox

Element that looks like box with rounded angles, filled with some image

Constructor

RoundedBox(width, height, corner, box) - creates box with size width*height using corner as image for corners and box as image to fill box

Usage

var roundedBox = RoundedBox(width, height, "corner", "middle");

If you create element that extends RoundedBox, then usage is

function CustomDialog() {
    RoundedBox.call(this, width, height, "corner", "middle");
    //...
}
var proto = object.extend(CustomDialog, RoundedBox);

ScoreIndicator

Colored circle with white text inside that can be used to show scores or other information on game field

Constructor

ScoreIndicator(color)

Property text is used to set text for indicator

Usage

var indicator = ScoreIndicator(COLORS.RED);
indicator.text = "42";

Cell

Element of the field that can display board elements (pieces, dices etc) and iteract with user actions

Constructor

Cell()

setFigure(figure) - sets element with figure image and resizes it to the size of Cell while clearing custom setup

getFigure() - returns figure name (usually, Sprite key)

setBackground(image) - sets background image in case it's needed

Property type - sets cell type (any custom text)

clear() - removes foreground figure and all custom setup (type, color, scaling, alpha)

clearBackground - explicitly clear background

setOffset(offsetX, offsetY) - set foreground image offset

Example

var cell = new Cell();
cell.setFigure("diceImage");
cell.type = "dice";