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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

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

# render Demos

## Basic Render Command

Render a single sprite to PNG using `pxl render input.jsonl`.

<div class="demo-source">

```jsonl
{"type": "sprite", "name": "square", "size": [3, 3], "palette": {"{_}": "#00000000", "{r}": "#FF0000"}, "grid": ["{r}{r}{r}", "{r}{_}{r}", "{r}{r}{r}"]}
```

</div>

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

## Scaled Render Output

Render with integer scaling using `pxl render input.jsonl --scale 4`.

<div class="demo-source">

```jsonl
{"type": "sprite", "name": "scalable", "size": [3, 3], "palette": {".": "#00000000", "x": "#4A90D9", "o": "#E74C3C"}, "grid": ["xox", "oxo", "xox"]}
```

</div>

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

## Spritesheet Render

Render animation as spritesheet using `pxl render input.jsonl --spritesheet`.

<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="spritesheet">
</div>

## Render with Named Palette

Render sprite that references a named palette definition.

<div class="demo-source">

```jsonl
{"type": "palette", "name": "retro", "colors": {"{_}": "#00000000", "{bg}": "#1a1c2c", "{fg}": "#f4f4f4", "{accent}": "#ffcd75"}}
{"type": "sprite", "name": "icon", "palette": "retro", "grid": ["{bg}{fg}{bg}", "{fg}{accent}{fg}", "{bg}{fg}{bg}"]}
```

</div>

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

## Render with Inline Palette

Render sprite with palette defined inline in the sprite object.

<div class="demo-source">

```jsonl
{"type": "sprite", "name": "heart", "palette": {"{_}": "#00000000", "{r}": "#e43b44", "{p}": "#f77622"}, "grid": ["{_}{r}{_}{r}{_}", "{r}{p}{r}{p}{r}", "{r}{p}{p}{p}{r}", "{_}{r}{p}{r}{_}", "{_}{_}{r}{_}{_}"]}
```

</div>

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