ImageLayer

class ImageLayer extends Sprite

a generic Image Layer Object

Constructor

new ImageLayer(x: number, y: number, settings: object) → {}

// 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);

Parameters:
Name	Type	Attributes	Default	Description
x	number			x coordinate
y	number			y coordinate
settings	object			ImageLayer properties
settings.image	HTMLImageElement \| HTMLCanvasElement \| string			Image reference. See loader.getImage
settings.name	string	<optional>	"me.ImageLayer"	layer name
settings.z	number	<optional>	0	z-index position
settings.ratio	number \| Vector2d	<optional>	1.0	Scrolling ratio to be applied. See ImageLayer#ratio
settings.repeat	"repeat" \| "repeat-x" \| "repeat-y" \| "no-repeat"	<optional>	"repeat"	define if and how an Image Layer should be repeated. See ImageLayer#repeat
settings.anchorPoint	number \| Vector2d	<optional>	<0.0,0.0>	Define how the image is anchored to the viewport bound. By default, its upper-left corner is anchored to the viewport bounds upper left corner.

Summary

Properties from ImageLayer

Vector2d

ratio = <1.0,1.0>

string

repeat = 'repeat'

Methods from ImageLayer

resize(w: number, h: number)

protected draw(renderer: CanvasRenderer | WebGLRenderer, viewport: Camera2d)

Properties inherited from Sprite

boolean	animationpause = false
number	animationspeed = 100
boolean	isVideo = false
Vector2d	offset = <0.0,0.0>
TextureAtlas	source = undefined

Properties inherited from Renderable

number	alpha = 1.0
boolean	alwaysUpdate = false
Container \| Entity	ancestor = undefined
ObservableVector2d	anchorPoint = <0.5,0.5>
boolean	autoTransform = true
string	blendMode = "normal"
Body	body
Matrix2d	currentTransform
number	depth
boolean	floating = false
string	GUID
boolean	inViewport = false
boolean	isDirty = true
boolean	isFlippedX
boolean	isFlippedY
boolean	isFloating
boolean	isKinematic = true
boolean	isPersistent = false
Rect \| RoundRect \| Polygon \| Line \| Ellipse	mask = undefined
string	name = ""
Function	onVisibilityChange = undefined
Application	parentApp
ObservableVector3d	pos
GLShader	shader = undefined
Color	tint = (255, 255, 255)
boolean	updateWhenPaused = false

Properties inherited from Rect

number	bottom
number	centerX
number	centerY
number	height
number	left
number	right
number	top
string	type = "Rectangle"
number	width

Properties inherited from Polygon

Array<Vector2d>

points

Methods inherited from Sprite

number	addAnimation(name: string, index: Array<number> \| Array<string> \| Array<object>, animationspeed: number)
Sprite	flicker(duration: number, callback: Function)
number	getCurrentAnimationFrame()
boolean	isCurrentAnimation(name: string)
boolean	isFlickering()
	pause() play or resume the current animation or video
	play() play or resume the current animation or video
Sprite	reverseAnimation(name: string)
Sprite	setAnimationFrame(index: number)
Sprite	setCurrentAnimation(name: string, resetAnim: string \| Function, preserve_dt: boolean)
Sprite	setRegion(region: object)
boolean	protected update(dt: number)

Methods inherited from Renderable

number	angleTo(target: Renderable \| Vector2d \| Vector3d)
number	distanceTo(target: Renderable \| Vector2d \| Vector3d)
Renderable	flipX(flip: boolean)
Renderable	flipY(flip: boolean)
Vector2d	getAbsolutePosition()
Bounds	getBounds()
number	getOpacity()
Renderable	lookAt(target: Renderable \| Vector2d \| Vector3d)
boolean	onCollision(response: ResponseObject, other: Renderable \| Container \| Entity \| Sprite \| NineSliceSprite)
	onDestroyEvent()
	postDraw(renderer: CanvasRenderer \| WebGLRenderer)
	preDraw(renderer: CanvasRenderer \| WebGLRenderer)
Renderable	rotate(angle: number, v: Vector2d \| ObservableVector2d)
Renderable	scale(x: number, y: number)
Renderable	scaleV(v: Vector2d)
	setOpacity(alpha: number)
Renderable	transform(m: Matrix2d)
Bounds	updateBounds(absolute: boolean)

Methods inherited from Rect

Rect	centerOn(x: number, y: number)
Rect	clone()
boolean	contains(x: number \| Vector2d \| Rect, y: number)
Rect	copy(rect: Rect)
boolean	equals(rect: Rect)
boolean	isFinite()
boolean	overlaps(rect: Rect)
Rect	setShape(x: number, y: number, w: number \| Vector2d<Array>, h: number)
Polygon	toPolygon()
Rect	union(rect: Rect)

Methods inherited from Polygon

Array<number>	getIndices()
boolean	isConvex()
Polygon	recalc()
Polygon	setVertices(vertices: Array<Vector2d>)
	shift(x: number \| Vector2d, y: number)
Polygon	to2d()
Polygon	toIso()
Polygon	translate(x: number \| Vector2d, y: number)

Public Properties

ratio imagelayer.js:42

ratio: Vector2d = <1.0,1.0>

Vector2d

Define the image scrolling ratio
Scrolling speed is defined by multiplying the viewport delta position 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

repeat imagelayer.js:81

repeat: string = '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.

Public Methods

resize imagelayer.js:136

resize(w: number, h: number) → {}

resize the Image Layer to match the given size

Parameters:
Name	Type	Description
w	number	new width
h	number	new height

Protected Methods

draw imagelayer.js:228

protected draw(renderer: CanvasRenderer | WebGLRenderer, viewport: Camera2d) → {}

draw this ImageLayer (automatically called by melonJS)

Parameters:
Name	Type	Attributes	Description
renderer	CanvasRenderer \| WebGLRenderer		a renderer instance
viewport	Camera2d	<optional>	the viewport to (re)draw