CEGUI (Crazy Eddie's GUI) Forums

From "The Beginners Guide to Falagard skinning - Part I"
Fortunately CEGUI supports creating a Falagard skin from a custom XML format.

Oh good, he thinks to himself! This will make things quick and easy! Just modify some XML, and you're good to go. That is, afterall, what a good skinning system offers.

As I think learning by doing is the way to go, we'll try to produce something useful with this tutorial - a fully working look'n'feel for a regular button.

Sweet, my own button. I am drooling already ^_^

We'll assume we have a imageset loaded called "MyImages". And inside this imageset we have the image "ButtonBG" defined. This is the image we'll use for our button.

Go get your horse and hold it for a sec. So, in "The Beginners Guide to Falagard skinning - Part I" the assumption is being made that I already know how to use the system for skinning? In the, what I can only assume is the, most basic of basic tutorials, you are skipping out on what is one of the (arguably) most vital components to making a skin? That's not too beginner friendly

Luckily, I grasped the system by looking through all the files before starting to dive into the documentation and tutorials - and am a programmer, so I was able to figure out what and how you might do this part...

To sum up...

Wait, what? What do you mean sum up? How do I use what you just had me make? You are not done yet mister! There is little point in having anybody create something if you don't show them how to use it...which is another vital piece to a beginner's tutorial, I would think?


Alright, as you might guess, I am a little frustrated at the tutorials and documentation found in the wiki. I am having to use your CEGUI 0.4.1 in a project. What I thought should be trivial is turning out to be a bit of a headache because I cannot easily find information that appears to be taken for granted by the vast majority of people that are already neck deep into CEGUI.

My assumption from reading the tutorials/documentation/forums and my own reasoning looking at the scheme/layout/imageset files is that, at the very basics for learning to create a skin, I should be able to modify an existing one.

For instance, let's say I wanted to change every black color listed in the looknfeel to white. There is a basic learning experience through experimentation. it also happens to be very easy. What should happen, from what I gather:


Instead, I watch as...the text shows up as black. In fact, any change I make to the looknfeel seems to matter not. I delete the complete contents of the looknfeel...and it doesn't matter.

That is not what I would expect, but maybe that is completely correct! I don't know because I can't find anything to debunk my own hunch

And what are these dlls for? CEGUIWindowsLook, and others like it. I can assume they are meant to define the behavior of all these widgets, but I don't see any evidence to support my assumption. I also don't see any references to how I should create my own or if, for a basic reskin, I need to create my own.

My current questions then boil down to these: what is the minimum amount necessary to create your own skin? Was modifying the looknfeel supposed to be enough? Was I not seeing any changes because CEGUILayoutEditor is buggy and, somehow, not consulting the looknfeel files properly?

Been there, done that. It seems to be a trial & error procedure for now.

What might be the problem here is that text color values can be in many places. Perhaps the button has a text color defined in the layout file? If there is, it overrides whatever there's specified in the LookNFeel-file.

Habba wrote:Been there, done that. It seems to be a trial & error procedure for now.

What might be the problem here is that text color values can be in many places. Perhaps the button has a text color defined in the layout file? If there is, it overrides whatever there's specified in the LookNFeel-file.

I guess this is where a lot of my confusion comes from then: my intuition says that if the looknfeel files specifies every aspect of the skin - default colors, for this example - then the LayoutEditor should be using those default values when you are laying out the gui. In such a case, there would be no other colors in the layout file, since that's what you're building in the first place.

As it is now, though, the layout editor seems to completely ignore the looknfeel file, which of course results in the scenario you say - where the button has a different text color specified, for instance. But that is after the fact.

I guess my qualm is also this: the idea of making a skin should result in me being able to use the layout editor to test and develop the look of a GUI. If I have to resort to coding up an application to properly test, all is lost, so to speak, as that runs exactly backwards of what should be happening. I want a skin so that I can create GUIs. If I have to create the GUI first and then tweak the layout file to properly use the coloring/imaging of the looknfeel, then it's pointless to have the looknfeel in the first place.

In fact, now I am getting more worried and hope I am mistaken - how is the XML system a skinning system at all, beyond the very technical of technicals?

My thought, and I think it's probably what most people's thought would be, is that a skin is used thusly: 1) create layout, 2) apply skin. What this gives is that for any layout, you can apply a different skin without having to change the layout.

But if you look at a layout file, you see explicit references to which skin [looknfeel] is being used - that is, of course, when it doesn't simply put the color directly into the layout file, for instance.

That means in order to have a layout use a different skin, you must ... recreate the layout to use that skin? That's not skinning at all.

Am I totally misinterpreting something here?

LennyH wrote:That means in order to have a layout use a different skin, you must ... recreate the layout to use that skin?

Let's say you used TaharezLook to create your layout. Just open the layout file with a text editor and use "replace". Replace "TaharezLook" with [name of your skin], and it should work. Not the best way to do it, but it's version 0.5 after all...

The reason layout is tied to certain skin might be that you could mix two skins into one layout.

Habba wrote:

LennyH wrote:That means in order to have a layout use a different skin, you must ... recreate the layout to use that skin?

Let's say you used TaharezLook to create your layout. Just open the layout file with a text editor and use "replace". Replace "TaharezLook" with [name of your skin], and it should work. Not the best way to do it, but it's version 0.5 after all...

The reason layout is tied to certain skin might be that you could mix two skins into one layout.

I understand how to fix it.

The point is, there should be nothing to fix. It's not behaving like a skin.

And none of this even addresses the bigger problem that the looknfeel file apparently isn't consulted at all ?? The other issues can be worked around, but I can't use a skin if I cannot create it in the first place :p

LennyH wrote:And none of this even addresses the bigger problem that the looknfeel file apparently isn't consulted at all ?? The other issues can be worked around, but I can't use a skin if I cannot create it in the first place :p

Well, you can't make a skin solely with editors. But you can make one with a text editor. I have been working on a sking for few weeks now, and it's starting to look like something now.

Easy way to make a skin out of TaharezLook:

-Replace the images from TaharezLook.tga with your own and rename it.
-Replace all "TaharezLook" from LookNFeel, schema, imageset and layout files (I hope I didn't forgot anything) with the name of your own skin.
-Have a test run

Sure, TaharezLook isn't really the ideal skin to modify, but it will get you started. It is after all a "programmer art".

I have rewritten about 25% of the LookNFeel file now, just to get away of that awful stretch-feature.

Behold the Horizon. (I'm just the programmer there, so it's not my art)

Wow, habba!
Do you want to share your skin with us?
I'd definately want to use it for my project!

jacmoe wrote:Wow, habba!
Do you want to share your skin with us?
I'd definately want to use it for my project!

Well, there are few buts:

-I'll have to ask the artist, and he might refuse
-It's solely designed for our upcoming game, and it might be weird to see other applications with a similiar GUI
-It's not yet complete. What you see is what you get, for now. And there's lots of things to optimize (especially after 0.5 update).

The CE ImagesetEditor is very useful when creating a new image set; design your look within a TGA image and then use the Imageset Editor to "measure" the various image components.

Rackle wrote:The CE ImagesetEditor is very useful when creating a new image set; design your look within a TGA image and then use the Imageset Editor to "measure" the various image components.

I haven't tried out the latest version yet, but atleast 0.4 version was missing some crucial features, like zoom, making it rather ineffective way to make a imageset. I prefer photoshop + XML editor.

Habba wrote:Well, you can't make a skin solely with editors. But you can make one with a text editor. I have been working on a sking for few weeks now, and it's starting to look like something now.

Easy way to make a skin out of TaharezLook:

-Replace the images from TaharezLook.tga with your own and rename it.
-Replace all "TaharezLook" from LookNFeel, schema, imageset and layout files (I hope I didn't forgot anything) with the name of your own skin.
-Have a test run

Sure, TaharezLook isn't really the ideal skin to modify, but it will get you started. It is after all a "programmer art".

I have rewritten about 25% of the LookNFeel file now, just to get away of that awful stretch-feature.

Behold the Horizon. (I'm just the programmer there, so it's not my art)

Well, my issue with making the skin isn't doing it by hand...I already know that will be the case. My issue is that I can't test the skin or I can't use the CEGUILayoutEditor to build a GUI using the skin.

My whole complaint is that the looknfeel is, apparently, not consulted, and I want to know why...what step am I missing. Nobody has answered this question, and I would love to know.

I had already done what you said, about the renaming files to start a new skin. In fact, that well falls under my most basic set of tests. I found two issues with this approach:

1) The one I keep saying - after making whatever changes, I do not visibly SEE the changes. I get the feeling most people here are using code to create their layouts, windows, etc. I think that may give the desired results - but, we would like to use the XML approach. If the skinning process works via code but does not work via the XML, then I say that is faulty There is a layout tool - if it cannot work with other skins and forces the user to create the XML layout file by hand, then that editor needs to be scrapped because it's borderline useless - or, preferably, fixed, because it can be and should be a very valuable tool to anybody using CEGUI.

One way or another, I would really appreciate of somebody could answer the question Or even better, give a good "beginner's" tutorial that actually goes through all that is necessary to create a functional skin - one where I will be able to test and see the results. It doesn't need to be uber detailed; the steps could be abbreviated, for instance "create a looknfeel"...but only specific on things that are needed to be specific, such as "what is the DLL for and what is necessary to make it?" or "now that you have this looknfeel, to actually apply it in code do this: XYZ, but to use it with a pure XML approach, do this: WSA"...know what I mean?

As said - the hope is to use the XML approach; I don't see any good examples for creating skins that wind up using the XML approach. I see plenty examples on how to use CEGUI in code, why not any example for XML?

So, what am I missing?! *tears my hair out* lol

2) When I did that approach of renaming files to create my own skin [and changing all named references, etc] - what do you do about the DLL? A simple rename of that doesn't bypass the error that that module is already loaded?

As an aside, good work with that horizon skin - granted, not your art, but whoever did it, did a pretty neat job

One more comment on this whole topic.

When I started using Cegui I found it lacked some features that I deemed important. Not really knowing much about the Cegui system I nevertheless developped those features that I felt were needed and posted them in the code snippets section. This serves two purposes. First it lets others benefit from that work and secondly it helps to ease my consience; I get Cegui for free and "pay it back" by contributing some stuff.

So yes the documentation is not perfect nor is it complete. Please help others by adding to that documentation; I doubt that you are the only ones having difficulty. The worst that could happen is that you write something inaccurate. However someone will either point out what is wrong or will edit that text to fix the errors. But in the end everyone benefits. I know I will when I start making my own skin.

Indeed, I definitely like seeing user contributed material - especially when the originating site/company/etc take the interest enough to make it more of an official resource by providing an on-site location to find said information.

I think more tools, etc, should take that approach, although, it's no doubt a bit of a pain in the neck to setup sometimes :p

I know that, from user contributed material, documentation may not always be perfect, accurate, or even helpful. Like I mentioned, though, there is plenty of code around that's related to programming with CEGUI. In that regard, I have not had any problems with CEGUI, having made a few of my own classes as well as working with it in Delta3d.

But simply creating a skin...something I thought would be trivial...has a complete lack of documentation [am I blind? ]. I know I come off as aggravated, but that is because I am. I want to use it, but being stuck at a position where I can't find any information to even get started is a hard place to be.

And those that have managed to see some results aren't speaking up or clarifying :p

To get started, maybe back on track: Let's say I want to change all black colors for the WindowsLook skin/looknfeel to now be white [only talking about the colors that are set via code [xml], not the colors in the imageset's .tga file]. How would I do that?

As stated above, simply replacing in the looknfeel all references of black color with white color yields no results. Both in testing with the layout editor AND [now] with very basic code. My code simply consists of loading the appropriate scheme [windowslookskin.scheme], creating a window, and putting a button on it. The button text in the default windowslook is black. The button text in my modified version is white. I still get black. *mind boggle*

windowslookskin.scheme is from v0.4. Could some of the problems you are having be solved within v0.5? Maybe you can spend an hour on installing this newer version and performing a test.