Textured GUI skin

[loonychewy]

Thought I'll just share a quick peep of what I'm doing recently:

(Note: Please go to the link below for the screenshot)

That's a GUI skin using an external texture. The texture coordinates are specified in a xml file. The skin I'm using here was created from scratch using photoshop.

It is still incomplete, but I think I'll clean up what I have of the code and post it somewhere in a few days time, for comments and testing.

Download (23 Jan):
Here's the link to my site, or you can download the file directly.

Edit (28 Apr 2008):
Updated the links to alpha 0.4

Edit (21 Dec 2007):
Updated the links to alpha 0.3 for Irrlicht 1.4

Edit (30 May 2007):
Updated the links

[afecelis]

very cool stuff! How are you achieving it? Any plans to share?

[Halan]

NICE

Acki could keep this in mind for his IrrExtensions

[RapchikProgrammer]

Awesome work dude, really looking forward to the code release!

[loonychewy]

I've cleaned up the code. You can find the links to it at the end of my first post.

Note that there's still a couple of uncompleted stuffs like tab button/body, etc that I'm still working on. I'll be glad to get comments, bug reports and patches if anyone have any.

[bitplane]

very nice!
some comments-

I'm planning to make IGUISkin inherit IAttributeExchangingObject, so that skins can be saved to disk along with the gui environment in the future. I'll try to keep your skin in mind when I do this, but the xml loading might not be required (since skin data can be loaded using Rect and Texture attributes).

I don't think you should do removeTexture(), in case some materials use the same texture. also, since you are holding a pointer to the texture, you should call pSkinTexture->grab() when you load it and pSkinTexture->drop() when you are finished, so if someone else clears the texture cache your pointer will not be invalid.

since I'm planning on making changes to skins, is there anything you think is missing from the IGUISkin (sizes, colours, functions, etc) which you will need?

Another thing I've been considering is making a 'GUISpriteBank' or something which holds textures, rectangles, and entities containing information about animations. The bitmap fonts, list box icons, buttons, checkboxes, skins etc could all use animated images by drawing themselves with this new class.. this is just a thought at the moment, so don't worry yet!

[loonychewy]

very nice!
some comments-

Thanks

I don't think you should do removeTexture(), in case some materials use the same texture. also, since you are holding a pointer to the texture, you should call pSkinTexture->grab() when you load it and pSkinTexture->drop() when you are finished, so if someone else clears the texture cache your pointer will not be invalid.

Yup, will fix this. I was assuming that textures are handled another way...

since I'm planning on making changes to skins, is there anything you think is missing from the IGUISkin (sizes, colours, functions, etc) which you will need?

The only immediate request is to use IGUISkin to draw Checkbox, so that I can give its own appearance as well.

There are still some things, but I haven't give them enough thoughts about whether and how they should be implemented. Examples are
1) mouse hover states (for buttons), (IGUIEnvironment issue)
2) greater flexibility for the skin to render GUI elements (eg override the menu highlighting in my sample program),
3) GUI element boundaries test using image alpha for mouse hits (if I click outside a corner of my rounded button, the button is still depressed because it is inside the bounding rectangle) (IGUIEnvironment issue)
4) Some other enhancements for the entire GUI subsystem...

Another thing I've been considering is making a 'GUISpriteBank' or something which holds textures, rectangles, and entities containing information about animations. The bitmap fonts, list box icons, buttons, checkboxes, skins etc could all use animated images by drawing themselves with this new class.. this is just a thought at the moment, so don't worry yet!

Animated GUIs will be cool! This will put Irrlicht GUI above level 70!

[JPulham]

this can DEFIANTLY go in my project. It makes the irrlicht GUI system a lot more game friendly I think. good work

[loonychewy]

Added in tab control, as well as check box. Download link in the first post.

Note that check box drawing is done by check box itself, not by IGUISkin, hence, I added in a check in the skin to detect if the sunken pane is a check box, and draw it if so. Not a very clean way, and the default tick will be shown, but I think that's the best I can do short of changing the default way of drawing check box.

[sudi]

hey loonychewy
how do u stretch the images before drawing them? i don't get it even after looking at the code. I try to do this for my own skinclass because when using a button image it will not strecht it....
by the way it looks really awesome!!!! good job

[zenaku]

I dunno if you want to look at it, but I made an alternative GUI skin implementation for irrlicht a long time ago. It uses textures too and also supports animations. It has since been rolled up into the IrrLua project and can be found in the IrrLua/src/AnimatedSpriteSkin folder. The code is not Lua specific and will work with a stock Irrlicht application. If you want to see it I have some screenshots stuffed inappropriately into my old sourceforge project "http://buzzloader.sourceforge.net".

[BlindSide]

Wow zenaku and loonychewy both of these are amazing

Zenaku can you make your thing into an independant project? That AeroGlass look tasty

[loonychewy]

Sudi:
I use IVideoDriver::draw2DImage (ITexture*, const rect<s32> &destRect, const rect<s32> &sourceRect, const rect<s32>, SColor, bool), where parameter destRect specifies the destination coordinates, and sourceRect specifies the source (texture's) coordinates. The image is automatically stretched is the rects are different in size.

zenaku:
Didn't know you had done this before, hope I'm not duplicating your effort. Anyway, nice work! I like the animations too! Since your implementation is using scene nodes, it could possibly be extended to do 3D effects such as Vista's Flip3D or Xgl's wobbly windows, etc.
Maybe bitplane can take a look at your implementation since he mentioned he's considering animation too.

[BlindSide]

loonychewy, for ease of use is there not a function that gets the dimensions of a texture automatically?

[loonychewy]

BlindSide, as ITexture doesn't provide the texture dimension, the only way I'm aware of is to load the texture file as an IImage, and then use IImage::getDimension(). But I'm not so sure what's the ease of use you're trying to achieve. Would you mind elaborating?