# packages/core/src/features/sprites/formats/aseprite.ts
This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/features/sprites/formats/aseprite.ts#L5).

[Back to reference](/reference/functions/sprite-sheets/)

<pre class="api-source"><code><span id="L1"><a href="#L1" aria-label="Line 1">1</a> import type { SpriteSheetFormat, SpriteFrameData, SpriteAnimationFrameData } from '../model.js';</span>
<span id="L2"><a href="#L2" aria-label="Line 2">2</a> /** Import Aseprite JSON hash or array exports, including frame tags and millisecond timing. See {@link SpriteSheetFormat}.</span>
<span id="L3"><a href="#L3" aria-label="Line 3">3</a>  * @returns An explicit atlas metadata adapter.</span>
<span id="L4"><a href="#L4" aria-label="Line 4">4</a>  */</span>
<span id="L5"><a href="#L5" aria-label="Line 5">5</a> export function aseprite(): SpriteSheetFormat {</span>
<span id="L6"><a href="#L6" aria-label="Line 6">6</a>   return { parse(data: unknown) {</span>
<span id="L7"><a href="#L7" aria-label="Line 7">7</a>     const value = data as { frames: Record&lt;string, Entry&gt; | Entry[]; meta: { image: string; frameTags?: { name: string; from: number; to: number; direction?: string }[] } };</span>
<span id="L8"><a href="#L8" aria-label="Line 8">8</a>     if (!value?.frames || typeof value.meta?.image !== 'string') throw new TypeError('Expected Aseprite frames and meta.image.');</span>
<span id="L9"><a href="#L9" aria-label="Line 9">9</a>     const entries = Array.isArray(value.frames) ? value.frames.map((entry, index) =&gt; [entry.filename ?? String(index), entry] as const) : Object.entries(value.frames);</span>
<span id="L10"><a href="#L10" aria-label="Line 10">10</a>     const frames: SpriteFrameData[] = entries.map(([name, entry]) =&gt; ({ name, rect: { x: entry.frame.x, y: entry.frame.y, width: entry.frame.w, height: entry.frame.h }, sourceSize: entry.sourceSize &amp;&amp; { width: entry.sourceSize.w, height: entry.sourceSize.h }, trim: entry.spriteSourceSize &amp;&amp; { x: entry.spriteSourceSize.x, y: entry.spriteSourceSize.y }, rotated: entry.rotated }));</span>
<span id="L11"><a href="#L11" aria-label="Line 11">11</a>     const animations: Record&lt;string, SpriteAnimationFrameData[]&gt; = Object.create(null);</span>
<span id="L12"><a href="#L12" aria-label="Line 12">12</a>     for (const tag of value.meta.frameTags ?? []) {</span>
<span id="L13"><a href="#L13" aria-label="Line 13">13</a>       if (!Number.isInteger(tag.from) || !Number.isInteger(tag.to) || tag.from &lt; 0 || tag.to &lt; tag.from || tag.to &gt;= entries.length) throw new RangeError(`Invalid Aseprite tag: ${tag.name}`);</span>
<span id="L14"><a href="#L14" aria-label="Line 14">14</a>       let selected = entries.slice(tag.from, tag.to + 1);</span>
<span id="L15"><a href="#L15" aria-label="Line 15">15</a>       const direction = tag.direction ?? 'forward';</span>
<span id="L16"><a href="#L16" aria-label="Line 16">16</a>       if (!['forward', 'reverse', 'pingpong', 'pingpong_reverse'].includes(direction)) throw new Error(`Unsupported Aseprite direction: ${direction}`);</span>
<span id="L17"><a href="#L17" aria-label="Line 17">17</a>       if (direction === 'reverse' || direction === 'pingpong_reverse') selected.reverse();</span>
<span id="L18"><a href="#L18" aria-label="Line 18">18</a>       if (direction.startsWith('pingpong')) selected = [...selected, ...selected.slice(1, -1).reverse()];</span>
<span id="L19"><a href="#L19" aria-label="Line 19">19</a>       animations[tag.name] = selected.map(([frame, entry]) =&gt; ({ frame, duration: entry.duration }));</span>
<span id="L20"><a href="#L20" aria-label="Line 20">20</a>     }</span>
<span id="L21"><a href="#L21" aria-label="Line 21">21</a>     return { images: [value.meta.image], frames, animations };</span>
<span id="L22"><a href="#L22" aria-label="Line 22">22</a>   } };</span>
<span id="L23"><a href="#L23" aria-label="Line 23">23</a> }</span>
<span id="L24"><a href="#L24" aria-label="Line 24">24</a> interface Entry {</span>
<span id="L25"><a href="#L25" aria-label="Line 25">25</a>   filename?: string;</span>
<span id="L26"><a href="#L26" aria-label="Line 26">26</a>   frame: { x: number; y: number; w: number; h: number };</span>
<span id="L27"><a href="#L27" aria-label="Line 27">27</a>   rotated?: boolean;</span>
<span id="L28"><a href="#L28" aria-label="Line 28">28</a>   sourceSize?: { w: number; h: number };</span>
<span id="L29"><a href="#L29" aria-label="Line 29">29</a>   spriteSourceSize?: { x: number; y: number };</span>
<span id="L30"><a href="#L30" aria-label="Line 30">30</a>   duration: number;</span>
<span id="L31"><a href="#L31" aria-label="Line 31">31</a> }</span>
<span id="L32"><a href="#L32" aria-label="Line 32">32</a> </span></code></pre>

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.
