I know I created a simple UI in the previous strategy game posts but since we are diving a bit further into the game, I decided to redesign that awful old one.
Till now we only had the following, which will change completely. (The top is where the mini-map was drawn and the bottom was where values like population and income would show.)
Now you see why I call it awful. Yes there is a place for the mini-map but the rest would be just text lines under it. (plus I'm not an artist so I need to redraw everything like 100 times for them to look decent. Did I say 100 times? I mean 1000..).
The plan is to have the place for resource values ready, a button for ending player's turn (that when pressed will change to a progress bar indicating enemy faction turn progress), details about what is pressed on the screen (units, cities, etc.) and lastly our main faction values population, income, technology and construction, along with mini buttons to open other windows for diplomacy, management, technology, statistics and game settings.
The UI sheet looks like this (I think the result looks better than the old one. Tell me your opinion!), it's far from finished since it needs to have small windows for the buttons underneath and the progress bar (and more things that will show up in development).
So I also changed the code for the UI to show on screen since it's a bit different to the following.
sRect = New Rectangle(5, 8, 132, 5)
dRect = New Rectangle(0, 0, ScreenWidth - 140 * 2, sRect.Height * 2)
DrawTexturedQuad(sRect, dRect, 800, 548, 3, 1.0F, 1, 1, 1, 1)
sRect = New Rectangle(5, 8, 132, 5)
dRect = New Rectangle(0, (ScreenHeight - sRect.Height * 2), ScreenWidth - 140 * 2, sRect.Height * 2)
DrawTexturedQuad(sRect, dRect, 800, 548, 3, 1.0F, 1, 1, 1, 1)
'Main UI Screen
sRect = New Rectangle(140, 8, 140, 540)
dRect = New Rectangle(ScreenWidth - sRect.Width * 2, 0, sRect.Width * 2, sRect.Height * 2)
DrawTexturedQuad(sRect, dRect, 800, 548, 3, 1.0F, 1, 1, 1, 1)
sRect = New Rectangle(0, 8, 5, 540)
dRect = New Rectangle(0, 0, sRect.Width * 2, sRect.Height * 2)
DrawTexturedQuad(sRect, dRect, 800, 548, 3, 1.0F, 1, 1, 1, 1)
'DRAWING MINI-MAP
For X = 0 To MaxGridX
For Y = 0 To MaxGridY
If GridWorld(X, Y).FOV = 1 Then
sRect = New Rectangle(GridWorld(X, Y).ID * 8, 0, 8, 8)
dRect = New Rectangle(ScreenWidth - 140 * 2 + 4 * 2 + X * GridMiniSize, 5 * 2 + Y * GridMiniSize, GridMiniSize, GridMiniSize)
If (GridWorld(X, Y).SX + OffSetX) > -GridWidth And (GridWorld(X, Y).SX + OffSetX) < (ScreenWidth - 240) And (GridWorld(X, Y).SY + OffSetY) >= -GridHeight And (GridWorld(X, Y).SY + OffSetY) < ScreenHeight + 40 Then
DrawTexturedQuad(sRect, dRect, 800, 548, 3, 1.0F, 1, 1, 1, 1)
Else
DrawTexturedQuad(sRect, dRect, 800, 548, 3, 1.0F, 0.4, 0.4, 0.4, 1)
End If
End If
If X = GridPX And Y = GridPY Then
DrawQuad(ScreenWidth - 140 * 2 + 4 * 2 + X * GridMiniSize, 5 * 2 + Y * GridMiniSize, GridMiniSize, GridMiniSize, 1.0F, 1.0F, 1, 0.4, 1)
End If
Next
Next
'Main UI Overlap
sRect = New Rectangle(0, 8, 140, 540)
dRect = New Rectangle(ScreenWidth - sRect.Width * 2, 0, sRect.Width * 2, sRect.Height * 2)
DrawTexturedQuad(sRect, dRect, 800, 548, 3, 1.0F, 1, 1, 1, 1)
And the end result on screen should be the one shown in the image below.
The UI sheet has two instances of the side bar, one is all of it and one is just the border. If you see the code where is says 'Main UI Overlap, I'm just drawing the border on top. This way I fixed the mini-map overlapping problem by overlapping the borders on the UI.
Now the icons on top are for Turns and Date
Second box is the available resources (the ones shown on the map too), and underneath it's our faction details. The third box will be information for when you click a unit or structure.
Comments
Post a Comment