top of page
Search

Enemy Spotted: Enemy Indicator and UI Overhaul

Over the summer, DuolBots has been getting a bit of a face lift. Along with this new coat of paint are some cool quality of life features: an indicator for locating the enemy team along with a distance measure, separate health displays for friendly and enemy bots, a distinct screen divider, and new charge animations for part icons.


The simplest feature, of course, is the more clear screen division which is surprisingly helpful for differentiating cameras.


The charge animations display different "filling" actions depending on whether the part is single-fire or charge-fire. Single-fire part icons will grey out once fired and refill radially like a pie being pieced back together while the charge-fire icons will fill from the bottom to the top with a red hue that matches the intensity of the charge. Once the charge has reached the minimum threshold for firing, the icon glows green and pulses while the fire button is held.


As for the separate health displays, some under-the-hood magic had to be done to realize this feature. It is relatively trivial to get the health on your client's bot, however, getting the

health of the other team requires two things: networking and caching. We already keep track of each bot's health in the networking, and researching for a health object would be wasteful.

Therefore, we keep the health of both teams as well as other important information like what team a bot belongs to on a helper script which can then give us the info we need to separately keep track of each team's health. In addition, we wanted to make sure that it was clear which health belonged to which team, something that is difficult to display with split-screen. For the enemy health we stretched the old health bar to look like a boss health bar at the top of the screen and for the ally health we created a radial health bar with an image of

the client's selected bot to display the separate health bars respectively.


That leaves the best for last. The enemy indicator looks very simple but does take a lot of work behind the scenes. Not the indicator need to know which bot it is tracking (and thereby which bot is on the enemy team), but also it needs to know the current camera its attached to, the angular difference between the way that camera is facing and the target bot, and the distance between that camera nd the enemy bot.


The indicators (the yellow arrows inside the gray circles) direct each player's camera to the enemy bot and display red text to indicate that the target is within close proximity.


To get the target, we can use the same trick as the health bars and used to cached information to get the enemy bot after the battle scene is loaded. To get the correct cameras, however, we used custom PlayerIndex and TeamIndex scripts to correctly hook up an indicator to a specific member on a team. This is also handy because both bots have the same components on their root objects meaning that there are four sets of indicators (one for each player on each team) when two bots are spawned into the battle scene. Since we used overlay camera mode for the indicators for positioning, they will appear on EVERY camera. Our solution was to use those index script to make the indicators for the enemy team disable themselves for each client meaning that every team only had their own indicators (which would reposition to their respective sides of the screen so each player had their indicator on their side of the screen). To find the angular difference between a camera's forward (the way it is facing) and the enemy bot we used the screen point of the camera's forward (2D point), convert it to world space (3D point), and calculate the rotation necessary to make the camera face the enemy bot and apply that to the Z rotation of the 2D indicator. In addition to this, a check was added for when the enemy bot may be directly behind and or below you in which the indicator points directly downwards.


Whew! That was a lot to unpack, but the result was well worth the work especially since it can be used in the tutorial that teaches players navigation and control.


-DuolBots Development Team

2 views0 comments

Recent Posts

See All

Comments


bottom of page