Creating a power indicator bar

So here's a short tutorial about creating the power indicator bar. U'know, the bar that shows how much electricity you are currently producing and how much of it your buildings and defences are using.

We start with the background image:


Now some simple calculations. The power indicators height is 229px. Now lets assume (for simplicitys sake), that the maxium ammount of electricity producable is 200. That means that 200 (power units) = 229px. So if we are currently producing 60 (power units) the following formula describes the height of that 60 in pixels.



However, just knowing the height of the produced power bar is not enought, 'cose the Y coordinates start from the top, so Y0 is the top of the window. This following line draws the bar starting from the right position.

spriteBatch.Draw(greenDot, new Rectangle(graphics.PreferredBackBufferWidth - mapBox.Width - hudOffsetFromTheWindowEdge + barOffsetFromMapBoxLeftEdge, hudOffsetFromTheWindowEdge + barOffsetFromMapBoxTopEdge + (heightOfThePowerBarArea - ((currentPower * heightOfThePowerBarArea ) / maxPowerProducable)), widthOfThePowerBar, ((currentPower * heightOfThePowerBarArea ) / maxPowerProducable)), new Color(255, 255, 255, 100));

The new Color(255, 255, 255, 100) creates a white color with the opacity of 100 / 255, so the resulting image is semi transparent.

Now we have the ammount of power produced.



If we assume that the ammount of the currently used power is 40 (power units) we can calculate the position for the little indicator showing the ammount of power used. The formula is the same, just the height of the object drawn is changed to 2px.