me.ImageLayer(x, y, settings)

new ImageLayer(x, y, settings)

a generic Image Layer Object

Parameters:
Name Type Description
x Number

x coordinate

y Number

y coordinate

settings Object

ImageLayer properties

Properties
Name Type Attributes Default Description
image HTMLImageElement | HTMLCanvasElement | String

Image reference. See me.loader.getImage

name String <optional>
"me.ImageLayer"

layer name

z Number <optional>
0

z-index position

ratio Number | me.Vector2d <optional>
1.0

Scrolling ratio to be applied. See me.ImageLayer#ratio

repeat String <optional>
'repeat'

define if and how an Image Layer should be repeated (accepted values are 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'). See me.ImageLayer#repeat

anchorPoint Number | me.Vector2d <optional>
0.0

Image origin. See me.ImageLayer#anchorPoint

Example
// create a repetitive background pattern on the X axis using the citycloud image asset
me.game.world.addChild(new me.ImageLayer(0, 0, {
    image:"citycloud",
    repeat :"repeat-x"
}), 1);

Extends

Members

alpha :Number

Define the renderable opacity
Set to zero if you do not wish an object to be drawn

Inherited From:
Default Value:
  • 1.0
See:
  • me.Renderable#setOpacity
  • me.Renderable#getOpacity

ancestor :me.Container|me.Entity

a reference to the parent object that contains this renderable

Inherited From:
Default Value:
  • undefined

anchorPoint :me.Vector2d

Define how the image is anchored to the viewport bounds
By default, its upper-left corner is anchored to the viewport bounds upper left corner.
The anchorPoint is a unit vector where each component falls in range [0.0,1.0].
Some common examples:

  • <0.0,0.0> : (Default) Anchor image to the upper-left corner of viewport bounds
  • <0.5,0.5> : Center the image within viewport bounds
  • <1.0,1.0> : Anchor image to the lower-right corner of viewport bounds To specify a value through Tiled, use one of the following format :
  • a number, to change the value for both axis
  • a json expression like json:{"x":0.5,"y":0.5} if you wish to specify a different value for both x and y
Default Value:
  • <0.0,0.0>

ratio :me.Vector2d

Define the image scrolling ratio
Scrolling speed is defined by multiplying the viewport delta position (e.g. followed entity) by the specified ratio. Setting this vector to <0.0,0.0> will disable automatic scrolling.
To specify a value through Tiled, use one of the following format :

  • a number, to change the value for both axis
  • a json expression like json:{"x":0.5,"y":0.5} if you wish to specify a different value for both x and y
Default Value:
  • <1.0,1.0>

repeat :String

Define if and how an Image Layer should be repeated.
By default, an Image Layer is repeated both vertically and horizontally.
Acceptable values :

  • 'repeat' - The background image will be repeated both vertically and horizontally
  • 'repeat-x' - The background image will be repeated only horizontally.
  • 'repeat-y' - The background image will be repeated only vertically.
  • 'no-repeat' - The background-image will not be repeated.
Default Value:
  • 'repeat'

Methods

static resize(w, h)

resize the Image Layer to match the given size

Parameters:
Name Type Description
w Number

new width

h Number

new height