excaliburjs / Excalibur / 27523952990

89%

push

github

fix: update NineSlice rendering logic and add visual test images #3777 (#3782)

# Fix NineSliceStretch.Tile clipping behavior

## Description

Fixes issue #3777 where `NineSliceStretch.Tile` mode was squashing partial tiles instead of clipping them to fit the destination space properly.

## Problem

When using `NineSliceStretch.Tile` mode, the last partial tile would be distorted to fit the remaining space rather than being clipped. This behavior did not match the documented behavior: "takes input slice and paints it across the entirety of the output dimensions in a repeating texture fashion that will not distort the source image at all, but may not fit properly in the destination space, leaving a potentially partial drawing of the texture remaining."

**Expected behavior:** Tiles should repeat without distortion, with partial tiles at edges being clipped.
**Actual behavior:** Partial tiles were being stretched/squashed to fit the space.

## Solution

Modified the `_drawTile` method in `src/engine/graphics/nine-slice.ts` to properly apply clipping when drawing tiled sections. When `NineSliceStretch.Tile` is used, the source dimensions (`srcW` and `srcH`) now correctly reflect the calculated `tempSize` instead of always using the full `targetCanvas` dimensions.

The fix ensures that:
- When horizontally tiling, the source width uses `tempSize` for horizontal calculations
- When vertically tiling, the source height uses `tempSize` for vertical calculations
- This allows the canvas clipping to properly handle partial tiles at the edges

## Testing

Verified with checkerboard pattern tiling to confirm tiles are no longer distorted when they don't fit evenly into the destination space.  

## Related Issues

Closes #3777

6754 of 8926 branches covered (75.67%)

4 of 4 new or added lines in 1 file covered. (100.0%)

15350 of 17345 relevant lines covered (88.5%)

24343.35 hits per line