Print

[Jezz_X]

ZINDEX

Zorder was introduced in the last few build of UnleashX and is a great tool to make some really fancy skins that wouldn't of been possible with older versions of unleashX, due to images being layered in the same way they where layed out in the skin.xml file.

Now with Zorder we have the ability to place any image/text on top of any other Image or text as well.   Making it possible to get some nice glass over effects and other cool stuff.

The Zorder of an object is basically it layout on the Z axis of 3d object.  Think of it this way
( X = the horizontal of the TV  Left to right )
( Y = the Vertical of the TV Top to Bottom )
( Z = the depth of the TV Back to Front )

------------------------------------------------------------------------------------------------

Here is a sample including some code that could be used in a skin.xml to get a nice effect
Notice I color coded the zindex numbers so you can see what gets put on the same layer

QUOTE

<BackGround>Video_Background.wmv</BackGround>

<Image Left="25" Top="162" zIndex="3">Menu_Buttons.png</Image>
<Image Left="535" Top="58" zIndex="3">Headphone_Icon.png</Image>
<Image Left="535" Top="355" zIndex="3">HardDisk_Icon.png</Image>    
<Image Left="0" Top="0" zIndex="2">Overlay_Layer.png</Image>
<Image zIndex="1" Source="GamePreview"/>

The <BackGround> tag will always get drawn on the absolute bottem of the skin and you cannot raise it at all with zIndex.
Things with higher zIndex will be drawn ontop of things with lower zIndex,  In the example above  Overlay_Layer.png will be drawn on top of GamePreview

Here is a nice image to show you how the Layers are set up
(IMG:http://i13.photobucket.com/albums/a273/Jezz_X/Misc_Tuts/zindextut.jpg)

The end result of which will give you an image on the screen that looks somthing like this when they are all layed out together (because the game preview one isn't shown (No Preview for selected item) you can see the background video behind the main overlay)
(IMG:http://i13.photobucket.com/albums/a273/Jezz_X/Misc_Tuts/Final_No_Preview.jpg)

Now when you have a game with a preview video in it because the preview video has a zIndex of 1 it wil be displayed above the background video because the background is always on the bottom,  Yet it will be displayed below the Overlay_Layer.png because it has a higher zIndex of 2 giveing me a nice line effect over the Preview video like so
(IMG:http://i13.photobucket.com/albums/a273/Jezz_X/Misc_Tuts/Final_Preview.jpg)

Note the items Menu_Buttons, Headphone_Icon and HardDisk_Icon get displayed above everything because they have the highest zIndex

I'm pretty sure that there is no limit to the amount of zIndex you can have but just remember the more you put into a skin the longer it takes to load due to UnleashX having to calculate it all out.  You really shouldn't need more than 5 layers anyway so it should be good.


------------------------------------------------------------------------------------------------

You can also use zIndex on text Items to make sure they stay ontop (or under if you like) of the other layers that you have made
EXAMPLE

QUOTE

<Text Top="82" Left="310" Align="Right" Width="220" Scroll="0" Color="0xFFFFFFFF" zIndex="4" Source="SoundTrack"></Text>

would keep the text above any of the above images.   But it may also be usefull to make it lower than some images to get somthing like a glass effect over the text.

[XBNormUK]

Nicely put Jezz, great to see some skinners putting in some time to get these things out.

I had recently came across the z index thing tbh, and its fairly simple but great for getting the overlays and stuff and kicking out some decent looks, but I still really struggle with the audio, im still just modifying existing buttons cos I cant seem to get them set right. Grrr!

When I do the images for the active or selected buttons, should I just divide the canvas into squares, and then remove the dividing lines at the end before exporting the image? Is there a set size or space that needs to between each button?

Thanx again for the post, like i say its all 360 this 360 that these days, nice to see some live threads for this trusty old thing!!    

Norm

[Jezz_X]

Actually media player skinning tut and font libraries and scalling was the next on the tutorial agenda for me =)
but until then look at these threads

By unleashX when it was introduced

http://forums.xbox-scene.com/index.php?showtopic=382746

and by me to help out neverwill

http://forums.xbox-scene.com/index.php?s=&...dpost&p=3063261

This post has been edited by Jezz_X: Feb 23 2006, 11:11 PM

[XBNormUK]

Hey Jezz thats great, I am busy as hell at the moment so wont be knocking any new skins up for a while, but I have a few WIP that I may finish and knock out and then try and put together some nice polished original ones from scratch with my newfound knowledge!!  

Thanx again for your time, as always when it comes to skins,  you the man!!!      

Norm

Oh yeah, as for font libraries, I kinda put my own together but I suspect I did it the long way, I just picked out all the font files from all my skins, and took a screenshot of them displayed in the file manager as a preview of them. Im sure there is a more accurate and quicker way so I wait with interest...