Phaser . BitmapData

new BitmapData (game, key, width , height )

A BitmapData object contains a Canvas element to which you can draw anything you like via normal Canvas context operations. A single BitmapData can be used as the texture for one or many Images / Sprites. So if you need to dynamically create a Sprite texture then they are a good choice.

Important note: Every BitmapData creates its own Canvas element. Because BitmapData's are now Game Objects themselves, and don't live on the display list, they are NOT automatically cleared when you change State. Therefore you must call BitmapData.destroy in your State's shutdown method if you wish to free-up the resources the BitmapData used, it will not happen for you.

BitmapData对象包含一个canvas元素,您可以通过普通的canvas上下文操作向该元素绘制所需的任何内容。单个位图数据可以用作一个或多个图像/精灵的纹理。所以,如果你需要动态创建一个精灵纹理,那么它们是一个不错的选择。
重要提示:每个位图数据都创建自己的画布元素。因为BitmapData现在是游戏对象本身,不在显示列表中,所以在更改状态时不会自动清除它们。因此,必须在状态的Shutdown方法中调用BitmapData.Destroy。如果希望释放BitmapData使用的资源,则不会发生这种情况。
Parameters:
Name Type Argument Default Description
game Phaser.Game

A reference to the currently running game. 对当前正在运行的游戏的引用。

key string

Internal Phaser reference key for the BitmapData. 位图数据的内部相位器参考键。

width number <optional>
256

The width of the BitmapData in pixels. If undefined or zero it's set to a default value. 位图数据的宽度(像素)。如果未定义或为零,则设置为 默认值。

height number <optional>
256

The height of the BitmapData in pixels. If undefined or zero it's set to a default value. 位图数据的高度(像素)。如果未定义或为零,则设置为 默认值。

Source - gameobjects/BitmapData.js , line 23

Members

baseTexture : PIXI.BaseTexture

The PIXI.BaseTexture.

Source - gameobjects/BitmapData.js , line 117

canvas :HTMLCanvasElement

The canvas to which this BitmapData draws. 此位图数据绘制到的画布。

Source - gameobjects/BitmapData.js , line 52

context :CanvasRenderingContext2D

The 2d context of the canvas. 画布的二维上下文。

Source - gameobjects/BitmapData.js , line 58

ctx :CanvasRenderingContext2D

A reference to BitmapData.context. 对BitmapData.Context的引用。

Source - gameobjects/BitmapData.js , line 63

data :Uint8ClampedArray

A Uint8ClampedArray view into BitmapData.buffer. Note that this is unavailable in some browsers (such as Epic Browser due to its security restrictions) BitmapData.Buffer中的uint8clampedArray视图。请注意,这是不可用的 在某些浏览器中(如EPIC浏览器,由于其安全限制)

Source - gameobjects/BitmapData.js , line 77

dirty :boolean

If dirty this BitmapData will be re-rendered. 如果变脏,将重新呈现此位图数据。

Source - gameobjects/BitmapData.js , line 147

disableTextureUpload :boolean

If disableTextureUpload is true this BitmapData will never send its image data to the GPU when its dirty flag is true. 如果disabletextureupload为true,则此位图数据将永远不会发送其图像。 当GPU的脏标志为真时向其发送数据。

Source - gameobjects/BitmapData.js , line 142

game : Phaser.Game

A reference to the currently running game. 对当前正在运行的游戏的引用。

Source - gameobjects/BitmapData.js , line 31

height :number

The height of the BitmapData in pixels. 位图数据的高度(像素)。

Source - gameobjects/BitmapData.js , line 46

imageData :ImageData

The context image data. Please note that a call to BitmapData.draw() or BitmapData.copy() does not update immediately this property for performance reason. Use BitmapData.update() to do so. This property is updated automatically after the first game loop, according to the dirty flag property. 上下文图像数据。请注意,调用bitmapdata.draw()或 bitmapdata.copy()不会立即更新此属性以提高性能 原因。使用bitmapdata.update()执行此操作。此属性将自动更新 在第一个游戏循环之后,根据脏标志属性。

Source - gameobjects/BitmapData.js , line 70

key :string

The key of the BitmapData in the Cache, if stored there. 缓存中BitmapData的键(如果存储在缓存中)。

Source - gameobjects/BitmapData.js , line 36

pixels :Uint32Array

An Uint32Array view into BitmapData.buffer. BitmapData.Buffer中的uint32数组视图。

Source - gameobjects/BitmapData.js , line 87

texture : PIXI.Texture

The PIXI.Texture.

Source - gameobjects/BitmapData.js , line 123

textureFrame : Phaser.Frame

The Frame this BitmapData uses for rendering. 此位图数据用于呈现的帧。

Source - gameobjects/BitmapData.js , line 129

type :number

The const type of this object. 此对象的常量类型。

Source - gameobjects/BitmapData.js , line 137

width :number

The width of the BitmapData in pixels. 位图数据的宽度(像素)。

Source - gameobjects/BitmapData.js , line 41

Methods

<static> getTransform (translateX, translateY, scaleX, scaleY, skewX, skewY) → {object}

Gets a JavaScript object that has 6 properties set that are used by BitmapData in a transform. 获取一个javascript对象,该对象具有6个由BitmapData使用的属性集 在变换中。

Parameters:
Name Type Description
translateX number

The x translate value.

translateY number

The y translate value.

scaleX number

The scale x value.

scaleY number

The scale y value.

skewX number

The skew x value.

skewY number

The skew y value.

Returns:
object -

A JavaScript object containing all of the properties BitmapData needs for transforms. 包含BitmapData需要的所有属性的javascript对象 用于变换。

Source - gameobjects/BitmapData.js , line 2246

add (object) → { Phaser.BitmapData }

Updates the given objects so that they use this BitmapData as their texture. This will replace any texture they will currently have set.

Parameters:
Name Type Description
object Phaser.Sprite | Array.< Phaser.Sprite > | Phaser.Image | Array.< Phaser.Image >

Either a single Sprite/Image or an Array of Sprites/Images.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 381

addToWorld ( x , y , anchorX , anchorY , scaleX , scaleY ) → { Phaser.Image }

Creates a new Phaser.Image object, assigns this BitmapData to be its texture, adds it to the world then returns it.

Parameters:
Name Type Argument Default Description
x number <optional>
0

The x coordinate to place the Image at.

y number <optional>
0

The y coordinate to place the Image at.

anchorX number <optional>
0

Set the x anchor point of the Image. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.

anchorY number <optional>
0

Set the y anchor point of the Image. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.

scaleX number <optional>
1

The horizontal scale factor of the Image. A value of 1 means no scaling. 2 would be twice the size, and so on.

scaleY number <optional>
1

The vertical scale factor of the Image. A value of 1 means no scaling. 2 would be twice the size, and so on.

Returns:

The newly added Image object.

Source - gameobjects/BitmapData.js , line 1167

alphaMask (source, mask , sourceRect , maskRect ) → { Phaser.BitmapData }

Draws the image onto this BitmapData using an image as an alpha mask.

Parameters:
Name Type Argument Description
source Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.BitmapData | Image | HTMLCanvasElement | string

The source to copy from. If you give a string it will try and find the Image in the Game.Cache first. This is quite expensive so try to provide the image itself.

mask Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.BitmapData | Image | HTMLCanvasElement | string <optional>

The object to be used as the mask. If you give a string it will try and find the Image in the Game.Cache first. This is quite expensive so try to provide the image itself. If you don't provide a mask it will use this BitmapData as the mask.

sourceRect Phaser.Rectangle <optional>

A Rectangle where x/y define the coordinates to draw the Source image to and width/height define the size.

maskRect Phaser.Rectangle <optional>

A Rectangle where x/y define the coordinates to draw the Mask image to and width/height define the size.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1569

blendAdd () → { Phaser.BitmapData }

Sets the blend mode to 'lighter'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1996

blendColor () → { Phaser.BitmapData }

Sets the blend mode to 'color'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2178

blendColorBurn () → { Phaser.BitmapData }

Sets the blend mode to 'color-burn'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2087

blendColorDodge () → { Phaser.BitmapData }

Sets the blend mode to 'color-dodge'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2074

blendDarken () → { Phaser.BitmapData }

Sets the blend mode to 'darken'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2048

blendDestinationAtop () → { Phaser.BitmapData }

Sets the blend mode to 'destination-atop'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1970

blendDestinationIn () → { Phaser.BitmapData }

Sets the blend mode to 'destination-in'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1944

blendDestinationOut () → { Phaser.BitmapData }

Sets the blend mode to 'destination-out'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1957

blendDestinationOver () → { Phaser.BitmapData }

Sets the blend mode to 'destination-over'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1931

blendDifference () → { Phaser.BitmapData }

Sets the blend mode to 'difference'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2126

blendExclusion () → { Phaser.BitmapData }

Sets the blend mode to 'exclusion'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2139

blendHardLight () → { Phaser.BitmapData }

Sets the blend mode to 'hard-light'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2100

blendHue () → { Phaser.BitmapData }

Sets the blend mode to 'hue'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2152

blendLighten () → { Phaser.BitmapData }

Sets the blend mode to 'lighten'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2061

blendLuminosity () → { Phaser.BitmapData }

Sets the blend mode to 'luminosity'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2191

blendMultiply () → { Phaser.BitmapData }

Sets the blend mode to 'multiply'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2009

blendOverlay () → { Phaser.BitmapData }

Sets the blend mode to 'overlay'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2035

blendReset () → { Phaser.BitmapData }

Resets the blend mode (effectively sets it to 'source-over')

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1866

blendSaturation () → { Phaser.BitmapData }

Sets the blend mode to 'saturation'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2165

blendScreen () → { Phaser.BitmapData }

Sets the blend mode to 'screen'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2022

blendSoftLight () → { Phaser.BitmapData }

Sets the blend mode to 'soft-light'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 2113

blendSourceAtop () → { Phaser.BitmapData }

Sets the blend mode to 'source-atop'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1918

blendSourceIn () → { Phaser.BitmapData }

Sets the blend mode to 'source-in'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1892

blendSourceOut () → { Phaser.BitmapData }

Sets the blend mode to 'source-out'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1905

blendSourceOver () → { Phaser.BitmapData }

Sets the blend mode to 'source-over'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1879

blendXor () → { Phaser.BitmapData }

Sets the blend mode to 'xor'

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1983

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

Draws a filled Circle to the BitmapData at the given x, y coordinates and radius in size.

Parameters:
Name Type Argument Description
x number

The x coordinate to draw the Circle at. This is the center of the circle.

y number

The y coordinate to draw the Circle at. This is the center of the circle.

radius number

The radius of the Circle in pixels. The radius is half the diameter.

fillStyle string <optional>

If set the context fillStyle will be set to this value before the circle is drawn.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1720

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

Clears the BitmapData context using a clearRect.

You can optionally define the area to clear. If the arguments are left empty it will clear the entire canvas.

You may need to call BitmapData.update after this in order to clear out the pixel data, but Phaser will not do this automatically for you.

Parameters:
Name Type Argument Default Description
x number <optional>
0

The x coordinate of the top-left of the area to clear.

y number <optional>
0

The y coordinate of the top-left of the area to clear.

width number <optional>

The width of the area to clear. If undefined it will use BitmapData.width.

height number <optional>

The height of the area to clear. If undefined it will use BitmapData.height.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 451

cls ()

Clears the BitmapData context using a clearRect.

Source - gameobjects/BitmapData.js , line 445

copy ( source , x , y , width , height , tx , ty , newWidth , newHeight , rotate , anchorX , anchorY , scaleX , scaleY , alpha , blendMode , roundPx ) → { Phaser.BitmapData }

Copies a rectangular area from the source object to this BitmapData. If you give null as the source it will copy from itself. You can optionally resize, translate, rotate, scale, alpha or blend as it's drawn. All rotation, scaling and drawing takes place around the regions center point by default, but can be changed with the anchor parameters. Note that the source image can also be this BitmapData, which can create some interesting effects.

This method has a lot of parameters for maximum control. You can use the more friendly methods like copyRect and draw to avoid having to remember them all.

Parameters:
Name Type Argument Default Description
source Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.BitmapData | Image | HTMLCanvasElement | string <optional>

The source to copy from. If you give a string it will try and find the Image in the Game.Cache first. This is quite expensive so try to provide the image itself.

x number <optional>
0

The x coordinate representing the top-left of the region to copy from the source image.

y number <optional>
0

The y coordinate representing the top-left of the region to copy from the source image.

width number <optional>

The width of the region to copy from the source image. If not specified it will use the full source image width.

height number <optional>

The height of the region to copy from the source image. If not specified it will use the full source image height.

tx number <optional>

The x coordinate to translate to before drawing. If not specified it will default to the x parameter. If null and source is a Display Object, it will default to source.x .

ty number <optional>

The y coordinate to translate to before drawing. If not specified it will default to the y parameter. If null and source is a Display Object, it will default to source.y .

newWidth number <optional>

The new width of the block being copied. If not specified it will default to the width parameter.

newHeight number <optional>

The new height of the block being copied. If not specified it will default to the height parameter.

rotate number <optional>
0

The angle in radians to rotate the block to before drawing. Rotation takes place around the center by default, but can be changed with the anchor parameters.

anchorX number <optional>
0

The anchor point around which the block is rotated and scaled. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.

anchorY number <optional>
0

The anchor point around which the block is rotated and scaled. A value between 0 and 1, where 0 is the top-left and 1 is bottom-right.

scaleX number <optional>
1

The horizontal scale factor of the block. A value of 1 means no scaling. 2 would be twice the size, and so on.

scaleY number <optional>
1

The vertical scale factor of the block. A value of 1 means no scaling. 2 would be twice the size, and so on.

alpha number <optional>
1

The alpha that will be set on the context before drawing. A value between 0 (fully transparent) and 1, opaque.

blendMode string <optional>
null

The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.

roundPx boolean <optional>
false

Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1193

copyRect (source, area, x, y, alpha , blendMode , roundPx ) → { Phaser.BitmapData }

Copies the area defined by the Rectangle parameter from the source image to this BitmapData at the given location.

Parameters:
Name Type Argument Default Description
source Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.BitmapData | Image | string

The Image to copy from. If you give a string it will try and find the Image in the Game.Cache.

area Phaser.Rectangle

The Rectangle region to copy from the source image.

x number

The destination x coordinate to copy the image to.

y number

The destination y coordinate to copy the image to.

alpha number <optional>
1

The alpha that will be set on the context before drawing. A value between 0 (fully transparent) and 1, opaque.

blendMode string <optional>
null

The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.

roundPx boolean <optional>
false

Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1391

destroy ()

Destroys this BitmapData and puts the canvas it was using back into the canvas pool for re-use.

Source - gameobjects/BitmapData.js , line 1853

draw (source, x , y , width , height , blendMode , roundPx ) → { Phaser.BitmapData }

Draws the given Phaser.Sprite, Phaser.Image or Phaser.Text to this BitmapData at the coordinates specified. You can use the optional width and height values to 'stretch' the sprite as it is drawn. This uses drawImage stretching, not scaling. When drawing it will take into account the Sprites rotation, scale and alpha values.

Parameters:
Name Type Argument Default Description
source Phaser.Sprite | Phaser.Image | Phaser.Text

The Sprite, Image or Text object to draw onto this BitmapData.

x number <optional>
0

The x coordinate to translate to before drawing. If not specified it will default to source.x .

y number <optional>
0

The y coordinate to translate to before drawing. If not specified it will default to source.y .

width number <optional>

The new width of the Sprite being copied. If not specified it will default to source.width .

height number <optional>

The new height of the Sprite being copied. If not specified it will default to source.height .

blendMode string <optional>
null

The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.

roundPx boolean <optional>
false

Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1410

drawFull (parent, blendMode , roundPx ) → { Phaser.BitmapData }

Draws the Game Object or Group to this BitmapData and then recursively iterates through all of its children.

If a child has an exists property then it (and its children) will be only be drawn if exists is true .

The children will be drawn at their x and y world space coordinates. If this is outside the bounds of the BitmapData they won't be drawn. Depending on your requirements you may need to resize the BitmapData in advance to match the bounds of the top-level Game Object.

When drawing it will take into account the child's world rotation, scale and alpha values.

It's perfectly valid to pass in game.world as the parent object, and it will iterate through the entire display list.

Note: If you are trying to grab your entire game at the start of a State then you should ensure that at least 1 full update has taken place before doing so, otherwise all of the objects will render with incorrect positions and scales. You can trigger an update yourself by calling stage.updateTransform() before calling drawFull .

Parameters:
Name Type Argument Default Description
parent Phaser.World | Phaser.Group | Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.BitmapText

The Game Object to draw onto this BitmapData and then recursively draw all of its children.

blendMode string <optional>
null

The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.

roundPx boolean <optional>
false

Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1481

drawGroup (group, blendMode , roundPx ) → { Phaser.BitmapData }

Draws the immediate children of a Phaser.Group to this BitmapData. Children are only drawn if they have their exists property set to true and have image based Textures. The children will be drawn at their x and y world space coordinates. If this is outside the bounds of the BitmapData they won't be drawn. When drawing it will take into account the child's rotation, scale and alpha values. No iteration takes place. Groups nested inside other Groups will not be iterated through.

Parameters:
Name Type Argument Default Description
group Phaser.Group

The Group to draw onto this BitmapData.

blendMode string <optional>
null

The composite blend mode that will be used when drawing. The default is no blend mode at all. This is a Canvas globalCompositeOperation value such as 'lighter' or 'xor'.

roundPx boolean <optional>
false

Should the x and y values be rounded to integers before drawing? This prevents anti-aliasing in some instances.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1432

extract (destination, r, g, b, a , resize , r2 , g2 , b2 ) → { Phaser.BitmapData }

Scans this BitmapData for all pixels matching the given r,g,b values and then draws them into the given destination BitmapData. The original BitmapData remains unchanged. The destination BitmapData must be large enough to receive all of the pixels that are scanned unless the 'resize' parameter is true. Although the destination BitmapData is returned from this method, it's actually modified directly in place, meaning this call is perfectly valid: picture.extract(mask, r, g, b) You can specify optional r2, g2, b2 color values. If given the pixel written to the destination bitmap will be of the r2, g2, b2 color. If not given it will be written as the same color it was extracted. You can provide one or more alternative colors, allowing you to tint the color during extraction.

Parameters:
Name Type Argument Default Description
destination Phaser.BitmapData

The BitmapData that the extracted pixels will be drawn to.

r number

The red color component, in the range 0 - 255.

g number

The green color component, in the range 0 - 255.

b number

The blue color component, in the range 0 - 255.

a number <optional>
255

The alpha color component, in the range 0 - 255 that the new pixel will be drawn at.

resize boolean <optional>
false

Should the destination BitmapData be resized to match this one before the pixels are copied?

r2 number <optional>

An alternative red color component to be written to the destination, in the range 0 - 255.

g2 number <optional>

An alternative green color component to be written to the destination, in the range 0 - 255.

b2 number <optional>

An alternative blue color component to be written to the destination, in the range 0 - 255.

Returns:

The BitmapData that the extract pixels were drawn on.

Source - gameobjects/BitmapData.js , line 1603

fill (r, g, b, a ) → { Phaser.BitmapData }

Fills the BitmapData with the given color.

Parameters:
Name Type Argument Default Description
r number

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

g number

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

b number

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

a number <optional>
1

The alpha color value, between 0 and 1.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 482

generateTexture (key) → { PIXI.Texture }

Creates a new Image element by converting this BitmapDatas canvas into a dataURL.

The image is then stored in the image Cache using the key given.

Finally a PIXI.Texture is created based on the image and returned.

You can apply the texture to a sprite or any other supporting object by using either the key or the texture. First call generateTexture:

var texture = bitmapdata.generateTexture('ball');

Then you can either apply the texture to a sprite:

game.add.sprite(0, 0, texture);

or by using the string based key:

game.add.sprite(0, 0, 'ball');

Parameters:
Name Type Description
key string

The key which will be used to store the image in the Cache.

Returns:

The newly generated texture.

Source - gameobjects/BitmapData.js , line 504

getBounds ( rect ) → { Phaser.Rectangle }

Scans the BitmapData and calculates the bounds. This is a rectangle that defines the extent of all non-transparent pixels. The rectangle returned will extend from the top-left of the image to the bottom-right, excluding transparent pixels.

Parameters:
Name Type Argument Description
rect Phaser.Rectangle <optional>

If provided this Rectangle object will be populated with the bounds, otherwise a new object will be created.

Returns:

A Rectangle whose dimensions encompass the full extent of non-transparent pixels in this BitmapData.

Source - gameobjects/BitmapData.js , line 1139

getFirstPixel ( direction ) → {object}

Scans the BitmapData, pixel by pixel, until it encounters a pixel that isn't transparent (i.e. has an alpha value > 0). It then stops scanning and returns an object containing the color of the pixel in r, g and b properties and the location in the x and y properties.

The direction parameter controls from which direction it should start the scan:

0 = top to bottom 1 = bottom to top 2 = left to right 3 = right to left

Parameters:
Name Type Argument Default Description
direction number <optional>
0

The direction in which to scan for the first pixel. 0 = top to bottom, 1 = bottom to top, 2 = left to right and 3 = right to left.

Returns:
object -

Returns an object containing the color of the pixel in the r , g and b properties and the location in the x and y properties.

Source - gameobjects/BitmapData.js , line 1056

getPixel (x, y, out ) → {object}

Get the color of a specific pixel in the context into a color object. If you have drawn anything to the BitmapData since it was created you must call BitmapData.update to refresh the array buffer, otherwise this may return out of date color values, or worse - throw a run-time error as it tries to access an array element that doesn't exist.

Parameters:
Name Type Argument Description
x number

The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

y number

The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

out object <optional>

An object into which 4 properties will be created: r, g, b and a. If not provided a new object will be created.

Returns:
object -

An object with the red, green, blue and alpha values set in the r, g, b and a properties.

Source - gameobjects/BitmapData.js , line 973

getPixel32 (x, y) → {number}

Get the color of a specific pixel including its alpha value. If you have drawn anything to the BitmapData since it was created you must call BitmapData.update to refresh the array buffer, otherwise this may return out of date color values, or worse - throw a run-time error as it tries to access an array element that doesn't exist. Note that on little-endian systems the format is 0xAABBGGRR and on big-endian the format is 0xRRGGBBAA.

Parameters:
Name Type Description
x number

The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

y number

The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

Returns:
number -

A native color value integer (format: 0xAARRGGBB)

Source - gameobjects/BitmapData.js , line 1004

getPixelRGB (x, y, out , hsl , hsv ) → {object}

Get the color of a specific pixel including its alpha value as a color object containing r,g,b,a and rgba properties. If you have drawn anything to the BitmapData since it was created you must call BitmapData.update to refresh the array buffer, otherwise this may return out of date color values, or worse - throw a run-time error as it tries to access an array element that doesn't exist.

Parameters:
Name Type Argument Default Description
x number

The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

y number

The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

out object <optional>

An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.

hsl boolean <optional>
false

Also convert the rgb values into hsl?

hsv boolean <optional>
false

Also convert the rgb values into hsv?

Returns:
object -

An object with the red, green and blue values set in the r, g and b properties.

Source - gameobjects/BitmapData.js , line 1024

getPixels (rect) → {ImageData}

Gets all the pixels from the region specified by the given Rectangle object.

Parameters:
Name Type Description
rect Phaser.Rectangle

The Rectangle region to get.

Returns:
ImageData -

Returns a ImageData object containing a Uint8ClampedArray data property.

Source - gameobjects/BitmapData.js , line 1043

line (x1, y1, x2, y2, color , width ) → { Phaser.BitmapData }

Draws a line between the coordinates given in the color and thickness specified.

Parameters:
Name Type Argument Default Description
x1 number

The x coordinate to start the line from.

y1 number

The y coordinate to start the line from.

x2 number

The x coordinate to draw the line to.

y2 number

The y coordinate to draw the line to.

color string <optional>
'#fff'

The stroke color that the line will be drawn in.

width number <optional>
1

The line thickness.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1749

load (source) → { Phaser.BitmapData }

Takes the given Game Object, resizes this BitmapData to match it and then draws it into this BitmapDatas canvas, ready for further processing. The source game object is not modified by this operation. If the source object uses a texture as part of a Texture Atlas or Sprite Sheet, only the current frame will be used for sizing. If a string is given it will assume it's a cache key and look in Phaser.Cache for an image key matching the string.

Parameters:
Name Type Description
source Phaser.Sprite | Phaser.Image | Phaser.Text | Phaser.BitmapData | Image | HTMLCanvasElement | string

The object that will be used to populate this BitmapData. If you give a string it will try and find the Image in the Game.Cache first.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 410

move (x, y, wrap ) → { Phaser.BitmapData }

Shifts the contents of this BitmapData by the distances given.

The image will wrap-around the edges on all sides if the wrap argument is true (the default).

Parameters:
Name Type Argument Default Description
x integer

The amount of pixels to horizontally shift the canvas by. Use a negative value to shift to the left, positive to the right.

y integer

The amount of pixels to vertically shift the canvas by. Use a negative value to shift up, positive to shift down.

wrap boolean <optional>
true

Wrap the content of the BitmapData.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 228

moveH (distance, wrap ) → { Phaser.BitmapData }

Shifts the contents of this BitmapData horizontally.

The image will wrap-around the sides if the wrap argument is true (the default).

Parameters:
Name Type Argument Default Description
distance integer

The amount of pixels to horizontally shift the canvas by. Use a negative value to shift to the left, positive to the right.

wrap boolean <optional>
true

Wrap the content of the BitmapData.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 255

moveV (distance, wrap ) → { Phaser.BitmapData }

Shifts the contents of this BitmapData vertically.

The image will wrap-around the sides if the wrap argument is true (the default).

Parameters:
Name Type Argument Default Description
distance integer

The amount of pixels to vertically shift the canvas by. Use a negative value to shift up, positive to shift down.

wrap boolean <optional>
true

Wrap the content of the BitmapData.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 318

processPixel (callback, callbackContext, x , y , width , height ) → { Phaser.BitmapData }

Scans through the area specified in this BitmapData and sends the color for every pixel to the given callback along with its x and y coordinates. Whatever value the callback returns is set as the new color for that pixel, unless it returns the same color, in which case it's skipped. Note that the format of the color received will be different depending on if the system is big or little endian. It is expected that your callback will deal with endianess. If you'd rather Phaser did it then use processPixelRGB instead. The callback will also be sent the pixels x and y coordinates respectively.

Parameters:
Name Type Argument Default Description
callback function

The callback that will be sent each pixel color to be processed.

callbackContext object

The context under which the callback will be called.

x number <optional>
0

The x coordinate of the top-left of the region to process from.

y number <optional>
0

The y coordinate of the top-left of the region to process from.

width number <optional>

The width of the region to process.

height number <optional>

The height of the region to process.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 688

processPixelRGB (callback, callbackContext, x , y , width , height ) → { Phaser.BitmapData }

Scans through the area specified in this BitmapData and sends a color object for every pixel to the given callback. The callback will be sent a color object with 6 properties: { r: number, g: number, b: number, a: number, color: number, rgba: string } . Where r, g, b and a are integers between 0 and 255 representing the color component values for red, green, blue and alpha. The color property is an Int32 of the full color. Note the endianess of this will change per system. The rgba property is a CSS style rgba() string which can be used with context.fillStyle calls, among others. The callback will also be sent the pixels x and y coordinates respectively. The callback must return either false , in which case no change will be made to the pixel, or a new color object. If a new color object is returned the pixel will be set to the r, g, b and a color values given within it.

Parameters:
Name Type Argument Default Description
callback function

The callback that will be sent each pixel color object to be processed.

callbackContext object

The context under which the callback will be called.

x number <optional>
0

The x coordinate of the top-left of the region to process from.

y number <optional>
0

The y coordinate of the top-left of the region to process from.

width number <optional>

The width of the region to process.

height number <optional>

The height of the region to process.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 630

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

Draws a filled Rectangle to the BitmapData at the given x, y coordinates and width / height in size.

Parameters:
Name Type Argument Description
x number

The x coordinate of the top-left of the Rectangle.

y number

The y coordinate of the top-left of the Rectangle.

width number

The width of the Rectangle.

height number

The height of the Rectangle.

fillStyle string <optional>

If set the context fillStyle will be set to this value before the rect is drawn.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1656

render () → { Phaser.BitmapData }

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. If you wish to suppress this functionality set BitmapData.disableTextureUpload to true .

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1833

replaceRGB (r1, g1, b1, a1, r2, g2, b2, a2, region ) → { Phaser.BitmapData }

Replaces all pixels matching one color with another. The color values are given as two sets of RGBA values. An optional region parameter controls if the replacement happens in just a specific area of the BitmapData or the entire thing.

Parameters:
Name Type Argument Description
r1 number

The red color value to be replaced. Between 0 and 255.

g1 number

The green color value to be replaced. Between 0 and 255.

b1 number

The blue color value to be replaced. Between 0 and 255.

a1 number

The alpha color value to be replaced. Between 0 and 255.

r2 number

The red color value that is the replacement color. Between 0 and 255.

g2 number

The green color value that is the replacement color. Between 0 and 255.

b2 number

The blue color value that is the replacement color. Between 0 and 255.

a2 number

The alpha color value that is the replacement color. Between 0 and 255.

region Phaser.Rectangle <optional>

The area to perform the search over. If not given it will replace over the whole BitmapData.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 742

resize (width, height) → { Phaser.BitmapData }

Resizes the BitmapData. This changes the size of the underlying canvas and refreshes the buffer.

Parameters:
Name Type Description
width integer

The new width of the BitmapData.

height integer

The new height of the BitmapData.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 540

setHSL ( h , s , l , region ) → { Phaser.BitmapData }

Sets the hue, saturation and lightness values on every pixel in the given region, or the whole BitmapData if no region was specified.

Parameters:
Name Type Argument Default Description
h number <optional>
null

The hue, in the range 0 - 1.

s number <optional>
null

The saturation, in the range 0 - 1.

l number <optional>
null

The lightness, in the range 0 - 1.

region Phaser.Rectangle <optional>

The area to perform the operation on. If not given it will run over the whole BitmapData.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 792

setPixel (x, y, red, green, blue, immediate ) → { Phaser.BitmapData }

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

Parameters:
Name Type Argument Default Description
x number

The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

y number

The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

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).

immediate boolean <optional>
true

If true the context.putImageData will be called and the dirty flag set.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 955

setPixel32 (x, y, red, green, blue, alpha, immediate ) → { Phaser.BitmapData }

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

Parameters:
Name Type Argument Default Description
x number

The x coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

y number

The y coordinate of the pixel to be set. Must lay within the dimensions of this BitmapData.

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).

immediate boolean <optional>
true

If true the context.putImageData will be called and the dirty flag set.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 916

shadow (color, blur , x , y ) → { Phaser.BitmapData }

Sets the shadow properties of this BitmapDatas context which will affect all draw operations made to it. You can cancel an existing shadow by calling this method and passing no parameters. Note: At the time of writing (October 2014) Chrome still doesn't support shadowBlur used with drawImage.

Parameters:
Name Type Argument Default Description
color string

The color of the shadow, given in a CSS format, i.e. #000000 or rgba(0,0,0,1) . If null or undefined the shadow will be reset.

blur number <optional>
5

The amount the shadow will be blurred by. Low values = a crisp shadow, high values = a softer shadow.

x number <optional>
10

The horizontal offset of the shadow in pixels.

y number <optional>
10

The vertical offset of the shadow in pixels.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1539

shiftHSL ( h , s , l , region ) → { Phaser.BitmapData }

Shifts any or all of the hue, saturation and lightness values on every pixel in the given region, or the whole BitmapData if no region was specified. Shifting will add the given value onto the current h, s and l values, not replace them. The hue is wrapped to keep it within the range 0 to 1. Saturation and lightness are clamped to not exceed 1.

Parameters:
Name Type Argument Default Description
h number <optional>
null

The amount to shift the hue by.

s number <optional>
null

The amount to shift the saturation by.

l number <optional>
null

The amount to shift the lightness by.

region Phaser.Rectangle <optional>

The area to perform the operation on. If not given it will run over the whole BitmapData.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 853

text (text, x, y, font , color , shadow ) → { Phaser.BitmapData }

Draws text to the BitmapData in the given font and color. The default font is 14px Courier, so useful for quickly drawing debug text. If you need to do a lot of font work to this BitmapData we'd recommend implementing your own text draw method.

Parameters:
Name Type Argument Default Description
text string

The text to write to the BitmapData.

x number

The x coordinate of the top-left of the text string.

y number

The y coordinate of the top-left of the text string.

font string <optional>
'14px Courier'

The font. This is passed directly to Context.font, so anything that can support, this can.

color string <optional>
'rgb(255,255,255)'

The color the text will be drawn in.

shadow boolean <optional>
true

Draw a single pixel black shadow below the text (offset by text.x/y + 1)

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1680

textureLine (line, image, repeat ) → { Phaser.BitmapData }

Takes the given Line object and image and renders it to this BitmapData as a repeating texture line.

Parameters:
Name Type Argument Default Description
line Phaser.Line

A Phaser.Line object that will be used to plot the start and end of the line.

image string | Image

The key of an image in the Phaser.Cache to use as the texture for this line, or an actual Image.

repeat string <optional>
'repeat-x'

The pattern repeat mode to use when drawing the line. Either repeat , repeat-x or no-repeat .

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 1783

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

This re-creates the BitmapData.imageData from the current context. It then re-builds the ArrayBuffer, the data Uint8ClampedArray reference and the pixels Int32Array. If not given the dimensions defaults to the full size of the context.

Warning: This is a very expensive operation, so use it sparingly.

Parameters:
Name Type Argument Default Description
x number <optional>
0

The x coordinate of the top-left of the image data area to grab from.

y number <optional>
0

The y coordinate of the top-left of the image data area to grab from.

width number <optional>
1

The width of the image data area.

height number <optional>
1

The height of the image data area.

Returns:

This BitmapData object for method chaining.

Source - gameobjects/BitmapData.js , line 584
Phaser Copyright © 2012-2015 Photon Storm Ltd.
Documentation generated by JSDoc 3.3.2 on Thu Feb 18 2016 14:40:58 GMT+0000 (GMT Standard Time) using the DocStrap template .