Container

class Container extends Renderable

Container represents a collection of child objects

Constructor


new Container(x: number, y: number, width: number, height: number) → {}
Parameters:
Name Type Attributes Default Description
x number

<optional>

0

position of the container (accessible via the inherited pos.x property)

y number

<optional>

0

position of the container (accessible via the inherited pos.y property)

width number

<optional>

game.viewport.width

width of the container

height number

<optional>

game.viewport.height

height of the container

Summary


Methods from Container

Renderable
addChild(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText, z: number)
Renderable
addChildAt(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText, index: number)
forEach(callback: Function, thisArg: object)
Renderable
getChildAt(index: number)
Renderable
getChildByGUID(guid: string | RegExp | number | boolean)
Array<Renderable>
getChildByName(name: string | RegExp | number | boolean)
Array<Renderable>
getChildByProp(prop: string, value: string | RegExp | number | boolean)
Array<Renderable>
getChildByType(classType: object)
number
getChildIndex(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText)
Array<Renderable>
getChildren()
Renderable
getNextChild(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText)
Container
getRootAncestor()
boolean
hasChild(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText)
boolean
isAttachedToRoot()
moveDown(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText)
moveToBottom(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText)
moveToTop(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText)
moveUp(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText)
onChildChange(index: number)
removeChild(child: RendRenderable | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapTexterable, keepalive: boolean)
removeChildNow(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText, keepalive: boolean)
reset()

reset the container, removing all childrens, and reseting transforms.

setChildsProperty(prop: string, value: object, recursive: boolean)
sort(recursive: boolean)
swapChildren(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText, child2: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText)
Bounds
updateBounds(absolute: boolean)
protected draw(renderer: CanvasRenderer | WebGLRenderer, viewport: Camera2d)
boolean
protected update(dt: number)

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

Public Properties


autoDepth container.js:75
autoDepth: boolean = true

boolean

Specify if the children z index should automatically be managed by the parent container

autoSort container.js:68
autoSort: boolean = true

boolean

Specify if the children list should be automatically sorted when adding a new child

backgroundColor container.js:106
backgroundColor: Color = (0, 0, 0, 0.0)

Color

define a background color for this container

// add a red background color to this container
this.backgroundColor.setColor(255, 0, 0);
clipping container.js:82
clipping: boolean = false

boolean

Specify if the container draw operation should clip his children to its own bounds

enableChildBoundsUpdate container.js:97
enableChildBoundsUpdate: boolean = false

boolean

Specify if the container bounds should automatically take in account all child bounds when updated (this is expensive and disabled by default, only enable if necessary)

root container.js:47
root: boolean = false

boolean

whether the container is the root of the scene

sortOn container.js:60
sortOn: string = "z"

string

The property of the child object that should be used to sort on this container value : "x", "y", "z"

Public Methods


addChild container.js:170
addChild(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText, z: number) → {Renderable}

Add a child to the container
if auto-sort is disable, the object will be appended at the bottom of the list. Adding a child to the container will automatically remove it from its other container. Meaning a child can only have one parent. This is important if you add a renderable to a container then add it to the World container it will move it out of the orginal container. Then when the World container reset() method is called the renderable will not be in any container.
if the given child implements a onActivateEvent method, that method will be called once the child is added to this container.

Parameters:
Name Type Attributes Description
child Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText

Child to be added

z number

<optional>

forces the z index of the child to the specified value

Returns:
Type Description
Renderable

the added child

addChildAt container.js:259
addChildAt(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText, index: number) → {Renderable}

Add a child to the container at the specified index
(the list won't be sorted after insertion)

Parameters:
Name Type Description
child Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText

Child to be added

index number

The index at which to insert the child

Returns:
Type Description
Renderable

the added child

forEach container.js:333
forEach(callback: Function, thisArg: object) → {}

The forEach() method executes a provided function once per child element.
the callback function is invoked with three arguments:
- The current element being processed in the array
- The index of element in the array.
- The array forEach() was called upon.

// iterate through all children of this container
container.forEach((child) => {
   // do something with the child
   child.doSomething();
});
container.forEach((child, index) => { ... });
container.forEach((child, index, array) => { ... });
container.forEach((child, index, array) => { ... }, thisArg);
Parameters:
Name Type Attributes Description
callback Function

fnction to execute on each element

thisArg object

<optional>

value to use as this(i.e reference Object) when executing callback.

getChildAt container.js:396
getChildAt(index: number) → {Renderable}

Returns the Child at the specified index

Parameters:
Name Type Description
index number

The index of the child

Returns:
Type Description
Renderable

the child at the specified index

getChildByGUID container.js:523
getChildByGUID(guid: string | RegExp | number | boolean) → {Renderable}

return the child corresponding to the specified GUID
note : avoid calling this function every frame since it parses the whole object list each time

Parameters:
Name Type Description
guid string | RegExp | number | boolean

child GUID

Returns:
Type Description
Renderable

corresponding child or null

getChildByName container.js:511
getChildByName(name: string | RegExp | number | boolean) → {Array<Renderable>}

returns the list of childs with the specified name
as defined in Tiled (Name field of the Object Properties)
note : avoid calling this function every frame since it parses the whole object list each time

Parameters:
Name Type Description
name string | RegExp | number | boolean

child name

Returns:
Type Description
Array<Renderable>

Array of children

getChildByProp container.js:441
getChildByProp(prop: string, value: string | RegExp | number | boolean) → {Array<Renderable>}

return the child corresponding to the given property and value.
note : avoid calling this function every frame since it parses the whole object tree each time

 // get the first child object called "mainPlayer" in a specific container :
 let ent = myContainer.getChildByProp("name", "mainPlayer");

 // or query the whole world :
 let ent = container.getChildByProp("name", "mainPlayer");

 // partial property matches are also allowed by using a RegExp.
 // the following matches "redCOIN", "bluecoin", "bagOfCoins", etc :
 let allCoins = container.getChildByProp("name", /coin/i);

 // searching for numbers or other data types :
 let zIndex10 = container.getChildByProp("z", 10);
 let inViewport = container.getChildByProp("inViewport", true);
Parameters:
Name Type Description
prop string

Property name

value string | RegExp | number | boolean

Value of the property

Returns:
Type Description
Array<Renderable>

Array of childs

getChildByType container.js:491
getChildByType(classType: object) → {Array<Renderable>}

returns the list of childs with the specified class type

Parameters:
Name Type Description
classType object

Class type

Returns:
Type Description
Array<Renderable>

Array of children

getChildIndex container.js:410
getChildIndex(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText) → {number}

Returns the index of the given Child

Parameters:
Name Type Description
child Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText

The child object

Returns:
Type Description
number

index

getChildren container.js:535
getChildren() → {Array<Renderable>}

return all child in this container

Returns:
Type Description
Array<Renderable>

an array of renderable object

getNextChild container.js:419
getNextChild(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText) → {Renderable}

Returns the next child within the container or undefined if none

Parameters:
Name Type Description
child Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText

The child object

Returns:
Type Description
Renderable

child

getRootAncestor container.js:590
getRootAncestor() → {Container}

Returns the instance of the root container (i.e. the current application World container).

Returns:
Type Description
Container

root container

hasChild container.js:432
hasChild(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText) → {boolean}

Returns true if contains the specified Child

Parameters:
Name Type Description
child Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText

The child object

Returns:
Type Description
boolean
isAttachedToRoot container.js:571
isAttachedToRoot() → {boolean}

Checks if this container is root or if it's attached to the root container.

Returns:
Type Description
boolean

true if this container is root or if it's attached to the root container

moveDown container.js:733
moveDown(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText) → {}

Move the child in the group one step backward (z depth).

Parameters:
Name Type Description
child Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText

Child to be moved

moveToBottom container.js:764
moveToBottom(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText) → {}

Move the specified child the bottom (z depth).

Parameters:
Name Type Description
child Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText

Child to be moved

moveToTop container.js:747
moveToTop(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText) → {}

Move the specified child to the top(z depth).

Parameters:
Name Type Description
child Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText

Child to be moved

moveUp container.js:719
moveUp(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText) → {}

Move the child in the group one step forward (z depth).

Parameters:
Name Type Description
child Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText

Child to be moved

onChildChange container.js:89
onChildChange(index: number) → {}

a callback to be extended, triggered after a child has been added or removed

Parameters:
Name Type Description
index number

added or removed child index

removeChild container.js:639
removeChild(child: RendRenderable | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapTexterable, keepalive: boolean) → {}

Invokes the removeChildNow in a defer, to ensure the child is removed safely after the update & draw stack has completed.
if the given child implements a onDeactivateEvent() method, that method will be called once the child is removed from this container.

Parameters:
Name Type Attributes Default Description
child RendRenderable | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapTexterable

Child to be removed

keepalive boolean

<optional>

false

true to prevent calling child.destroy()

removeChildNow container.js:654
removeChildNow(child: Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText, keepalive: boolean) → {}

Removes (and optionally destroys) a child from the container.
(removal is immediate and unconditional)
Never use keepalive=true with objects from pool. Doing so will create a memory leak.

Parameters:
Name Type Attributes Default Description
child Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText

Child to be removed

keepalive boolean

<optional>

False

True to prevent calling child.destroy()

reset container.js:143
reset() → {}

reset the container, removing all childrens, and reseting transforms.

setChildsProperty container.js:704
setChildsProperty(prop: string, value: object, recursive: boolean) → {}

Automatically set the specified property of all childs to the given value

Parameters:
Name Type Attributes Default Description
prop string

property name

value object

property value

recursive boolean

<optional>

false

recursively apply the value to child containers if true

sort container.js:781
sort(recursive: boolean) → {}

Manually trigger the sort of all the childs in the container

Parameters:
Name Type Attributes Default Description
recursive boolean

<optional>

false

recursively sort all containers if true

updateBounds container.js:546
updateBounds(absolute: boolean) → {Bounds}

update the bounding box for this container.

Parameters:
Name Type Attributes Default Description
absolute boolean

<optional>

true

update the bounds size and position in (world) absolute coordinates

Returns:
Type Description
Bounds

this container bounding box Rectangle object

Protected Methods


draw container.js:922
protected draw(renderer: CanvasRenderer | WebGLRenderer, viewport: Camera2d) → {}

draw this renderable (automatically called by melonJS)

Parameters:
Name Type Attributes Description
renderer CanvasRenderer | WebGLRenderer

a renderer instance

viewport Camera2d

<optional>

the viewport to (re)draw

update container.js:871
protected update(dt: number) → {boolean}

container update function.
automatically called by the application update loop Application

Parameters:
Name Type Description
dt number

time since the last update in milliseconds.

Returns:
Type Description
boolean

true if the Container is dirty


Powered by webdoc!