Created page with "alt=Comparison of an image sprite stretched using bilinear and 9-slice scaling respectively. 9-slice scaling preserves border widths and corner radii where bilinear scaling does not.|thumb|Stretching an image using Bilinear (top) vs. 9-slice scaling (bottom) 9-slice scaling is a method of resizing a 2D Sprite that helps prevent distortion of borders. It does so by splitting the texture into three rows and columns and only str..." |
mNo edit summary |
||
| Line 1: | Line 1: | ||
[[File:Bilinear vs 9-slice scaling.png|alt=Comparison of an image sprite stretched using bilinear and 9-slice scaling respectively. 9-slice scaling preserves border widths and corner radii where bilinear scaling does not.|thumb|Stretching an image using Bilinear (top) vs. 9-slice scaling (bottom)]] | [[File:Bilinear vs 9-slice scaling.png|alt=Comparison of an image sprite stretched using bilinear and 9-slice scaling respectively. 9-slice scaling preserves border widths and corner radii where bilinear scaling does not.|thumb|Stretching an image using Bilinear (top) vs. 9-slice scaling (bottom)]] | ||
9-slice scaling is a method of resizing a 2D [[Sprite]] that helps prevent distortion of borders. It does so by splitting the texture into three rows and columns and only stretching | 9-slice scaling is a method of resizing a 2D [[Sprite]] that helps prevent distortion of borders. It does so by splitting the texture into three rows and columns and only stretching or repeating the middle ones while preserving the outer ones' width/height. | ||
In Resonite, these slices are configured on the [[Component:SpriteProvider|SpriteProvider]] component defining the texture sprite. The <code>Borders</code> field receives a [[Type:float4|float4]] whose XYZW components, in order, set the widths of the left, bottom, right, and top borders. Each width is set as a fraction of the sprite's size, typically in the range of <code>0</code> to <code>0.5</code>, but may exceed this range. Values outside the <code>0</code> to <code>1</code> range are handled according to the sampled [[Texture2D]]'s wrap mode settings. | In Resonite, these slices are configured on the [[Component:SpriteProvider|SpriteProvider]] component defining the texture sprite. The <code>Borders</code> field receives a [[Type:float4|float4]] whose XYZW components, in order, set the widths of the left, bottom, right, and top borders. Each width is set as a fraction of the sprite's size, typically in the range of <code>0</code> to <code>0.5</code>, but may exceed this range. Values outside the <code>0</code> to <code>1</code> range are handled according to the sampled [[Texture2D]]'s wrap mode settings. | ||
Latest revision as of 07:38, 24 July 2024
9-slice scaling is a method of resizing a 2D Sprite that helps prevent distortion of borders. It does so by splitting the texture into three rows and columns and only stretching or repeating the middle ones while preserving the outer ones' width/height.
In Resonite, these slices are configured on the SpriteProvider component defining the texture sprite. The Borders field receives a float4 whose XYZW components, in order, set the widths of the left, bottom, right, and top borders. Each width is set as a fraction of the sprite's size, typically in the range of 0 to 0.5, but may exceed this range. Values outside the 0 to 1 range are handled according to the sampled Texture2D's wrap mode settings.
Note: The texture coordinates for the inner slices are interpolated between opposite borders so if two opposite borders overlap due to their widths, any texture on the slices between them will appear flipped.
At the time of writing, the SpriteProvider has no setting to choose whether the resized slices should stretch the texture, or tile it. They always stretch.