Class UIPanel
Hierarchy (View Summary)
- UIBaseElement
- UIPanel
Index
Constructors
Properties
Accessors
Methods
Constructors
constructor
-
Parameters
- x: number
position of the panel's left edge
- y: number
position of the panel's top edge
- settings: UIPanelSettings
see UIPanelSettings
Returns UIPanel
- x: number
Properties
align
where children line up across the layout; see UIPanelAlign
alpha
Define the renderable opacity
Set to zero if you do not wish an object to be drawn
Opacity cascades: it is multiplied with the alpha already on the
renderer, so fading a Container fades everything inside it,
and a child at alpha 0.5 inside a parent at 0.5 draws at 0.25.
Each renderable keeps its own value — the composition happens at
draw time, and is undone when the renderable is done.
That is different from Container#setChildsProperty, which
assigns a value onto the children themselves. Use alpha to fade a
subtree, and setChildsProperty to change what the children are.
always
Whether the renderable object will always update, even when outside of the viewport
ancestor
a reference to the parent object that contains this renderable
anchor
The anchor point is used for attachment behavior, and/or when applying transformations.
The coordinate system places the origin at the top left corner of the frame (0, 0) and (1, 1) means the bottom-right corner
a Renderable's anchor point defaults to (0.5,0.5), which corresponds to the center position.
Note: Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation.
To specify a value through Tiled, use a json expression like json:{"x":0.5,"y":0.5}, or (since 19.9) a plain string preset such as bottom.
At construction time, settings.anchorPoint also accepts the named presets
"center", "top", "bottom", "left", "right", "top-left", "top-right",
"bottom-left", "bottom-right" on every renderable that consumes it
(Sprite, Entity, Collectable, ImageLayer, Text, BitmapText, Sprite3d and subclasses).
Note: a body's collision shapes are measured from the same frame this
places the renderable in, so a shape of Rect(0, 0, width, height) covers the
renderable whatever the anchor is (since 20.7; before that shapes were measured
from pos regardless, and a non-corner anchor collided where it was not drawn).
A shape's own pos still offsets it inside that frame. A renderable that has
cleared Renderable#applyAnchorTransform takes no offset at all, on the
drawing or on its shapes. Note also that the adapters read the anchor when the
body is created, so changing it afterwards moves the drawing but not an
already-built body.
apply
Whether Renderable#preDraw applies the Renderable#anchorPoint offset to the renderer transform.
When true (the default), the renderable is shifted by
-anchorPoint × (width, height) so its anchor — not its top-left
corner — aligns with its position. Correct for sprites and other 2D
renderables.
Set to false for a renderable that emits its own final world
coordinates and takes its origin from geometry rather than a bounds
box — e.g. a Mesh on the Camera3d world-space path (a 3D
mesh is positioned by its transform and has no anchor). The WebGL mesh
batcher reuses this same renderer transform as its view matrix,
so applying the normalized anchor there would shift every mesh by
half its OWN bounds box; because scene meshes size that box per node,
props and the platforms they rest on would drift apart and overlap.
auto
Specify if the children z index should automatically be managed by the parent container
auto
whether the panel resizes to fit its laid out content
auto
Whether the container keeps its children sorted by itself.
- When a child is added, the container sorts (on the next tick).
- On a
"x"or"y"sort, it also keeps its children in order every frame, as they move: at the end of each update, after physics and the children's own updates, it checks the order and re-sorts when anything is out of place. A character walking around a y-sorted scene passes in front of and behind things with nosort()call. A frame where nothing moved costs one pass over the children, and nothing is redrawn because of it. - On a
"z"sort, changing a child'sdepthafter adding it does NOT re-sort: call Container#sort, or use Container#moveToTop and the other move methods, which reorder the children themselves."depth"is re-sorted every frame by its Camera3d.
Turn it off to keep the children in the order you put them.
auto
When enabled, an object container will automatically apply any defined transformation before calling the child draw method.
Example
// enable "automatic" transformation when the object is activated
onActivateEvent: function () {
// reset the transformation matrix
this.currentTransform.identity();
// ensure the anchor point is the renderable center
this.anchorPoint.set(0.5, 0.5);
// enable auto transform
this.autoTransform = true;
....
}
background
define a background color for this container
blend
the blend mode to be applied to this renderable — any of the modes listed on CanvasRenderer#setBlendMode, honoured identically by every renderer
blocking
Whether the panel stops pointer events on it from reaching what is behind it. Widgets inside still get theirs.
bob
How far the panel floats up and down, in pixels; 0 leaves it still.
A slow float keeps a dialog waiting for input from looking frozen. The
panel rises this far above its position and sinks this far below it;
2 to 4 works well, as smaller values step a pixel at a time and look
jerky. The panel, and every widget in it, is clickable where it is
drawn, while pos keeps its resting place.
bob
How long one full up and down float takes, in milliseconds. 0 or
less turns the float off.
body
the renderable physics body — the handle returned by the
active PhysicsAdapter's addBody (or constructed
imperatively via new Body(...)). Typed as the portable
PhysicsBody interface; cast to the adapter-specific
concrete type (MatterAdapter.Body, BuiltinAdapter.Body, or
the legacy Body class) to reach native fields.
Example
// define a new Player Class
class PlayerEntity extends me.Sprite {
// constructor
constructor(x, y, settings) {
// call the parent constructor
super(x, y , settings);
// define a basic walking animation
this.addAnimation("walk", [...]);
// define a standing animation (using the first frame)
this.addAnimation("stand", [...]);
// set the standing animation as default
this.setCurrentAnimation("stand");
// add a physic body
this.body = new me.Body(this);
// add a default collision shape
this.body.addShape(new me.Rect(0, 0, this.width, this.height));
// configure max speed, friction, and initial force to be applied
this.body.setMaxVelocity(3, 15);
this.body.setFriction(0.4, 0);
this.body.force.set(3, 0);
this.isKinematic = false;
// set the display to follow our position on both axis
app.viewport.follow(this, app.viewport.AXIS.BOTH);
}
...
}
body
Declarative body definition consumed by the active
PhysicsAdapter when this renderable is added to a
container. Adapter API only — leave undefined if you
build a body imperatively via this.body = new Body(...).
When set, the parent container forwards it to
world.adapter.addBody(this, this.bodyDef), which constructs
the underlying physics body (matter, builtin SAT, …) and
assigns the engine-portable wrapper to this.body. This is
the engine-portable path: the same bodyDef produces an
equivalent body under any adapter.
Typical fields: type ("static"/"dynamic"/"kinematic"),
shapes, collisionType, collisionMask, restitution,
frictionAir, density, gravityScale, isSensor,
maxVelocity, fixedRotation. See BodyDefinitionInit.
shapes is normally a list of collision shapes, but it can also
name a collision shape file preloaded as JSON, paired with id
naming the body to read out of it. The file is resolved before any
adapter sees the definition, so the same one works unchanged on
every backend.
Example
// a shape authored in code
this.bodyDef = {
type: "dynamic",
shapes: [new me.Rect(0, 0, this.width, this.height)],
};
Example
// shapes drawn in a physics-shape editor, preloaded as JSON with
// { name: "shapes", type: "json", src: "data/physics/shapes.json" }
this.bodyDef = { type: "dynamic", shapes: "shapes", id: "hotdog" };
// the density, friction and bounce the shapes were authored with
// come with them, unless the definition states otherwise (each is
// honoured by whichever backends support it):
this.bodyDef = {
type: "dynamic",
shapes: "shapes",
id: "hotdog",
restitution: 0.9, // wins over whatever the file carries
};
border
the colour of the border around the edge; null for none
border
the border's thickness, in pixels
clipping
Specify if the container draw operation should clip its children to its own bounds
Optionalcollision
Optionalcollision
Optional per-shape collision settings, honoured by Body#addShape
and defaulted there. Declared rather than initialized: the body writes
them when the shape joins it, so a class field here would emit an
undefined own property on every shape ever built. See addShape for
the table of defaults and what each one does.
columns
the number of cells in each row of a "grid" layout
current
the renderable transformation matrix (4x4).
For standard 2D use, only the 2D components are used (rotate around Z, scale X/Y, translate X/Y).
For 3D use (e.g. Mesh), the full 4x4 matrix supports rotation around any axis,
3D translation, and perspective projection.
Use the rotate(), scale(), and translate() methods rather than modifying this directly.
edges
The edges here are the direction of the nth edge of the polygon, relative to
the nth point. If you want to draw a given edge from the edge value, you must
first translate to the position of the starting point.
enable
Re-measure this container's bounds from its children, so they follow the children as they move: on every update (after the children have been updated), whenever a child is added or removed, and, while the container is culled, before each visibility check, so a group whose members come back into view is drawn again. Expensive — every update walks the whole child list — and off by default, because a parent almost never needs it.
Enable it for a group whose extent genuinely IS its members' union and moves as they do: a flock of birds, a squad of enemies. A container whose size is known (or fixed) should be given that size with Renderable#resize instead, which costs nothing per frame — that is what GLTFModel does, from the glTF scene's own bounding box.
Note that a container with neither — no dimensions of its own and
this left off — reports an EMPTY bounds (min +Infinity, max
-Infinity), since Container#updateBounds then has nothing
to measure. Anything reading it is wrong about where the container
is, and the physics broadphase, which files every item by
getBounds(), cannot place it at all.
fill
the background colour; null leaves it transparent
floating
UI elements use screen coordinates by default, so they stay put when
the camera moves. Children added to a UIBaseElement should keep their
own floating at false.
focusable
Whether this element can take the keyboard and gamepad focus: see UIBaseElement#focus. The built-in buttons, checkboxes and sliders set it; set it on a widget of your own to make it reachable. A disabled or hidden element is skipped.
gap
the space between children in a layout, in pixels
grab
While dragged: where the element was grabbed, relative to its
position. undefined otherwise.
GUID
(G)ame (U)nique (Id)entifier"
a GUID will be allocated for any renderable object added
to an object container (including the app.world container)
hold
How long a press must be held before UIBaseElement#onHold
runs, in milliseconds. Needs isHoldable.
hover
true while the pointer is over the element. A tap on a touch screen
does not set it. Cleared when the element is removed, so one added back
later is not drawn lit until the pointer comes over it again.
hover
The scale the widget is drawn at under the pointer, or while it shows
the focus ring: a little bounce, such as 1.05. 1 turns it off.
Only the drawing scales, about the widget's centre. Its hit area and its place in a layout stay the same, so the widgets around it do not move. The scale eases there and back by itself (about 0.2 s). A disabled widget does not grow.
indices
a list of indices for all vertices composing this polygon, filled in by Polygon#getIndices and invalidated by Polygon#recalc.
A subclass may repurpose this name for geometry of its own: a
Mesh holds a GPU index buffer here, a typed array rather than a
plain one. recalc therefore only clears the slot when it owns it —
anything else reading it should check what it got.
Optionalis
false takes this shape out of collision without removing it
is
Whether the pointer can press the element. The low-level flag under
UIBaseElement#enabled: prefer enabled, which also calls off a
press in progress, blocks the keys and the pad, and draws a built-in
widget disabled.
is
when true the renderable will be redrawn during the next update cycle
is
Whether the element follows the pointer while held. onClick runs on
the pick-up, UIBaseElement#onMove on each move and onRelease
on the drop.
is
Whether a press held for holdThreshold ms calls
UIBaseElement#onHold.
is
If true then physic collision and input events will not impact this renderable
is
make the renderable object persistent over level changes
Optionalis
true reports contacts but skips the position correction
keeps
Whether a drag that starts on this element belongs to it.
When false, a drag that starts on the element inside a scrolling
UIPanel scrolls the panel and calls off the press. Set it on a
widget that handles its own drags, such as a knob or a colour picker,
as UISlider does. An isDraggable element keeps its drags
anyway.
layout
how the children are placed; see UIPanelLayout. Call UIPanel#relayout after changing it.
mask
A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
name
The name of the renderable
on
on
a callback to be extended, triggered after a child has been added or removed
on
Called each time the content scrolls, with the new offsets in pixels.
on
an event handler that is called when the renderable leave or enter a camera viewport
padding
the space between the content and the frame, in pixels
points
Array of points defining the Polygon
Note: If you manually change points, you must call recalcafterwards so that the changes get applied correctly.
pos
origin point of the Polygon
post
whether a single post effect on this renderable needs an offscreen capture instead of the renderer's shader-swap fast path.
One effect is normally applied by drawing the renderable with the
effect's own program rather than capturing and post-processing it,
which costs no render target. That is only equivalent when everything
the renderable draws is a textured quad. fillRect and the shape
dispatch go through a batcher that never looks at that shader, so a
single effect on a renderable that draws with primitives silently
does nothing. Set this and the capture is used instead, at the cost
of a render target while the effect is active.
Two or more effects always capture, so this only ever changes the single-effect case.
post
the list of post-processing shader effects applied to this renderable (GPU backends — WebGL and WebGPU). Effects are applied in order. Use addPostEffect, getPostEffect, and removePostEffect to manage effects, or assign directly. On the Canvas renderer effects stay inert (the scene keeps rendering un-effected).
press
The scale the widget is drawn at while held down, such as 0.92.
1 turns it off. Drawing only, as UIBaseElement#hoverScale.
radius
the corner radius, in pixels; 0 is square
released
false while the element is held down (by the pointer, or by Enter /
A with the focus), true otherwise. Removing a held element calls the
press off (see UIBaseElement#cancelPress), so it is true again
once out of the scene.
root
whether the container is the root of the scene
scroll
which ways the content scrolls; see UIPanelScroll
scrollbar
the colour of the scrollbar, shown while the content does not fit
shadow
how far the shadow's soft edge spreads, in pixels
shadow
the colour of the drop shadow, its alpha setting how dark; null for none
shadow
how far right the shadow falls, in pixels
shadow
how far down the shadow falls, in pixels
Readonlyskin
the background art, when the panel is skinned
Readonlytitle
the title's text object, when the panel has a title
type
The shape type (used internally).
update
Whether to update this object when the game is paused.
On a container it covers everything under it: a child steps through a pause on its own opt-in or on one from any container above it, so a pause menu flags itself once and its nested labels follow.
visibility
The layers this renderable belongs to, as bits (1, 2, 4, 8... up to
32 of them). A camera draws it only if it shares a bit with the
camera's Camera2d#cullMask: by default every renderable is on
layer 1 and every camera draws every layer, so it shows in all of
them. Put something on a layer a camera leaves out to keep it off that
camera only, such as the particles off a minimap. A container left
out is left out with everything inside it (the world included), and
a renderable on no layer, 0, is drawn by no camera.
It decides what a camera draws, and nothing else: the renderable
still updates, collides and receives pointer events. A
Light2d a camera leaves out, itself or a container it is in,
neither glows, nor cuts its hole in the darkness, nor lights
normal-mapped sprites in that camera (a Light3d lights the meshes
of every camera). A
floating renderable must also pass the camera's floating rule (see
Renderable#visibleInAllCameras). On an object of a Tiled map
it can be set as an int custom property of the object.
visible
If true, this floating renderable will be rendered by all cameras (e.g. background image layers). If false (default), floating elements are only rendered by the default camera (e.g. UI/HUD elements), zoomed or not. Only applies to floating renderables in multi-camera setups.
Staticfocus
The colour of the ring drawn around the element with the focus, for every element. Any CSS colour.
Accessors
bottom
-
get bottom(): number
bottom coordinate of the Rectangle
Returns number
center
-
get centerX(): number
absolute center of this rectangle on the horizontal axis
Returns number
-
set centerX(value: number): void
Parameters
- value: number
Returns void
center
-
get centerY(): number
absolute center of this rectangle on the vertical axis
Returns number
-
set centerY(value: number): void
Parameters
- value: number
Returns void
depth
-
get depth(): number
the depth of this renderable on the z axis
Returns number
-
set depth(value: number): void
Parameters
- value: number
Returns void
enabled
-
get enabled(): boolean
Whether the widget answers input: the switch to turn a widget off.
Turning it off clears
isClickable, calls off a press in progress (see UIBaseElement#cancelPress), and skips it in keyboard and gamepad navigation. The built-in widgets draw themselves disabled: theirdisabledskin region, or at half opacity. A widget of your own readsenabledin itsdraw.isClickableis the low-level flag underneath; setting it alone does not changeenabledor the look.Returns boolean
-
set enabled(value: boolean): void
Parameters
- value: boolean
Returns void
focused
-
get focused(): boolean
truewhile this element has the keyboard and gamepad focusReturns boolean
height
-
get height(): number
height of the Rectangle
Returns number
-
set height(value: number): void
Parameters
- value: number
Returns void
in
-
get inViewport(): boolean
-
set inViewport(value: boolean): void
Parameters
- value: boolean
Returns void
is
-
get isFlippedX(): boolean
is
-
get isFlippedY(): boolean
is
-
get isFloating(): boolean
left
-
get left(): number
The left coordinate of the Rectangle.
Returns number
max
-
get maxScrollX(): number
How far the content can scroll to the right, in pixels;
0when it fits or the panel does not scroll that way. Read only.Returns number
max
-
get maxScrollY(): number
How far the content can scroll down, in pixels;
0when it fits or the panel does not scroll that way. Read only.Returns number
parent
-
returns the parent application (or game) to which this renderable is attached to
Returns Application
the parent application or undefined if not attached to any container/app
right
-
get right(): number
right coordinate of the Rectangle
Returns number
scroll
-
get scrollX(): number
How far the content is scrolled to the right, in pixels, from
0to UIPanel#maxScrollX. Setting it scrolls, clamped to that range.Returns number
-
set scrollX(value: number): void
Parameters
- value: number
Returns void
scroll
-
get scrollY(): number
How far the content is scrolled down, in pixels, from
0to UIPanel#maxScrollY. Setting it scrolls, clamped to that range.Returns number
-
set scrollY(value: number): void
Parameters
- value: number
Returns void
shader
-
Returns ShaderEffect | GLShader | undefined
Deprecated
since 19.2.0 — use addPostEffect / getPostEffect / removePostEffect instead
-
Parameters
- value: ShaderEffect | GLShader | undefined
Returns void
sort
-
get sortOffset(): number
An offset, in pixels, added to this renderable's position when its parent container sorts its children on
"y"(or"x"), and used for nothing else. It never moves the renderable and never changes where or how it is drawn: it only decides whether it is drawn before or after its siblings, and so which one is on top, and which one a pointer hits.
A container sorted on"y"draws its children from the smallestpos.yto the largest, the last one on top. A child with asortOffsetis lined up as if it stood that many pixels lower (positive) or higher (negative), while staying where it is. Use it whenposis not the point a renderable should be sorted by: the top of a Tiled tile object's image, the top left corner of a container, or the top of a particle emitter's spawn area.- A container that keeps itself sorted (
autoSort, the default) picks a change up at its next update; withautoSortoff, call itssort(). - Containers sorted on
"z"or"depth"ignore it, and on"x"and"y"a differentpos.zstill decides first. - Two children that come out equal keep their order, which draws the one
added last BEHIND the other: an offset of
1settles such a tie on purpose. - A renderable taken from a pool starts again at
0.
Returns number
- A container that keeps itself sorted (
-
set sortOffset(value: number): void
Parameters
- value: number
Returns void
sort
-
get sortOn(): "x" | "y" | "z" | "depth"
The property of the child object that should be used to sort on this container.
"x"/"y"— 2D scroll-order, descending on both axes (higher pos.z first; tied z, higher pos.x or pos.y first). Suited to side-scrollers and top-down games. Each child is compared atpos.x/pos.yplus its Renderable#sortOffset, which changes the order and never the position. With Container#autoSort on (the default), the children are kept in that order every frame as they move."z"— descending pos.z (higher z draws on top). Default forCamera2d— matches the painter's-algorithm 2D layering model where pos.z is "layer index"."depth"— Camera3d-only. Ascending squared distance from the active camera (closest first in the array → far drawn first → close drawn on top underContainer.draw's reverse-iteration walk). This is the only correct sort for alpha-blended sprites under perspective projection, where neither pos.z nor pos.x/y layering produces correct occlusion (the closer/farther relationship flips as the camera orbits). Set automatically when anApplicationorStageis constructed withcameraClass: Camera3d. Has no useful effect underCamera2d(ortho projection doesn't need camera-distance ordering) and pays an O(N log N) sort per frame, so don't enable it manually in 2D-only games.
Returns "x" | "y" | "z" | "depth"
-
set sortOn(value: "x" | "y" | "z" | "depth"): void
Parameters
- value: "x" | "y" | "z" | "depth"
Returns void
tint
-
define a tint for this renderable. a (255, 255, 255) r, g, b value will remove the tint effect.
Returns Color
-
Takes a Color to copy, or a CSS colour string.
It COPIES rather than holds, so a caller that goes on mutating what it passed does not steer this renderable's tint by accident. What the getter hands back is always a
Color, whichever form went in.Parameters
- value: string | Color
the colour to tint with
Returns void
- value: string | Color
top
-
get top(): number
top coordinate of the Rectangle
Returns number
width
-
get width(): number
width of the Rectangle
Returns number
-
set width(value: number): void
Parameters
- value: number
Returns void
Staticfocus
-
The element with the keyboard and gamepad focus, or
undefinedwhen none has it.Returns UIBaseElement | undefined
Methods
add
-
Add a post-processing shader effect to this renderable.
With the
prewarmapplication setting on (the default), what the effect will need to draw here is compiled from this call, off the frame, rather than on the frame the renderable first draws with it. That takes a moment to finish, so attach effects when the renderable is built (a pool, a stage starting) rather than when it is shown.Parameters
- effect: ShaderEffect | GLShader
the effect to add
Returns ShaderEffect | GLShader
the added effect
- effect: ShaderEffect | GLShader
angle
-
return the angle to the specified target
Parameters
- target: Vector2d | Vector3d | Renderable
Returns number
angle in radians
blur
cancel
-
Call off a press in progress, without calling
onRelease: UIBaseElement#onCancel runs instead.The element goes back to its released look, and the pointer-up that follows does nothing. A scrolling UIPanel calls this when a drag that started on the element turns out to be a scroll, so a button dragged to scroll its list is not clicked. Setting
enabledtofalse, losing the focus or the window losing focus while Enter or A is held, and removing the element while it is held call it too.Returns void
center
-
center the rectangle position around the given coordinates
Parameters
- x: number
the x coordinate around which to center this rectangle
- y: number
the y coordinate around which to center this rectangle
Returns UIPanel
this rectangle
- x: number
clear
clear
clip
-
Whether the panel shows its children at a point: anywhere for a panel that does not scroll, only in its content area for one that does.
Parameters
- x: number
the point, in screen pixels for a floating panel
- y: number
the point
Returns boolean
false where the children are cropped away
- x: number
clone
contains
-
Returns true if the polygon contains the given point.
(Note: it is highly recommended to first do a hit test on the corresponding
bounding rect, as the function can be highly consuming with complex shapes)Parameters
- x: number
x coordinate or a vector point to check
- y: number
y coordinate
Returns boolean
True if the polygon contain the point, otherwise false
- x: number
-
Returns true if the polygon contains the given point.
(Note: it is highly recommended to first do a hit test on the corresponding
bounding rect, as the function can be highly consuming with complex shapes)Parameters
- vector: XYPoint
Returns boolean
True if the polygon contain the point, otherwise false
contains
-
Returns true if the rectangle contains the given rectangle
Parameters
- rectangle: Rect
rectangle to test
Returns boolean
True if the rectangle contain the given rectangle, otherwise false
- rectangle: Rect
copy
distance
-
return the distance to the specified target
Parameters
- target: Vector2d | Vector3d | Renderable
Returns number
distance
draw
equals
-
Check if this rectangle is identical to the specified one.
Parameters
- rect: Rect
Other rectangle.
Returns boolean
true if equals
- rect: Rect
flip
-
flip the renderable on the horizontal axis (around the center of the renderable)
Parameters
Optionalflip: boolean = truetrueto flip this renderable.
Returns Renderable
Reference to this object for method chaining
flip
-
flip the renderable on the vertical axis (around the center of the renderable)
Parameters
Optionalflip: boolean = truetrueto flip this renderable.
Returns Renderable
Reference to this object for method chaining
focus
-
Take the keyboard and gamepad focus, for a game played without a mouse or a touch screen. Call it once the element is in the scene.
Nothing has the focus until a game gives it to an element, and until then the arrow keys and the pad are left to the game. From then on: the arrows or the D-pad move the focus to the nearest focusable element that way; Enter, Space or the pad's A button press the focused one as a click does (a slider steps on left and right instead). The focus ring shows, and hides again while the mouse is used. A focused element in a scrolling panel is scrolled into view.
Does nothing on an element that is not
focusable.Returns void
focus
-
Called when Enter, Space or A is pressed with the focus here: the widget goes down, as under the pointer, and
onClickruns with no event. Override it only to change what accept does.Returns boolean
whether it went down: not when disabled, or already held
focus
-
Called when Enter, Space or A is let go after UIBaseElement#focusPress: the widget comes back up and
onReleaseruns with no event. The built-in widgets complete their action here, as on a click: a button calls itsonClicksetting, a checkbox toggles.Returns void
for
-
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.
Parameters
- callback: Function
function to execute on each element
OptionalthisArg: objectvalue to use as this(i.e reference Object) when executing callback.
Returns void
- The current element being processed in the array
get
-
The panel's absolute position, including the idle float, so the hit areas of the panel and of every widget in it follow the float.
Returns Vector3d
the absolute position, offset by the float
get
get
-
Returns the Child at the specified index
Parameters
- index: number
The index of the child
Returns Renderable
the child at the specified index
- index: number
get
-
return the child corresponding to the specified GUID
note : avoid calling this function every frame since it parses the whole object list each timeParameters
- guid: string | number | boolean | RegExp
child GUID
Returns Renderable
corresponding child or null
- guid: string | number | boolean | RegExp
get
-
returns the list of children 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 timeParameters
- name: string | number | boolean | RegExp
child name
Returns Renderable[]
Array of children
- name: string | number | boolean | RegExp
get
-
getChildByProp(
prop: string,
value: string | number | boolean | RegExp,
objList?: any[],
): 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 timeParameters
- prop: string
Property name
- value: string | number | boolean | RegExp
Value of the property
- objList: any[] = []
Returns Renderable[]
Array of children
Example
// 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 depth10 = container.getChildByProp("depth", 10);
let inViewport = container.getChildByProp("inViewport", true); - prop: string
get
-
returns the list of children with the specified class type
Parameters
- classType: object
Class type
- objList: any[] = []
Returns Renderable[]
Array of children
- classType: object
get
-
getChildIndex(
child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapText,
): numberReturns the index of the given Child
Parameters
- child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapTextThe child object
Returns number
index
- child:
get
get
-
returns a list of indices for all triangles defined in this polygon
Returns number[]
an array of vertex indices for all triangles forming this polygon.
Protectedget
-
The panel's local transform, including the idle float, so it agrees with UIPanel#getAbsolutePosition.
Parameters
- out: Matrix3d
matrix to write into
Returns Matrix3d
out, for chaining - out: Matrix3d
get
-
getNextChild(
child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapText,
): RenderableReturns the next child within the container or undefined if none
Parameters
- child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapTextThe child object
Returns Renderable
child
- child:
get
-
get the renderable alpha channel value
This is the renderable's OWN value. What it finally draws at is this multiplied by every ancestor's — see Renderable#alpha.
Returns number
current opacity value between 0 and 1
get
-
Get post-processing shader effects. When called with a class, returns the first effect matching the given class. When called without arguments, returns the full effects array.
Parameters
OptionaleffectClass: Functionthe effect class to search for
Returns any[] | ShaderEffect | GLShader | undefined
the matching effect, the effects array, or undefined
get
-
Returns the instance of the root container (i.e. the current application World container).
Returns Container
root container
get
-
The space this renderable's content is drawn IN, as a matrix — the full form of Renderable#getAbsolutePosition, which sums positions up the ancestor chain and therefore cannot represent the rotation, scale or flip accumulated along the way.
Reach for
getAbsolutePosition()instead for ordinary positional work — culling, distance checks, hit tests. It is cheaper and it is what the engine culls with. Use this when a position is not enough:- an ancestor is rotated or scaled, so a translation cannot describe the result
- you need to map an arbitrary point, not just the origin — a corner, a click position, one renderable's coordinates into another's space
- you need to compose or invert the transform (
inv(A) · Bconverts between two frames, which is howParticleEmitter.referenceSpacemeasures particles against a container that is not their parent)
The two also frame the question differently, and it shows on a leaf.
getAbsolutePosition()is "where am I"; this is "what space is my content drawn in". For a Container those coincide, because a container offsets its children by its own position. For a leaf they differ by exactly that position, which a leaf applies inside its owndraw(). So with no rotation, scale or flip anywhere, a container's translation column equals itsgetAbsolutePosition()while a leaf's equals its PARENT's.The walk stops at a
floatingancestor, because a floating renderable draws in screen space: Container#draw resets the transform outright for those, so the chain genuinely ends there rather than continuing to the root.The camera needs no special handling — Camera2d folds its view transform into the root container's
currentTransform, so it is picked up like any other level.Parameters
- out: Matrix3d
matrix to write into; nothing is stored on the renderable itself, so callers own the lifetime
Returns Matrix3d
out, for chaining
has
-
hasChild(
child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapText,
): booleanReturns true if contains the specified Child
Parameters
- child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapTextThe child object
Returns boolean
- child:
is
-
Checks if this container is root or if it's attached to the root container.
Returns boolean
true if this container is root or if it's attached to the root container
is
-
Returns true if the vertices composing this polygon form a convex shape (vertices must be in clockwise order).
Returns boolean | null
true if the vertices are convex, false if not, null if not computable
is
-
Determines whether all coordinates of this rectangle are finite numbers.
Returns boolean
false if all coordinates are positive or negative Infinity or NaN; otherwise, true.
look
-
Rotate this renderable towards the given target.
Parameters
- target: Vector2d | Vector3d | Renderable
the renderable or position to look at
Returns Renderable
Reference to this object for method chaining
- target: Vector2d | Vector3d | Renderable
move
-
moveDown(
child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapText,
): voidMove the child in the group one step backward (z depth).
Parameters
- child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapTextChild to be moved
Returns void
- child:
move
-
moveToBottom(
child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapText,
): voidMove the specified child the bottom (z depth).
Parameters
- child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapTextChild to be moved
Returns void
- child:
move
-
moveToTop(
child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapText,
): voidMove the specified child to the top(z depth).
Moves the whole subtree: the child's own children keep their depths among themselves and come with it, because depth is resolved per container. This is how one overlapping panel is brought in front of another, for drawing and for pointer hit-testing alike.
Parameters
- child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapTextChild to be moved
Returns void
- child:
move
-
moveUp(
child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapText,
): voidMove the child in the group one step forward (z depth).
Parameters
- child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapTextChild to be moved
Returns void
- child:
on
-
Called when a press is called off rather than completed: see UIBaseElement#cancelPress. Override it to undo what
onClickstarted, such as a charge-up effect.Returns void
on
-
Consume a click on the panel itself, unless told not to.
Returning
falseis how UIBaseElement consumes. A child is asked before the container holding it, so this only ever sees a click that missed every one of them, which for a dialog means a click on its own background and should go no further.Returns boolean
false while UIPanel#blocking
on
-
Legacy collision callback — fires every frame this renderable body is overlapping another body. Kept for backward compatibility with code written against pre-19.5 melonJS; semantics are unchanged from the 19.4 contract.
NOTE —
onCollisionis NOT equivalent to Renderable.onCollisionActive. The two handlers exist side by side and have intentionally different contracts:onCollision(legacy)onCollisionActive(modern)Cadence for dynamic-dynamic pairs 2× per frame per side 1× per frame per side response.asemanticsFixed per pair (first body in detector call) Always the receiver ( response.a === this)response.bsemanticsFixed per pair Always the partner ( response.b === other)response.normal/response.depth✗ ✓ — normal.y < -0.7= "push me up"return falseto skip push-out✓ (honored by SAT) ✗ — use bodyDef.isSensororsetSensorinsteadIf you're writing new code, prefer
onCollisionActive. KeeponCollisiononly when its every-frame, return-false, fixed-a/bsemantics are what you want.Parameters
- response: ResponseObject
the SAT response object; the legacy handler receives this, not the adapter's
CollisionResponse, which is whynormalanddepthare absent from the table above - other: Renderable
the other renderable touching this one (a reference to response.a or response.b)
Returns boolean
true if the object should respond to the collision (its position and velocity will be corrected); the return value is only honored by the builtin SAT adapter.
- response: ResponseObject
on
-
Called once a press has been held for
holdThresholdmilliseconds, whenisHoldableis set. Override it in a subclass.Returns void
on
-
Called on each pointer move while the element is dragged (see UIBaseElement#isDraggable), after
poshas followed the pointer. Override it in a subclass.Parameters
Optional_event: Pointerthe pointer event
Returns void
on
-
Called for an arrow key or a D-pad direction while this element has the focus. Return
trueto handle it yourself (the focus stays here), as a slider does to step. Returnfalse, the default, to move the focus to the nearest widget that way.Enter, Space and A do not come here: they press the widget through UIBaseElement#focusPress and UIBaseElement#focusRelease.
Parameters
- _action: UINavAction
which way:
"up","down","left"or"right"
Returns boolean
truewhen handledExample
// a picker: left and right change the choice, up and down move on
class Picker extends UIBaseElement {
constructor(x, y, choices) {
super(x, y, 160, 32);
this.focusable = true;
this.choices = choices;
this.index = 0;
}
onNavigate(action) {
if (action === "left" || action === "right") {
const step = action === "right" ? 1 : -1;
const n = this.choices.length;
this.index = (this.index + step + n) % n;
this.isDirty = true;
return true;
}
return false;
}
} - _action: UINavAction
on
-
Called when the pointer leaves the element. Override it in a subclass.
Also fires when the pointer is still inside but something drawn above has stopped the move, since the pointer is then over that instead. A press in progress ends first, through
onRelease.Unlike UIBaseElement#onOver it cannot stop the event: an element that skipped its own leave would stay lit after the pointer had gone.
Parameters
Optional_event: Pointerthe pointer event
Returns void
on
-
Consume a hover on the panel itself, unless told not to.
Without this a widget UNDER a dialog keeps lighting up as the pointer crosses the panel covering it.
Returns boolean
false while UIPanel#blocking
on
-
Consume the release that follows a click on the panel, unless told not to.
The three handlers consume independently. Taking the press and leaving the release is half a block: the pointer-up still reaches whatever is under the dialog, so a button there completes an interaction it never began.
Returns boolean
false while UIPanel#blocking
overlaps
-
check if this rectangle is intersecting with the specified one
Parameters
- rect: Rect
Other rectangle.
Returns boolean
true if overlaps
- rect: Rect
post
-
restore the rendering context after drawing (automatically called by melonJS).
Parameters
- renderer: Renderer
a renderer object
Returns void
- renderer: Renderer
pre
-
Apply the bounce, and draw the focus ring, behind the widget.
Here and not in
draw: a container translates to its own position indraw, so frompreDrawon, the widget and the ring share the parent's coordinates, whatever the widget does in its owndraw.Parameters
- renderer: Renderer
the renderer to draw with
Returns void
- renderer: Renderer
recalc
-
Computes the calculated collision polygon. This must be called if the
pointsarray,angle, oroffsetis modified manually.Returns UIPanel
Reference to this object for method chaining
relayout
-
Place the children again, and work out how far the content scrolls.
It runs by itself when a child is added or removed and when the panel is resized, not every frame. Call it after a child changes size, after changing
layout,columns,padding,gaporalign, or after moving children by hand in a scrolling panel.Returns this
this panel
remove
-
removeChild(
child:
| Draggable
| Light2d
| Renderable
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapText,
keepalive?: boolean,
): voidInvokes the removeChildNow in a defer, to ensure the child is removed safely after the update & draw stack has completed.
if the given child implements an onDeactivateEvent() method, that method will be called once the child is removed from this container (exactly once, for a child that had itsonActivateEvent: the children of a removed container are told once, however deep they sit).Parameters
- child:
| Draggable
| Light2d
| Renderable
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapTextChild to be removed
Optionalkeepalive: booleantrue to prevent calling child.destroy()
Returns void
- child:
remove
-
Remove a specific post-processing shader effect.
Parameters
- effect: ShaderEffect | GLShader
the effect to remove
Returns void
- effect: ShaderEffect | GLShader
reset
-
reset the container, removing all children, and resetting transforms. Persistent children (Renderable#isPersistent) are kept, and a sort still pending for them still happens.
Returns void
resize
-
Resize the panel, and lay the children out again.
Parameters
- w: number
the new width
- h: number
the new height
Returns UIPanel
this panel
- w: number
rotate
-
Rotate this renderable by the specified angle (in radians). When called with just an angle, rotates around the Z axis (2D rotation). When called with an angle and a Vector3d axis, rotates around that axis in 3D.
Parameters
- angle: number
The angle to rotate (in radians)
Optionalv: Vector3dthe axis to rotate around (defaults to Z axis for 2D)
Returns UIPanel
Reference to this object for method chaining
- angle: number
scale
-
scale the renderable around his anchor point. Scaling actually applies changes to the currentTransform member which is used by the renderer to scale the object when rendering. It does not scale the object itself. For example if the renderable is an image, the image.width and image.height properties are unaltered but the currentTransform member will be changed.
Parameters
- x: number
a number representing the abscissa of the scaling vector.
Optionaly: number = xa number representing the ordinate of the scaling vector.
Optionalz: number = 1a number representing the depth of the scaling vector.
Returns UIPanel
Reference to this object for method chaining
- x: number
scale
scroll
-
Scroll the content to an offset, clamped to
0up to UIPanel#maxScrollX and UIPanel#maxScrollY, with no animation. A fling still coasting from a drag stops.Scrolling moves the children, so a child's
posis where it is drawn.Parameters
- x: number
the horizontal offset, in pixels
- y: number
the vertical offset, in pixels
Returns this
this panel
- x: number
scroll
-
Scroll just enough to bring a child fully into view; nothing moves if it already is. A widget that is not a direct child of this panel is ignored.
Parameters
- child: Renderable
one of this panel's children
- margin: number = 0
room to leave around it, in pixels, such as for a focus ring
Returns this
this panel
- child: Renderable
set
-
Automatically set the specified property of all childs to the given value
This ASSIGNS to the children — after it, their own property carries the value. To fade a subtree without touching what the children are, set Renderable#alpha on the container instead: opacity cascades at draw time and leaves every child's own value alone.
Parameters
- prop: string
property name
- value: any
property value; whatever the named property holds, so a flag is a boolean and a colour is a string, not only an object
Optionalrecursive: booleanrecursively apply the value to child containers if true
Returns void
- prop: string
set
-
set the renderable alpha channel value
Parameters
- alpha: number
opacity value between 0.0 and 1.0
Returns void
- alpha: number
set
-
Move this renderable, optionally in three dimensions.
posholds anObservableVector3d, but the geometry this class inherits from declares it as a 2D vector, so from TypeScriptpos.set(x, y)takes two arguments and silently writes a zero z. Anything with a depth then drops to the near plane. Reaching past that previously meant a double cast or assigningpos.x,pos.yanddepthby hand, which is why that pattern is written out dozens of times across the examples.Omitting
zleaves the depth exactly as it was, rather than zeroing it. That is the whole difference frompos.set(x, y), and it is what makes this safe to call on a 2D sprite that happens to sit at a depth, or on aCamera2d, without having to know whether it does.Parameters
- x: number
the new x position
- y: number
the new y position
Optionalz: numberthe new depth; left untouched when omitted
Returns UIPanel
this renderable, for chaining
- x: number
set
-
set new value to the Polygon
Parameters
- x: number
position of the Polygon
- y: number
position of the Polygon
- points: PolygonVertices | LineVertices
array of vector or vertices defining the Polygon
Returns UIPanel
this instance for object chaining
- x: number
set
-
Set new dimensions for the rectangle.
Parameters
- width: number
The new width of the rectangle.
- height: number
The new height of the rectangle.
Returns UIPanel
- width: number
set
-
Tint this renderable, chainably.
Exactly Renderable#tint's own setter, returning the renderable so it can be chained with the other
set*methods. It exists becausetintis a live Color, so reaching for it means choosing betweensetColor(0 to 255),setFloat(0 to 1),parseCSS,setHSLandsetLinear— and picking the wrong one is silent, it just renders the wrong colour.Deliberately sRGB only. A LINEAR value, which in practice means a glTF
baseColorFactororemissiveFactor, stays an explicittint.setLinear(...)so the conversion is never silent; for a mesh built from an asset, pass Mesh#baseColorFactor as a setting and the loader's value is applied for you.Parameters
- value: string | Color
a
Colorto copy, or a CSS colour string
Returns UIPanel
this renderable, for chaining
- value: string | Color
set
-
set the vertices defining this Polygon
Parameters
- vertices: PolygonVertices | LineVertices
array of vector or vertices defining the Polygon
Returns UIPanel
this instance for object chaining
- vertices: PolygonVertices | LineVertices
shift
sort
-
Manually trigger the sort of all the childs in the container
Parameters
Optionalrecursive: booleanrecursively sort all containers if true
Returns void
sort
-
Synchronous variant of Container#sort. Sorts immediately — no defer — using the current
_comparator. Intended for per-frame callers that need the order to be valid for the very next render (e.g.Camera3drefreshing the"depth"sort after the camera has moved, where waiting for the deferred sort tick would render a stale frame).Parameters
Optionalrecursive: booleanrecursively sort sub-containers
Returns void
swap
-
swapChildren(
child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapText,
child2:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapText,
): voidSwaps the position (z-index) of 2 children
Parameters
- child:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapTextChild to be added
- child2:
| Draggable
| Light2d
| Renderable
| Entity
| Sprite
| NineSliceSprite
| Collectable
| Trigger
| DropTarget
| ImageLayer
| ColorLayer
| UIBaseElement
| UISpriteElement
| UITextButton
| Text
| BitmapTextChild to be added
Returns void
- child:
to2d
to
-
apply an isometric projection to this shape
Returns UIPanel
Reference to this object for method chaining
to
-
Returns a polygon whose edges are the same as this box.
Returns Polygon
a new Polygon that represents this rectangle.
transform
translate
-
Translate the renderable by the specified offset.
Parameters
Returns UIPanel
Reference to this object for method chaining
union
update
-
Advance the bob.
Parameters
- dt: number
time since the last frame, in milliseconds
Returns boolean
whether the panel needs redrawing
- dt: number
update
-
Update this panel's bounds, and its children's, so their hit areas follow the panel when it moves. The panel's own bounds are its size, never grown by a child hanging over the edge.
Parameters
- absolute: boolean = true
update in world absolute coordinates
Returns Bounds
this panel's bounds
- absolute: boolean = true
A rectangular frame that holds other widgets: the base of a menu, a dialog, a pause screen or a HUD box. Add children to it with
addChild; they are positioned relative to the panel's top left corner, drawn over its background, and move with it.Background
Draw one with no assets:
fillColor,borderColor,borderWidthandradiusfor rounded corners. Or give a nine-sliceskinfrom an atlas, which stretches to any size with its corners kept sharp. With neither, the panel is invisible but still holds and lays out its children.Title
titledraws a line of text centred in a band at the top, styled withtitleFont,titleFontSizeandtitleFillStyle. The content area starts below the band.Dragging
With
draggable, the player moves the panel by dragging its title or its background, never through a widget on it (a drag on the content of a scrolling panel scrolls it instead). A pressed panel comes to the front of its container, so the window last touched is on top.Blocking
By default (
blocking: true) the panel stops clicks, releases and hover on it from reaching whatever is behind it, and so does the wheel over a scrolling panel. Widgets inside it still get their events. Setblocking: falsefor a frame that only decorates.Layout
layoutplaces the children for you, in the order they were added:"column","row"or"grid"(withcolumnsper row).paddingis the space inside the frame,gapthe space between children, andalignlines them up across the layout ("start","center","end", or"stretch", which resizes buttons and panels to fill the width of a column or a cell, or the height of a row; other children keep their size).autoSizeresizes the panel to fit what it holds. The layout runs again when a child is added or removed and when the panel is resized; call UIPanel#relayout after changing a child's size.Scrolling
scroll("vertical","horizontal"or"both") crops the children to the content area and lets the player scroll whatever does not fit: with the mouse wheel, or by dragging the content, which carries on with momentum. A scrollbar shows how far along the content is.onScrollis called on every change.With
layout: "none", place children at their position in the content, as if it were not scrolled, and callrelayout()after moving one by hand.Drop shadow
shadowColordraws a soft shadow under the panel; its alpha sets how dark it is.shadowOffsetXandshadowOffsetYmove it,shadowBlursoftens its edge, and it followsradius. The shadow is drawn outside the panel's bounds and never takes the pointer.Idle float
bobAmplitudeandbobPeriodmake the panel drift slowly up and down, so a screen waiting for input does not look frozen. Its widgets stay clickable where they are drawn.Things to know
Camera3d, floating children are sorted the other way round: the SMALLER depth draws on top, so add a dialog at a depth of 0 or 1, not 9000.Example
Example
Example
Example
Example
Example