{"id":57,"date":"2021-11-11T21:57:05","date_gmt":"2021-11-11T21:57:05","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/?p=57"},"modified":"2021-11-11T21:57:05","modified_gmt":"2021-11-11T21:57:05","slug":"pop-click-whoosh","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/selfisnotdefined\/2021\/11\/11\/pop-click-whoosh\/","title":{"rendered":"Pop Click Whoosh"},"content":{"rendered":"\n

For me, this week was all about sound effects and making improvements to the UI.<\/p>\n\n\n\n

\"\"
Map 2 with an updated UI <\/figcaption><\/figure>\n\n\n\n

SFX<\/h2>\n\n\n\n

It seems like a good time to start adding sound to our game.\u00a0 I found some free, nicely organized Kenney sound packs<\/a> .\u00a0 Unfortunately, there aren\u2019t 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.<\/p>\n\n\n\n

The flamethrower sound is still a work in progress. The current sound file<\/a> 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 \u201cw-w-w-w-w-w-w-w-whoosh\u201d.\u00a0 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.<\/p>\n\n\n\n

Oh, also toggling between the two ammo types by pressing Q or W will now produce a switch-click sound.<\/p>\n\n\n\n

UI update (prepare for some boring details)<\/h2>\n\n\n\n

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.\u00a0 Note that the default origin of an element is in its top-left corner.\u00a0 Rather than hard-coding the coordinates as \u201cmagic numbers\u201d, I tried to create a better system with variables and equations.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n