NineSliceSprite

class NineSliceSprite extends Sprite

A NineSliceSprite is similar to a Sprite, but it uses 9-slice scaling to strech its inner area to fit the size of the Renderable, by proportionally scaling a sprite by splitting it in a grid of nine parts (with only parts 1, 3, 7, 9 not being scaled).

See: https://en.wikipedia.org/wiki/9-slice_scaling

Constructor

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

this.panelSprite = new me.NineSliceSprite(0, 0, {
    image : game.texture,
    region : "grey_panel",
    width : this.width,
    height : this.height
});

Parameters:
Name	Type	Attributes	Default	Description
x	number			the x coordinates of the sprite object
y	number			the y coordinates of the sprite object
settings	object			Configuration parameters for the Sprite object
settings.width	number			the width of the Renderable over which the sprite needs to be stretched
settings.height	number			the height of the Renderable over which the sprite needs to be stretched
settings.insetx	number	<optional>		the width of a corner over which the sprite is unscaled (default is a quarter of the sprite width)
settings.insety	number	<optional>		the height of a corner over which the sprite is unscaled (default is a quarter of the sprite height)
settings.image	HTMLImageElement \| HTMLCanvasElement \| TextureAtlas \| string			reference to spritesheet image, a texture atlas or to a texture atlas
settings.name	string	<optional>	""	name of this object
settings.region	string	<optional>		region name of a specific region to use when using a texture atlas, see TextureAtlas
settings.framewidth	number	<optional>		Width of a single frame within the spritesheet
settings.frameheight	number	<optional>		Height of a single frame within the spritesheet
settings.tint	string \| Color	<optional>		a tint to be applied to this sprite
settings.flipX	number	<optional>		flip the sprite on the horizontal axis
settings.flipY	number	<optional>		flip the sprite on the vertical axis
settings.anchorPoint	Vector2d	<optional>	{x:0.5, y:0.5}	Anchor point to draw the frame at (defaults to the center of the frame).

Summary

Properties from NineSliceSprite

number

height

number

width

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	left
number	right
number	top
string	type = "Rectangle"

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)
	protected draw(renderer: CanvasRenderer \| WebGLRenderer, viewport: Camera2d)
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	resize(w: number, h: number)
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

height nineslicesprite.js:69

height: number

number

height of the NineSliceSprite

width nineslicesprite.js:58

width: number

number

width of the NineSliceSprite