Pixelbolt 如何在瀏覽器免費製作供 Godot 4 使用的像素藝術火焰動畫

Written with AI help (Claude), checked against the project's docs. Pixelbolt is made by our small lab, so we're not neutral; the measurements below come from a run on 27 October 2026 with Pixelbolt 0.9.1 (from npm) and Godot 4.6.3.

You want a looping campfire in your Godot game, you'd rather not hand-animate two dozen frames, and you'd like to change how it burns. Here's one way that's free and runs in a browser: open a ready fire recipe in Pixelbolt's playground, tweak a couple of numbers, export a sprite sheet, and slice it in Godot as a plain grid.

The campfire recipe, unchanged, rendered by pixelbolt gif at 8× on a dark background.

What you get

From the campfire recipe, unchanged:

• The animation: 32 × 48 pixels, 24 frames of 70 ms each (1.68 s), looping, 9 colours on a transparent background.
• The sprite sheet: 256 × 144 pixels, 8 columns × 3 rows of 32 × 48 cells with no padding. The PNG is 3,375 bytes.
• The atlas JSON: a TexturePacker-style hash with every frame's rectangle and its 70 ms duration, plus the animation's name, order and loop flag.

The flames come from a small simulation of heat and smoke, not from hand-drawn frames, and a recipe renders to the same pixels every time.

Step 1: open the campfire recipe

Open the campfire in the Pixelbolt playground. It's the same button as on the fire guide. The link carries the whole recipe and names Pixelbolt 0.9.1; the playground renders it in your browser, with nothing to install and no account.

Step 2: change how it burns

The recipe is JSON. The fire's settings sit under effects → campfire, and the preview renders again after each edit. If the JSON breaks, the playground says what's wrong, usually with the line number. The guide's suggestions:

What one change did in our run: the guide says to lower cooling for taller flames. Pixelbolt's compile report gives the fire's bounding box for every frame. Averaged over the 24 frames, it was 23.8 px tall at the default 0.24, 24.9 px at 0.16 (hardly a change) and 28.6 px at 0.08 (clearly taller). At 0.08 the gas stays hot as it rises, so the grey smoke turns into red wisps. Change it in bigger steps than you'd expect, and watch the smoke.

The torch recipe works the same way. For a blue torch, change the hex values of r, o, y and W in its palette (coolest to hottest). We used #1d3f8f, #2f7de1, #7cc8ff and #e8f8ff, and it rendered as a blue flame.

Step 3: export a sheet Godot can slice

Download Atlas PNG + JSON (or just Sheet PNG). Sheets come at the art's own size, one pixel per pixel, whatever scale you pick for the GIF and frame PNG. For a bigger sheet, add "sheet": { "scale": 4 } at the top level of the recipe (whole numbers from 1 to 16), or keep it small and scale it in Godot with nearest-neighbour filtering.

For Godot's grid slicing, Pixelbolt's game integration notes say: keep the default untrimmed layout and set sheet.padding to 0. The campfire's sheet already has no padding: 256 = 8 × 32 and 144 = 3 × 48.

The same from the command line

With Node.js 20 or newer, save the recipe (the playground's Recipe JSON button saves campfire.fluid.json, or take the one in the 0.9.1 package) and run:

npx -y pixelbolt@0.9.1 compile campfire.fluid.json --out campfire.json
npx -y pixelbolt@0.9.1 gif campfire.json --scale 4 --out campfire.gif
npx -y pixelbolt@0.9.1 render campfire.json --out campfire

compile runs the simulation and writes an ordinary recipe of frames. gif writes the animation. render writes a folder with the sheet (campfire.png), its atlas (campfire.atlas.json), every frame as its own PNG, an animated PNG, CSS classes, a small canvas player, a preview page and the recipe. Pixelbolt won't overwrite existing files unless you add --force.

In our run (Windows 11, Node 24), each npx command took 2.0 to 2.6 seconds, mostly npx starting up; the compile itself took about a third of a second. render wrote 32 files. The 4× GIF is 128 × 192 pixels and 22,385 bytes. The playground's GIF and atlas JSON came out byte-identical to the command line's, and its sheet PNG has the same pixels (it's a little bigger because the playground embeds the recipe in every PNG it exports, so you can drop the file back on the page and keep editing).

Step 4: play it in Godot 4

1. Copy campfire.png into your project.
2. For crisp pixels, set Project Settings → Rendering → Textures → Canvas Textures → Default Texture Filter to Nearest (or set Texture → Filter to Nearest on the node).
3. Add an AnimatedSprite2D. In the Inspector, set Sprite Frames to a New SpriteFrames and open it.
4. Click Add frames from sprite sheet, pick campfire.png, set Horizontal to 8 and Vertical to 3, select all 24 cells and add them.
5. Set the animation's speed to 14.29 FPS (1000 ÷ 70 ms), turn Loop on, and turn on Autoplay on load.

What we checked: in Godot 4.6.3 we imported the sheet headless and built the same SpriteFrames from a short script that reads the atlas JSON: 24 frames at 14.2857 FPS, loop on. Every rectangle in the atlas matched the 8 × 3 grid, and an AnimatedSprite2D played frames 0 to 23, then looped back to 0 (28 frame changes in 2 seconds). We didn't click through the editor steps above or take a screenshot in Godot; they're Godot's standard SpriteFrames steps for the same grid.

Limits

• No Godot export. Pixelbolt writes PNGs and a TexturePacker-style JSON. Godot doesn't read that JSON, so you enter the grid, the speed and the loop yourself. The files never state an FPS: divide 1000 by the frame time in milliseconds.
• Uneven frame times and padding. The guide's hand-drawn flame plays its 4 frames for 80 to 120 ms each, and its sheet has 1 px of padding. Set the recipe's sheet padding to 0 before you export, then use each frame's duration from the JSON (in Godot, a frame's duration is a multiplier of the animation speed), or import the separate frame PNGs instead.
• Size. A recipe is capped at 256 × 256 pixels and 256 frames.
• GIFs. Pixels under 50% opacity become fully transparent, and frame delays are rounded to 10 ms. The PNG sheet keeps full alpha, so use the sheet in the game and the GIF for devlogs.
• The playground needs a recent browser (JavaScript, module workers and CompressionStream) and loads the engine from jsDelivr. The Atlas PNG + JSON button downloads two files; if your browser keeps only one, the page shows links to both for two minutes.
• What we tested: Godot 4.6.3, headless, with the campfire. Not Godot 3, not the editor's clicks, and not the torch in Godot. Pixelbolt's own notes say engine integration "should be checked in your target engine", and that's fair advice.

If you'd rather not make your own

Our Elemental FX pack has 27 effects made with Pixelbolt (elemental powers, impacts, fire, smoke, goo, lava and magic), each with its sheet, atlas JSON and a Godot 4 SpriteFrames file you set on an AnimatedSprite2D. It's $4.99 or more, or $3.49 in itch.io's Halloween Sale until 4 November, 18:00 UTC.

Links

• Pixelbolt on GitHub (MIT): https://github.com/skulitom/Pixelbolt
• The six effect guides (fire, explosions, smoke, water, slime and magic): https://skulitom.github.io/Pixelbolt/guides/
• The playground: https://skulitom.github.io/Pixelbolt/playground/