Arrrrg the colours!!!!

[Jynks]

So the new LackeyCCG is out and man.. we need some one to make a few skins for it !! Wow that blue hey.. I have tried but I can not work out what the options relate to, when I click and change something 1/2 the time I can not tell any difference. Maybe we need some kind of key image that shows what parts of the UI are associated to witch button or something.

I loaded the "itunes" skin and I think this is eh best at the moment.. but I really can not work out the skin functions..



Can anyone tell me who to change the BLUE in the player boxes, and the Font colour as well?



Also what about these buttons? Font colour and button colour?

[Gordon228]

well all the buttons now are images you can edit

[Trevor]

First, let me acknowledge that I agree it currently looks bad. The system I put in place should be good to make the interface look good once proper assets are in place.

There are 2 things going on with the interface, images and colors. Things like text and the color of the log field are determined by colors, and those are affected by the skins settings. Things like buttons and tabs are determined by gui images, and those are the image files in "images/interface/". You can also localize those to a plugin as well.

Consider the buttons used with text on top of them, like the one with a player stat on top of it which can be seen in the picture Tragic posted.

It is made of these 15 components:
button-text-left-default.png
button-text-middle-default.png
button-text-right-default.png

button-text-left-selected.png
button-text-middle-selected.png
button-text-right-selected.png

button-text-left-inactive.png
button-text-middle-inactive.png
button-text-right-inactive.png

button-text-left-default-mouseover.png
button-text-middle-default-mouseover.png
button-text-right-default-mouseover.png

button-text-left-selected-mouseover.png
button-text-middle-selected-mouseover.png
button-text-right-selected-mouseover.png

The button is made of 3 parts, a left side, a middle, and a right side.
++
to make

And the middle section is stretched as needed to accommodate the width needed by the text.

If I replace the default 3 images with these 3:++
Then the interface will look like:


And there is a set of those 3 for each different draw state. The different draw states are:
Default
Mouseover
Selected
Inactive
Selected & Mouseover

So note that in the picture above, only the default text button was changed. The first phase of the turn button is selected, not default, so that uses the other gui images.

Some interface objects are simpler. The arrow button has only these:
button-arrow-up-default.png
button-arrow-right-default.png
button-arrow-left-default.png
button-arrow-down-default.png
button-arrow-up-default-mouseover.png
button-arrow-right-default-mouseover.png
button-arrow-left-default-mouseover.png
button-arrow-down-default-mouseover.png

The check button just has:



Regarding the blue in the box behind the player stats, that is controlled by the skins.
Those are boxes, so to change their color, select "Box" as the object type, "Normal" as the state to edit, and Body since you want to change the body color (as opposed to the border color).
Your own player box (as opposed to other players) is selected, so you would need to change that state too. So in the picture above, I changed the Selected body color to red and the default (i.e., non-selected) to blue.


To change the font color of the text on regular buttons, select "Button" as the object type, "Normal" as the state, and "Text" as the component to edit. That will only change the normal state so you might also want to change the other states as well, such as selected and mouse over.

This is a new system and I'm interested in feedback about how to make it better. I want to have a nice balance between making things powerful/versatile and making things simple/easy-to-use. There is a certain amount of complexity necessary, and I'm trying to simplify things as much as possible while still making things do what we want them to do.

[ke.]

The system is fairly decent and you can get some good results out of it.

Before:



After:



One point I would make is that the naming convention is kinda odd, it's confusing when sorted. Perhaps it should be: name-state-part-mousestate.ext

The other thing is that some images are jpgs whereas others are png — one format would be convenient.

Ke

[Trevor]

Both png and jpg are allowed. If I did one format as suggested, it would only restrict people. Png is needed for transparency, like button corners.

[Chris]

The new system offers some nice possibilities, but I have to agree that the new default looks quite horrible.
Why not change the default look to something clean and neutral looking such as Ke posted?

It would also be nice if it would be possible to switch between different set of interface elements, stored in subfolders within the images/interface folder. It would be even better is the location of the files could be referred to in the skin file, so that a skin can point to its own image files.

I've updated my GreyOrange skin with some interface elements and posted it in the Art/Skins section of the forum, if anyone is interested.

Regards,
Chris

[Trevor]

The new system offers some nice possibilities, but I have to agree that the new default looks quite horrible.
Why not change the default look to something clean and neutral looking such as Ke posted?

It would also be nice if it would be possible to switch between different set of interface elements, stored in subfolders within the images/interface folder. It would be even better is the location of the files could be referred to in the skin file, so that a skin can point to its own image files.

I've updated my GreyOrange skin with some interface elements and posted it in the Art/Skins section of the forum, if anyone is interested.

Regards,
Chris

Ya, I would like Ke to post his skin and I'll take a look at yours. One thing to note is that this is all completely subjective, so I would ideally like to get a few high quality designs, include them all, and let people vote on which should be the default.
And I definitely agree with you that things are not ideally organized now. This is somewhat cause by how things evolved. Originally, there was a skins text file which determined colors of everything, and then there was interface image components that work independently, but they really should all be grouped together in a more cohesive way, and compartmentalized to make it easier to switch from one look.

I think I will, when I get some time, make a new thing called a "scheme" or something, which works as a combination of skins and interface image components. And you could select everything all at once. It requires a bit of thinking because there's a lot of snags that aren't apparent. For example, if you want to have multiple color sets of text, but don't want to have tons of duplicates of all the image parts, that's somewhat complicated. And what I really don't want is something that makes things more complicated for the user.

[Chris]

Maybe you could implement something like the way skins were handled by WinAmp Classic, in which a skin was nothing more than a renamed .zip file with all the necessary images and text files in it.
Or perhaps you could organize each skin in its own folder (containing the images and text file) and have users select a folder to use.

If multiple text color schemes are available in one skin, I think the maker of the skin should take care only to include text colors that work well with the image files in the skin. That way no other images are necessary. The one I made is only about 170kb so I don't think that having duplicates is that much of a problem. (As long as you don't include too many different skins in the installer package by default.)

I don't think my GreyOrange skin would work very well as a default look, because it is not neutral enough. If you'd like I'd be happy to put something together which is somewhat more toned down though.

[ke.]

Ya, I would like Ke to post his skin and I'll take a look at yours. One thing to note is that this is all completely subjective, so I would ideally like to get a few high quality designs, include them all, and let people vote on which should be the default.

Skin available here (it's too big to attach) ? I'll post it the the other forum also.

Currently it's designed to be pixel perfect, ie. non-retina. I can post a high def version if required ? but I prefer the pixel accuracy (Lackeys scaling introduces some oddities).

[Trevor]

Ya, I would like Ke to post his skin and I'll take a look at yours. One thing to note is that this is all completely subjective, so I would ideally like to get a few high quality designs, include them all, and let people vote on which should be the default.

Skin available here (it's too big to attach) ? I'll post it the the other forum also.

Currently it's designed to be pixel perfect, ie. non-retina. I can post a high def version if required ? but I prefer the pixel accuracy (Lackeys scaling introduces some oddities).

I'd like the high def version please, if you could email it to me or upload it somewhere. Thanks. It looks very nice.

[ke.]

Sure, images here.

[ke.]

Do as you please with them.

[Chris]

I agree with ke. that the way Lackey scales the interface images is not optimal. It introduces jagged edges on rounded (anti-aliassed) corners at different scalings. On the other hand, from a usability standpoint, it can be very useful if users can choose their own font size for the interface; and a pixel-perfect layout will not allow for this.
I've experimented a bit with different sizes for the interface elements, and ended up with a base height of 60px for the elements. This gives an acceptable result at most font sizes, while keeping the file size of the elements manageable. With these settings I've made a new skin (see here). All elements in this skin are either 60?60px, or 120?60px.

For an example of the scaling of the interface elements, see the image below.

Kind regards,
Chris

[Chris]

Hi Trevor,
I was just wondering: have you considered using vector images (svg) for the interface elements? I don't even know if that is possible with the rendering engine you are using (openGL?), but it could help making the interface resolution and font-size independent, and even make the interface as a whole more light weight.
Regards,
Chris

[Trevor]

I should be able to add svg support but I am working on some other things right now.