# Beginners

## Introduction to VoxEdit

How blocks and assets are used:

* Blocks can be liquid or solid with varied transparency and form walls or terrain
* Assets can have logic applied to make them interactive

{% tabs %}
{% tab title="Blocks" %}

### Blocks

Blocks are a special type of entity made in the [block](https://docs.sandbox.game/en/creator/voxedit/docs/block "mention") editor by painting colour on a cube.

<div><figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FQ1wD1rZuP9kBN25Vrpgl%2Fpractice.vxb.png?alt=media&#x26;token=2a61510b-ae91-41b5-8341-6ab58a1631ee" alt=""><figcaption></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FrRSEiF19ePhMHnezc6Ye%2Fnatural%20wood%20floor.vxb.png?alt=media&#x26;token=19f393a1-2473-4c8e-89c4-936a3fa648c4" alt=""><figcaption></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FHzgeFzAZlb6U9g5pxBxr%2FMuted%20Grid%20Block.vxb.png?alt=media&#x26;token=d2a0e26c-badf-4d44-9930-7de2584cea4f" alt=""><figcaption></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2F4m6iQVF9h8Qp3kh5IlZJ%2Fcopper%20patina%20tessellation.vxb.png?alt=media&#x26;token=116acd5b-5d98-4ca3-9f2a-fb7319386ed7" alt=""><figcaption></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2Fmsp25lKM66jv6D8EPaVo%2Fgrid.vxb.png?alt=media&#x26;token=d67b00a9-8c26-457f-b4d1-1a71cff79dfd" alt=""><figcaption></figcaption></figure></div>

Even just a few simple blocks can be used to design a biome in [Game Maker](https://docs.sandbox.game/en/creator/game-maker/create-experiences). Blocks with similar patterns can be used together to create streets, sidewalks, and more.

<div><figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FqTrlfISVhsqat2D8hvbP%2Fice%20biome.png?alt=media&#x26;token=f15c4425-818f-4ac8-80f5-b52249590c0e" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FJitfh3eFyt8CDZvHW3op%2Fimage.png?alt=media&#x26;token=26877ea6-7a26-49bc-ac4e-58ca01f1bedc" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Simple Assets" %}

### Simple Assets

Simple assets are made in the [modeler](https://docs.sandbox.game/en/creator/voxedit/docs/modeler "mention") by building with voxels and applying colour.

<div><figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2Fj9Kwv0s8auGkYTIrXkMk%2FPieza.png?alt=media&#x26;token=ec70b9f6-5dc5-4e98-9f6e-b35346495d27" alt="" width="375"><figcaption><p>Pickable objects</p></figcaption></figure> <figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/xtFTg8FMTWFpgB70t6Eu/lock.png" alt="" width="375"><figcaption><p>Interactive Props</p></figcaption></figure> <figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/2bIBg4SVXV20kGpcnQFL/SandPost.png" alt="" width="375"><figcaption><p>Collectable objects</p></figcaption></figure> <figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/wY3oJX1TsFj5pVVv2GdN/gm%20asset%20light%20sample.png" alt=""><figcaption><p>Furniture &#x26; Scenery</p></figcaption></figure></div>

<div><figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/xhIkOpvrqFpuTItGoq5K/holly%20voxels%20art%20gallery.png" alt="" width="563"><figcaption><p>Decorative &#x26; Fine Art</p></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FxK0XjEj52QMrWR3XTot5%2Fimage.png?alt=media&#x26;token=310c1349-41aa-4d17-86c1-428485dfcb6a" alt="" width="291"><figcaption><p>Simple Buildings</p></figcaption></figure></div>
{% endtab %}

{% tab title="Compound Assets" %}

### Compound Assets

Compound assets are made in the [animator](https://docs.sandbox.game/en/creator/voxedit/docs/animator "mention") by combining simple assets (see [build-a-rig](https://docs.sandbox.game/en/creator/voxedit/docs/animator/build-a-rig "mention")).

<div><figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/0nNazde7TWtlDb1lf6N1/alchemy%20table%20TSB.png" alt=""><figcaption><p>Furniture</p></figcaption></figure> <figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/ret2442OHjyPt2g7RKpk/L&#x27;Eiffel%20TSB.png" alt=""><figcaption><p>Landmarks</p></figcaption></figure> <figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/KeUe4WjpQnNdjS27uhSj/archer%20statue%20TSB.png" alt=""><figcaption><p>Statues</p></figcaption></figure></div>

In the Animator, simple assets are models that can be moved and rotated to design smoother details and shapes. A hierarchy, or Skeleton, controls how the models can move and rotate in relation to each other.

<figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FRfslNSvVTYPMSkwRNa4E%2FVE2025.1%20compound%20asset%20opt.webp?alt=media&#x26;token=8f104ec7-8a4b-43f6-9cfe-a2e9b1f75ebe" alt=""><figcaption><p>Combine models in the Animator</p></figcaption></figure>

{% hint style="info" %}
The Animator and Modeler are integrated to make it easy to edit the models in your compound asset.&#x20;
{% endhint %}
{% endtab %}

{% tab title="Animated Assets" %}

### Animated Assets

Once a compound asset is [**rigged**](https://docs.sandbox.game/en/creator/voxedit/docs/animator/build-a-rig) together, you can create multiple animations (poses) and apply motion to each one with an easy timeline tool.

<div><figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FJOLKRfToyn50FQMHpzwJ%2FHipsterHi%20wepb.webp?alt=media&#x26;token=59e27ac6-4319-4f7b-8e3a-8860632c8007" alt="" width="87"><figcaption><p>NPC</p></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FePbBWgeW2AF7vy9fflZx%2FCofreAnim%20webp.webp?alt=media&#x26;token=d59c95c5-6f51-4efc-9dbf-f66bf5cdb735" alt="" width="375"><figcaption><p>Chest</p></figcaption></figure></div>

[templates](https://docs.sandbox.game/en/creator/voxedit/docs/templates "mention") have models, animations, and motion built in to create custom assets quickly. All you need to know is how to edit simple assets to make a new animated asset with a template.

<div><figure><img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/9zopeDldZyBgsH4yHhs3/fashion%20mogul%20man%20-%20Sirpantsalot.png" alt="" width="188"><figcaption><p>NPC (non-player character)</p></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FWWmKEZE4k0j0OxpDhKll%2FDoor%20sm.png?alt=media&#x26;token=c2499d40-12fe-4e15-8014-755818536d59" alt=""><figcaption><p>Door</p></figcaption></figure></div>
{% endtab %}
{% endtabs %}

## Core Tutorial Videos

Use these core videos to see how VoxEdit's modules work and **try a hands-on activity** below.

<table data-column-title-hidden data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-type="files"></th><th data-hidden></th></tr></thead><tbody><tr><td><a href="https://youtu.be/oGQ07_BQpUM">Welcome to VoxEdit</a></td><td><a href="https://youtu.be/oGQ07_BQpUM">https://youtu.be/oGQ07_BQpUM</a></td><td><a href="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/E80roawTAvG6VUrFPDPO/Welcome%20to%20VoxEdit.jpg">Welcome to VoxEdit.jpg</a></td><td><strong>Easy</strong></td></tr><tr><td><a href="https://youtu.be/WqTJErRaV2s">Block Editor</a></td><td><a href="https://youtu.be/WqTJErRaV2s">https://youtu.be/WqTJErRaV2s</a></td><td><a href="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/ygukT47fEIebuZObbuCa/Block%20Editor.webp">Block Editor.webp</a></td><td><strong>Easy</strong></td></tr><tr><td><a href="https://youtu.be/200Kj2Dljrg">Modeler Basics</a></td><td><a href="https://youtu.be/200Kj2Dljrg">https://youtu.be/200Kj2Dljrg</a></td><td><a href="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/qBWl1UzyHTy4zDffpj6i/Modeler%20Basics.jpg">Modeler Basics.jpg</a></td><td><strong>Medium</strong></td></tr><tr><td><a href="https://youtu.be/HP7RGaJLsw0">Animator Basics</a></td><td><a href="https://youtu.be/HP7RGaJLsw0">https://youtu.be/HP7RGaJLsw0</a></td><td><a href="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/N9Ze569yGFoINRSlani1/Animator%20Basics.jpg">Animator Basics.jpg</a></td><td><strong>Medium</strong></td></tr><tr><td><a href="https://youtu.be/C40I8F5iq7o">Templates</a></td><td><a href="https://youtu.be/C40I8F5iq7o">https://youtu.be/C40I8F5iq7o</a></td><td><a href="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/BlhbegiIaN4Ne8pjkknO/Understanding%20Templates.jpg">Understanding Templates.jpg</a></td><td><strong>Medium</strong></td></tr><tr><td><a href="https://youtu.be/j7dADFKTdFk">Upload to Workspaces</a></td><td><a href="https://youtu.be/j7dADFKTdFk">https://youtu.be/j7dADFKTdFk</a></td><td><a href="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/6ubcVSrHXHhcadNhpKrm/upload%20to%20workspace%20new.jpg">upload to workspace new.jpg</a></td><td><strong>Medium</strong></td></tr></tbody></table>

## Learn Fast with Hands-on Activities

These activities are sequenced to help you learn the core functionalities of VoxEdit, and will help you learn some workflows to make great Assets!

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th></th></tr></thead><tbody><tr><td><span data-gb-custom-inline data-tag="emoji" data-code="0031">1️</span> <a href="#id-1.-paint-a-block-to-learn-camera-and-tools"><strong>Paint a Block to Learn Camera &#x26; Tools</strong></a></td><td><span data-gb-custom-inline data-tag="emoji" data-code="0032">2️</span> <a href="#id-2.-create-a-model-to-learn-tool-modes"><strong>Create a Model to Learn Tool Modes</strong></a><br></td><td><span data-gb-custom-inline data-tag="emoji" data-code="0034">4️</span> <a href="#id-4.-build-a-rig-in-the-animator"><strong>Build a Rig in the Animator</strong></a></td><td><span data-gb-custom-inline data-tag="emoji" data-code="0033">3️</span> <a href="#id-3.-modify-templates-in-the-modeler-and-animator"><strong>Modify Templates in the Modeler &#x26; Animator</strong></a></td></tr><tr><td><span data-gb-custom-inline data-tag="emoji" data-code="0035">5️</span> <a href="#id-5.-create-animations-and-add-motion-keyframes"><strong>Create Animations &#x26; Add Motion Keyframes</strong></a></td><td><span data-gb-custom-inline data-tag="emoji" data-code="0036">6️</span> <a href="#id-6.-unlock-a-template-to-reuse-its-animations"><strong>Unlock a Template to Reuse its Animations</strong></a></td><td><span data-gb-custom-inline data-tag="emoji" data-code="0038">8️</span> <a href="#id-8.-bonus-optimize-assets-with-3d-techniques"><strong>Bonus: Optimize Assets with 3D Techniques</strong></a></td><td><span data-gb-custom-inline data-tag="emoji" data-code="0037">7️</span> <a href="#id-7.-bonus-make-better-assets-with-2d-texture"><strong>Bonus: Make Better Assets with 2D Texture</strong></a></td></tr></tbody></table>

Once you've learned the basics, see other helpful [**Resources**](#resources) to create your own projects.

### 1. :art: Paint a Block to Learn Camera & Tools

This is an <mark style="background-color:green;">**EASY**</mark> activity anyone can do, which will teach you how to paint in VoxEdit. We'll show you how to build shape in the next activity.

{% tabs %}
{% tab title="Start" %}

### Start

{% hint style="success" %}
VoxEdit is easy to learn fast! Hover your mouse over almost anything to see a tip in the bottom left. Click the keyboard button <img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/jHSHzysmvshmJJIEyy5t/image.png" alt="" data-size="line"> near the top right for a list of controls.
{% endhint %}

Open VoxEdit, then create a new project in the [**Block Editor**](https://docs.sandbox.game/en/creator/docs/navigate-voxedit-home#block-editor-1).

### Camera Movement

* First, let's practice basic VoxEdit camera controls to move the 3D block in the **Viewport**. Notice a white arrow points from the front face of the block.

| Controls       | Keys/Mouse                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Pan camera     | Hold ![](https://docs.sandbox.game/~gitbook/image?url=https%3A%2F%2F331512196-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F83PS3g9zpWmq73xzlwFn%252Fuploads%252FsReJKtmTvysqm8QImX4J%252Fimage.png%3Falt%3Dmedia%26token%3D5d6f5aa1-3a3d-4b85-afab-def582822208\&width=300\&dpr=4\&quality=100\&sign=d17fe3dc\&sv=1) + Move ![](https://docs.sandbox.game/~gitbook/image?url=https%3A%2F%2F331512196-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F83PS3g9zpWmq73xzlwFn%252Fuploads%252Fi9nEJsLp5LPNdWXGHgtu%252Fimage.png%3Falt%3Dmedia%26token%3D2b7d178b-551d-489d-9bf0-13eee3d25d25\&width=300\&dpr=4\&quality=100\&sign=3dc487ef\&sv=1) ↕️ ↔️                                                                                                                                                                                                                                                                                                                                                                                           |
| Rotate camera  | Hold ![](https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FsH7CQJAzDKyQQOmiQcoE%2Fimage.png?alt=media\&token=dd73567b-4082-4f99-a351-3fd0babc4779) + Move ![](https://docs.sandbox.game/~gitbook/image?url=https%3A%2F%2F331512196-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F83PS3g9zpWmq73xzlwFn%252Fuploads%252Fi9nEJsLp5LPNdWXGHgtu%252Fimage.png%3Falt%3Dmedia%26token%3D2b7d178b-551d-489d-9bf0-13eee3d25d25\&width=300\&dpr=4\&quality=100\&sign=3dc487ef\&sv=1) ↕️ ↔️                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| Zoom in/out    | <p><img src="https://docs.sandbox.game/~gitbook/image?url=https%3A%2F%2F331512196-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F83PS3g9zpWmq73xzlwFn%252Fuploads%252FxJJ7sPrQJLxt3g7FYvgz%252Fimage.png%3Falt%3Dmedia%26token%3D3bb5b94f-a1ba-47c1-a1b9-a9b4316f70bc&#x26;width=300&#x26;dpr=4&#x26;quality=100&#x26;sign=f8e8b732&#x26;sv=1" alt=""> scroll wheel    <strong>OR</strong><br><kbd><strong>CTRL</strong></kbd> + Hold <img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FsH7CQJAzDKyQQOmiQcoE%2Fimage.png?alt=media&#x26;token=dd73567b-4082-4f99-a351-3fd0babc4779" alt=""> + Move <img src="https://docs.sandbox.game/~gitbook/image?url=https%3A%2F%2F331512196-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F83PS3g9zpWmq73xzlwFn%252Fuploads%252Fi9nEJsLp5LPNdWXGHgtu%252Fimage.png%3Falt%3Dmedia%26token%3D2b7d178b-551d-489d-9bf0-13eee3d25d25&#x26;width=300&#x26;dpr=4&#x26;quality=100&#x26;sign=3dc487ef&#x26;sv=1" alt=""> ↕️ ↔️</p> |
| Focus (center) | <kbd>**F**</kbd> key                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| {% endtab %}   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |

{% tab title="The Basics" %}
{% hint style="info" %}
**Essential:** The scale of a block is 32 voxels in every dimension, which translates to 1 metre in the real world.
{% endhint %}

### About Palette & Material Panels

The **Palette** panel is filled with different coloured square swatches. The colour that is selected is highlighted by a white square. It also appears in the **Material** panel with the RGB, HSB, and HEX codes included.

### Paint Voxels

By default, the pen tool is active and applies the colour in the selected swatch. Left click on the block surface to edit individual voxels or left click, drag, and release to edit multiple voxels.

Practice painting voxels with the pen tool using at least five colours. Use camera controls to pan, rotate, and zoom as needed.

### Undo/Redo

Often, you will need to undo/redo your actions as you create in VoxEdit (paint on colour, change a colour, rotate/flip your design, etc).

Practice using these controls, which are also available in the Edit menu.

* **Undo** (up to 10 operations): Ctrl+Z
* **Redo** (up to 10 operations): Ctrl+Y

### Select Colours from Your Design

Select the Picker tool <img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/QEl6lycysxUDHP9kOHeq/image.png" alt="" data-size="line"> in the Tools panel on the left. Now you can click on any colour in your block to select it in the Palette panel.&#x20;

This makes it easier to find and change colours used in your design.

<figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2Fppo6dXhJWUlbB6omeFAC%2FVE%202025.1%20panels%20tools%20picker%20opt.webp?alt=media&#x26;token=a470e936-724f-44d6-b740-6676111ed3b5" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Change Colours" %}

### Change Colours via the Palette

{% hint style="info" %}
A swatch is a location for colour information. If you replace a swatch's colour or load a different palette, the colour will change everywhere it was painted on your block.
{% endhint %}

Test each method below to change each colour painted onto the block:

* **Copy & Paste:** Right click to copy and paste one swatch's colour into another swatch location to change the colour in the block
* **Hold, Drag & Release:** Click on a colour swatch until a small square appears inside it, then drag it and place it in another swatch to replace that swatch's colour
* **Saturation:** Drag the circle in the Materials panel and move it left to right
* **Tint:** Drag the circle in the Materials panel and move it up and down
* **Hue:** Drag the triangle slider on the hue bar
* **Emissive:** Click the star <img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2F5g8Rq17JxfHWVoWuNptF%2Fimage.png?alt=media&#x26;token=50250d09-ceb8-4d56-b346-265cf92e5fda" alt="" data-size="line"> to switch a colour between normal and emissive (glow) modes
* **(Optional) Codes:** Enter RGB, HSB, and HEX codes

<div><figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2F9kWaHuAecv3XlcORPix8%2Fimage.png?alt=media&#x26;token=dcce1f48-4f6a-4503-bf64-efd96d0726a3" alt=""><figcaption><p>Palette Panel (default)</p></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FEOmpJn72RzTmhL00KLn8%2FVE%202025.1%20Panels%20-%20Block%20Modeler%20-%20Materials.png?alt=media&#x26;token=8e3ac32f-71e5-43f7-9894-641f828d7239" alt=""><figcaption><p>Materials Panel (default)</p></figcaption></figure></div>

### Sample Colours from Your Screen

In the **Materials** panel, click and hold the colour sample button <img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2F9A2a7iQWoQGL1o03JXs6%2Fimage.png?alt=media&#x26;token=b09d3f2c-a7fb-485f-9319-ac0ef5c96cfe" alt="" data-size="line">, move your mouse over the colour on your screen that you want to select, and release. This replaces the selected swatch.

### Colour Blending Swatches

To blend two colours in the Palette panel, first copy and paste them in swatches that are spaced apart the number of colours you want to generate between them. Select one swatch, drag, and let go on the other swatch. Then right click and select Blend in the menu. Done!

This makes it easier to create colours for light, shadows, and texture that will blend well with the main colours in your design.&#x20;

Practice using blended colours to add light and shadow to your design.

{% hint style="warning" %}
Be careful not to overwrite colour swatches you plan to keep in your project. Remember, if a used swatch colour changes, it will change in your design.
{% endhint %}
{% endtab %}

{% tab title="Use Tools" %}

### About Tools

{% hint style="info" %}
The **Block Editor** only allows tools to work in paint mode. You will learn to use the other modes in combination with these tools in the next activity about the **Modeler**.
{% endhint %}

Tools are like brushes. In the Tool bar on the left, click a tool to practice painting different block faces while moving the camera as needed.

<div><figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FYlfaA7n7XnuUkIaZ5LYn%2FVE%20tool%20mode%20pen%20paint%20opt.webp?alt=media&#x26;token=5a2d5c28-e06c-4357-ad05-78715484037d" alt=""><figcaption><p>Pen</p></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FlO0VuRzfaWABGo4VI1DF%2FVE%20tool%20mode%20line%20paint%20opt.webp?alt=media&#x26;token=a69db97d-33e2-4448-830e-7b4d31277623" alt=""><figcaption><p>Line</p></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FTN4LOF98xi2iNgyE3yyf%2FVE%20tool%20mode%20rect%20paint%20opt.webp?alt=media&#x26;token=773686c5-0d02-4c87-8bf7-3dae1bbc07d7" alt=""><figcaption><p>Rectangle</p></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FVWTw8yy23A0H2tVOKkog%2FVE%20tool%20mode%20circle%20paint%20opt.webp?alt=media&#x26;token=378ad61d-cfa3-413d-8e3b-0756119ef9a1" alt=""><figcaption><p>Circle</p></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FBAawFOPiawhPKJZmp13a%2FVE%20tool%20mode%20box%20paint%20opt.webp?alt=media&#x26;token=852f267f-cfa3-49d1-a64e-7bf73aa23fa7" alt=""><figcaption><p>Box</p></figcaption></figure> <figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FuFTTFnkDcI0goTnZoGZl%2FVE%20tool%20mode%20bucket%20paint%20opt.webp?alt=media&#x26;token=9c2ba02e-9bc2-4fb7-bba8-62d035dfcba7" alt=""><figcaption><p>Bucket</p></figcaption></figure></div>

### Top Bar Buttons

Test the buttons below while painting with different tools. Try to create a pattern on one face.

&#x20;<img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FAji6Dh1o18bd6L5BLV9A%2Fimage.png?alt=media&#x26;token=29cb2dd1-a46d-4089-966d-5c6c4245eb58" alt="" data-size="original"> <img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2Fh7QWh2Xs5AiSH7s3Y9PU%2Fimage.png?alt=media&#x26;token=137865eb-9bd7-462a-a169-23648ba3a6e4" alt="" data-size="original"> **Show/Hide Voxel Edges:** Add and remove guide lines to use tools more precisely and create patterns.

<img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FHmReUBNEP1nS1dEW5bUP%2Fimage.png?alt=media&#x26;token=1591cb00-07c2-441e-bfd3-7d77a95e3575" alt="" data-size="original"> <img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2F6vdDqfs81HNLZCwK1CgI%2Fimage.png?alt=media&#x26;token=7a8db254-6861-4fee-ac1f-1a25c519f098" alt="" data-size="original"> <img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FQ27tdIPwggcPfhjN4pk3%2Fimage.png?alt=media&#x26;token=d3d095ab-cec6-4b0d-9af3-e0fe76875558" alt="" data-size="original"> **Mirror:** Apply the same edits around the selected axis or axes.

![](https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FqYKge9tP3Iyz6brbfILC%2Fimage.png?alt=media\&token=058a9cea-8ff3-4380-bc30-0d0100ab245c) ![](https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FHcwE6eCbJqQtzPE90jB5%2Fimage.png?alt=media\&token=6423e6ae-8c61-4f4f-8dc6-d233110fe5d6) ![](https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2Fi9oKujXvcXlBWTITjbWU%2Fimage.png?alt=media\&token=48b8c065-5f6b-4afd-bf67-89c40c0ae86a) **Flip:** Flip the entire block 180 degrees around a selected axis.

![](https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2F1jrl5YUUsZI8wgoNrrHy%2Fimage.png?alt=media\&token=92c80cce-f45b-4326-bfdd-d741301feacc) ![](https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FrkokQFfawvxJ825J0JxZ%2Fimage.png?alt=media\&token=635e784e-f7b4-4ab6-9131-e773c64d8198) ![](https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FvC97zvl4zlhwkZgteJgh%2Fimage.png?alt=media\&token=7638f59b-a191-42c5-bb5c-206a6caae406) **Rotate:** Turn the entire block 90 degrees around a selected axis.

### Blocks Side Panel

This panel allows you to select a block face and flip, rotate, export, or import with its buttons. You can also drag a block face into another face slot to duplicate it.&#x20;

<figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FrP5nBWc9KSjUQJsX0fsl%2Fimage.png?alt=media&#x26;token=03f2daf2-10aa-4ab9-b8cc-fc3c7191efbf" alt="" width="315"><figcaption></figcaption></figure>

Try using these to create a pattern across all block faces with minimal painting.

{% hint style="info" %}
You can import (or export) a 32x32 pixel image with less than 256 colours. Image colours must match the palette, or they will replace it and affect block colours.
{% endhint %}
{% endtab %}

{% tab title="Follow Up" %}

### Follow Up

Follow instructions in [**Upload Assets to Workspaces**](https://docs.sandbox.game/en/creator/voxedit/upload-assets-to-workspaces) to add the block to your inventory. Once you've completed the upload process, your creation will be ready to build with in your Game Maker library.

{% hint style="info" %}

* See [**Create Experiences**](https://docs.sandbox.game/en/creator/game-maker/create-experiences) to learn about creating with Game Maker.
* See [**Using Blocks**](https://docs.sandbox.game/en/creator/game-maker/docs/using-blocks) to learn about different block types and in Game Maker to test your creations
  {% endhint %}

Now you have the foundation to use the camera, color, and important tools to create in VoxEdit. You can also view your block in your inventory on the website and use it in Game Maker.&#x20;

In the next activity, you'll learn to create 3D models by combining tools with different modes in the **Modeler**.

### Resources

{% content-ref url="docs/block" %}
[block](https://docs.sandbox.game/en/creator/voxedit/docs/block)
{% endcontent-ref %}

{% embed url="<https://youtu.be/WqTJErRaV2s>" %}
{% endtab %}
{% endtabs %}

### 2. :ice\_cube: Create a Model to Learn Tool Modes

This is an <mark style="background-color:green;">**EASY**</mark> activity anyone can do. It builds on controls, tools, and panels introduced in the previous activity and explores other modes and the basics of a model. The next activity will deepen these basics using the Animator with templates.

{% tabs %}
{% tab title="Start" %}

### Start

* Open VoxEdit, then open the **Modeler**
* Create a new project
  {% endtab %}

{% tab title="The Basics" %}

### The Basics

{% hint style="info" %}
**Essential:** The Sandbox has a universal scale, where the smallest unit is a voxel. Game builders can **NOT** resize assets.

**Tip:** Design assets with a medium human (64 voxels/2 blocks/2 metres high) as a guide. Learn more: [asset-scale](https://docs.sandbox.game/en/creator/voxedit/docs/ve-guidelines/asset-scale "mention").
{% endhint %}

#### The Modeler is used to:

* Create a simple asset, or model (explored in this activity)
* Modify a model in a complex asset made of multiple models (explored in another activity)

**A Model Includes:**

* a collision box (for interaction)
* 3D shape (voxels)
* colors (solid or emissive)
* a pivot point (an "anchor" for placement and movement in a 3D world)
* (optional) a frame surface to display images/video
  {% endtab %}

{% tab title="Collision Box" %}

### Collision Box

:one: The **Viewport** in the middle of the screen is your workspace, with a grid for your model's collision box.

:two: The **volume size** for your model can be set with **X, Y,** and **Z** values. The default is the size of a block (32x32x32).

**Practice:** Set the values to (46, 35, 46) to prepare your model to become a table.

:three: The **Volume Resizer Tool** allows you to adjust the collision box in any direction with a mouse.

:four: The **Trim Volume** button shrinks the collision box to its smallest size based on the outermost voxels in every direction. This makes assets feel more natural for game world interactions.

Let's learn how to add and remove voxels.

<figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FJKO3VinV1TaRTFF4OM6O%2FCollisions.png?alt=media&#x26;token=d9347707-0be4-49b7-a18f-a03a09f9ea68" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Shape" %}
{% hint style="info" %}
[use-modes-and-tools-together](https://docs.sandbox.game/en/creator/voxedit/docs/modeler/use-modes-and-tools-together "mention")

**Modes** are *what you will do* to your model (Select, Create, Paint, and Erase voxels).

**Tools** are *how you will do it*. They're your set of brushes to use with each mode.
{% endhint %}

From this point on, you'll practice mode and tool combinations and move your camera to visualize, build, and paint a 3D model (remember that the white arrow is the front).

### Shape

:one: **Create** mode allows you to add voxels inside the collision box.

:two: **Erase** mode allows you to remove voxels.

:three: Tools are the brush shapes for the selected mode.

**Quick Practice:**&#x20;

Select **Create** mode and use the **Pencil** tool (default mode) to "free draw" voxels into the collision box. Change to the **Face** tool to add a layer of voxels to any surface.

Select **Erase** mode and use the **Face** tool to remove a layer of voxels. Select the **Pencil** tool and remove individual voxels.

{% hint style="info" %}
**CREATE/ERASE SHORTCUT**

Hold **`SHIFT`** when in **Create** or **Erase** mode to temporarily use the opposite mode.
{% endhint %}

{% hint style="info" %}
**COPY/PASTE & MOVE VOXELS**

Use **Select** mode <img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/BIgQrJdQoq9IA2yGTFXy/image.png" alt="" data-size="line"> to select voxels in any tool shape and copy/paste or move them.
{% endhint %}

Now that you've practiced these basic methods, press **`CTRL` + `A`** to select all voxels and press **`DELETE`** to remove all voxels from your collision box to begin building your asset.

<figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FdBY8NgEAZwuEgIfULDSD%2FShape.png?alt=media&#x26;token=10638ce1-420d-45ac-a917-cdd074aec22f" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**DETAILS: REDUCE 3D, INCREASE 2D**

Build simpler 3D shape so Experiences run faster and allow for more assets and logic.

Add visual depth to 3D shapes with 2D texture (colour).
{% endhint %}

#### Activity: Build a Basic Table

1. Select a base colour for your table from the palette panel.
2. Table top:&#x20;
   1. Set to **Create** mode and choose the **Face** tool.
   2. Right click and move your mouse forward to tilt your model upward (revealing the top of the collision box).
   3. Click twice to add two layers of voxels as your table top.
3. Table legs:
   1. Keep the camera pointed at the underside of the table top you created.\
      In the top bar, turn on the **Mirror X** and **Mirror Z** buttons (explored in the previous activity).
   2. Choose the **Box** tool and draw the shape of one of your table's legs under the table top. This creates four copies because mirroring is turned on. \
      :eyes: Notice the tool tips bar on the bottom left! As you click and drag, the coordinate of the starting coordinates and the delta (change) for each axis appears so you can use your tools with precision.
   3. Switch back to the **Face** tool and click on the shape created many times to extend the leg all the way to the bottom of the collision box.
   4. Turn off the **Mirror X** and **Mirror Z** buttons to return to normal mode.

Your table has taken shape! Now let's give it some colour.
{% endtab %}

{% tab title="Colour" %}

### Colour

:one: Paint mode allows you to change the colour of voxels in your model (it is the Block Editor's only mode).

:two: Tools are the brush shapes for painting.

:three: The Picker tool allows you to show a voxel's colour in the Palette and Material panels.

:four: and [5️⃣](https://docs.sandbox.game/en/v/creators/voxedit/docs/animator/motion-animator-timeline-panel) The Material and Palette panels were introduced in the previous activity to explore colour selection, changing, etc. Remember the colour sampler button in the Material panel can be used to add any colour from your screen to your palette.

<figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FiWri0oAQ9r0akjdnaUyV%2FColor.png?alt=media&#x26;token=df8fb9c7-f007-4f8c-8bc5-250c44eefc4b" alt=""><figcaption></figcaption></figure>

#### Activity: Colour Your Table

**Tip:** If you're a beginning artist, use fewer colors and focus on practicing basic techniques.

**Note:** You may prefer a different order to create a sense of material, light, and details.

1. Decide what material your table is made of:\
   **Glass/Metal/Polished Stone** - with a few colours, make chunky angled lines to create shine.\
   **Wood** - use a few similar natural colours to create wood grain designs (avoid patterns).\
   **Concrete** - use many colours in random small dots (**Pencil** tool) to create rough texture or one color for a smooth, matte look.
2. Choose a light source and decide how intense it should be:\
   **Tip:** Light and shadow colors make it easier to understand what your asset is than using voxels to create shape. Without this, your asset will look flat even with the shadows created from the sky or point/spot light used in Game Maker.
   1. Add highlights and lowlights in the same colour family based on where you want to create the illusion of a light source and shadows from it in your model.&#x20;
   2. Use colours close to your base colour for soft light and colours far from your base colour for shine or harsh light.
3. Practice:

   1. Tilt the camera to view the table from the top. Click the **Voxel Edges** button in the top bar to view a grid.
   2. On the surface of the table, paint a design of your choice that is 3 voxels wide on the outer edges. Tilt and rotate to carry the design down around the sides. Modify as needed for the material and light techniques you decided to use for your model.

   **Tip:** Remember to use Undo and Redo as needed.

{% hint style="success" %}
**RESOURCES**

See [colour-texture-and-depth](https://docs.sandbox.game/en/creator/voxedit/creative-guides/art-techniques/colour-texture-and-depth "mention") for tips about:

* Colour Choice & Strategy
* Texture & Materials
  {% endhint %}
  {% endtab %}

{% tab title="Pivot Point" %}

### Pivot Point

:one: The **Pivot** tool allows you to move the anchor point that determines how a model will be located in the game world as an asset or how it will be located in a rig when you use it in a compound asset built in the Animator.

#### Two modes:

Click the **Pivot** tool button to reveal the gizmo to move the point.

Right click the button to open a menu of options to **Set to Floor** or **Set to Center**.

{% hint style="warning" %}
Remember to adjust the pivot point if you change the collision box of your model.
{% endhint %}

<figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FV4QxvCK1Qbz2zHStLdy9%2FPivot%20Point.png?alt=media&#x26;token=3268e627-fce6-42a5-91e0-0bd2edc2c386" alt=""><figcaption></figcaption></figure>

#### Activity: Setting the Pivot Point

The location of the pivot point affects how builders using Game Maker can place the asset and use logic to make it move during gameplay.

1. Test the gizmo

   1. Click on the Pivot tool and click and drag the blue arrow on the gizmo to move the pivot point to the center back of the model (along the red axis).&#x20;
   2. Hold **`SHIFT`** to lock to a grid of 0.5 voxel increments when moving.\
      :eyes: Notice that coordinates appear as you move it to calculate its location precisely.

   **Tip:** A pivot point centered on the back of a model is great for pictures, cabinets, etc.
2. Find the center faster

   1. Right click the **Pivot** tool button and choose **Set to Center**.

   **Tip:** A pivot point in the very center of a model may be used frequently for compound assets that combine multiple models in the Animator (explored in another activity).
3. Quick drop to the floor

   1. Right click the **Pivot** tool button and choose **Set to Floor**.

   **Tip:** Most assets have a pivot point set at the center then at the floor for easy placement.&#x20;

Your pivot point is set at the center and floor of the model. Let's explore a special use case for your model.
{% endtab %}

{% tab title="Frame Surface" %}

### Frame Surface

You can display a 2D NFT you own on walls, tabletops, and more in an Experience!&#x20;

The NFT must be:

* 2D (still or animated GIF)
* In the wallet that is connected to your account at The Sandbox
* On the Ethereum, Polygon, or Goerli blockchains

:one: The Frame tool defines a surface that can be used to display an NFT images when [nft-image-display](https://docs.sandbox.game/en/creator/game-maker/docs/components/nft/nft-image-display "mention") logic is applied in Game Maker.

{% hint style="info" %}
Currently, displaying videos on frame surfaces is limited to select partners.
{% endhint %}

<figure><img src="https://331512196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F83PS3g9zpWmq73xzlwFn%2Fuploads%2FgsaO6jKTvAMjgKnAfULv%2FFrame%20Surface.png?alt=media&#x26;token=f43a5ec2-b446-4517-a66c-5960d3d44244" alt=""><figcaption></figcaption></figure>

#### Activity: Create a Frame Surface

**Note:** NFT images come in many shapes and sizes. Our example uses a common square shape.

1. Click the **Frame** tool button.
2. Inside of the design you painted, click from one corner to another to add a frame surface. It will highlight voxels in pink while dragging and in green when you release.
3. To change the area, click and drag again in the correct area to "redraw" it. In our example, we are creating a square shaped frame surface.
4. To keep the frame surface, click the **Frame** tool button to close this mode.
5. To remove a frame surface, click the **Frame** tool button, click anywhere in the viewport to remove the green highlighted area, and click on the Frame tool button again to close the mode.

It's up to you if you want to keep the frame surface on your table and test it out in Game Maker or remove the frame surface and paint in that space.
{% endtab %}

{% tab title="Follow Up" %}

### Follow Up

Now you know the basics to create a simple asset in the Modeler.

[**Upload your asset to Workspaces**](https://docs.sandbox.game/en/creator/voxedit/upload-assets-to-workspaces) and test it in Game Maker for collisions, size, shape, colors, pivot point, and (if applied) your frame surface for displaying an NFT image.

In the next activity, we'll dive into customizing templates to introduce VoxEdit's Animator basics. Everything you need is seamlessly integrated so it's easy to quickly make animated assets!

### Resources

{% content-ref url="docs/modeler" %}
[modeler](https://docs.sandbox.game/en/creator/voxedit/docs/modeler)
{% endcontent-ref %}

{% content-ref url="creative-guides/art-techniques/colour-texture-and-depth" %}
[colour-texture-and-depth](https://docs.sandbox.game/en/creator/voxedit/creative-guides/art-techniques/colour-texture-and-depth)
{% endcontent-ref %}

{% embed url="<https://www.youtube.com/watch?v=200Kj2Dljrg>" %}
{% endtab %}
{% endtabs %}

### 3. :person\_standing: Modify Templates in the Modeler & Animator

This is an <mark style="background-color:green;">**EASY**</mark> activity that requires knowledge of the Modeler since you'll go back and forth between that module and the Animator to customise an Animated Template. It's easier than you think, and the customisation options are endless once you learn the basics.

{% embed url="<https://www.youtube.com/watch?v=C40I8F5iq7o>" %}

{% tabs %}
{% tab title="Start" %}

#### Get Started

* Open VoxEdit
* Open the Templates tab and choose any template to explore and edit.
  {% endtab %}

{% tab title="Learn" %}

#### Learn

* Introduction to the [**Animator**](https://docs.sandbox.game/en/creator/voxedit/docs/animator)
* What are [**nodes**](https://docs.sandbox.game/en/creator/docs/animator#skeleton-1)?
  {% endtab %}

{% tab title="Practice" %}

#### Practice

* Open and close models in nodes to edit and save changes
  * Quick Tip: [**How to Enter Edit Mode from Animator**](https://youtu.be/g5jiDlEwJIc) (video)
* Create a new model and link it to a node (drag and drop)
* Clone a model and link it to a node
* Customize the shape of models in your rig, trim volumes, and adjust the pivot point if needed
  {% endtab %}

{% tab title="Quality Check" %}

#### Quality Check

* Test various animations and check for [**z-fighting**](https://docs.sandbox.game/en/creator/docs/ve-guidelines/visual-quality#z-fighting) or [**clipping**](https://docs.sandbox.game/en/creator/docs/ve-guidelines/visual-quality#clipping-1) in the Animator
* "[**Upload to my Workspace**](https://docs.sandbox.game/en/creator/voxedit/upload-assets-to-workspaces)" - you've created an animated entity from a template!
* Test in [**Game Maker**](https://docs.sandbox.game/en/creator/game-maker)
  * Install and/or open Game Maker
  * Find your animated entity in the Game Maker Library (search by name)
  * Place your entity in the game world
  * Add the "[**Animated Decoration**](https://docs.sandbox.game/en/creator/game-maker/docs/behaviours/visual/animated-decoration)" behavior and choose the animation you want to test
  * Press **TAB** to test in play mode and see the selected animation show
  * Test as many times as you like (or duplicate the object you placed and set different animations to see them display all at once)
    {% endtab %}

{% tab title="Follow Up" %}
So much is possible with templates since you can change color, shape, and even the pivot point of each model included.&#x20;

You can even unlock templates to add nodes and motion keyframes, but we recommend learning to build a rig in the next activity and learning to add keyframes in the next two activities before modifying a template.
{% endtab %}
{% endtabs %}

### 4. :jigsaw: Build a Rig in the Animator

This is a <mark style="background-color:yellow;">**MEDIUM**</mark> difficulty activity to build your first rig by positioning multiple models together. A rig can be still or animated and can have a simple to very complex structure.

In this activity you'll learn a lot about the spatial relationships of the models in your compound entity and commonly used workflows to build a skeleton from scratch.

{% embed url="<https://youtu.be/RS1zIR9rDKM>" %}

{% tabs %}
{% tab title="Start" %}

#### Get Started

* Open VoxEdit
* Select the Animator module in the menu on the left
* Create a new project
  {% endtab %}

{% tab title="Learn" %}

#### Learn

* A simple introduction to [**compound assets**](https://docs.sandbox.game/en/creator/basics/assets#three-types-of-entities)
* View our documentation about [**Skeleton**](https://docs.sandbox.game/en/creator/docs/animator#skeleton-1) controls
* Refer to [build-a-rig](https://docs.sandbox.game/en/creator/voxedit/docs/animator/build-a-rig "mention") as needed for this activity
  {% endtab %}

{% tab title="Prepare" %}

#### Prepare

* Create a control node and child nodes
* Create a new model from the Animator Library as a full "sketch" of what you're going to make
  * Adjust the pivot point to be centered and on the floor
  * Use the mirror tool to create symmetry in the design
    {% endtab %}

{% tab title="Practice" %}

#### Practice

* [**Break the "sketch" model down**](https://docs.sandbox.game/en/creator/voxedit/creative-guides/art-techniques/3d-design/break-down-objects):
  * Select voxels and use "Save Selected Voxels" in the Edit menu to create new models
  * Repeat this until you have all of the pieces you want to assemble
  * Where you had symmetry in your "sketch" model, only save one new model
  * Decide which model makes sense to be linked to a parent node for this build (when it moves, all child nodes move with it)
    * Link (drag and drop) it to an empty node
  * Drag and drop a node into another to make it a child, position it:&#x20;
    * Link another model you saved to an empty node, drag and drop the node onto the parent node, and move and rotate it into position to match your "sketch"
    * Test and observe the parent/child relationship:
      * Move and rotate the parent node to see both models move, undo
      * Move and rotate the child node to see that only it moves, undo
  * Save time where there's symmetry:
    * Link the same model to empty child nodes of your parent node and position them
    * Test and observe modifying the model linked to more than one node:&#x20;
      * Open the model and edit the color in the Modeler, save and view it in the Animator
      * Observe how every instance of the model linked changes
      * Clone the model and paint it differently, then drag and drop it in one of the nodes to link it and see how you can quickly create varied looks in your creations
      * Feel free to swap back to reuse the same model or edit colors as you lik
  * Assemble the rest of your design
  * Import a model you've already made into the Animator Library panel and link it to a node (drag and drop) and find a position for it in the design
    * If you don't like it, remove it from the library
      {% endtab %}

{% tab title="Quality Check" %}

#### Quality Check

* View your creation from all angles for quality, making any adjustments needed
* "[**Upload to my Workspace**](https://docs.sandbox.game/en/creator/voxedit/upload-assets-to-workspaces)" - you've created a compound entity!
* Test in [**Game Maker**](https://docs.sandbox.game/en/creator/game-maker)
  * Install and/or open Game Maker
  * Find your model in the Game Maker Library (search by name)
  * Place your compound entity in the game world
  * Press **TAB** to test in play mode
  * Observe:&#x20;
    * Every model in this compound entity has its own collision boundary because there are no animations, making it feel more realistic in the game
      {% endtab %}

{% tab title="Follow Up" %}
This activity empowers you to build a custom rig for anything you like: [**buildings the player can enter**](https://docs.sandbox.game/en/creator/voxedit/creative-guides/asset-guide/structures-and-landmarks/unanimated-building-player-entry), spaceships with sleek angles, robots you'll animate later, and more!
{% endtab %}
{% endtabs %}

### 5. :film\_frames: Create Animations & Add Motion Keyframes

This is an <mark style="background-color:red;">**ADVANCED**</mark> activity that requires a pre-built rig so you can add motion keyframes to animations, which can be still poses or have movement.

While you can add motion to your rig before you're completely satisfied with how you've built it, you'll save a lot of time by deciding on the rig first. Pose your models in static animations to decide if you need to divide or combine models for the motion you'll add later.

{% embed url="<https://youtu.be/0nTyjqk3ClY>" %}

{% tabs %}
{% tab title="Start" %}

#### Get Started

* Open VoxEdit
* Open your compound entity from Activity 4 to add motion to an animation ([**duplicate your project**](https://docs.sandbox.game/en/creator/docs/ve-guidelines/manage-files-and-folders#cleanly-duplicate-a-project) first if you want to keep your unanimated rig as a separate project)
  {% endtab %}

{% tab title="Practice 1" %}

#### Practice 1

* Select a node you want to have motion and open the timeline at the bottom of the Animator
* Position the playhead to where you want the first period of motion for that node to end (this is all based on time, where each tick mark is a frame and every 24 frames is one second)
* In the Global Space, move the node to the position you want it to reach by that time
* Press spacebar to test - NOTE: the position of the playhead is important to check each time you move a node, because it will create keyframes of motion
  * Modify the keyframe you made:
    * Drag the end to increase the time for the movement, press spacebar to test
    * Position the playhead at the end of the keyframe and move the node, press spacebar to test
      {% endtab %}

{% tab title="Practice 2" %}

#### Practice 2

* Modify zoom area in the timeline to have more room to add more keyframes
* Add a new motion keyframe to follow the first one:
  * Position the playhead in the empty space after the existing keyframe
  * Move the same node and test with spacebar to see how the two keyframes blend together to create motion
  * Add nuance to motion in the second keyframe with a quick adjustment of keyframe interpolation
* Copy a keyframe and paste after the ones you created normally and then in reverse, test with spacebar and undo if you don't want to keep them
* Complex movement:
  * Create a keyframe for a parent node and a keyframe for a child node, press spacebar to test this as a combination
  * Make adjustments and test the results a few times.
* Complete the rest of your animation
  {% endtab %}

{% tab title="Quality Check" %}

#### Quality Check

* Quick Tip: [**How to Close Your Keyframes**](https://youtu.be/QGkDQPjOD94) (video):
  * Move the playhead to the final frame of your animation and press the empty diamond button at the top of the node list in the timeline - this is a critical step to make your animation work properly
* Test thoroughly with the spacebar
* "Upload to my Workspace" - you've created an animated entity from scratch!
* Test in Game Maker
  * Install and/or open Game Maker
  * Find your model in the Game Maker Library (search by name)
  * Place your animated entity in the game world
  * Press TAB to test in play mode
  * Observe:&#x20;
    * Every model in this compound entity has its own collision boundary because there are no animations, making it feel more realistic in the game
      {% endtab %}

{% tab title="Follow Up" %}
Now you can animate any rig you can create, but keep in mind this creates a collision boundary around the whole entity. Your next step with VoxEdit is to learn how to name the animations for your entity to match up with the behaviors in Game Maker so they activate properly during play. Learn more about Animation in The Sandbox to see how it works.

{% content-ref url="docs/animator" %}
[animator](https://docs.sandbox.game/en/creator/voxedit/docs/animator)
{% endcontent-ref %}
{% endtab %}
{% endtabs %}

## Coming Soon

### 6. :unlock: Unlock a Template to Reuse its Animations

This is an <mark style="background-color:red;">**ADVANCED**</mark> activity to reuse the hierarchy and animations of a template to save time creating a custom animated asset.

{% tabs %}
{% tab title="About" %}
This hands-on activity will introduce VoxEdit's templates, teach you how to use one, and teach you how to "unlock" one to create custom assets.

{% content-ref url="docs/templates" %}
[templates](https://docs.sandbox.game/en/creator/voxedit/docs/templates)
{% endcontent-ref %}
{% endtab %}
{% endtabs %}

### 7. :japanese\_goblin: Bonus: Make Better Assets with 2D Texture

This is a <mark style="background-color:yellow;">**MEDIUM**</mark> difficulty activity to explore colour and texture to make more attractive voxel art with depth and apparent shape without adding voxel noise.&#x20;

{% tabs %}
{% tab title="About" %}
This hands-on activity will explore how to create higher quality art with 2D texture, which can help you optimise your assets.

{% content-ref url="creative-guides/art-techniques/colour-texture-and-depth" %}
[colour-texture-and-depth](https://docs.sandbox.game/en/creator/voxedit/creative-guides/art-techniques/colour-texture-and-depth)
{% endcontent-ref %}
{% endtab %}
{% endtabs %}

### 8. :bricks: Bonus: Optimize Assets with 3D Techniques

This is an <mark style="background-color:red;">**ADVANCED**</mark> activity to explore essential 3D design methods including breaking down models to compose compound assets faster and creating clean angles and 3D structure for better performance in the game world.

{% tabs %}
{% tab title="About" %}
This hands-on activity will cover common 3D techniques and best practices to construct more complex rigs or smooth curves.

{% content-ref url="creative-guides/art-techniques/3d-design" %}
[3d-design](https://docs.sandbox.game/en/creator/voxedit/creative-guides/art-techniques/3d-design)
{% endcontent-ref %}
{% endtab %}
{% endtabs %}

***

## Resources

{% content-ref url="../basics" %}
[basics](https://docs.sandbox.game/en/creator/basics)
{% endcontent-ref %}

<table data-card-size="large" data-view="cards"><thead><tr><th data-card-target data-type="content-ref"></th><th></th></tr></thead><tbody><tr><td><a href="docs">docs</a></td><td>Find comprehensive details on VoxEdit</td></tr><tr><td><a href="docs/ve-guidelines">ve-guidelines</a></td><td>Boost performance with best practices</td></tr><tr><td><a href="creative-guides/asset-guide">asset-guide</a></td><td>Find recommendations by asset type</td></tr><tr><td><a href="../creators-program/voxedit-contests">voxedit-contests</a></td><td>Learn how to compete to win SAND</td></tr><tr><td><a href="faqs-voxedit">faqs-voxedit</a></td><td></td></tr><tr><td><a href="../basics/faqs-assets">faqs-assets</a></td><td></td></tr></tbody></table>

## Community

### [Socials](https://app.gitbook.com/s/61fllYo416R30LRxku4v/general/socials-news-blogs)

![](https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/cKqJHkH8XJVUBW1p5Nt8/discord%20socials.png) VoxEdit Creations Channel         |    <img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/VHWcY0IQSERvMVP7GBho/logo-white.png" alt="" data-size="line"> [#VoxEditWeekly](https://twitter.com/hashtag/VoxEditWeekly?src=hashtag_click)

![](https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/cKqJHkH8XJVUBW1p5Nt8/discord%20socials.png) Game Maker Teasers channel    |    <img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/VHWcY0IQSERvMVP7GBho/logo-white.png" alt="" data-size="line"> [#ScreenshotSaturday](https://twitter.com/hashtag/ScreenshotSaturday?src=hashtag_click)    |    <img src="https://content.gitbook.com/content/83PS3g9zpWmq73xzlwFn/blobs/VHWcY0IQSERvMVP7GBho/logo-white.png" alt="" data-size="line"> [#tsbgamejam](https://twitter.com/hashtag/tsbgamejam?src=hashtag_click)

### Livestreams

Follow along and ask questions during our Livestreams, available on Twitch. Subscribe to receive notifications for when we go live!

{% embed url="<https://www.twitch.tv/thesandboxgame>" %}

### Discord

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><p><a href="https://discord.gg/thesandboxgame">Join Discord</a></p><ul><li>Ask for help (English) in the VoxEdit  or Game Maker Community Discussions</li><li>File a ticket for a technical issue in the VoxEdit or Game Maker Support Channels</li><li>Find channels in other languages</li></ul></td><td><a href="https://discordapp.com/invite/vAe4zvY">https://discordapp.com/invite/vAe4zvY</a></td></tr><tr><td><p><span data-gb-custom-inline data-tag="emoji" data-code="1f5e3">🗣️</span> <a href="https://app.gitbook.com/s/61fllYo416R30LRxku4v/general/discord-community">Discord Community</a> Guide</p><ul><li>How to join and claim roles</li><li>Basics to navigate Discord</li><li>Resources to stay safe on Discord and report issues</li></ul></td><td><a href="broken-reference">Broken link</a></td></tr></tbody></table>
