For me, this week was all about sound effects and making improvements to the UI.
SFX
It seems like a good time to start adding sound to our game. I found some free, nicely organized Kenney sound packs . Unfortunately, there aren’t many gunshot noises there, so I used a percussive footstep sound for the normal bullet type instead. Now whenever the player shoots a bullet from the base turret, the game plays a sound specific to the current ammo type.
The flamethrower sound is still a work in progress. The current sound file is a single whoosh, but because A) it plays with every bullet event and B) flamethrower ammo works by sending out a line of tightly-spaced bullets, the result is a weird “w-w-w-w-w-w-w-w-whoosh”. I might be able to fix this by writing some special code that will play the full file in a loop, starting with a mouse-down event and ending on the mouse up event, or whenever the flame bullets stop firing.
Oh, also toggling between the two ammo types by pressing Q or W will now produce a switch-click sound.
UI update (prepare for some boring details)
Each element in the UI needs an x and y coordinate (represented as an integer number of pixels), so that it shows up in the right spot on the screen. Note that the default origin of an element is in its top-left corner. Rather than hard-coding the coordinates as “magic numbers”, I tried to create a better system with variables and equations.
So for example, in order to find the coordinates for the bee turret icon (shown below as a beehive) I had to make the following calculations.
- It should appear in the first column of icons. We’ll make a variable col1X = 1148 and set the bee icon x coordinate to col1X.
- We need some more variables for the y coordinates. Let’s make the top UI margin UIMargin = 32, the height of each icon iconSide = 64, and the margin between icons iconMargin = 8.
- From the top we have to fit the tower health icon, the money icon, and the “Buy & Place Turrets” header, which is about as tall as an icon.
- Thus, we can express the y coordinate for the bee icon as UIMargin + ((iconSide + iconMargin) * 3)
This system mostly works. I found that in the end I still had to add a few magic numbers to make everything look right. For some weird reason, I had to change the UIMargin to 64 even though it appears to be only 32 pixels from the top of the screen. It’s not as elegant as I wanted but hopefully this system will make it easier to make changes in the future.
