Skip to content

feat(rendering): add nine-slice support for sprites#520

Open
stormmuller wants to merge 2 commits into
devfrom
claude/github-issue-471-1onprj
Open

feat(rendering): add nine-slice support for sprites#520
stormmuller wants to merge 2 commits into
devfrom
claude/github-issue-471-1onprj

Conversation

@stormmuller

Copy link
Copy Markdown
Member

Summary

Closes #471.

  • Adds NineSliceOptions (left/right/top/bottom border insets, plus independent edgeMode/centerMode of 'stretch' (default) or 'tile') as an optional slices field on SpriteEcsComponent, and as an option on createImageSprite.
  • computeNineSliceRegions is a new pure utility that turns a sprite's current size/pivot/UV rect + NineSliceOptions into up to nine region descriptors (four fixed-size corners, four stretch/tile edges, one stretch/tile center), correctly clamping oversized borders and anchoring UV fractions to a nativeWidth/nativeHeight reference so resizing a sliced sprite never distorts its corners.
  • createRenderEcsSystem expands a sliced sprite into one RenderCommand per region (still batched into a single instanced draw call alongside every other sprite sharing the same Renderable) instead of writing a new shader/geometry path — the existing generic sprite shader already supports arbitrary per-instance size/position/UV, so no shader or geometry changes were needed. Region offsets correctly compose with the entity's rotation, scale, and flip.
  • 'tile' uses "round" repeat semantics (evenly-sized tiles, no cropped partial tile at the seam), the same tradeoff as CSS's border-image-repeat: round.

Note on SpriteOptions

The issue links to the SpriteOptions API page (src/rendering/sprite.ts's Sprite class). That class predates the ECS component-factory refactor and has zero references anywhere in src, the demos, or the docs — the actual render pipeline (createRenderEcsSystem) only ever reads SpriteEcsComponent. This PR adds slicing to the live SpriteEcsComponent/createImageSprite path instead of extending the dead Sprite class.

Test plan

  • npm run check-types
  • npm test (989 tests, including new unit tests for computeNineSliceRegions and new createRenderEcsSystem nine-slice cases)
  • npm run lint
  • npm run cspell
  • npm run check-exports
  • Added a "Nine-Slice Sprites" doc page under documentation-site/docs/docs/rendering
  • documentation-site: npm run build + npm run typecheck pass; loaded the ecs and stress-test demos in a browser to confirm no rendering regression (both demos don't use slicing yet, but exercise the same createRenderEcsSystem code path)

Generated by Claude Code

claude added 2 commits July 21, 2026 22:01
Adds `NineSliceOptions` (border insets plus stretch/tile modes for
edges and center) to `SpriteEcsComponent` and `createImageSprite`. The
render system expands a sliced sprite into up to nine batched render
commands instead of one, reusing the existing sprite shader and
Renderable unchanged, so corner artwork keeps its size while the
edges/center stretch or tile as the sprite is resized.

Closes #471.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add support for n-slicing sprites

2 participants