hearth-art

Art and sound in Hearth

This skill covers making the game look and sound real — sourcing, importing, and using assets correctly. Where tiles get painted (tilemaps, autotile binding) is the hearth-build skill; layered-sound design and juice are hearth-feel; the operating loop (snapshot → change → validate → playtest) is the core hearth skill.

Assets: import, slice, animate, sound

hearth import asset ./art/walk-sheet.png --name walk-sheet --json
hearth import asset ./art/tileset/ --recursive --json          # atomic batch; check data.skipped
hearth create asset sprite hero --shape rectangle --color "#f4a460" --width 24 --height 24
hearth create asset slice walk-sheet --frame-size 16x16 --prefix walk --json
hearth create asset anim-from-sheet walk-cycle --sheet walk-sheet --frames walk_0,walk_1,walk_2,walk_3 --duration 0.12 --json
hearth create animation blink --frames sprite-a sprite-b --frame-duration 0.4    # multi-file flipbook
hearth create sound pickup --preset coin                       # presets: coin jump hit laser powerup explosion blip

Procedural sprites/sounds make a game playable and audible before real art exists. Fonts: import a .ttf/.otf/.woff and reference it from Text.fontFamily by the asset's name verbatim. Music is a separate channel — set AudioSource.music:true, autoplay:true for a soundtrack that survives scene switches. Full pipeline: docs/assets.md.

Never stretch pixel art — tile or slice it

A SpriteRenderer fills its width×height box one of three ways, set by renderMode (default stretch):

• stretch — scales one texture to the box. Only correct when the box keeps the texture's own aspect ratio at a whole-number scale (e.g. an 18×18 tile at 18×18, 36×36, 54×54). Any other size distorts the art — a smear.
• tile — repeats the texture at its native pixel size to fill the box. This is how a wide platform/floor/wall built from one small tile should render: connected tiles, no smear. hearth set "Level 1" Ground SpriteRenderer.renderMode tile.
• sliced — 9-slice: slice insets ({top,right,bottom,left} px) keep the corners un-stretched while edges/center scale. For panels, bars, and platforms with distinct end-caps.