Graphics Components

StaticSprite

Describes a sprite that does not animate.

Usage

var entity = new hitagi.Entity()
    .attach(new hitagi.components.Position({
        x: 0,
        y: 0
    }))
    .attach(new hitagi.components.graphics.Graphic())
    .attach(new hitagi.components.graphics.StaticSprite({
        path: 'player.png'
    }));

Constructor

parameters:
    params (object): {
        path (string): path to load sprite asset from,
        rotation (number) [default: 0]: sprite rotation in radians
    }

Properties

path:

string

rotation:

number [default: 0]

Sprite

Describes an animated sprite.

Usage

var entity = new hitagi.Entity()
    .attach(new hitagi.components.Position({
        x: 0,
        y: 0
    }))
    .attach(new hitagi.components.graphics.Graphic())
    .attach(new hitagi.components.graphics.Sprite({
        path: 'player.png'
    }));

Constructor

parameters:
    params (object): {
        path (string): path to load sprite asset from,
        animationSpeed (number) [default: 1]: animations frames to change per seconds
        currentFrame (number) [default: 1]: current frame number,
        loop (boolean) [default: true]: if animation replays after it finishes
        rotation (number) [default: 0]: sprite rotation in radians
    }

Properties

path:

string

frameCount:

number (READ-ONLY)

animationSpeed:

number [default: 1]

currentFrame:

number [default: 1]

loop:

boolean [default: true]

rotation:

number [default: 0]

Text

Describes renderable text.

Usage

var entity = new hitagi.Entity()
    .attach(new hitagi.components.graphics.Graphic())
    .attach(new hitagi.components.graphics.Text({
        copy: 'Hello, World!',
        style: {
            font: '72px monospace',
            fill: 0x111222
        }
    }));

Constructor

parameters:
    params (object): {
        copy (string): string of text to render
        bitmapFont (boolean): if the font in style is a bitmapFont loaded
        style (object): {
            font (string): font description, for example '32px arial'
            fill (string): name of fill color 
        }
    }

Properties

copy:

string

bitmapFont:

boolean

style:

object: {
    font (string) [default: '32px monospace'],
    fill (hex number) [default: 0xffffff]
}

Rectangle

Describes a Rectangle primitive.

Usage

var entity = new hitagi.Entity()
    .attach(new hitagi.components.Position({
        x: 0,
        y: 0
    }))
    .attach(new hitagi.components.graphics.Graphic())
    .attach(new hitagi.components.graphics.Rectangle({
        color: 0xffffff,
        width: 32,
        height: 32
    }));

Constructor

parameters:
    params (object): {
        color (hex number): primitive color hex code
        width (number, positive): rectangle width,
        height (number): rectangle height
    }

Properties

color:

hex number

width:

number (positive)

height:

number (positive)

Polygon

Describes a Polygon primitive.

Usage

var entity = new hitagi.Entity()
    .attach(new hitagi.components.Position({
        x: 0,
        y: 0
    }))
    .attach(new hitagi.components.graphics.Graphic())
    .attach(new hitagi.components.graphics.Polygon({
        points: [
            0, 0,
            10, 10,
            20, 20
        ]
    }));

Constructor

parameters:
    params (object): {
        points (array of numbers): arrays of alternating x and y co-ordinates of points
    }

Properties

points:

array of numbers

Line

Describes a Line primitive.

Usage

var entity = new hitagi.Entity()
    .attach(new hitagi.components.Position({
        x: 0,
        y: 0
    }))
    .attach(new hitagi.components.graphics.Graphic())
    .attach(new hitagi.components.graphics.Line({
        x1: 0,
        y1: 0,
        x2: 100,
        y2: 100,
        thickness: 5
    }));

Constructor

parameters:
    params (object): {
        x1 (number): relative x co-ordinate of starting point
        y1 (number): relative y co-ordinate of starting point
        x2 (number): relative x co-ordinate of finishing point
        y2 (number): relative y co-ordinate of finishing point
        thickness (number, positive) [default: 1]: line thickness
    }

Properties

x1:

number

y1:

number

x2:

number

y2:

number

thickness:

number, positive

Ellipse

Describes an Ellipse primitive.

Usage

var entity = new hitagi.Entity()
    .attach(new hitagi.components.Position({
        x: 0,
        y: 0
    }))
    .attach(new hitagi.components.graphics.Graphic())
    .attach(new hitagi.components.graphics.Ellipse({
        color: 0xffffff,
        width: 48,
        height: 32
    }));

Constructor

parameters:
    params (object): {
        width (number, positive): width of the ellipse
        height (number, positive): height of ellipse,
        color (hex number): hex color
    }

Properties

width:

number, positive

height:

number, positive

color:

hex number

Circle

Describes a Circle primitive.

Usage

var entity = new hitagi.Entity()
    .attach(new hitagi.components.Position({
        x: 0,
        y: 0
    }))
    .attach(new hitagi.components.graphics.Graphic())
    .attach(new hitagi.components.graphics.Circle({
        color: 0xffffff,
        radius: 16
    }));

Constructor

parameters:
    params (object): {
        color (hex number): hex color
        radius (number, positive): circle radius
    }

Properties

radius:

number, positive

color:

hex number