There are some simple rules to follow when designing new graphics for energy bars:
Filled Bar
All renderers can be built from more than one texture.
All textures must have equal sizes.
Violating this rule will result in unspecified behaviour.
It may be good when all textures are in grayscale.
You are able to set color tint for each bar texture. In this way you can make several bars with different colors using same textures.
Repeated Bar
Icons and slots must have equal sizes.
It’s the same rule as for Filled Bar.
Sequence Bar
It’s more efficient to make a grid than use separate textures.
If you make graphics for sequence bar consider doing it as one texture grid. It is far more efficient for graphic card than using many small textures.
Transform Renderer
Object texture doesn’t have to be equally sized with the rest of textures.
That’s right. This one object is loose and can be whatever you want.