the x screen position of the mesh object
the y screen position of the mesh object
Configuration parameters for the Mesh object
OptionalcullBackFaces?: booleanenable backface culling
Optionalheight?: numberdisplay height in pixels (normalized models only; ignored when normalize: false)
Optionalindices?: number[] | Uint16Array<ArrayBufferLike>triangle vertex indices (alternative to settings.model)
Optionalmaterial?: stringname of a preloaded MTL material (via loader.preload with type "mtl"). When provided, the diffuse texture (map_Kd), tint color (Kd), and opacity (d) are automatically applied.
Optionalmodel?: stringname of a preloaded OBJ model (via loader.preload with type "obj")
Optionalnormalize?: booleanfit the source geometry into a [-0.5, 0.5] unit cube before scaling, so width/height behave like a Sprite. Set false to keep the geometry's real-world coordinates — required when several meshes share one coordinate space (e.g. nodes of an imported glTF scene) so their relative scale and layout are preserved.
OptionalrightHanded?: booleantreat the source as right-handed (Y-up, e.g. glTF) under the Camera3d world path. The default Y-up→Y-down bridge negates Y only (a reflection, which mirrors the scene left/right); true negates Y and Z (a rotation) so chirality is preserved and the result matches the authoring tool. See Mesh#rightHanded.
Optionalscale?: numberworld-space scale (pixels per source unit) for the Camera3d path; defaults to width. Set this when width/height describe the renderable's world bounds (frustum culling) rather than the geometry scale — see Mesh#meshScale.
Optionaltexture?: string | HTMLImageElement | TextureAtlasthe texture to apply (image name, HTMLImageElement, or TextureAtlas). If omitted and settings.material is provided, the texture is resolved from the MTL material's map_Kd.
OptionaltextureRepeat?: stringtexture wrap mode ("repeat" / "repeat-x" / "repeat-y" / "no-repeat") applied to the resolved texture. Use "repeat" when the geometry's UVs fall outside the [0, 1] range and rely on the texture tiling (e.g. glTF assets, whose default sampler wrap is REPEAT) — otherwise the texture clamps to its edge texels and looks flat. Ignored for the white-pixel fallback. Note: REPEAT on a non-power-of-two texture requires WebGL 2.
Optionaluvs?: number[] | Float32Array<ArrayBufferLike>texture coordinates as u,v pairs (alternative to settings.model)
Optionalvertices?: number[] | Float32Array<ArrayBufferLike>vertex positions as x,y,z triplets (alternative to settings.model)
display width in pixels. With normalization on (the default) the model is scaled to fit this size; with normalize: false this is the uniform pixels-per-unit scale applied to the raw geometry.
// create from OBJ + MTL (texture auto-resolved from material)
let mesh = new me.Mesh(0, 0, {
model: "fox",
material: "fox",
width: 200,
height: 200,
});
// create from OBJ with explicit texture (no MTL needed)
let mesh = new me.Mesh(0, 0, {
model: "cube",
texture: "cube_texture",
width: 200,
height: 200,
});
// create from raw geometry that already carries its own world scale
// (e.g. a glTF scene node) — keep real coordinates, no mirror
let node = new me.Mesh(0, 0, {
vertices: positions, // Float32Array of x,y,z triplets
uvs: texcoords, // Float32Array of u,v pairs
indices: tris, // Uint16Array of triangle indices
texture: baseColorImage,
width: 32, // pixels per unit
normalize: false,
rightHanded: true,
});
// 3D rotation using the standard rotate() API
mesh.rotate(Math.PI / 4, new me.Vector3d(0, 1, 0)); // rotate around Y axis
// 2D rotation (Z axis, same as Sprite)
mesh.rotate(Math.PI / 4);
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 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.
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;
....
}
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.
whether to cull back-facing triangles
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.
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.
If true, this renderable will be rendered using screen coordinates, as opposed to world coordinates. Use this, for example, to define UI elements.
Per-material submesh groups, populated when the OBJ
contains multiple usemtl directives AND a matching MTL
is bound via the material setting. Each entry slices
the shared indices buffer; field shape (start,
count, materialName) matches the glTF "groups"
convention.
Under the per-vertex color baking path (tier 2), the
tint / opacity fields here are informational — the
actual rendered color is baked into vertexColors at
construction time. Mutating groups[i].tint after
construction has no visible effect; use mesh.tint for
runtime color multiplication, or rebuild the Mesh with
new material settings.
(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
Whether this mesh is lit by the active stage's Light3d lights.
When true it renders through the lit mesh batcher (diffuse shading
from the scene's lights, using Mesh#originalNormals); when
false (the default) it uses the lean unlit path and pays no lighting
cost. The glTF loader sets this on scene meshes when the scene has
lights. Only meaningful under a Camera3d + WebGL.
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.
Uniform world-space scale (pixels per source unit) applied along the
Camera3d world path. Defaults to width. Scene loaders (e.g. glTF)
set this independently of width / height so those can describe
the renderable's world-space bounds (used for frustum culling) while
the geometry is still scaled by this factor — width alone can't
serve both roles for a non-normalized scene mesh.
The name of the renderable
an event handler that is called when the renderable leave or enter a camera viewport
the source per-vertex normals (x,y,z triplets), or undefined if the
mesh was built without them. Supplied by the glTF loader; used for
lit shading under a Camera3d (see Light3d).
the original (untransformed) vertex positions as x,y,z triplets
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.
Projection matrix applied automatically before the model transform in draw(). Defaults to a perspective projection (45° FOV, camera at z=-2.5) suitable for viewing unit-cube-sized geometry. Set to identity for orthographic (flat) projection. Most users don't need to modify this — the default works for standard OBJ models.
Treat the source geometry as right-handed (Y-up, e.g. glTF) under
the Camera3d world path. The default (false) Y-up→Y-down bridge
negates Y only — a reflection, which mirrors the scene left/right.
When true, the bridge negates Y and Z (a 180° rotation about
X, determinant +1) so chirality is preserved and the result matches
the authoring tool (no mirror); triangle winding is left untouched
since a rotation doesn't invert it.
The shape type (used internally).
Whether to update this object when the game is paused.
texture coordinates as u,v pairs
Per-vertex color buffer (one packed Uint32 per vertex)
populated for multi-material meshes. The mesh batcher
reads from this when present, pushing the per-vertex
color as the aColor attribute — so multi-material
rendering needs no extra draw calls per material vs
single-material rendering (the batcher still chunks
very large meshes across multiple draws to fit its
vertex/index buffer limits, same as the single-material
path). Multiplied at render time by the global
mesh.tint, so runtime tint mutation still works as
expected (flash, fade, team color, etc.).
Vertices were split per-material at parse time (each material has its own dedup scope in the OBJ parser), so every vertex belongs to exactly one material group and carries that group's color unambiguously.
number of vertices
the projected vertex positions, updated each draw call
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.
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
height of the Rectangle
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
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
Draw the mesh (automatically called by melonJS). Picks between two projection paths based on the camera that was active when this mesh was added to the world (captured in Mesh#onActivateEvent):
(pos.x, pos.y, depth); the
camera's perspective handles the final projection per-frame on the
GPU. Triangle winding is reversed once at first draw so back-face
culling stays correct under the Y-flip.Multi-material meshes need no extra drawMesh calls per material vs
single-material — each material's diffuse color is baked into
vertexColors at construction time and pushed through the renderer's
per-vertex aColor (WebGL) or per-triangle solid-fill (Canvas) path.
The WebGL batcher may still chunk very large meshes across multiple
drawElements calls to fit its vertex/index buffer limits.
The active path is picked from the viewport passed in by
Container.draw, NOT from the activation-time _useWorldSpace
flag. The flag is kept as a fallback only for callers that
invoke draw(renderer) without a viewport (tests, batched
builds). Without the per-draw read, a stage with multiple
cameras (Camera3d main + Camera2d minimap, say) would run the
wrong projection on whichever camera didn't match activation.
a renderer instance
Optionalviewport: anythe camera rendering this frame
Check if this rectangle is identical to the specified one.
Other rectangle.
true if equals
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
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
The mesh's world-space 3D axis-aligned bounding box, as projected by the
most recent draw. This is the 3D analog of Renderable#getBounds
(which returns a flat 2D box from width/height and so cannot describe
a mesh's real extent).
Under a Camera3d the mesh projects its vertices into world space every
frame (see Mesh#_projectVerticesWorld), so the returned box tracks
the live transform / animation. Under the 2D path the projected vertices
are screen-space, so the box is only meaningful after a Camera3d draw —
use Renderable#getBounds for the 2D case.
The same AABB3d instance is returned each call (recomputed in
place), so copy it (.clone()) if you need to keep it.
the world-space bounding box (reused instance)
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.
Rotate this renderable towards the given target.
the renderable or position to look at
Reference to this object for method chaining
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 renderer for drawing the mesh. On the Camera3d world-space
path the mesh emits final world coordinates, so it opts out of the base
anchor-point offset (Renderable#applyAnchorTransform = false) —
otherwise the offset would leak into the shared mesh view matrix. The 2D
path keeps the anchor. See the class description for the pivot rationale.
a renderer instance
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
resize the rectangle
new width of the rectangle
new height of the rectangle
this rectangle
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 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
Render the mesh at its current state (transforms, projection, tint) to an offscreen canvas.
The returned canvas can be used with renderer.drawImage(), as a Sprite image source,
or converted to an ImageBitmap via createImageBitmap().
an offscreen canvas containing the rendered mesh
Render the mesh at its current state to an ImageBitmap. Useful for creating textures or sprites from the rendered mesh.
a promise that resolves to an ImageBitmap of the rendered mesh
apply an isometric projection to this shape
Reference to this object for method chaining
Compute a 2D convex hull polygon from the current projected vertices. Useful for creating collision shapes.
a convex hull polygon in local coordinates
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
update function (automatically called by melonJS).
time since the last update in milliseconds.
true if the renderable is dirty
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
A renderable object for displaying textured triangle meshes. Supports loading from Wavefront OBJ models (via
loader.preloadwith type "obj") or from raw geometry data (vertices, uvs, indices). Includes a built-in perspective projection and supports 3D transforms through the standard Renderable API (rotate,scale,translate). Works on both WebGL (hardware depth testing) and Canvas (painter's algorithm) renderers.Pivot — transforms are applied about the mesh's local origin
(0, 0, 0), NOT a normalized anchor point. Unlike a Sprite (whose Renderable#anchorPoint recenters awidth×heightbox), a mesh has real vertex coordinates, so rotation and scale pivot around the model origin the geometry is authored against — the standard convention for 3D meshes. Place the origin where you want the pivot at authoring time (or nest the mesh under a transformed parent to pivot elsewhere). Consequently, on theCamera3dworld-space path the mesh opts out of the anchor offset entirely (see Renderable#applyAnchorTransform); the legacy 2D path still honorsanchorPointfor backward compatibility.