wowpedia
Main Menu


Summary

Resources

Texture Slicing

A new texture slicing system has been implemented that allows a single Texture object to render a grid of nine sub-textures without distortion at the corners. The edges and central fill of the rendered texture can be configured to either tile or stretch across their respective dimensions.

This system is recommended to be used in new code going forward as a replacement for both the deprecated Backdrop system and the script-based NineSlice panel layout utility. One of the advantages of this new system is that it only requires a single texture object to render the grid, whereas both the old systems required nine separate objects. This system is fully compatible with custom texture assets and does not require the use of atlases.

To use this system from Lua the TextureBase:SetTextureSliceMargins method should be called to specify the pixel margins that represent the edges of the underlying asset. The TextureBase:SetTextureSliceMode method controls whether or not the central portion of the texture and its surrounding edges will be tiled or stretched, with the default being stretched. The below example demonstrates the usage of these APIs.

local SliceDemo = CreateFrame("Frame", nil, UIParent);
SliceDemo:SetPoint("CENTER");
SliceDemo:SetSize(256, 256);
SliceDemo:SetResizable(true);

SliceDemo.Texture = SliceDemo:CreateTexture();
SliceDemo.Texture:SetTexture([[interface/soulbinds/soulbindsconduitpendinganimationmask]])
SliceDemo.Texture:SetTextureSliceMargins(24, 24, 24, 24);
SliceDemo.Texture:SetTextureSliceMode(Enum.UITextureSliceMode.Tiled);
SliceDemo.Texture:SetAllPoints(SliceDemo);
SliceDemo.Texture:SetVertexColor(0, 1, 0);

SliceDemo.ResizeButton = CreateFrame("Button", nil, SliceDemo, "PanelResizeButtonTemplate");
SliceDemo.ResizeButton:SetPoint("BOTTOMRIGHT");
SliceDemo.ResizeButton:Init(SliceDemo, 64, 64, 512, 512);

The following new elements in XML can be supplied when defining a Texture object to configure this functionality.

<Texture file="interface/soulbinds/soulbindsconduitpendinganimationmask">
    <TextureSliceMargins left="24" right="24" top="24" bottom="24"/>
    <TextureSliceMode mode="Tiled"/>  <!-- Can be "Tiled" or "Stretched" -->
</Texture>

References