How to set the drawing order of ImageBox widgets?

scrawl

20-05-2012 17:27:37

Hello, I'm making a little map window with MyGUI. The map consists of 3x3 pre-rendered textures of the gameworld from above. So I've made a window that contains a ScrollView which contains a 3x3 grid of ImageBox widgets. So far, so good. But I also want to display a button on top of the map and an arrow that indicates the player location. And the problem is that I can't find a way to display the button and the arrow on top of the map widgets, they always appear underneath. For the button it kinda works, but only the text is visible, the part of the button skin that is made of ImageBoxes still appears underneath.

So I suppose that the ordering of ImageBox widgets is somehow different than regular widgets? Is this a bug or am I doing something wrong? The only reliable way I have found to display an ImageBox on top of another ImageBox, is to create it as a child of the first widget. However that doesn't serve my purpose because then the player arrow would be "cut off" where one map texture ends and the next one starts, see this image:



MyGUI Version: 3.2.0

This is the used layout and skin:


<MyGUI type="Layout">
<Widget type="Window" skin="MW_Window_Pinnable" layer="Windows" position="0 0 300 300" name="_Main">

<Widget type="ScrollView" skin="MW_MapView" position="0 0 284 264" align="ALIGN_STRETCH" name="LocalMap">
<Property key="CanvasSize" value="1536 1536"/>

<!-- 3x3 maps, 1024x1024 each, but we will downsample to 512 to antialias them -->
<Widget type="ImageBox" skin="ImageBox" position="0 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_0_0">
<Widget type="ImageBox" skin="ImageBox" position="0 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_0_0_fog"/>
</Widget>

<Widget type="ImageBox" skin="ImageBox" position="512 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_1_0">
<Widget type="ImageBox" skin="ImageBox" position="0 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_1_0_fog"/>
</Widget>

<Widget type="ImageBox" skin="ImageBox" position="1024 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_2_0">
<Widget type="ImageBox" skin="ImageBox" position="0 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_2_0_fog"/>
</Widget>

<Widget type="ImageBox" skin="ImageBox" position="0 512 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_0_1">
<Widget type="ImageBox" skin="ImageBox" position="0 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_0_1_fog"/>
</Widget>

<Widget type="ImageBox" skin="ImageBox" position="512 512 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_1_1">
<Widget type="ImageBox" skin="ImageBox" position="0 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_1_1_fog">
<!-- Player arrow -->
<Widget type="ImageBox" skin="RotatingSkin" position="0 0 32 32" align="ALIGN_TOP ALIGN_LEFT" name="Compass">
<Property key="ImageTexture" value="textures\compass.dds"/>
</Widget>
</Widget>
</Widget>

<Widget type="ImageBox" skin="ImageBox" position="1024 512 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_2_1">
<Widget type="ImageBox" skin="ImageBox" position="0 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_2_1_fog"/>
</Widget>

<Widget type="ImageBox" skin="ImageBox" position="0 1024 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_0_2">
<Widget type="ImageBox" skin="ImageBox" position="0 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_0_2_fog"/>
</Widget>

<Widget type="ImageBox" skin="ImageBox" position="512 1024 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_1_2">
<Widget type="ImageBox" skin="ImageBox" position="0 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_1_2_fog"/>
</Widget>

<Widget type="ImageBox" skin="ImageBox" position="1024 1024 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_2_2">
<Widget type="ImageBox" skin="ImageBox" position="0 0 512 512" align="ALIGN_TOP ALIGN_LEFT" name="Map_2_2_fog"/>
</Widget>

<Widget type="Button" skin="" position="0 0 1536 1536" name="EventBox" align="ALIGN_STRETCH"/>
</Widget>

<!-- World button -->
<Widget type="Button" skin="MW_Button" position="213 233 61 22" align="ALIGN_BOTTOM ALIGN_RIGHT" name="WorldButton"/>

</Widget>
</MyGUI>



<?xml version="1.0" encoding="UTF-8"?>

<MyGUI type="Skin">
<Skin name="MW_MapView" size="516 516" texture="mwgui.png">
<Child type="Widget" skin="" offset="0 0 516 516" align="Stretch" name="Client"/>

<!-- invisible scroll bars, needed for setting the view offset -->
<Child type="ScrollBar" skin="" offset="498 3 14 509" align="ALIGN_RIGHT ALIGN_VSTRETCH" name="VScroll"/>
<Child type="ScrollBar" skin="" offset="3 498 489 14" align="ALIGN_BOTTOM ALIGN_HSTRETCH" name="HScroll"/>
</Skin>
</MyGUI>


Button skin:

<!-- Button graphics -->
<Skin name="BTN_Top" size="128 4" texture="textures\menu_button_frame_top.dds">
<BasisSkin type="MainSkin" offset = "0 0 128 4">
<State name="normal" offset = "0 0 128 4"/>
</BasisSkin>
</Skin>
<Skin name="BTN_Bottom" size="128 4" texture="textures\menu_button_frame_bottom.dds">
<BasisSkin type="MainSkin" offset = "0 0 128 4">
<State name="normal" offset = "0 0 128 4"/>
</BasisSkin>
</Skin>
<Skin name="BTN_Left" size="4 16" texture="textures\menu_button_frame_left.dds">
<BasisSkin type="MainSkin" offset = "0 0 4 16">
<State name="normal" offset = "0 0 4 16"/>
</BasisSkin>
</Skin>
<Skin name="BTN_Right" size="4 16" texture="textures\menu_button_frame_right.dds">
<BasisSkin type="MainSkin" offset = "0 0 4 16">
<State name="normal" offset = "0 0 4 16"/>
</BasisSkin>
</Skin>
<Skin name="BTN_TopLeft" size="4 4" texture="textures\menu_button_frame_top_left_corner.dds">
<BasisSkin type="MainSkin" offset = "0 0 4 4">
<State name="normal" offset = "0 0 4 4"/>
</BasisSkin>
</Skin>
<Skin name="BTN_TopRight" size="4 4" texture="textures\menu_button_frame_top_right_corner.dds">
<BasisSkin type="MainSkin" offset = "0 0 4 4">
<State name="normal" offset = "0 0 4 4"/>
</BasisSkin>
</Skin>
<Skin name="BTN_BottomLeft" size="4 4" texture="textures\menu_button_frame_bottom_left_corner.dds">
<BasisSkin type="MainSkin" offset = "0 0 4 4">
<State name="normal" offset = "0 0 4 4"/>
</BasisSkin>
</Skin>
<Skin name="BTN_BottomRight" size="4 4" texture="textures\menu_button_frame_bottom_right_corner.dds">
<BasisSkin type="MainSkin" offset = "0 0 4 4">
<State name="normal" offset = "0 0 4 4"/>
</BasisSkin>
</Skin>

<Skin name="MW_Button" size="136 24">
<Property key="FontName" value = "Default"/>
<Property key="TextAlign" value = "ALIGN_CENTER" />

<Child type="Widget" skin="BTN_Left" offset="0 4 4 16" align="ALIGN_VSTRETCH ALIGN_LEFT"/>
<Child type="Widget" skin="BTN_Right" offset="132 4 4 16" align="ALIGN_VSTRETCH ALIGN_RIGHT"/>
<Child type="Widget" skin="BTN_Top" offset="4 0 128 4" align="ALIGN_HSTRETCH ALIGN_TOP"/>
<Child type="Widget" skin="BTN_Bottom" offset="4 20 128 4" align="ALIGN_HSTRETCH ALIGN_BOTTOM"/>
<Child type="Widget" skin="BTN_TopLeft" offset="0 0 4 4" align="ALIGN_TOP ALIGN_LEFT"/>
<Child type="Widget" skin="BTN_TopRight" offset="132 0 4 4" align="ALIGN_TOP ALIGN_RIGHT"/>
<Child type="Widget" skin="BTN_BottomLeft" offset="0 20 4 4" align="ALIGN_BOTTOM ALIGN_LEFT"/>
<Child type="Widget" skin="BTN_BottomRight" offset="132 20 4 4" align="ALIGN_BOTTOM ALIGN_RIGHT"/>

<BasisSkin type="SimpleText" offset="4 4 128 16" align="ALIGN_STRETCH">
<State name="disabled" colour="0.5 0.5 0.5" shift="0"/>
<State name="normal" colour="0.75 0.6 0.35" shift="0"/>
<State name="highlighted" colour="0.85 0.76 0.60" shift="0"/>
<State name="pushed" colour="1 1 1" shift="0"/>
<State name="disabled_checked" colour="0.33 0.38 0.67" shift="0"/>
<State name="normal_checked" colour="0.33 0.38 0.67" shift="0"/>
<State name="highlighted_checked" colour="0.33 0.38 0.67" shift="0"/>
<State name="pushed_checked" colour="0.33 0.38 0.67" shift="0"/>
</BasisSkin>
</Skin>

jsding

25-05-2012 07:37:44

I have the same problem. If I invoke "setItemResource", "setImageTexture", the ImageBox always on top of other widgets. Look foward.

scrawl

25-05-2012 09:59:30

That's interesting. Does that mean if I could set the order of the widgets by the order of my "setImageTexture" calls in the code?

scrawl

26-05-2012 20:07:25

Just tried your solution and it works! For me this is solved then, it's an acceptable workaround. Still, it's inconsistent with other widgets and should be fixed in MyGUI.