Phaser

Class: BitmapData

Phaser. BitmapData

Note: This object is still experimental and likely to change.

A BitmapData object can be thought of as a blank canvas onto which you can perform graphics operations as you would on a normal canvas, such as drawing lines, circles, arcs, fills and copying and setting blocks of pixel data. A single BitmapData can be used as the texture for multiple Sprites. So if you need to dynamically create a Sprite texture then they are a good choice. It supports the EaselJS Tiny API.

new BitmapData(game, width, height)

Creates a new BitmapData object.

Parameters:
Name Type Argument Default Description
game Phaser.Game

A reference to the currently running game.
width number <optional>
 256

The width of the BitmapData in pixels.
height number <optional>
 256

The height of the BitmapData in pixels.
Source:

Members

baseTexture

Properties:
Name Type Description
baseTexture PIXI.BaseTexture

The PIXI.BaseTexture.
Source:

canvas

Properties:
Name Type Description
canvas HTMLCanvasElement

The canvas to which this BitmapData draws.
Source:

context

Properties:
Name Type Description
context CanvasRenderingContext2D

The 2d context of the canvas.
Source:

game

Properties:
Name Type Description
game Phaser.Game

A reference to the currently running game.
Source:

height

Properties:
Name Type Description
height number

The height of the BitmapData in pixels.
Source:

imageData

Properties:
Name Type Description
imageData array

The canvas image data.
Source:

name

Properties:
Name Type Description
name string

The name of the BitmapData.
Source:

pixels

Properties:
Name Type Description
pixels UInt8Clamped

A reference to the context imageData buffer.
Source:

texture

Properties:
Name Type Description
texture PIXI.Texture

The PIXI.Texture.
Source:

textureFrame

Properties:
Name Type Description
textureFrame Phaser.Frame

The Frame this BitmapData uses for rendering.
Source:

type

Properties:
Name Type Description
type number

The const type of this object.
Source:

width

Properties:
Name Type Description
width number

The width of the BitmapData in pixels.
Source:

Methods

a()

Shortcut to arc.

Source:

add(sprite)

Updates the given Sprite so that it uses this BitmapData as its texture.

Parameters:
Name Type Description
sprite Phaser.Sprite

The sprite to apply this texture to.
Source:

addTo(sprites)

Given an array of Sprites it will update each of them so that their Textures reference this BitmapData.

Parameters:
Name Type Description
sprites Phaser.Sprite[]

An array of Sprites to apply this texture to.
Source:

arc(x, y, radius, startAngle, endAngle, anticlockwise) → {Phaser.BitmapData}

Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).

Parameters:
Name Type Argument Default Description
x number

The x axis of the coordinate for the arc's center
y number

The y axis of the coordinate for the arc's center
radius number

The arc's radius
startAngle number

The starting point, measured from the x axis, from which it will be drawn, expressed in radians.
endAngle number

The end arc's angle to which it will be drawn, expressed in radians.
anticlockwise boolean <optional>
 true

true draws the arc anticlockwise, otherwise in a clockwise direction.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

arcTo(x1, y1, x2, y2, radius) → {Phaser.BitmapData}

Adds an arc with the given control points and radius, connected to the previous point by a straight line.

Parameters:
Name Type Description
x1 number
y1 number
x2 number
y2 number
radius number
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

at()

Shortcut to arcTo.

Source:

beginFill(color) → {Phaser.BitmapData}

Begins a fill with the specified color. This ends the current sub-path.

Parameters:
Name Type Description
color string

A CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to null will result in no fill.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

beginLinearGradientFill(colors, ratios, x0, y0, x1, y1) → {Phaser.BitmapData}

Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a square to display it:

 ```myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).rect(20, 20, 120, 120);```
Parameters:
Name Type Description
colors Array

An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
ratios Array

An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
x0 number

The position of the first point defining the line that defines the gradient direction and size.
y0 number

The position of the first point defining the line that defines the gradient direction and size.
x1 number

The position of the second point defining the line that defines the gradient direction and size.
y1 number

The position of the second point defining the line that defines the gradient direction and size.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

beginLinearGradientStroke(colors, ratios, x0, y0, x1, y1) → {Phaser.BitmapData}

Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a square to display it:

 ```myGraphics.setStrokeStyle(10).beginLinearGradientStroke(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);```
Parameters:
Name Type Description
colors Array

An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
ratios Array

An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
x0 number

The position of the first point defining the line that defines the gradient direction and size.
y0 number

The position of the first point defining the line that defines the gradient direction and size.
x1 number

The position of the second point defining the line that defines the gradient direction and size.
y1 number

The position of the second point defining the line that defines the gradient direction and size.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

beginPath() → {Phaser.BitmapData}

Starts a new path by resetting the list of sub-paths. Call this method when you want to create a new path.

Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

beginRadialGradientStroke(colors, ratios, x0, y0, r0, x1, y1, r1) → {Phaser.BitmapData}

Begins a radial gradient stroke. This ends the current sub-path. For example, the following code defines a red to blue radial gradient centered at (100, 100), with a radius of 50, and draws a rectangle to display it:

 myGraphics.setStrokeStyle(10)
     .beginRadialGradientStroke(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50)
     .drawRect(50, 90, 150, 110);
Parameters:
Name Type Description
colors Array

An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue.
ratios Array

An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%.
x0 number

Center position of the inner circle that defines the gradient.
y0 number

Center position of the inner circle that defines the gradient.
r0 number

Radius of the inner circle that defines the gradient.
x1 number

Center position of the outer circle that defines the gradient.
y1 number

Center position of the outer circle that defines the gradient.
r1 number

Radius of the outer circle that defines the gradient.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

beginStroke(color) → {Phaser.BitmapData}

Begins a stroke with the specified color. This ends the current sub-path.

Parameters:
Name Type Description
color String

A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to null will result in no stroke.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) → {Phaser.BitmapData}

Adds a bezier curve from the current context point to (x, y) using the control points (cp1x, cp1y) and (cp2x, cp2y).

Parameters:
Name Type Description
cp1x number

The x axis of control point 1.
cp1y number

The y axis of control point 1.
cp2x number

The x axis of control point 2.
cp2y number

The y axis of control point 2.
x number

The x axis of the ending point.
y number

The y axis of the ending point.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

bf()

Shortcut to beginBitmapFill.

Source:

bs()

Shortcut to beginBitmapStroke.

Source:

bt()

Shortcut to bezierCurveTo.

Source:

c()

Shortcut to clear.

Source:

circle(x, y, radius) → {Phaser.BitmapData}

Draws a circle with the specified radius at (x, y).

Parameters:
Name Type Description
x number

x coordinate center point of circle.
y number

y coordinate center point of circle.
radius number

Radius of circle in radians.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

clear()

Clears the BitmapData.

Source:

clearRect(x, y, width, height) → {Phaser.BitmapData}

Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black.

Parameters:
Name Type Description
x number

The x axis of the coordinate for the rectangle starting point.
y number

The y axis of the coordinate for the rectangle starting point.
width number

The rectangles width.
height number

The rectangles height.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

clip() → {Phaser.BitmapData}

Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only.

Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

closePath() → {Phaser.BitmapData}

Tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.

Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

cp()

Shortcut to closePath.

Source:

createLinearGradient(x, y, width, height) → {CanvasGradient}

Creates a linear gradient with defined by an imaginary line which implies the direction of the gradient. Once the gradient is created colors can be inserted using the addColorStop method.

Parameters:
Name Type Description
x number

The x axis of the coordinate for the gradients starting point.
y number

The y axis of the coordinate for the gradients starting point.
width number

The width of the gradient.
height number

The height of the gradient.
Source:
Returns:

The Linear Gradient.

Type
CanvasGradient

createRadialGradient(x0, y0, r0, x1, y1, r1) → {CanvasGradient}

Creates a radial gradient.

Parameters:
Name Type Description
x0 number
y0 number
r0 number
x1 number
y1 number
r1 number
Source:
Returns:

The Radial Gradient.

Type
CanvasGradient

dc()

Shortcut to drawCircle.

Source:

de()

Shortcut to drawEllipse.

Source:

dp()

Shortcut to drawPolyStar.

Source:

dr()

Shortcut to rect.

Source:

ef()

Shortcut to endFill.

Source:

ellipse(x, y, w, h) → {Phaser.BitmapData}

Draws an ellipse (oval) with a specified width (w) and height (h).

Parameters:
Name Type Description
x number

x coordinate center point of ellipse.
y number

y coordinate center point of ellipse.
w number

height (horizontal diameter) of ellipse. The horizontal radius will be half of this number.
h number

width (vertical diameter) of ellipse. The vertical radius will be half of this number.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

es()

Shortcut to endStroke.

Source:

f()

Shortcut to beginFill.

Source:

fill() → {Phaser.BitmapData}

Fills the subpaths with the current fill style.

Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

fillRect(x, y, width, height) → {Phaser.BitmapData}

Draws a filled rectangle at (x, y) position whose size is determined by width and height.

Parameters:
Name Type Description
x number

The x axis of the coordinate for the rectangle starting point.
y number

The y axis of the coordinate for the rectangle starting point.
width number

The rectangles width.
height number

The rectangles height.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

fillStyle(color) → {Phaser.BitmapData}

Sets the fill style.

Parameters:
Name Type Description
color string

The fill color value in CSS format: #RRGGBB or rgba(r,g,b,a)
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

font(font) → {Phaser.BitmapData}

Sets the font.

Parameters:
Name Type Description
font DOMString

The font to be used for any text rendering. Default value 10px sans-serif.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

getPixel(x, y) → {number}

Get a color of a specific pixel.

Parameters:
Name Type Description
x number

The X coordinate of the pixel to get.
y number

The Y coordinate of the pixel to get.
Source:
Returns:

A native color value integer (format: 0xRRGGBB)

Type
number

getPixel32(x, y) → {number}

Get a color of a specific pixel (including alpha value).

Parameters:
Name Type Description
x number

The X coordinate of the pixel to get.
y number

The Y coordinate of the pixel to get.
Source:
Returns:

A native color value integer (format: 0xAARRGGBB)

Type
number

getPixels(rect) → {array}

Get pixels in array in a specific Rectangle.

Parameters:
Name Type Description
rect Rectangle

The specific Rectangle.
Source:
Returns:

CanvasPixelArray.

Type
array

globalAlpha(alpha) → {Phaser.BitmapData}

Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).

Parameters:
Name Type Description
alpha number

Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

globalCompositeOperation(operation) → {Phaser.BitmapData}

With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap. Possible values: source-atop, source-in, source-out, source-over (default), destination-atop, destination-in, destination-out, destination-over, lighter, darker, copy and xor.

Parameters:
Name Type Description
operation DOMString

The composite operation to apply.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

lf()

Shortcut to beginLinearGradientFill.

Source:

lineCap(style) → {Phaser.BitmapData}

Type of endings on the end of lines. Possible values: butt (default), round, square.

Parameters:
Name Type Description
style DOMString

Possible values: butt (default), round, square
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

lineDashOffset(offset) → {Phaser.BitmapData}

Specifies where to start a dasharray on a line.

Parameters:
Name Type Description
offset number

Specifies where to start a dasharray on a line.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

lineJoin(join) → {Phaser.BitmapData}

Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default)

Parameters:
Name Type Description
join DOMString

Possible values: round, bevel, miter (default)
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

lineTo(x, y) → {Phaser.BitmapData}

Connects the last point in the subpath to the x, y coordinates with a straight line.

Parameters:
Name Type Description
x number

The x axis of the coordinate for the end of the line.
y number

The y axis of the coordinate for the end of the line.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

lineWidth(width) → {Phaser.BitmapData}

Width of lines. Default 1.0

Parameters:
Name Type Description
width number

Width of lines. Default 1.0
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

ls()

Shortcut to beginLinearGradientStroke.

Source:

miterLimit(limit) → {Phaser.BitmapData}

Default 10.

Parameters:
Name Type Description
limit number

Default 10.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

moveTo(x, y) → {Phaser.BitmapData}

Moves the starting point of a new subpath to the (x, y) coordinates.

Parameters:
Name Type Description
x number

The x axis of the point.
y number

The y axis of the point.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

mt()

Shortcut to moveTo.

Source:

mt()

Shortcut to lineTo.

Source:

qt()

Shortcut to quadraticCurveTo.

Source:

quadraticCurveTo(cpx, cpy, x, y) → {Phaser.BitmapData}

Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy).

Parameters:
Name Type Description
cpx Number

The x axis of the control point.
cpy Number

The y axis of the control point.
x Number

The x axis of the ending point.
y Number

The y axis of the ending point.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

r()

Shortcut to rect.

Source:

rc()

Shortcut to drawRoundRectComplex.

Source:

rect(x, y, width, height) → {Phaser.BitmapData}

Draws a rectangle at (x, y) position whose size is determined by width and height.

Parameters:
Name Type Description
x number

The x axis of the coordinate for the rectangle starting point.
y number

The y axis of the coordinate for the rectangle starting point.
width number

The rectangles width.
height number

The rectangles height.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

render()

If the game is running in WebGL this will push the texture up to the GPU if it's dirty. This is called automatically if the BitmapData is being used by a Sprite, otherwise you need to remember to call it in your render function.

Source:

restore() → {Phaser.BitmapData}

Restores the drawing style state to the last element on the 'state stack' saved by save().

Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

rf()

Shortcut to beginRadialGradientFill.

Source:

rotate(angle) → {Phaser.BitmapData}

Rotates the drawing context values by r radians.

Parameters:
Name Type Description
angle number

The angle of rotation given in radians.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

rr()

Shortcut to drawRoundRect.

Source:

rs()

Shortcut to beginRadialGradientStroke.

Source:

s()

Shortcut to beginStroke.

Source:

save() → {Phaser.BitmapData}

Saves the current drawing style state using a stack so you can revert any change you make to it using restore().

Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

scale(x, y) → {Phaser.BitmapData}

Scales the current drawing context.

Parameters:
Name Type Description
x number
y number
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

scrollPathIntoView() → {Phaser.BitmapData}

Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

setPixel(x, y, red, green, blue)

Sets the color of the given pixel to the specified red, green and blue values.

Parameters:
Name Type Description
x number

The X coordinate of the pixel to be set.
y number

The Y coordinate of the pixel to be set.
red number

The red color value (between 0 and 255)
green number

The green color value (between 0 and 255)
blue number

The blue color value (between 0 and 255)
Source:

setPixel32(x, y, red, green, blue, alpha)

Sets the color of the given pixel to the specified red, green, blue and alpha values.

Parameters:
Name Type Description
x number

The X coordinate of the pixel to be set.
y number

The Y coordinate of the pixel to be set.
red number

The red color value, between 0 and 0xFF (255).
green number

The green color value, between 0 and 0xFF (255).
blue number

The blue color value, between 0 and 0xFF (255).
alpha number

The alpha color value, between 0 and 0xFF (255).
Source:

setStrokeStyle(thickness, caps, joints, miterLimit, ignoreScale) → {Phaser.BitmapData}

Sets the stroke style for the current sub-path. Like all drawing methods, this can be chained, so you can define the stroke style and color in a single line of code like so:

 ```myGraphics.setStrokeStyle(8,"round").beginStroke("#F00");```
Parameters:
Name Type Argument Default Description
thickness number

The width of the stroke.
caps string | number <optional>
 0

Indicates the type of caps to use at the end of lines. One of butt, round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with he tiny API.
joints string | number <optional>
 0

Specifies the type of joints that should be used where two lines meet. One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel) for use with the tiny API.
miterLimit number <optional>
 10

If joints is set to "miter", then you can specify a miter limit ratio which controls at what point a mitered joint will be clipped.
ignoreScale boolean <optional>
 false

If true, the stroke will be drawn at the specified thickness regardless of active transformations.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

ss()

Shortcut to setStrokeStyle.

Source:

stroke() → {Phaser.BitmapData}

Strokes the subpaths with the current stroke style.

Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

strokeRect(x, y, width, height) → {Phaser.BitmapData}

Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.

Parameters:
Name Type Description
x number

The x axis for the starting point of the rectangle.
y number

The y axis for the starting point of the rectangle.
width number

The rectangles width.
height number

The rectangles height.
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData

strokeStyle(style) → {Phaser.BitmapData}

Color or style to use for the lines around shapes. Default #000 (black).

Parameters:
Name Type Description
style string

Color or style to use for the lines around shapes. Default #000 (black).
Source:
Returns:

The BitmapData instance this method was called on.

Type
Phaser.BitmapData
Phaser Copyright © 2012-2014 Photon Storm Ltd.
Documentation generated by JSDoc 3.3.0-dev on Wed Feb 05 2014 06:28:25 GMT-0000 (GMT) using the DocStrap template.