Container
class Container extends Renderable
Container represents a collection of child objects
Constructor
new Container(x: number, y: number, width: number, height: number) → {}
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
Properties from Container
boolean |
|
boolean |
|
Color |
|
boolean |
|
boolean |
|
boolean |
|
string |
|
Methods from Container
Properties inherited from Renderable
number |
|
boolean |
|
Container | Entity |
|
ObservableVector2d |
|
boolean |
|
string |
|
Body |
|
Matrix2d |
|
number |
|
boolean |
|
string |
|
boolean |
|
boolean |
|
boolean |
|
boolean |
|
boolean |
|
boolean |
|
boolean |
|
Rect | RoundRect | Polygon | Line | Ellipse |
|
string |
|
Function |
|
Application |
|
ObservableVector3d |
|
GLShader |
|
Color |
|
boolean |
|
Properties inherited from Rect
Methods inherited from Renderable
Methods inherited from Rect
Rect |
|
Rect |
|
boolean |
|
Rect |
|
boolean |
|
boolean |
|
boolean |
|
Rect |
|
Rect |
|
Polygon |
|
Rect |
|
Methods inherited from Polygon
Array<number> |
|
boolean |
|
Polygon |
|
Polygon |
|
|
|
Polygon |
|
Polygon |
|
Polygon |
|
Public Properties
autoDepth: boolean = true
boolean
Specify if the children z index should automatically be managed by the parent container
autoSort: boolean = true
boolean
Specify if the children list should be automatically sorted when adding a new child
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: boolean = false
boolean
Specify if the container draw operation should clip his children to its own bounds
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)
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(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.
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 |
Type | Description |
---|---|
Renderable |
the added child |
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)
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 |
Type | Description |
---|---|
Renderable |
the added child |
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);
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(index: number) → {Renderable}
Returns the Child at the specified index
Name | Type | Description |
---|---|---|
index | number |
The index of the child |
Type | Description |
---|---|
Renderable |
the child at the specified index |
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
Name | Type | Description |
---|---|---|
guid | string | RegExp | number | boolean |
child GUID |
Type | Description |
---|---|
Renderable |
corresponding child or null |
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
Name | Type | Description |
---|---|---|
name | string | RegExp | number | boolean |
child name |
Type | Description |
---|---|
Array<Renderable> |
Array of children |
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);
Name | Type | Description |
---|---|---|
prop | string |
Property name |
value | string | RegExp | number | boolean |
Value of the property |
Type | Description |
---|---|
Array<Renderable> |
Array of childs |
getChildByType(classType: object) → {Array<Renderable>}
returns the list of childs with the specified class type
Name | Type | Description |
---|---|---|
classType | object |
Class type |
Type | Description |
---|---|
Array<Renderable> |
Array of children |
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
Name | Type | Description |
---|---|---|
child | Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText |
The child object |
Type | Description |
---|---|
number |
index |
getChildren() → {Array<Renderable>}
return all child in this container
Type | Description |
---|---|
Array<Renderable> |
an array of renderable object |
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
Name | Type | Description |
---|---|---|
child | Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText |
The child object |
Type | Description |
---|---|
Renderable |
child |
getRootAncestor() → {Container}
Returns the instance of the root container (i.e. the current application World container).
Type | Description |
---|---|
Container |
root container |
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
Name | Type | Description |
---|---|---|
child | Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText |
The child object |
Type | Description |
---|---|
boolean |
isAttachedToRoot() → {boolean}
Checks if this container is root or if it's attached to the root container.
Type | Description |
---|---|
boolean |
true if this container is root or if it's attached to the root container |
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).
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(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).
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(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).
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(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).
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(index: number) → {}
a callback to be extended, triggered after a child has been added or removed
Name | Type | Description |
---|---|---|
index | number |
added or removed child index |
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.
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(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.
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() → {}
reset the container, removing all childrens, and reseting transforms.
setChildsProperty(prop: string, value: object, recursive: boolean) → {}
Automatically set the specified property of all childs to the given value
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(recursive: boolean) → {}
Manually trigger the sort of all the childs in the container
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
recursive | boolean |
<optional> |
false |
recursively sort all containers if true |
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) → {}
Swaps the position (z-index) of 2 children
Name | Type | Description |
---|---|---|
child | Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText |
Child to be added |
child2 | Renderable | Entity | Sprite | Collectable | Trigger | Draggable | DropTarget | NineSliceSprite | ImageLayer | ColorLayer | Light2d | UIBaseElement | UISpriteElement | UITextButton | Text | BitmapText |
Child to be added |
updateBounds(absolute: boolean) → {Bounds}
update the bounding box for this container.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
absolute | boolean |
<optional> |
true |
update the bounds size and position in (world) absolute coordinates |
Type | Description |
---|---|
Bounds |
this container bounding box Rectangle object |
Protected Methods
protected draw(renderer: CanvasRenderer | WebGLRenderer, viewport: Camera2d) → {}
draw this renderable (automatically called by melonJS)
Name | Type | Attributes | Description |
---|---|---|---|
renderer | CanvasRenderer | WebGLRenderer |
a renderer instance |
|
viewport | Camera2d |
<optional> |
the viewport to (re)draw |
protected update(dt: number) → {boolean}
container update function.
automatically called by the application update loop Application
Name | Type | Description |
---|---|---|
dt | number |
time since the last update in milliseconds. |
Type | Description |
---|---|
boolean |
true if the Container is dirty |