melonJS
    Preparing search index...

    Class UIPanel

    A rectangular surface with a background, an optional border and children.

    The thing every menu, dialog and HUD frame starts by writing: a rounded rectangle, a fill, an outline, and some labels on top. One example in this repository had three of them, each repeating the same half dozen renderer calls, and each repeating the same correction for the way setColor folds the global alpha in. That correction is the reason this is a widget rather than a snippet: it is easy to leave out, and leaving it out does not fail, it just renders a panel at the wrong opacity.

    It is a UIBaseElement, so it is a container that carries pointer events, and children added to it are drawn over its background and are asked about a click before it is.

    It is floating, as every UI element is, and where it lands in the paint order is the depth it is added at. In a world sorted on "depth", which is every Camera3d scene, that depth is read the other way round from the 2D habit: a floating child is ranked by |pos.z| there and the SMALLER magnitude draws on top, so a panel added at 9000 to sit above everything sits behind everything instead, and a dialog there wants a small depth, 0 or 1.

    import { UIPanel, Text } from "melonjs";

    const panel = new UIPanel(cx - 200, cy - 120, {
        width: 400,
        height: 240,
        fillColor: "#0a1526",
        borderColor: "rgba(130, 200, 240, 0.55)",
        borderWidth: 2,
        radius: 14,
    });
    // positioned relative to the panel, not to the screen
    panel.addChild(new Text(200, 24, { text: "PAUSED", textAlign: "center" }));
    app.world.addChild(panel);

    Hierarchy (View Summary)

    Index
    constructor
    alpha alwaysUpdate ancestor anchorPoint applyAnchorTransform autoDepth autoSort autoTransform backgroundColor blendMode blocking bobAmplitude bobPeriod body bodyDef borderColor borderWidth clipping collisionMask? collisionType? currentTransform edges enableChildBoundsUpdate fillColor floating grabOffset GUID holdThreshold holdTimeout hover indices isActive? isClickable isDirty isDraggable isHoldable isKinematic isPersistent isTrigger? mask name onCanvasResize onChildChange onVisibilityChange points pos postEffectNeedsCapture postEffects radius released root type updateWhenPaused visibleInAllCameras
    bottom centerX centerY depth height inViewport isFlippedX isFlippedY isFloating left parentApp right shader sortOn tint top width
    addChild addChildAt addPostEffect angleTo centerOn clearPostEffects clone contains containsRectangle copy distanceTo draw equals flipX flipY forEach getAbsolutePosition getBounds getChildAt getChildByGUID getChildByName getChildByProp getChildByType getChildIndex getChildren getIndices getLocalTransform getNextChild getOpacity getPostEffect getRootAncestor getWorldTransform hasChild isAttachedToRoot isConvex isFinite lookAt moveDown moveToBottom moveToTop moveUp onClick onCollision onHold onMove onOut onOver onRelease overlaps postDraw preDraw recalc removeChild removeChildNow removePostEffect reset resize rotate scale scaleV setChildsProperty setOpacity setPosition setShape setSize setTint setVertices shift sort sortNow swapChildren to2d toIso toPolygon transform translate union update updateBounds
    alpha: number

    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.

    • Renderable#setOpacity
    • Renderable#getOpacity
    • Container#setChildsProperty
    1.0

    // fades the whole rig, parts included
    myModel.alpha = 0.3;
    alwaysUpdate: boolean

    Whether the renderable object will always update, even when outside of the viewport

    false
    ancestor: Container | Entity

    a reference to the parent object that contains this renderable

    undefined
    anchorPoint: ObservablePoint

    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.

    <0.5,0.5>
    applyAnchorTransform: boolean

    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.

    true

    Mesh#preDraw

    autoDepth: boolean

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

    true
    autoSort: boolean

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

    true
    autoTransform: boolean

    When enabled, an object container will automatically apply any defined transformation before calling the child draw method.

    true

    // 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;
        ....
    }
    backgroundColor: Color

    define a background color for this container

    (0, 0, 0, 0.0)

    // add a red background color to this container
    this.backgroundColor.setColor(255, 0, 0);
    blendMode: string

    the blend mode to be applied to this renderable — any of the modes listed on CanvasRenderer#setBlendMode, honoured identically by every renderer

    "normal"
    • CanvasRenderer#setBlendMode
    • WebGLRenderer#setBlendMode
    blocking: boolean

    whether it swallows pointer events aimed at what is behind it

    bobAmplitude: number

    How far the panel drifts up and down, in pixels. 0, the default, leaves it still.

    The slow float an idle dialogue or pause panel has in a lot of games, which is there so a screen waiting for input does not look frozen. It is a sine, so this is the distance to either extreme and the panel covers twice it over a cycle; 2 to 4 is the usual range, and it starts by rising rather than sinking.

    Do not go much below 2. The renderer snaps a translation to whole pixels, truncating, so an amplitude of 1 spends most of the cycle reading as 0 and the panel twitches rather than drifts.

    The panel is CLICKABLE where it is drawn: the offset goes into UIPanel#getAbsolutePosition, which is what the bounds pipeline reads, so the hit area of the panel and of every widget inside it follows the float at any depth. pos is deliberately left alone, so a caller still reads and writes the resting place rather than a value that moves under them.

    The bounds are rebuilt only on the frames the offset actually changes, so a panel with no bob costs nothing.

    0
    bobPeriod: number

    How long one full up and down cycle takes, in milliseconds.

    Anything at or below zero turns the bob off rather than dividing by it. That is not politeness: the offset would be NaN, and one translate by NaN writes it into the transform, where every batched vertex under it inherits the poison and the GPU clips the lot away. A panel that silently vanished would be a long way from an obviously bad period.

    2000

    body

    body: PhysicsBody

    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.

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

         ...

    }
    bodyDef: object | undefined

    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.

    undefined

    // a shape authored in code
    this.bodyDef = {
        type: "dynamic",
        shapes: [new me.Rect(0, 0, this.width, this.height)],
    };

    // 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
    };
    borderColor: Paint | null

    drawn around the edge; null for none

    borderWidth: number

    how thick that border is

    clipping: boolean

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

    false
    collisionMask?: number
    collisionType?: number

    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.

    Body#addShape

    currentTransform: Matrix3d

    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: Vector2d[]

    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.

    enableChildBoundsUpdate: boolean

    Re-measure this container's bounds from its children whenever a child's bounds change. 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.

    false

    Renderable#getBounds

    fillColor: Paint | null

    the fill behind the children; null leaves it transparent

    floating: boolean = true

    UI base elements use screen coordinates by default (Note: any child elements added to a UIBaseElement should have their floating property to false)

    Renderable.floating

    true
    grabOffset: Vector2d | undefined
    GUID: string

    (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)

    holdThreshold: number

    Tap and hold threshold timeout in ms

    250
    holdTimeout: number
    hover: boolean

    true if the pointer is over the object

    false
    indices: number[]

    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.

    isActive?: boolean

    false takes this shape out of collision without removing it

    isClickable: boolean

    object can be clicked or not

    true
    isDirty: boolean

    when true the renderable will be redrawn during the next update cycle

    true
    isDraggable: boolean

    object can be dragged or not

    false
    isHoldable: boolean

    object can be tap and hold

    false
    isKinematic: boolean

    If true then physic collision and input events will not impact this renderable

    true
    isPersistent: boolean

    make the renderable object persistent over level changes

    false
    isTrigger?: boolean

    true reports contacts but skips the position correction

    mask: Polygon | Rect | Ellipse | Line | RoundRect

    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.

    undefined

    // apply a mask in the shape of a Star
    myNPCSprite.mask = new me.Polygon(myNPCSprite.width / 2, 0, [
       // draw a star
       {x: 0, y: 0},
       {x: 14, y: 30},
       {x: 47, y: 35},
       {x: 23, y: 57},
       {x: 44, y: 90},
       {x: 0, y: 62},
       {x: -44, y: 90},
       {x: -23, y: 57},
       {x: -47, y: 35},
       {x: -14, y: 30}
    ]);
    name: string

    The name of the renderable

    ""
    onCanvasResize: (() => void) | undefined
    onChildChange: () => void

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

    onVisibilityChange: Function

    an event handler that is called when the renderable leave or enter a camera viewport

    undefined

    this.onVisibilityChange = function(inViewport) {
        if (inViewport === true) {
            console.log("object has entered the in a camera viewport!");
        }
    };
    points: Vector2d[]

    Array of points defining the Polygon
    Note: If you manually change points, you must call recalcafterwards so that the changes get applied correctly.

    pos: Vector2d

    origin point of the Polygon

    postEffectNeedsCapture: boolean

    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.

    false

    class Bar extends Renderable {
        constructor(x, y, w, h) {
            super(x, y, w, h);
            // this draws itself with primitives, not as a sprite
            this.postEffectNeedsCapture = true;
        }
        draw(renderer) {
            renderer.fillRect(this.pos.x, this.pos.y, this.width, this.height);
        }
    }
    postEffects: (ShaderEffect | GLShader)[]

    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).

    []

    // add effects via helper methods
    mySprite.addPostEffect(new DesaturateEffect(renderer));
    mySprite.addPostEffect(new VignetteEffect(renderer));

    // assign directly
    mySprite.postEffects = [new SepiaEffect(renderer), new VignetteEffect(renderer)];
    radius: number

    corner radius; 0 is square

    released: boolean

    false if the pointer is down, or true when the pointer status is up

    true
    root: boolean

    whether the container is the root of the scene

    false
    type: string = "Rectangle"

    The shape type (used internally).

    updateWhenPaused: boolean

    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.

    false
    visibleInAllCameras: boolean

    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). Only applies to floating renderables in multi-camera setups.

    false
    • get isFloating(): boolean

      Whether the renderable object is floating (i.e. used screen coordinates), or contained in a floating parent container

      Returns boolean

      Renderable#floating

    • 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.
      • "z" — descending pos.z (higher z draws on top). Default for Camera2d — 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 under Container.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 an Application or Stage is constructed with cameraClass: Camera3d. Has no useful effect under Camera2d (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"

      "z"
    • set sortOn(value: "x" | "y" | "z" | "depth"): void

      Parameters

      • value: "x" | "y" | "z" | "depth"

      Returns void

    • get tint(): Color

      define a tint for this renderable. a (255, 255, 255) r, g, b value will remove the tint effect.

      Returns Color

      (255, 255, 255)

      // add a red tint to this renderable
      this.tint.setColor(255, 128, 128);
      // remove the tint
      this.tint.setColor(255, 255, 255);
    • set tint(value: string | Color): void

      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

    • 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

      if (polygon.contains(10, 10)) {
        // do something
      }
      // or
      if (polygon.contains(myVector2d)) {
        // do something
      }

    • 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

      Returns boolean

      True if the polygon contain the point, otherwise false

      if (polygon.contains(10, 10)) {
        // do something
      }
      // or
      if (polygon.contains(myVector2d)) {
        // do something
      }

    • 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: object

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

      Returns void

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

    • Where the panel IS, bob included.

      THE hook that makes a floating panel honest. Both bounds paths funnel through this one method, and a child's absolute position is the sum of the chain above it, so adding the offset here reaches the panel's own hit area and every descendant's, at any depth, without any of them knowing a bob exists.

      Not currentTransform, which was the obvious guess: that reaches a renderable's OWN bounds and not its children's, so a bobbing panel's swallow rectangle would drift off the widgets sitting in it. And not a write to pos, which would reach everything correctly but silently overwrite a caller's own write on the very next frame.

      Particle overrides this method for the same reason, its placement not being in its pos chain either.

      Returns Vector3d

      the absolute position, offset by the bob

    • 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 time

      Parameters

      • name: string | number | boolean | RegExp

        child name

      Returns Renderable[]

      Array of children

    • 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

      Parameters

      • prop: string

        Property name

      • value: string | number | boolean | RegExp

        Value of the property

      • objList: any[] = []

      Returns Renderable[]

      Array of children

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

    • 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: Function

        the effect class to search for

      Returns any[] | ShaderEffect | GLShader | undefined

      the matching effect, the effects array, or undefined

      const desat = sprite.getPostEffect(DesaturateEffect);
      const allEffects = sprite.getPostEffect();

    • 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) · B converts between two frames, which is how ParticleEmitter.referenceSpace measures 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 own draw(). So with no rotation, scale or flip anywhere, a container's translation column equals its getAbsolutePosition() while a leaf's equals its PARENT's.

      The walk stops at a floating ancestor, 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

      Renderable#getAbsolutePosition

      // map a point from one renderable's space into another's
      const from = a.getWorldTransform(new Matrix3d());
      const into = b.getWorldTransform(new Matrix3d()).invert();
      const point = new Vector2d(10, 20);       // in a's space
      from.apply(point);                        // -> world
      into.apply(point);                        // -> b's space

      // just need to know where something is? use the cheaper call
      const where = renderable.getAbsolutePosition();

    • 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 — onCollision is 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.a semantics Fixed per pair (first body in detector call) Always the receiver (response.a === this)
      response.b semantics Fixed per pair Always the partner (response.b === other)
      response.normal / response.depth ✗ ✓ — normal.y < -0.7 = "push me up"
      return false to skip push-out ✓ (honored by SAT) ✗ — use bodyDef.isSensor or setSensor instead

      If you're writing new code, prefer onCollisionActive. Keep onCollision only when its every-frame, return-false, fixed-a/b semantics are what you want.

      Parameters

      • response: ResponseObject

        the SAT response object; the legacy handler receives this, not the adapter's CollisionResponse, which is why normal and depth are 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.

      // legacy collision handler — note the receiver-side check on response.a
      onCollision(response) {
          if (response.b.body.collisionType === me.collision.types.ENEMY_OBJECT) {
              this.pos.sub(response.overlapV);
              this.hurt();
              return false;   // skip the SAT push-out
          }
          return true;
      }

    • function called when the pointer is leaving the object area.

      Fires when the pointer leaves the element's bounds, and also when it is still inside them but something drawn above has consumed the move, since the pointer is then over that instead.

      Unlike UIBaseElement#onOver this one cannot consume the event, on purpose: an element that suppressed its own leave would stay in its hover state after the pointer had gone.

      Parameters

      • Optional_event: Pointer

        the event object

      Returns void

    • 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

    • Prepare the rendering context before drawing (automatically called by melonJS). This will apply any defined transforms, anchor point, tint or blend mode and translate the context accordingly to this renderable position.

      Parameters

      Returns void

      • Renderable#draw
      • Renderable#postDraw

    • 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: Vector3d

        the axis to rotate around (defaults to Z axis for 2D)

      Returns UIPanel

      Reference to this object for method chaining

    • 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 = x

        a number representing the ordinate of the scaling vector.

      • Optionalz: number = 1

        a number representing the depth of the scaling vector.

      Returns UIPanel

      Reference to this object for method chaining

    • 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: boolean

        recursively apply the value to child containers if true

      Returns void

      Renderable#alpha

    • Move this renderable, optionally in three dimensions.

      pos holds an ObservableVector3d, but the geometry this class inherits from declares it as a 2D vector, so from TypeScript pos.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 assigning pos.x, pos.y and depth by hand, which is why that pattern is written out dozens of times across the examples.

      Omitting z leaves the depth exactly as it was, rather than zeroing it. That is the whole difference from pos.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 a Camera2d, without having to know whether it does.

      Parameters

      • x: number

        the new x position

      • y: number

        the new y position

      • Optionalz: number

        the new depth; left untouched when omitted

      Returns UIPanel

      this renderable, for chaining

      sprite.setPosition(120, 64);        // 2D: depth unchanged
      mesh.setPosition(0, -20, 140);      // 3D
      camera.setPosition(0, 0, -300).lookAt(player);

    • 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

    • 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 because tint is a live Color, so reaching for it means choosing between setColor (0 to 255), setFloat (0 to 1), parseCSS, setHSL and setLinear — 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 baseColorFactor or emissiveFactor, stays an explicit tint.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 Color to copy, or a CSS colour string

      Returns UIPanel

      this renderable, for chaining

      sprite.setTint("#ff8800");
      // the same on any renderable, mesh included
      mesh.setTint(theme.accent).setOpacity(0.5);
      // remove a tint
      sprite.setTint("#ffffff");

    • 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. Camera3d refreshing the "depth" sort after the camera has moved, where waiting for the deferred sort tick would render a stale frame).

      Parameters

      • Optionalrecursive: boolean

        recursively sort sub-containers

      Returns void

    • Resize this panel's bounds, and refresh its children's.

      Container does those two jobs in ONE loop, both gated on enableChildBoundsUpdate, and a panel wants exactly one of them. The flag is off here so that a label overhanging the edge cannot grow the rectangle a blocking panel swallows clicks inside, and turning it off took the other job with it: a child's bounds are absolute, worked out once through getAbsolutePosition() and then cached, so moving the panel left every child's HIT AREA behind at the old place while the whole panel drew at the new one. A dialog slid or snapped into position after it was built had buttons that only answered where they used to be.

      This costs nothing per frame: pos calls updateBounds when it is written, so the walk happens when the panel actually moves.

      Parameters

      • absolute: boolean = true

        update in world absolute coordinates

      Returns Bounds

      this panel's bounds

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods