Voxel

The voxel editor is the most direct way to make a character, a creature or a prop: you place coloured cubes in a grid, split them into articulated parts, then animate them. It is an asset’s default kind (kind: 'voxel').

The grid#

Every voxel asset has a cubic grid of side size, from 8 to 64 voxels. The studio offers 8³, 16³, 24³, 32³, 48³ and 64³; a new asset starts at 24³. Voxels live in [0, size) on each axis.

World scale#

The scale field gives the size of one voxel in world units. The panel offers six named values:

The eight tools#

Keys 1 to 8 pick the tool while the asset editor is open.

Mirror and brush#

The palette#

Every asset has its own palette of hex colours. Index 0 is reserved and means “empty”; voxels store their colour index (1 to 255). The default palette has 32 colours, warm to cool plus neutrals. You can recolour a slot with the picker or by typing a #hex, and add slots up to 64.

Articulated parts#

A voxel asset is split into parts (Part). All the voxels of a part move together around its pivot when an animation plays; a part can have a parent whose transform it inherits (the hand follows the forearm which follows the arm). A new asset starts with one body part pivoted at the centre of the grid floor.

1. Create a part

   “New part” under “Parts · the bones”. The voxels you add go into the selected part.

2. Name it

   Name it leg, arm, wheel, head, tail or weapon: animation presets then know what to move.

3. Place the pivot

   The pivot is the joint. “Pivot bottom” and “Pivot centre” compute it from the part’s voxels; you can also type its coordinates.

4. Pick a parent

   Optional. The part then follows its parent’s motion on top of its own.

Each part also has its own actions: mirror X, rotate 90° on Y, clear, delete.

In the document#

Voxels are stored sparsely: only filled cells exist, which keeps the document light even for a 64³ grid.

{
  "id": "a_hero",
  "name": "Hero",
  "kind": "voxel",
  "size": 24,
  "scale": 0.125,
  "palette": ["#000000", "#f8f4ec", "#d9d2c5", "#ff5c1a"],
  "parts": [
    { "id": "p_body", "name": "body", "pivot": [12, 0, 12],
      "voxels": { "11,0,12": 3, "12,0,12": 3, "12,1,12": 1 } },
    { "id": "p_leg_l", "name": "leg left", "pivot": [11, 4, 12], "parent": "p_body",
      "voxels": { "11,2,12": 2 } }
  ],
  "clips": []
}

Rendering: greedy meshing#

For display, each part becomes a single mesh through greedy meshing: neighbouring visible faces of the same colour merge into large rectangles, and faces hidden between two voxels are never generated. Vertices are relative to the pivot so the part turns around its joint. A slight per-face-direction shade sits on top of the real lights for the voxel look.

Sharing an asset#

Copy as code puts the whole asset in the clipboard as text (base64-encoded JSON); Paste code adds it to any project with a new id. The JSON button downloads the asset as a file, which the Import button reads back.

Next#