Strategy, pixel art complete overhaul and custom cursor (Post #16 / Strategy game #7)

on

Since this is a strategy game programming tutorial which I program as it goes, I make lots of visual changes. And since we remade the user interface and moved forward with spawning and moving units on our map it was only time to remake the sprite sheets for units and tiles.

Steps to overhaul

It will be an almost complete overhaul, I'll add here the old and the new sprite sheets accompanied with comparison images.

  • For our tiles I'll take the old sheet recolor it, and change lots of details.
  • For our units I'll pretty much remake it from the start. (for most of the units)

Below you'll see how to new sprite sheet is.

  • Changed colors (and tile detail)
  • Changed mountains
  • Added extra details to some tiles
  • Changed roads (we haven't implemented these yet)
  • Added a mouse cursor
  • Changed tile overlay for selecting and attacking
  • Made the cities better (a lot better)
 The colors are more saturated, which make for a warmer environment but the tile change differences are worse. (Now if you want smooth transitions between tiles (snow and grass for example) you could make another line of tiles that contain both environments and run an algorithm to search and create corners between them).
 
Now that the tile sheet is changed, I'll change the unit sheet. And I wasn't happy with the way the available to move tiles where shown so these will change too.
Units are still small in size but changed a bit their style, colors and created some rough edges. I also created an outline sheet in which I have them mono-colored with an outline around so we create a half transparent outline around our units.

Now I'll add here an old preview of the units and the tiles and a preview with tiles and units changed.

Old Sheets

 

New Sheets

Now you can see that everything with this contrast stands out more.

Now the code I added is the following

Cursor drawing

    Public MouseX As Integer 'To hold mouse X
    Public MouseY As Integer 'To hold mouse Y

    Public Sub GLMouseMove(ByVal X1 As Integer, ByVal Y1 As Integer) 'This was updated at the last lines to give values to our mouse X,Y variables
        Dim X, Y As Integer
        X = X1 - OffSetX
        Y = Y1 - OffSetY
        GridPX = (Y + X / 2) / (GridHeight * ZoomVar)
        GridPY = GridPX - (X) / (GridHeight * ZoomVar)
        Unit_F("MOUSE_HOVER_UNIT", 0)
        MouseX = X1 + 20
        MouseY = Y1 + 12
    End Sub

And at the end of our UI renderning add the code for drawing the cursor hand

            TexY = 64 \ 17
            TexX = 64 - TexY * 17
            sRect = New Rectangle(TexX * 64, TexY * 40, 64, 40)
            dRect = New Rectangle(MouseX, MouseY, 64, 40)
            DrawTexturedQuad(sRect, dRect, 1088, 160, 0, 1.0F, 1, 1, 1, 1)

 Now if you want to go ahead and hide the normal cursor (Now you'll see both of them), you'll need to add the following code on a On_Load event.

'If you work on a windows forms application (rendering on a GLControl)

Cursor.Hide()

'If you work on a console application (rendering on openGL window)

MyBase.CursorVisible = False

Outline drawing

Add a new texture hold and load your outline spritesheet. Then just get the unit drawing code we had and add it before actual unit drawing.

DrawTexturedQuad(sRect, dRect, 1472, 448, 5, 1, 1, 1, 1, 0.7)  'Which will draw our outline sheet (5) with 70% alpha.

Conclusion

While I finish testing these sheets I keep finding points to improve them even better and I'm wondering If I should redo most of them again, but I'm moving further from the strategy programming tutorials so for now they'll stay the same. The only thing I'll do additions for the time I think it's the UI since we'll be working on it and adding values on it over the next posts.

Drop a comment if you liked the new look of the sprite sheets!

Comments

Post a Comment