Animated Image GUI Skins

Announce new projects or updates of Irrlicht Engine related tools, games, and applications.
Also check the Wiki
zenaku
Posts: 212
Joined: Tue Jun 07, 2005 11:23 pm

Animated Image GUI Skins

Post 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.
dhenton9000
Posts: 395
Joined: Fri Apr 08, 2005 8:46 pm

Post by dhenton9000 »

very cool, would love to learn about skinning the GUI!!
Mike
Posts: 17
Joined: Wed Dec 14, 2005 6:42 pm

Post by Mike »

Great hack!
sRc
Posts: 431
Joined: Thu Jul 28, 2005 1:44 am
Location: Salt Lake City, Utah
Contact:

Post 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 >_> <_<
The Bard sRc

Blog | Twitter
sRc
Posts: 431
Joined: Thu Jul 28, 2005 1:44 am
Location: Salt Lake City, Utah
Contact:

Post by sRc »

ooh the screenshot has been updated since i looked last :shock: nice!
The Bard sRc

Blog | Twitter
coolsummer
Posts: 24
Joined: Fri Nov 04, 2005 1:44 pm
Location: Grafenwoehr, Germany

Post by coolsummer »

looks great.
Flux

Post by Flux »

great stuff! :D
i hope you share the code when done! :D

btw, how did you get those image button element thingy?
does irrlicht got that implemented now?
i haven't seen it anywhere in irrlicht.. :roll:
zenaku
Posts: 212
Joined: Tue Jun 07, 2005 11:23 pm

Post by zenaku »

Flux wrote:great stuff! :D
i hope you share the code when done! :D

btw, how did you get those image button element thingy?
does irrlicht got that implemented now?
i haven't seen it anywhere in irrlicht.. :roll:

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.
coolsummer
Posts: 24
Joined: Fri Nov 04, 2005 1:44 pm
Location: Grafenwoehr, Germany

Post by coolsummer »

pressed image is actually 8 frames of animation
Sounds good.
Any chance that it will run on Irrlicht .Net?

Andi
Flux

Post 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! :D

Sorry for my bad toilet flushing English.. :P
Guest

Post by Guest »

i hope a tutorial or code can come of this...
Guest

Post by Guest »

Any news on this one?
i'm really excited to see the result of this! :D

btw, you can use rapidshare, or something similar, for a temporary storage.. :wink:
zenaku
Posts: 212
Joined: Tue Jun 07, 2005 11:23 pm

Version 0.1 released

Post by zenaku »

Ok, I've fixed the 3D problem.

Screenshots:

"Aero Glass"
"Bubbly Blue"


Here it is:

AnimatedGUISkins.zip
dhenton9000
Posts: 395
Joined: Fri Apr 08, 2005 8:46 pm

Post 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!!!
Guest

Post by Guest »

This is great! :D
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! :D
i'd love to see more stuff added to it!
more pic frames if possible...?
and animated out when the element looses focus.. ?
Post Reply