start x offset
start y offset
end x offset
end y offset
Optionalopts: FrustumOptionsperspective parameters (see FrustumOptions)
Define the renderable opacity
Set to zero if you do not wish an object to be drawn
Whether the renderable object will always update, even when outside of the viewport
a reference to the parent object that contains this renderable
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}.
Whether this camera should automatically resize when the canvas resizes. Set to false for non-default cameras with fixed dimensions (e.g. minimap, split-screen viewports).
When enabled, an object container will automatically apply any defined transformation before calling the child draw method.
// 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;
....
}
Axis definition NONE no axis HORIZONTAL horizontal axis only VERTICAL vertical axis only BOTH both axis
the blend mode to be applied to this renderable (see renderer setBlendMode for available blend mode)
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.pos, app.viewport.AXIS.BOTH);
}
...
}
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 BodyDefinition.
Camera bounds
active camera effects (shake, fade, etc.)
A built-in color transformation matrix applied as the final post-processing pass. Provides convenient color grading (brightness, contrast, saturation, etc.) that is always applied after any effects added via addPostEffect. When set to identity (default), no effect is applied and there is zero overhead.
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.
Camera damping for smooth follow [0 .. 1]. 1 snaps the camera
to the target every frame (no smoothing); lower values produce a
trailing follow — 0.1 is a soft springy follow, 0.5 is snappy.
Frame-rate independent (since 19.7 / #1478). The value is the
fraction of the gap covered per frame at the engine's target
framerate (timer.maxfps, default 60). The underlying
implementation switched from pos.lerp to pos.damp with
lambda = -ln(1 - damping) * timer.maxfps, so the legacy
per-frame fraction is recovered exactly at the target rate AND
the wall-clock convergence stays constant when the actual frame
rate drifts (slow machine, throttled tab, high-refresh display).
Existing damping tuning carries over with no changes.
the camera deadzone
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.
the furthest point relative to the camera. Widened from 1000 in
19.7 — see Camera2d#near.
If true, this renderable will be rendered using screen coordinates, as opposed to world coordinates. Use this, for example, to define UI elements.
default value follow
World-space offset from the followed target. When target is
set via Camera2d#follow, the camera position resolves to
target.pos + followOffset. Common usage: (0, -2, -8) for a
behind-and-above third-person view.
Treated as world-space in this release — target-rotation-aware follow (where the offset rotates with the target's orientation, Cinemachine / Unreal spring-arm style) is deferred until a showcase needs it (e.g. AfterBurner's banking jet).
the view frustum (perspective parameters + projection matrix).
Mutating frustum.fov / aspect / near / far directly
requires calling frustum.update() to rebuild the matrix;
the proxy setters on this camera (camera.fov = ...) handle
that automatically.
(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)
a list of indices for all vertices composing this polygon
when true the renderable will be redrawn during the next update cycle
If true then physic collision and input events will not impact this renderable
make the renderable object persistent over level changes
Reserved for future follow-look-ahead support — currently unused
by updateTarget. The intent is: when wired in, the camera will
look at target.pos + lookAhead instead of target.pos, so a
follow-cam stays slightly ahead of its target (e.g. for a
cinematic forward-looking shot in AfterBurner). Field is exposed
now so user code can set it without waiting for the wiring.
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.
The name of the renderable
the closest point relative to the camera. Widened from -1000 in
19.7 to accommodate sprites at large depth values now that
aVertex.z participates in clip-space (PR A): the default
Container.autoDepth = true assigns pos.z = childCount so any
container with >1000 children would otherwise clip-cull, and the
common Y-sort pattern sprite.depth = sprite.pos.y exceeds 1000
on tall maps. Override per-camera if you need tighter z clipping.
offset for shake effect
an event handler that is called when the renderable leave or enter a camera viewport
X-axis rotation in radians (look up/down). Positive values pitch the camera up.
Array of points defining the Polygon
Note: If you manually change points, you must call recalcafterwards so that the changes get applied correctly.
origin point of the Polygon
the list of post-processing shader effects applied to this renderable (WebGL only). Effects are applied in order. Use addPostEffect, getPostEffect, and removePostEffect to manage effects, or assign directly. In Canvas mode, this property is ignored.
the default camera projection matrix (2d cameras use an orthographic projection by default).
the screen-space projection matrix for non-default cameras. Maps coordinates so that (0,0) aligns with the camera's screenX/screenY position. Used for rendering floating elements (e.g. background layers) in the correct screen area.
the x position on the screen where this camera viewport is rendered.
the y position on the screen where this camera viewport is rendered.
enable or disable damping
target to follow
The shape type (used internally).
Whether to update this object when the game is paused.
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.
the world-space projection matrix for non-default cameras (offset/zoomed). Maps world coordinates to the camera's screen viewport.
Y-axis rotation in radians (look left/right). Positive values yaw the camera to the right.
StaticdefaultOverride Camera2d.defaultSortOn to declare "depth" as this
camera's preferred sort mode. Application / Stage apply this
to world.sortOn at bootstrap, so games opting into Camera3d via
cameraClass: Camera3d get camera-distance painter's sort for
free — the only correct sort for alpha-blended sprites under
perspective.
aspect ratio (width / height). Auto-updated on resize().
Setting manually overrides the auto-derived value until the
next resize. Proxies to frustum.aspect.
bottom coordinate of the Rectangle
absolute center of this rectangle on the horizontal axis
absolute center of this rectangle on the vertical axis
the depth of this renderable on the z axis
vertical field of view in radians. Setting this rebuilds the
projection matrix. Proxies to frustum.fov.
height of the Rectangle
Whether this camera is using default settings (no screen offset, no zoom). Non-default cameras use custom projections for viewport positioning and scaling.
true if this camera has no screen offset and zoom is 1
The left coordinate of the Rectangle.
returns the parent application (or game) to which this renderable is attached to
the parent application or undefined if not attached to any container/app
right coordinate of the Rectangle
since 19.2.0 — use addPostEffect / getPostEffect / removePostEffect instead
top coordinate of the Rectangle
width of the Rectangle
The world-space bounds currently visible through this camera, taking into account position and zoom level.
the visible world area
Add a camera effect to this camera.
the camera effect to add
the added effect
return the angle to the specified target
angle in radians
center the rectangle position around the given coordinates
the x coordinate around which to center this rectangle
the y coordinate around which to center this rectangle
this rectangle
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)
x coordinate or a vector point to check
y coordinate
True if the polygon contain the point, otherwise false
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)
True if the polygon contain the point, otherwise false
Returns true if the rectangle contains the given rectangle
rectangle to test
True if the rectangle contain the given rectangle, otherwise false
return the distance to the specified target
distance
Check if this rectangle is identical to the specified one.
Other rectangle.
true if equals
fadeIn effect
fade to the specified color
a CSS color value
Optionalduration: number = 1000expressed in milliseconds
OptionalonComplete: () => voidcallback once effect is over
fadeOut(flash) effect
screen is filled with the specified color and slowly goes back to normal
a CSS color value
Optionalduration: number = 1000expressed in milliseconds
OptionalonComplete: () => voidcallback once effect is over
flip the renderable on the horizontal axis (around the center of the renderable)
Optionalflip: boolean = truetrue to flip this renderable.
Reference to this object for method chaining
flip the renderable on the vertical axis (around the center of the renderable)
Optionalflip: boolean = truetrue to flip this renderable.
Reference to this object for method chaining
set the camera position around the specified object
the renderable to focus the camera on
set the camera to follow the specified renderable.
(this will put the camera center around the given target)
renderable or position vector to follow
Optionalaxis: numberWhich axis to follow (see Camera2d.AXIS)
Optionaldamping: numberdefault damping value
return the renderable absolute position in the game world. The
returned vector is a Vector3d so the z component is summed
across the ancestor chain too — important for Camera3d's
frustum culling, which previously read obj.depth (local
pos.z) and mis-culled children nested under a container with
its own non-zero depth.
returns the bounding box for this renderable
bounding box Rectangle object
Get the first camera effect matching the given class.
the effect class to search for
the first matching effect, or undefined
returns a list of indices for all triangles defined in this polygon
an array of vertex indices for all triangles forming this polygon.
get the renderable alpha channel value
current opacity value between 0 and 1
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.
OptionaleffectClass: Functionthe effect class to search for
the matching effect, the effects array, or undefined
Returns true if the vertices composing this polygon form a convex shape (vertices must be in clockwise order).
true if the vertices are convex, false if not, null if not computable
Determines whether all coordinates of this rectangle are finite numbers.
false if all coordinates are positive or negative Infinity or NaN; otherwise, true.
Visibility check used by Container.update (in turn driving
Container.draw) to skip rendering off-screen children.
Camera2d's implementation tests a 2D bounds-rectangle overlap
against this.worldView — that test is invalid under perspective:
the visible region is a frustum that widens with distance and
rotates with the camera's pitch / yaw, not a fixed axis-aligned
rect at the camera's x / y. Camera3d substitutes plane-based
frustum culling — each non-floating renderable's bounding sphere
is tested against the six frustum planes that were extracted in
the most recent update() call. Floating elements (HUD / UI)
still use Camera2d's 2D rect test because their bounds are
screen-space and the perspective transform doesn't apply to them.
the renderable to test
Optionalfloating: boolean = obj.floatingtest against screen coordinates instead of frustum
true if the renderable's bounds overlap the frustum
convert the given "local" (screen) coordinates into world coordinates
the x coordinate of the local point to be converted
the y coordinate of the local point to be converted
Optionalv: Vector2dan optional vector object where to set the converted value
the converted world coordinates as a Vector2d
Point the camera at a world-space target by deriving pitch and yaw from the direction (target − camera.pos). Roll is unaffected.
Three call shapes:
lookAt(x, y, z) — raw world coordinateslookAt(vector3d) — a 3D pointlookAt(renderable) — uses renderable.pos (matches the
Renderable.lookAt(target) signature so Camera3d is a structural
drop-in replacement for Camera2d / Renderable in user code).Last-write-wins with manual pitch / yaw assignment: if you
call lookAt(...) then set camera.pitch = 0.1 directly, the
next frame renders with the manual pitch.
target world x, or a target with pos / x,y,z
Optionaly: numbertarget world y (only when first arg is a number)
Optionalz: numbertarget world z (only when first arg is a number)
this camera
Lifecycle hook fired by Container when this renderable is
added to a container that is part of the active scene graph.
Override to wire up input handlers, register external listeners,
or grab adapter references — this.parentApp is guaranteed to be
available here. Pair with Renderable#onDeactivateEvent.
forwarded by Container.addChild
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.
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.
Lifecycle hook fired by Container when this renderable is removed from its container or its container is itself removed. Override to release input handlers, unsubscribe from events, or drop adapter references. Pair with Renderable#onActivateEvent.
forwarded by Container.removeChildNow
OnDestroy Notification function
Called by engine before deleting the object. Stage.destroy(app)
forwards the active Application, so subclasses that wire teardown
against the app object can override as onDestroyEvent(app).
forwarded by destroy(...args); Stage passes the Application instance
check if this rectangle is intersecting with the specified one
Other rectangle.
true if overlaps
restore the rendering context after drawing (automatically called by melonJS).
a renderer object
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.
a renderer object
Bulk frustum cull via the world's Octree. Returns every renderable whose octant the current frustum overlaps — conservative (some renderables may still narrow-cull out via Camera3d#isVisible's per-sphere test) but O(visible + walk) instead of O(scene).
Only applicable under cameraClass: Camera3d (or any setup
where world.sortOn === "depth" and the broadphase is an
Octree). Returns an empty array under a 2D broadphase — call
sites can guard on the array length or branch on
world.sortOn.
For a 1000-renderable scene with ~50 visible, expect a 5-20× speedup over walking every renderable and per-item Camera3d#isVisible.
the world to cull (its broadphase must be an Octree); typed structurally to sidestep the Camera3d → World import cycle
the world's spatial broadphase
guard: returns empty unless this equals "depth"
Optionalout: Renderable[]caller-supplied result array (re-entrancy-safe)
visible-renderable candidates
Computes the calculated collision polygon.
This must be called if the points array, angle, or offset is modified manually.
Reference to this object for method chaining
Remove a specific camera effect instance.
the effect to remove
reset the camera position to specified coordinates
Optionalx: number = 0initial position of the camera on the x axis
Optionaly: number = 0initial position of the camera on the y axis
Resize the camera viewport and recompute aspect ratio.
new width
new height
this camera
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.
The angle to rotate (in radians)
Optionalv: anythe axis to rotate around (defaults to Z axis for 2D)
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.
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.
Reference to this object for method chaining
scale the renderable around his anchor point
scaling vector
Reference to this object for method chaining
set the camera boundaries (set to the world limit by default). the camera is bound to the given coordinates and cannot move/be scrolled outside of it.
world left limit
world top limit
world width limit
world height limit
Update the perspective near/far clip distances and rebuild the
projection matrix in one shot. Anything closer than near or
farther than far is clipped by the GPU; projection math also
degrades sharply just before far, so size the far plane to the
deepest object in your scene with a little headroom. Defaults are
near = 0.1, far = 1000 — typical AfterBurner-class scenes
with enemies spawning at z = 3000+ need to push far out.
This is the supported way to change near/far at runtime. The
inherited Camera2d.near / .far are plain instance fields —
direct assignment (camera.near = 5) updates the cached value
but leaves the projection matrix stale until the next
resize(). TypeScript's property-vs-accessor rule prevents
shadowing the inherited fields with accessor pairs, so the
convenience method is the public contract instead.
near clip distance
far clip distance
this camera (chainable)
Set the target-local follow offset. Called once when configuring
a follow-cam (e.g. behind-and-above third person:
setFollowOffset(0, -2, -8)).
target-local x offset
target-local y offset
target-local z offset
this camera
set the renderable alpha channel value
opacity value between 0.0 and 1.0
set new value to the Polygon
position of the Polygon
position of the Polygon
array of vector or vertices defining the Polygon
this instance for object chaining
Set new dimensions for the rectangle.
The new width of the rectangle.
The new height of the rectangle.
set the vertices defining this Polygon
array of vector or vertices defining the Polygon
this instance for object chaining
Set the camera screen position and size in a single call.
x position on screen
y position on screen
Optionalw: numberwidth (defaults to current width)
Optionalh: numberheight (defaults to current height)
this camera for chaining
shake the camera
maximum offset that the screen can be moved while shaking
expressed in milliseconds
Optionalaxis: numberspecify on which axis to apply the shake effect (see Camera2d.AXIS)
OptionalonComplete: () => voidcallback once shaking effect is over
Optionalforce: booleanif true this will override the current effect
apply an isometric projection to this shape
Reference to this object for method chaining
Returns a polygon whose edges are the same as this box.
a new Polygon that represents this rectangle.
multiply the renderable currentTransform with the given matrix
the transformation matrix
Reference to this object for method chaining
Translate the renderable by the specified offset.
x offset
Optionaly: number = 0y offset
Optionalz: number = 0z offset
Reference to this object for method chaining
unfollow the current target
update the bounding box for this shape.
Optionalabsolute: boolean = trueupdate the bounds size and position in (world) absolute coordinates
this shape bounding box Rectangle object
convert the given world coordinates into "local" (screen) coordinates
the x world coordinate to be converted
the y world coordinate to be converted
Optionalv: Vector2dan optional vector object where to set the converted value
a vector with the converted local coordinates
A perspective camera that extends Camera2d with a view Frustum (fov / aspect / near / far) and orientation (pitch / yaw / roll). Slots into
Stage.camerasas a drop-in replacement forCamera2d— inherits the post-effect FBO bracket, color-matrix, fade / shake / follow plumbing, and screen viewport.WebGL required. Camera3d's perspective projection, depth-buffer painter sort and mesh draw path all live in the WebGL renderer; the Canvas backend has none of these and would render a stuck blank scene. Construct the Application with
renderer: video.WEBGLto get a hard throw at construction time if WebGL is unavailable. PairingcameraClass: Camera3dwithvideo.AUTOwill emit aconsole.warnat construction (and silently misrender) when AUTO falls back to Canvas — see ApplicationSettings.renderer for the contract.Conventions:
pos.yappears lower on screen (same as Camera2d). Sprite at higherpos.zis farther from the camera and renders smaller. Matches melonJS's 2D conventions so existing Camera2d code translates directly.pitch(X axis, look up/down),yaw(Y axis, look left/right),roll(Z axis, screen-plane bank — also exposed asCamera2d.rotationvia Renderable inheritance for backward compatibility).followOffsetis applied in world space:camera.pos = target.pos + followOffset. Target-rotation-aware follow (Cinemachine / Unreal spring-arm style, where the offset rotates with the target's orientation) is deferred until a showcase needs it (e.g. AfterBurner's banking jet).Known limitations (PR B scope):
Light2dis 2D-only — visible artifacts under perspective. Avoid combining with Camera3d for now.localToWorld/worldToLocaloverrides fall back to the ortho-equivalent 2D projection at z=0. Full 3D unproject for arbitrary depth is future work.Example