Page 1 of 2
Animated Image GUI Skins
Posted: Tue Jan 17, 2006 9:27 pm
by zenaku
I've taken a break on IrrLua and have been hacking around with the GUI skin stuff. Here's what I've got so far:
http://sourceforge.net/project/screensh ... _id=131788
Almost all of the GUI elements can be skinned with animated images w00t
In the real thing, the lightning flickers, and the menubar shimmers. Sorry I don't have an animated screen shot.
I'll probably have a 0.1 version in a week or so to release.
Posted: Tue Jan 17, 2006 9:43 pm
by dhenton9000
very cool, would love to learn about skinning the GUI!!
Posted: Wed Jan 18, 2006 4:48 pm
by Mike
Great hack!
Posted: Wed Jan 18, 2006 4:59 pm
by sRc
dhenton9000 wrote:very cool, would love to learn about skinning the GUI!!
me too. i tried looking at it last friday or something but I got lost trying to figure out where even the defualt skins were created >_> <_<
Posted: Thu Jan 19, 2006 3:47 am
by sRc
ooh the screenshot has been updated since i looked last
nice!
Posted: Thu Jan 19, 2006 7:28 am
by coolsummer
looks great.
Posted: Fri Jan 20, 2006 5:07 am
by Flux
great stuff!
i hope you share the code when done!
btw, how did you get those image button element thingy?
does irrlicht got that implemented now?
i haven't seen it anywhere in irrlicht..
Posted: Fri Jan 20, 2006 5:41 am
by zenaku
Flux wrote:great stuff!
i hope you share the code when done!
btw, how did you get those image button element thingy?
does irrlicht got that implemented now?
i haven't seen it anywhere in irrlicht..
Yeah Irrlicht has the ability to put images on the button. ( IGUIButton->setImage() ).
I didn't want to use that though. For one thing, you can't set an image for the scrollbar buttons.
By using the skin, all the buttons can have images and all the images can be animated. Normally, when you press a button, there is a normal image, and a pressed image, which is only two frames of animation. With this skin, when you press a button, there is the normal image, and then the pressed image is actually 8 frames of animation. It looks a lot nicer when pressing the button. It feels more like they are being pushed.
I started using
Emil Halim's TAnimatedSpriteSceneNode to do the actual sprite drawing and image scaling, but his code doesn't work when rendering anything in 3d mode along side the 2d stuff. In otherwords as soon as you do:
scm->addCameraSceneNode()
scm->addTestSceneNode()
the skin becomes broken
. Unfortunately that makes the GUI pretty useless, IMO. It looks good, but you ONLY get GUI.
I've started rewriting the drawing code so that it doesn't use the TAnimatedSpriteSceneNode. Things look good, but I still have a bit of work to do.
I plan on releasing my code and button images for free (public domain) as soon as i get it working in 3d mode. The background images of the windows are not mine, however.
Speaking of releasing, where should I release this stuff? I had a hard time just finding a place to put the screenshot, which I ended up stuffing into an old orphaned project of mine.
Posted: Fri Jan 20, 2006 8:56 am
by coolsummer
pressed image is actually 8 frames of animation
Sounds good.
Any chance that it will run on Irrlicht .Net?
Andi
Posted: Fri Jan 20, 2006 10:45 am
by Flux
yes, i know about the IGUIButton->setImage() option..
but that has to be rect doesen't it?
kind of an Overlay to the default button..
what i meant was, f.ex a button with only a image that can have any shape
and transparent sides.
i hope you manage to fix the 2D/3D problem!
Looking forward to see how your animated skin will become!
Sorry for my bad toilet flushing English..
Posted: Sat Jan 21, 2006 5:25 am
by Guest
i hope a tutorial or code can come of this...
Posted: Wed Jan 25, 2006 12:41 am
by Guest
Any news on this one?
i'm really excited to see the result of this!
btw, you can use rapidshare, or something similar, for a temporary storage..
Version 0.1 released
Posted: Wed Jan 25, 2006 2:20 am
by zenaku
Ok, I've fixed the 3D problem.
Screenshots:
"Aero Glass"
"Bubbly Blue"
Here it is:
AnimatedGUISkins.zip
Posted: Wed Jan 25, 2006 7:38 pm
by dhenton9000
This is incredible!
I thought I was going to learn something useful that I could apply to developing my own image based buttons, but instead you did all the work!!!
I've been looking at UI's of games and wanting the custom look use see in commerical games with the ease of use of Irrlichts GUIs, this set of classes does it all.
Thanks so much for your work on this!!!
Posted: Wed Jan 25, 2006 11:21 pm
by Guest
This is great!
i found one bug(?), if i try to resize the window then the top of the child windows is weird.. (dunno how to explain it)
But great work man!
i'd love to see more stuff added to it!
more pic frames if possible...?
and animated out when the element looses focus.. ?