As shown here about half way down:
http://www.cegui.org.uk/wiki/index.php/ ... _-_Part_II
This is all specified in a frame component like this:
Code: Select all
<FrameComponent>
<Area>
<Dim type="LeftEdge">
<AbsoluteDim value="0" />
</Dim>
<Dim type="TopEdge">
<AbsoluteDim value="0" />
</Dim>
<Dim type="RightEdge">
<UnifiedDim scale="1" offset="0" type="RightEdge" />
</Dim>
<Dim type="BottomEdge">
<UnifiedDim scale="1" offset="0" type="BottomEdge" />
</Dim>
</Area>
<Image type="TopLeftCorner" imageset="MyImages" image="EditboxTL" />
<Image type="TopEdge" imageset="MyImages" image="EditboxT" />
<Image type="TopRightCorner" imageset="MyImages" image="EditboxTR" />
<Image type="RightEdge" imageset="MyImages" image="EditboxR" />
<Image type="BottomRightCorner" imageset="MyImages" image="EditboxBR" />
<Image type="BottomEdge" imageset="MyImages" image="EditboxB" />
<Image type="BottomLeftCorner" imageset="MyImages" image="EditboxBL" />
<Image type="LeftEdge" imageset="MyImages" image="EditboxL" />
<Image type="Background" imageset="MyImages" image="EditboxBg" />
<VertFormat type="Stretched" />
<HorzFormat type="Stretched" />
</FrameComponent>By default the images referenced in T,L,B,R are stretched. So normally you would want a single colour pixel or slice that gives you a simple streched edge. If you want something a little more fancy it would be nice to be able to tile the T,L,B,R edges instead of stretching. That way you could use larger image elements and get a nice patterned edge.
So the question is how do you do that?
I was thinking there would be something like this available:
Code: Select all
<Image type="TopEdge" imageset="MyImages" image="EditboxT" vertFormat="Tiled" horzFormat="Tiled" /> but didn't find any mention in the wiki or from scanning the source.
So now I'm thinking only the background of a window supports tiling and stretching. So if that's true then maybe I need to do it via the looknfeel.
1. create 4 new entries in the imageset that exactly match the old TLBR dimensions, but are on a totally transparent part of the texture. This keeps your frame corners lined up nicely.
Code: Select all
<Image Name="WindowLeftEdge" XPos="322" YPos="18" Width="18" Height="4" />
<Image Name="WindowRightEdge" XPos="341" YPos="18" Width="19" Height="4" />
<Image Name="WindowTopEdge" XPos="340" YPos="0" Width="4" Height="18" />
<Image Name="WindowBottomEdge" XPos="340" YPos="19" Width="4" Height="21" />
<Image Name="EmptyTop" XPos="330" YPos="42" Width="4" Height="18" />
<Image Name="EmptyBottom" XPos="330" YPos="42" Width="4" Height="21" />
<Image Name="EmptyLeft" XPos="330" YPos="42" Width="18" Height="4" />
<Image Name="EmptyRight" XPos="330" YPos="42" Width="19" Height="4" />
2. set the T,L,B,R elements of the frame to use this image. The result being the T,L,B,R elements disappear.
Code: Select all
<ImagerySection name="notitle_frame">
<FrameComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
<Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
</Area>
<Image type="TopEdge" imageset="TaharezLook" image="EmptyTop" />
<Image type="TopLeftCorner" imageset="TaharezLook" image="WindowTopLeft" />
<Image type="TopRightCorner" imageset="TaharezLook" image="WindowTopRight" />
<Image type="BottomLeftCorner" imageset="TaharezLook" image="WindowBottomLeft" />
<Image type="BottomRightCorner" imageset="TaharezLook" image="WindowBottomRight" />
<Image type="LeftEdge" imageset="TaharezLook" image="EmptyLeft" />
<Image type="RightEdge" imageset="TaharezLook" image="EmptyRight" />
<Image type="BottomEdge" imageset="TaharezLook" image="EmptyBottom" />
<Image type="Background" imageset="TaharezLook" image="ClientBrush" />
<VertFormat type="Tiled" />
<HorzFormat type="Tiled" />
</FrameComponent>
</ImagerySection>
3. add 4 new layers to my frames StateImagery. So I still the usual frame section first, but I'm adding the T,L,B,R images back in myself.
Code: Select all
<StateImagery name="ActiveNoTitleWithFrame">
<Layer>
<Section section="notitle_frame" />
</Layer>
<Layer>
<Section section="top_middle" />
</Layer>
<Layer>
<Section section="bottom_middle" />
</Layer>
<Layer>
<Section section="left_middle" />
</Layer>
<Layer>
<Section section="right_middle" />
</Layer>
</StateImagery>
4. specify 4 new imagery sections that match the T,L,B,R images and tile as I want. This is just the first.
Code: Select all
<ImagerySection name="top_middle">
<ImageryComponent>
<Area>
<Dim type="LeftEdge" >
<AbsoluteDim value="0" >
<DimOperator op="Add">
<ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" />
</DimOperator>
</AbsoluteDim >
</Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" /></Dim>
<Dim type="Width" >
<UnifiedDim scale="1" type="Width" >
<DimOperator op="Subtract">
<ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Width" >
<DimOperator op="Add">
<ImageDim imageset="TaharezLook" image="WindowTopRight" dimension="Width" />
</DimOperator>
</ImageDim>
</DimOperator>
</UnifiedDim >
</Dim>
<Dim type="Height" ><ImageDim imageset="TaharezLook" image="WindowTopLeft" dimension="Height" /></Dim>
</Area>
<Image imageset="TaharezLook" image="WindowTopEdge" />
<VertFormat type="Stretched" />
<HorzFormat type="Tiled" />
</ImageryComponent>
</ImagerySection>
I hacked a quick test looknfeel together and it seems to work, but I just want to check this is the correct way to go about it. I'm hoping I've just missed the parameters needed to specify the tiling directly. If nothing else I've learned a lot about looknfeels
