Print

[BenJeremy]

For those interested in complex skinning (you out there, Weavus?), I'm starting this thread to discuss the best way to do the complex skinning. Currently, my design will also allow the source code to be used for other projects as well.

Anyway, here's what I've put down so far:


Notes on Complex Skinning:
XMl files will define two primary things:

Resources and Layouts.

Resources are those items which can be used globally in the skin, and are defined exactly once.
Once Images are defined, they can be used anywhere images are defined in layouts, in use as masks,
backgrounds, etc.

Resources:
Fonts
 Defined by an XPR file.
Images
 Any image file  

Layouts will consist of images, text, and special fields.

Images will have several attributes, including Mask Image, AlphaEnable, and AlphaColor. Sources can
include fixed (skin directory based), local (such as screenshots), and generated.




I plan on creating a fairly generic skin renderer, which could be used on other things as
well (such as a media player, dashboard, or game interface).


Fonts and masks must be defined as resources.


Here's an example of a partial skin definition xml file:

QUOTE

<Skin> <Resources>  <Font Name="Font16">   <File>Font16.xpr</File>  </Font> <Image Name="ShotMask">  <File>Mask1.jpg</File> </Image> </Resources> <Layouts> <Layout Name="Menu">  <LayoutElement Type=Image>   <Source>Fixed</Source>   <File>MenuBack.jpg</File>  </LayoutElement>  <LayoutElement Type=Image>   <Source>Local</Source>   <Tag>CoverShot</Tag>   <AutoBasename>MXM_COVER</AutoBasename>   <Location>40,50</Location>   <Size>200,300</Size>  </LayoutElement>  <LayoutElement Type=Image>   <Source>Local</Source>   <Tag>ScreenShot1</Tag>   <AutoBasename>MXM_SS1</AutoBasename>   <Location>240,250</Location>   <Size>64,64</Size>   <Mask>ShotMask</Mask>  </LayoutElement>  <LayoutElement Type=Image>   <Source>Local</Source>   <Tag>ScreenShot2</Tag>   <AutoBasename>MXM_SS2</AutoBasename>   <Location>340,250</Location>   <Size>64,64</Size>   <Mask>ShotMask</Mask>  </LayoutElement>  <LayoutElement Type=TextBox>   <Source>Local</Source>   <Tag>LongDescr</Tag>   <Location>240,50</Location>   <Size>200,175</Size>   <Justify>Center</Justify>   <Font>Font16</Font>   <Color>0xffffffff</Color>   <Shadow>0x80000000</Shadow>  </LayoutElement Type=MenuChoice>   <Font>Font16</Font>   <Location>100,350</Location>   <Size>450,50</Size>   <Resize>KeepAspect</Resize>   <NumChoices>1</NumChoices>   <Orientation>LeftRight</Orientation>   <Color>0xffffffff</Color>   <Shadow>0x80000000</Shadow>  <LayoutElement Type=MenuArrowLeft>   <Location>50,350</Location>   <Size>50,50</Size>   <Color>0xffffffff</Color>   <Shadow>0x80000000</Shadow>  </LayoutElement>  <LayoutElement Type=MenuArrowRight>   <Location>500,350</Location>   <Size>50,50</Size>   <Color>0xffffffff</Color>   <Shadow>0x80000000</Shadow>  </LayoutElement> </Layout> </Layouts>

From a programming standpoint, "special things" like menus will be handled by the application through an inherited class or via registered callbacks. The skin class will handle resource management, up to a point.

Technically, as I've envisioned it, you'd even be able to use video files as masks, and other, more complex interactions may also be utilized (bumpmapping, for example) for cool visual effects.

At any rate, there will be a new release tonight, alas, without the complex skinning yet.

[Weavus]

You had to spoil the party with the line 'new release tonight.... without complex skinning'

I was hoping you had put in a 72 hour weekend to get this stuff all finished.

[Weavus]

It all looks very good but I think feedback is going to be hard without getting to play with it and see what works and what dosnt.

Would it be possible to alter the layout depening on if an item has a description/screenshot1/screenshot2 etc? Or is that going to be really hard?

Anyway it sounds great, cant wait to get hold of it...

[Weavus]

Are all the images for items .e.g box,screens etc still loaded by a single thread or do they each get their own thread and load simultanously?

How about an option to preload all images needed? I know the Xbox has a limited amount of RAM available but my media dir of boxcovers/screens is less than 3mb so it should be able to handle that no problem.

[BenJeremy]

QUOTE (Weavus @ Dec 16 2002, 02:27 PM)

You had to spoil the party with the line 'new release tonight.... without complex skinning' I was hoping you had put in a 72 hour weekend to get this stuff all finished.

                                    Well, I was hoping, too.... but I just got too busy with other things. I guess the wife and family expects me to crawl out of the computer room once and a while

[BenJeremy]

QUOTE (Weavus @ Dec 16 2002, 02:32 PM)

It all looks very good but I think feedback is going to be hard without getting to play with it and see what works and what dosnt. Would it be possible to alter the layout depening on if an item has a description/screenshot1/screenshot2 etc? Or is that going to be really hard? Anyway it sounds great, cant wait to get hold of it...

                                    I'll have to think on implimenting a <Conditional> tag of sorts.

Perhaps on if a text element has length, or if there's a particular image defined.

You might have seen that the layout is kind of similar to your box cover one.

As for preloading, of course, most of the stuff would be preloaded as fixed elements, but the local stuff (3MB of JPGs, can equal quite a bit once loaded, though... since the textures aren't that compressed) would, in the best case, have to utilize caching of some sort.

I had thought about your two screenshots appearing only when there was something to put in them. If I don't do the mask right away, you could probably get away with using a PNG with transparency color on top of the screenshot to mask off the little diagonal corner and provide a false shadow and 3D border. The same fixed image could be used for both, too... The we just turn off that element and the missing screenshot when it's not defined for the 'local' situation.




BTW on the next release: I made the initialization screen more 'fixed' - so no tampering with it but I now fade it into black before the title screen. It looks nicer now anyway.

[Weavus]

QUOTE (BenJeremy @ Dec 16 2002, 06:51 PM)

You might have seen that the layout is kind of similar to your box cover one. . . I had thought about your two screenshots appearing only when there was something to put in them. If I don't do the mask right away, you could probably get away with using a PNG with transparency color on top of the screenshot to mask off the little diagonal corner and provide a false shadow and 3D border. The same fixed image could be used for both, too... The we just turn off that element and the missing screenshot when it's not defined for the 'local' situation. BTW on the next release: I made the initialization screen more 'fixed' - so no tampering with it but I now fade it into black before the title screen. It looks nicer now anyway.

                                    Yeah I didnt notice that your elements matched what I wanted Did you want me to send you a copy of the skin graphics/boxshots/screenshots/ini file so you can test it out during development?

I also made a slightly more simple skin using the same design that includes square screenshots. It looks just as good but would be a hell of a lot easier to implement as you dont have to worry about any masks/shadows as they are all included in the background of the skin.

[Weavus]

QUOTE (BenJeremy @ Dec 16 2002, 06:51 PM)

BTW on the next release: I made the initialization screen more 'fixed' - so no tampering with it

                                    But thats the beauty of opensource

[BenJeremy]

QUOTE (Weavus @ Dec 16 2002, 03:29 PM)

QUOTE (BenJeremy @ Dec 16 2002, 06:51 PM) You might have seen that the layout is kind of similar to your box cover one. . . I had thought about your two screenshots appearing only when there was something to put in them. If I don't do the mask right away, you could probably get away with using a PNG with transparency color on top of the screenshot to mask off the little diagonal corner and provide a false shadow and 3D border. The same fixed image could be used for both, too... The we just turn off that element and the missing screenshot when it's not defined for the 'local' situation. BTW on the next release: I made the initialization screen more 'fixed' - so no tampering with it but I now fade it into black before the title screen. It looks nicer now anyway. Yeah I didnt notice that your elements matched what I wanted Did you want me to send you a copy of the skin graphics/boxshots/screenshots/ini file so you can test it out during development? I also made a slightly more simple skin using the same design that includes square screenshots. It looks just as good but would be a hell of a lot easier to implement as you dont have to worry about any masks/shadows as they are all included in the background of the skin.

                                    Sure, send me the files... I can work up something rough, then get you a WIP version to tweak things when I get it all up and running.

I want to do the masks because it would make for slicker looking shots...


...and yes, somebody could wipe out the nice intro screen, but I intend on one 'natural' way of doing it... command line switch. The screen is short enough, and doesn't intrude on the skins, it also allows a few things to load up without having the user stare at a blank screen or the Xbox logo.  

[217Imports]

Does anyone have a good looking skin they'd like to share. I really don't like the one it comes with and would maybe like to see what other people are doing and how so I can get some ideas for mine...

Thanks for what promises to be a very cool app

[RDJ134]

Yep good idea,It would be nice if you release a example menu so we can see how it fits together and adjust it for our own needs.(iam more some one who have to see it in order to  rebuild it)