pixelsrc 0.2.0

Pixelsrc - GenAI-native pixel art format and compiler
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<!-- Generated by scripts/generate-demos.sh -->
<!-- Do not edit manually - regenerate with: ./scripts/generate-demos.sh -->

# Spritesheet Demos

## Horizontal Spritesheet

Animation frames arranged in a horizontal strip.

<div class="demo-source">

```jsonl
{"type": "sprite", "name": "walk1", "size": [8, 8], "palette": {".": "#00000000", "x": "#4A90D9", "o": "#2D5A87"}, "grid": ["...xx...", "..xxxx..", "..xxxx..", "...xx...", "...xx...", "..x..x..", ".x....x.", "x......x"]}
{"type": "sprite", "name": "walk2", "size": [8, 8], "palette": {".": "#00000000", "x": "#4A90D9", "o": "#2D5A87"}, "grid": ["...xx...", "..xxxx..", "..xxxx..", "...xx...", "...xx...", "..xxxx..", "..x..x..", "..x..x.."]}
{"type": "sprite", "name": "walk3", "size": [8, 8], "palette": {".": "#00000000", "x": "#4A90D9", "o": "#2D5A87"}, "grid": ["...xx...", "..xxxx..", "..xxxx..", "...xx...", "...xx...", "..xxxx..", ".x....x.", "x......x"]}
{"type": "sprite", "name": "walk4", "size": [8, 8], "palette": {".": "#00000000", "x": "#4A90D9", "o": "#2D5A87"}, "grid": ["...xx...", "..xxxx..", "..xxxx..", "...xx...", "...xx...", "..x..x..", "..x..x..", "..x..x.."]}
{"type": "animation", "name": "walk_cycle", "fps": 8, "frames": ["walk1", "walk2", "walk3", "walk4"]}
```

</div>

<div class="demo-container" data-demo="horizontal">
</div>

## Grid Layout Spritesheet

Animation frames arranged in a grid (multiple rows and columns).

<div class="demo-source">

```jsonl
{"type": "sprite", "name": "coin1", "size": [6, 6], "palette": {".": "#00000000", "y": "#FFD700", "o": "#B8860B"}, "grid": ["..yy..", ".yyyy.", "yyyyyy", "yyyyyy", ".yyyy.", "..yy.."]}
{"type": "sprite", "name": "coin2", "size": [6, 6], "palette": {".": "#00000000", "y": "#FFD700", "o": "#B8860B"}, "grid": ["..oo..", ".oooo.", "oooooo", "oooooo", ".oooo.", "..oo.."]}
{"type": "sprite", "name": "coin3", "size": [6, 6], "palette": {".": "#00000000", "y": "#FFD700", "o": "#B8860B"}, "grid": ["..yy..", ".yooy.", "yooooy", "yooooy", ".yooy.", "..yy.."]}
{"type": "sprite", "name": "coin4", "size": [6, 6], "palette": {".": "#00000000", "o": "#B8860B", "Y": "#FFEC8B"}, "grid": ["..oo..", ".oYYo.", "oYYYYo", "oYYYYo", ".oYYo.", "..oo.."]}
{"type": "sprite", "name": "coin5", "size": [6, 6], "palette": {".": "#00000000", "y": "#FFD700", "o": "#B8860B"}, "grid": ["..yy..", ".yyyy.", "yyyyyy", "yyyyyy", ".yyyy.", "..yy.."]}
{"type": "sprite", "name": "coin6", "size": [6, 6], "palette": {".": "#00000000", "y": "#FFD700", "o": "#B8860B"}, "grid": ["..oo..", ".oooo.", "oooooo", "oooooo", ".oooo.", "..oo.."]}
{"type": "animation", "name": "coin_spin", "fps": 10, "frames": ["coin1", "coin2", "coin3", "coin4", "coin5", "coin6"]}
```

</div>

<div class="demo-container" data-demo="grid">
</div>

## Spritesheet with Varying Frame Sizes

Frames of different sizes are padded to match the largest.

<div class="demo-source">

```jsonl
{"type": "sprite", "name": "grow1", "size": [4, 4], "palette": {".": "#00000000", "g": "#228B22"}, "grid": ["....", ".gg.", ".gg.", "...."]}
{"type": "sprite", "name": "grow2", "size": [6, 6], "palette": {".": "#00000000", "g": "#228B22", "G": "#32CD32"}, "grid": ["......", ".gGGg.", ".GGGG.", ".GGGG.", ".gGGg.", "......"]}
{"type": "sprite", "name": "grow3", "size": [8, 8], "palette": {".": "#00000000", "g": "#228B22", "G": "#32CD32", "L": "#7CFC00"}, "grid": ["........", ".gGLLGg.", ".GLLLLg.", ".LLLLLL.", ".LLLLLL.", ".GLLLLg.", ".gGLLGg.", "........"]}
{"type": "sprite", "name": "grow4", "size": [10, 10], "palette": {".": "#00000000", "g": "#228B22", "G": "#32CD32", "L": "#7CFC00", "Y": "#ADFF2F"}, "grid": ["..........", ".gGLYYLGg.", ".GLYYYYLg.", ".LYYYYYLL.", ".YYYYYYYY.", ".YYYYYYYY.", ".LYYYYYLL.", ".GLYYYYLg.", ".gGLYYLGg.", ".........."]}
{"type": "animation", "name": "plant_grow", "fps": 4, "frames": ["grow1", "grow2", "grow3", "grow4"]}
```

</div>

<div class="demo-container" data-demo="padding">
</div>