The World Map

Making the world map screen is a big undertaking. I need to make buttons for each location for the levels, make them stay in a certain place on the screen independent of resolution, and have them contain information that will be displayed at the bottom of the screen. I started simple, with the bottom info bar:

This serves to give the player exposition and their main goal for the mission before they start it. They can also change different settings in the missions. I then started making the location buttons. These were trivial to make as I'd made so many similar things before that I got the method down to a T.

I created the necessary variables for the info panel in the button widget and created a hovered Event Dispatcher with those variables feeding into it. This lets me do stuff like this:

This feeds those variables from the button into the function which then sets the components based on those variables. It works great. I had originally tried to do this with a For Each Loop in Event Construct and binding the hover event, but it didn't work at all, it kept only getting the variables from the first index of the array instead of all of them, so I used this method instead, which is a lot easy to understand, if a bit more manual (having to link the function with the event for each new button instead of adding a new index to an array). But it works, so there's not a problem.

I then needed to show an actual map for the location buttons to go on. This proved much harder than I expected. After planning it in my mind beforehand, I realised that I couldn't use a normal Canvas Panel, as the map will get stretched with different resolutions, I couldn't use a Scale Box as then I couldn't put the location buttons in the right places and have them keep their positions, and so I settled for a Size Box inside a Scroll Box to allow for vertical scrolling, as well as having a Canvas Panel in the Size Box where the map image and location buttons reside. The hierarchy for this is like so:

One problem with this though is the resizing of the X, or width. 4:3 will be squished, and therefore the location button positions will be moved also, something that affects the original Condition Zero game too, but just with 16:9 having incorrect location button positions as it was originally planned for 4:3 only.

After much trial and error with adding a Scale Box to the hierarchy, I ended up having is be a parent of the Size Box and a child of the Scroll Box. The Scale Box is needed as it keeps the aspect ratio of what's inside it (which is probably why Canvas Panels' anchors break when they're a child of one). This now lets me use the Scroll Box to scroll up and down the map in wider resolutions, and have it be static in thinner resolutions. It's not perfect, especially because the location buttons scale, and get quite bit with very wide resolutions, but it works and that's what I was looking for.

I took an outline of a world map and made it darker so allow the text in the location buttons to be seen easier and used that as the background:

After getting feedback from various people from college as well as the wider Counter-Strike audience, I decided to make the buttons waypoint-style icons until hovered over, which will then reveal the name. I'm taking inspiration from Payday 2's Crime Net for this, as the way it displays mission information is superb.

After redesigning my buttons a bit and adding more to the map, this was the result:

After adding more missions, I decided to try a little voice acting, serving as the radio man (similar to Bain in Payday 2), explaining the description in an aural way.

I recorded my voice, did some post processing to make it sound like a radio, and put it in UE4 to play when hovering over a button. To stop the audio and play another one, I did just that in Blueprints:

This is within the "Set Mission Info" function, and gets the audio from the button itself, the same way the text components are set.

After getting some feedback from the Recovered Operations community (a community trying to remake Condition Zero in the Source Engine), I decided to remove the Scroll Box and instead just have the map stay centred in the screen. This only required me to replace the Scroll Box with its child (the Scale Box) and set the Scale Box's Stretch to Scale to Fit, and had no complications.

The only problem now is the errors I get from playing the radio messages. Or more accurately, the errors I get from stopping them. The logic I use for this I showed above, and sets the RadioAudioComponent variable before calling it. Or it should anyway. I get errors that state it accessed none when trying to access the variable, meaning it hasn't been set. I asked around on different forums and couldn't get an answer, so decided to just stop the radio message when unhovering the button instead as a workaround. I will revert it back to normal if I find a fix, but for now this will have to do.

I had to use a Validated Get when stopping the audio to check if the variable is valid or not before stopping it. Leaving the audio to play fully and unhovering after its finished will make the variable not valid, and throw up an error if the stop function is called then (it's like doing two stops in a row). So, I checked to see if it was valid and only stopped it if it's valid. I'm sure this could work with my other approach, but I couldn't figure out how exactly and I actually prefer this method as it lets the user stop the audio playing when they want, instead of hovering over something and having to wait for the audio to finish if they don't want to listen to it.

References:

Anto. (2013). What will pro jobs entail?. Available: https://gaming.stackexchange.com/questions/127501/what-will-pro-jobs-entail. Last accessed 20th April 2022.