Revamp Your Unity Game: Create A Custom Battle Royale Ping System!

hey fellow developers welcome to the tutorial  on how to add a ping system in your game   similar to the ones used in popular  Battle Royale games like Apex Legends   once done with this tutorial you will have a fully  functional ping system like this one in your game   the FPS asset I am using for this tutorial is  low poly shooter pack the link for this asset   is available in the description below it is one  of my favorite assets for making FPS games with   smooth animations and beautiful graphics let's  get started I have the required images already   added to my project we will need images for Ping  menu backgrounds images for cursor and highlight   we will also need images for Ping menu items  and an image for the in-gain Ping object   start by creating a new UI canvas called menus  set up the scaling mode of the canvas inside   this make an empty object for the Ping menu  inside the Ping menu the first thing we need is   the background this will be two Circle images the  outer one for Ping items and enter one for cursor next add an empty object at the center of  the menu as a pivot for cursor make sure   that the rotation for this object is zero  and it is at the center of the Ping menu   inside this empty object add the cursor image at  the edge of the inner circle when the pivot object   has rotation zero we want the cursor to point  right at the first item above the horizontal line   since my ping wheel will have eight items the  cursor image and the highlight images are both   1 8th of a circle similarly create another empty  object at the center and place the Highlight   image inside it pointing to the right at  the first item above the horizontal line later we will code the cursor to  move based on Mouse movement and   the Highlight image to select the Ping  item towards which the cursor is pointing now add all the Ping item images at  their locations on the Outer Circle scale and position them as required at the center add a text field to display  details of currently selected item   and that's it for Ping menu graphics in your scene  create an empty object for the in-gain Ping object inside this empty object create another  empty object which will contain all the   images and will later be scaled based  on player distance add all the images   as Sprites to this scaled object we will  need the background and ping item images we will also need a text mesh to show  the distance of player from the Ping if we run our game we can see our ping  object placed in our game however it   is not visible through walls and  it does not rotate towards player   to display the Ping through walls we will  need to add a new camera inside our first   person camera which will only be able to see  the Ping layer and display it above everything   to do this create a new layer called ping move  the Ping objects and are seeing to this new layer   next create a new camera as a  child of the first person camera   first change the clear flags of a new camera to  depth only change the calling mask to nothing but   the Ping object match the rest of the settings of  the new camera to exactly those of the FPS camera since the field of view of my main camera is  changed on runtime I am quickly going to add   a script to match the field of view of  the Ping camera to that of main camera finally make sure that the depth of  the Ping camera is higher than that   of the FPS camera this way the Ping object  will be displayed on top of everything else and now when we run the game the  Ping can be seen through walls next let's add a script to the Ping object so that   it is always facing the player and  has a uniform scale at any distance in the script we will need variables  for scaling Factor minimum distance   to start scaling up the ping the  player Target reference variable   and the reference for the text  which will display the distance in the update function simply call the look at  function to make the Ping object face the player   Target next calculate the distance from the player  and show the distance in the tax field on the Ping finally we can set the scale of  our ping object using this formula back to Unity set the required variables and let's test our code and make any required  adjustments we will need to rotate our text   since it is facing backwards also adjust the scale  factor so that the size of the Ping is neither too   small nor too large and now our ping object looks  just as we want it to next let's add code to our   pingwill menu so that we can change our ping item  and location add a new script to the menu canvas   inside the script add reference variable for the  Ping menu cursor object and the Highlight object in the update function when Mouse wheel is pressed   to activate the Ping menu and when it  is released deactivate the Ping menu next when our Mouse wheel is pressed and ping  menu is active we will need to check how much   the mouse moved in the last frame depending on  your input logic you can get mouse Movement by   using input.mouse position and subtract this from  last Mouse position which you store in a variable   you can also get mouse movement from  your input horizontal and vertical axis in the current project I can get the mouse  movement from the player character input using this value I can calculate the  angle or direction the mouse moved in   and the distance of the move and now  using move towards angle function I   can smoothly rotate my cursor along z-axis  to make it rotate based on Mouse movements back to Unity assign all the  variables and test the code and there we go the cursor is perfectly  rotating next let's rotate the Highlight   image to the selected object since we have eight  items over 360 Degrees each item takes 45 degrees   using this information we can divide the angle of  the cursor by 45 round it off to the nearest whole   number and then multiply it by 45. this will give  us the starting angle of our current item where we   will place the Highlight image this way we can  rotate the cursor based on Mouse movement and   the Highlight image will be rotated to completely  cover the selected object perfect now let's change   the text that the sender to display selected item  name the current item number can be calculated   by dividing the cursor angle by 45 and then  rounding it off to the nearest whole number we need the reference to the text  in a string array for the names   and now we can just set the selected item  text by getting the current item from the list back to Unity assign all the variables and set  the item names in the script and test the project everything is working perfectly however we  sometimes get an error for array out of bounds   this is because the angle sometimes  goes above 360 or below zero   to fix this simply add 360 to the angle  and then calculate modulus of angle in 360. once we have the item number calculate  the modulus of item number and eight   this will make sure that item  number is always between 0 and 7. and there we go the error is gone the next thing  we want to do in the Ping menu is make no items be   selected by default for this create a new Boolean  called is mouse moved when the Ping menu is open   set this boole into false if this Boolean is  true run the code we wrote for angle calculations if the Boolean is false we are  going to run a similar code   which will run only when the mouse is first moved here instead of moving the  cursor smoothly to the new   angle we will set it directly to  the angle of mouse move Direction after this set the Boolean to true add reference  variables for cursor and highlight images and set them as inactive  when the Ping menu is opened and when the mouse is moved enable  these images Let's test our code and there we go the select cursor is enacted by  default and when we move the mouse the cursor and   highlight shows up next when the Ping menu is open  let's disable the script which makes the camera   rotate we simply need a reference for this script  disable it on Mouse wheel down and re-enable it on   Mouse wheel up the last thing we want to do  is place the Ping object in the scene where   the player is pointing for this we will Ray cast  from the camera sender in the forward Direction   we need reference variables for player  camera layer mask for Ray casting the   root ping object and the Ping items from  which we will activate the current item and now when Mouse wheel is released we  can check if the user made a selection   for this set select an item number  to -1 when Mouse wheel is pressed   if selected item is not -1 when Mouse  wheel is released enable the Ping object disable all ping items except the selected item raycast in front of the player camera and if the ray hits something run  this code and set the position of   the Ping object to the point where the ray hit back to unity, assign all the variables  set the layer mask for Ray casting and run the project there we go everything is now ready let's add some final touches lower the  position of the Ping as it appears too high   and let's add an animation  for when the Ping wheel opens and all done we have a fancy looking  fully functional ping menu in our game   that's it for Ping will implementation if you like the video make sure to like  And subscribe for more useful Unity videos

Channel: The Unity Dude

Views: 1,193

Keywords: unity, unity tutorial, unity ping system, unity ping menu, unity ping wheel, ping system, ping wheel, ping wheel tutorial, ping menu tutorial, game development, unity menus, unity ping tutorial, unity ping system tutorial, unity ping wheel tutorialm, unity ping menu tutorial, Ping system Unity, Apex Legends ping system, Battle Royale communication, Unity interactive map markers, Player communication Unity, Apex Legends style system in Unity, Game UI/UX design Unity

Id: R0nT2aG23oo

Length: 13min 12sec (792 seconds)

Published: Mon Jun 19 2023