search

kotcrab / vis-ui

libGDX UI toolkit
Apache License 2.0
720 stars 130 forks source link

TintedDrawable usage in skin files #157

Closed czyzby closed 8 years ago

czyzby commented 8 years ago

com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable allows to create new skin drawables from existing ones by tinting them with a selected color. Since the majority of current VisUI assets is composed of a single color (buttons, borders, sliders), it would make sense to provide a single white image for each of them and tint it at runtime. This might slightly reduce the size of atlas and allow the users to create custom skins with a few lines of code rather than hours in image editors. gdx-lml-tests can be an example of such skin in practice (it's still way worse than VisUI, but at least I can confirm that tinting nine-patches works).

Now that I think of it, even two-color drawables could be easily made more flexible by making them lighter and by tinting them with a darker color at runtime. One wouldn't have to regenerate the atlas or even use any of the raw assets to make a considerably different theme out of your default skin simply by providing a modified JSON file.

kotcrab commented 8 years ago

I don't think that size atlas is the problem, 512x256 for X1 scale where majority is taken by fonts anyways.

Ability to create custom skin by changing tints sounds nice but there are some implications. Some elements can't be made just from tinging images. eg. color picker elements, window background with border, arrows or scroll knobs. Using tint approach for two color drawable most likely will too different than original image.

This would also require modifying behavior of few widgets: checkbox, selectbox and window background with border. Eg. select box you would need to split background and foreground. Select box is implemented in libgdx and we don't know if that change would be accepted.

In the future they can be more elements that can't be done with tint and would require image. Imagine that user can tint some drawables and some not because they are images, would be pretty frustrating. I don't think it's worth doing this just for the sake of simplifying skin creation.

czyzby commented 8 years ago

Using tint approach for two color drawable most likely will too different than original image.

Well, not necessarily. All you have to do is lighten the two color image to the point which represents the difference between the lightest and the darkest color, and then tint it with the difference. If one of the colors is white though then, well, I'm afraid the difference this is as far as we can get.

The color picker elements have no need to be tinted at all, imho.

Well, I understand your points, but I still think such skin would be useful - especially for designing, where you can recolor your whole GUI with a single like of JSON data.

What do you think about starting a repository with external VisUI skins? I'll probably create such skin for my own needs, and I don't mind sharing it with the others - an official repo for such contributions would be nice.

kotcrab commented 8 years ago

Well imho libgdx with it's image approach is too limited for creating reusable UIs. In perfect world you could write some css, add images as needed etc. Restyling that would be relatively easy.

The color picker elements have no need to be tinted at all, imho.

Right but this again creates that split where you can tint some elements and some not. Plus the need of modifying widgets code.

What do you think about starting a repository with external VisUI skins? I'll probably create such skin for my own needs, and I don't mind sharing it with the others - an official repo for such contributions would be nice.

I like this, it could be also used for extensions/utils classes that don't fit here. vis-ui-contrib?

czyzby commented 8 years ago

I like this, it could be also used for extensions/utils classes that don't fit here. vis-ui-contrib?

Agreed. Just add some simple rules about adding new skins (one should specify version compatibility, unsupported widgets, etc.) and I'll pull a request in a few days. I think this issue can be closed, unless you want to officially support skin version with tinted drawables as an alternative to the default one.

kotcrab commented 8 years ago

I've created contrib repo: https://github.com/kotcrab/vis-ui-contrib. Closing this.