There are some simple rules to follow when designing new graphics for energy bars:
Filled Bar
You can use more than one texture to build your bar.
All textures must have equal sizes.
Violating this rule will result in unspecified behavior.
It may be good when all textures are in grayscale.
You are able to set the tint for each 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 than using many small textures.
Transform Renderer
Object texture can have different size.
The object texture may be an arrow that will be rotating around, or a tip moving right or left. There’s no requirement of making it the same size as other textures.