> For the complete documentation index, see [llms.txt](https://varndean-game-dev.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://varndean-game-dev.gitbook.io/home/level-2/pixel-art-animated-environment-elements.md).

# Pixel Art: Animated Environment Elements

### Draw an animation in the pixel art tool

####

#### Step 1: Create a new sprite

1. Open the pixel art tool in your browser.
2. Create a new sprite.
3. Set the **canvas size** (for example **32 by 32** for the flag).
4. Check the **background is transparent**. A checkerboard pattern usually means transparent.

####

#### Step 2: Choose your palette

1. Pick **4 to 6 colours** only.
2. Include a **dark outline colour** (not pure black), a **main colour**, a **shadow**, and a **highlight**.
3. Use the **same palette** for every asset in your set so they look like they belong together.

> **Tip:** save your palette or write the colour codes in a note, so your torch, bush and flag all match.

####

#### Step 3: Draw frame 1

1. Zoom in so you can see each pixel clearly.
2. Use the **pen** (pencil) tool to draw the first frame.
3. Draw the **shape first** (the silhouette), then add colour and detail.
4. Keep the outline clean, with no stray pixels.

####

#### Step 4: Add the next frames

1. Click **Add new frame** or **Duplicate frame**. Duplicating is usually best, because you only change a few pixels.
2. Turn on **onion skinning**. You will see a faint ghost of the previous frame to compare.
3. Change a few pixels to make the movement.
4. Repeat until you have 4 to 8 frames.

####

#### Step 5: Check the loop

1. Look at the **preview** panel.
2. Set the **speed** (frames per second) to a slow value such as **6 to 8**.
3. Watch it repeat. Look for a **jump** when frame 4 goes back to frame 1. If you see one, edit the last frame so it flows into the first.

#### Frame ideas

**Flag (4 frames)**

| Frame | What to draw                                   |
| ----- | ---------------------------------------------- |
| 1     | The cloth almost flat, hanging slightly        |
| 2     | A small wave starts near the pole              |
| 3     | The wave moves along the cloth                 |
| 4     | The tip lifts, ready to flow back into frame 1 |

**Torch (4 to 6 frames)**

| Frame        | What to draw                       |
| ------------ | ---------------------------------- |
| 1            | Medium flame                       |
| 2            | Tall flame, leaning slightly left  |
| 3            | Short, wide flame                  |
| 4            | Tall flame, leaning slightly right |
| 5 (optional) | A tiny spark above the flame       |

**Bush (4 frames)**

| Frame | What to draw                                     |
| ----- | ------------------------------------------------ |
| 1     | Resting shape                                    |
| 2     | Leaves lean 1 pixel right                        |
| 3     | Back to rest, with the top leaves slightly lower |
| 4     | Leaves lean 1 pixel left                         |

#### Common drawing mistakes

| Problem                                | Fix                                                                      |
| -------------------------------------- | ------------------------------------------------------------------------ |
| The loop jumps                         | Make the last frame lead into the first                                  |
| It flickers wildly                     | Change fewer pixels between frames and slow the speed                    |
| It jitters on screen                   | Keep the canvas and the base of the object in the same place every frame |
| Colours do not match your other assets | Use your saved palette                                                   |

### Export as a sprite strip

A **sprite strip** (or sprite sheet) is a single PNG with all frames side by side in one row.

####

#### Step 1: Save your project

1. Save the project file (for example a `.piskel` file) so you can edit it later.
2. Put it in your own folder with a clear name.

####

#### Step 2: Export the PNG

1. Click **Export**.
2. Choose the **PNG** option (sprite sheet).
3. Set the number of **columns** to the same number as your **frames**, so you get **one horizontal row**.
4. Make sure the **scale is 1x** (do not enlarge it here).
5. Download the PNG.

#### Step 3: Name the file

Use a clear, consistent name with no spaces.

| Good                   | Poor                      |
| ---------------------- | ------------------------- |
| `flag_idle_strip.png`  | `Untitled sprite (3).png` |
| `torch_idle_strip.png` | `new.png`                 |
| `bush_sway_strip.png`  | `final2.png`              |

#### Step 4: Check the file

1. Open the PNG on your computer.
2. Check that **all frames are in a single row**, the **background is transparent**, and the **frame sizes are equal**.
3. Note the **frame count** (you will need it in Construct 3).

> **Keep your files tidy:** put the strips in an `Animations` folder inside your project folder.

### Import into Construct 3

####

#### Step 1: Check your project settings first

Do this **before** you add any sprites.

| Setting                                 | Set it to   | Why                               |
| --------------------------------------- | ----------- | --------------------------------- |
| **Sampling** (project properties)       | **Nearest** | Pixels stay sharp, not blurry     |
| **Pixel rounding** (project properties) | **On**      | Stops shimmering when things move |

> Find these in **Project Properties** (click the project in the Project Bar). The names and places may vary slightly in your version.

####

#### Step 2: Add a Sprite object

1. Double-click an empty space in the **layout** to insert a new object.
2. Choose **Sprite** and name it clearly (for example `Flag`, `Torch`, `Bush`).
3. Click in the layout to place it. The **Animation editor** opens.

####

#### Step 3: Import your sprite strip

1. In the Animation editor, find the **frames** area.
2. Right-click and choose **Import frames** (or drag your PNG file in). For a sprite strip, choose the **sprite strip** option.
3. Enter the **number of frames** across (for example **4**) and **1** down.
4. Click **OK**. You should see all your frames in the frame list.

####

#### Step 4: Check the frames

1. Click through the frames one at a time.
2. Make sure **no frame is cut off** and **no frame is repeated**.
3. If something looks wrong, delete the frames and import again with the correct number.

####

#### Step 5: Set the animation properties

1. Click the **animation name** (usually `Default`) in the animations list.
2. In the **Properties** bar, set:

| Property      | Set it to                                                |
| ------------- | -------------------------------------------------------- |
| **Name**      | `Idle` (or something clear)                              |
| **Speed**     | Your frames per second (for example **8**)               |
| **Loop**      | **On**                                                   |
| **Ping pong** | Off (unless you want it to play forwards then backwards) |

3. Close the editor.
4. **Run the layout.** Your animation should loop.

####

#### Step 6: Set the origin

The **origin** is the point the sprite is positioned and rotated around.

1. Open the **image points** editor in the Animation editor.
2. Set the **origin** to the **base** of the object: the bottom middle for a bush, the bottom of the pole for a flag, the bottom of the torch handle.
3. Apply it to **all frames**.

> **Why it matters:** if the origin changes between frames, the sprite jitters.

####

#### Step 7: Turn off collisions

Decoration should never block the player.

1. Select the Sprite object in the Project Bar.
2. In the **Properties** bar, set **Collisions** to **Disabled**.

####

#### Step 8: Choose a layer

1. Open the **Layers** panel.
2. Put background decoration (such as a bush behind the player) on the **Background** layer.
3. Put assets the player passes in front of or behind on the correct layer, using the layer order to decide what is in front.

### Troubleshooting

| Problem                                                   | Likely cause                                | Fix                                                        |
| --------------------------------------------------------- | ------------------------------------------- | ---------------------------------------------------------- |
| Frames look cut off or repeated                           | Wrong frame count on import                 | Delete the frames and import again with the correct number |
| Pixels look blurry                                        | Sampling is not Nearest                     | Set **Sampling** to **Nearest** in project properties      |
| Sprite shimmers when it moves                             | Pixel rounding is off                       | Turn **Pixel rounding** on                                 |
| Animation is too fast or too slow                         | Speed value                                 | Change the animation **Speed** (try 6 to 10)               |
| Animation does not play                                   | Loop is off, or the speed is 0              | Check the animation properties                             |
| It jumps at the loop point                                | The last frame does not lead into the first | Go back to the pixel tool and edit the last frame          |
| The sprite jitters                                        | Frame sizes or origins differ               | Keep the canvas the same and set the origin on all frames  |
| All torches flicker together                              | They all start on frame 0                   | Add the random start frame event                           |
| Player gets stuck on a bush                               | Collisions are enabled                      | Set **Collisions** to **Disabled**                         |
| Sprite is in front of the player when it should be behind | Wrong layer                                 | Move it to a lower layer                                   |
| Background looks white instead of transparent             | The export had a solid background           | Re-export with a transparent background                    |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://varndean-game-dev.gitbook.io/home/level-2/pixel-art-animated-environment-elements.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.