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.