{"id":221,"date":"2016-02-24T19:21:12","date_gmt":"2016-02-24T19:21:12","guid":{"rendered":"http:\/\/www.doofah.com\/tutorials\/?p=221"},"modified":"2016-03-20T10:12:02","modified_gmt":"2016-03-20T10:12:02","slug":"health-and-damage","status":"publish","type":"post","link":"https:\/\/www.doofah.com\/tutorials\/networking\/health-and-damage\/","title":{"rendered":"Unity 5 Network Tutorial Part 5 \u2013 Health and Damage"},"content":{"rendered":"<p>Welcome to part 5 of my Unity 5 basic networking tutorial, in this part we will add damage and health, so at least your laser will have some purpose now!<\/p>\n<p>Before we get to the laser, I want to make a small change to the <em>NetworkPlayer<\/em> script, with the addition of two lines. So open the <em>NetworkPlayer<\/em> script in your editor and add these two lines to the <em>OnPlayerIDChanged<\/em>() function:-<\/p>\n<p><span style=\"font-family: Calibri;\"><strong>name\u00a0=\u00a0playerID;<\/strong><br \/>\n<strong>if(isLocalPlayer)\u00a0name\u00a0+=\u00a0&#8220;<span style=\"color: #33cccc;\">\u00a0Local<\/span>&#8220;;<\/strong><\/span><\/p>\n<p>This makes it much easier to identify whether you are dealing with your local player object, or the player object belonging to a remote player, when it comes to debug.logging etc. It&#8217;s a little trick I use when programming a multiplayer game, and can be a real time saver when trying to pin down why something isn&#8217;t working as it should.<\/p>\n<p>The <em>OnPlayerIDChanged<\/em> function should look like this now<br \/>\n<script src=\"\/\/pastebin.com\/embed_js\/iHLdNtKx\"><\/script><br \/>\n Save the changes and then we can move on to the laser, making it do some damage.<\/p>\n<p><strong>Part 5a &#8211; Laser hit detection and health<\/strong><\/p>\n<p>So the first thing we need to do is enable the laser to detect if it has hit another player. We&#8217;ll use a ray cast for this and therefore we need to add these lines to the beginning of the <em>Fire<\/em>() function in the <em>PlayerShoot<\/em> script:-<br \/>\n<script src=\"\/\/pastebin.com\/embed_js\/xb5NTU7H\"><\/script><br \/>\nWhat this does is fire a ray in the same direction and length as our laser <em>LineRenderer<\/em> and, if it detects a hit, it calls the server function <em>CmdDoShotSomeone<\/em>() and passes references to both the player that was hit, and the player that did the shooting,\u00a0so that the server can take the appropriate action. Which in this case will be to reduce the health of the player that was hit.<\/p>\n<p>Again, to keep things simple there is no checking done to determine if the object that was hit is actually a player. For this tutorial that&#8217;s all it can ever be, but in practice you&#8217;d probably want to make certain with some tag checking etc.<br \/>\nAlso in terms of reducing the chance that players can cheat, the hit detection really ought to be carried out on the server. However, without extra client side code being implemented, this could result in it looking like shots miss, when the client sees a hit, but due to the latency, the server doesn&#8217;t register a hit and vice versa. So for this tutorial I&#8217;ve decided to ignore the possibility of cheating and implemented it the way that will give the best player\u00a0experience, whilst keeping the code as simple as possible.<\/p>\n<p>However, we do need to make the <em>CmdDoShotSomeone<\/em>() function, so also in the <em>PlayerShoot<\/em> script, add the following function just below the <em>Fire<\/em>() function<br \/>\n<script src=\"\/\/pastebin.com\/embed_js\/346HvpWK\"><\/script><br \/>\n This gets a reference to the <em>HealthAndDamage<\/em> script on the player that was hit, and calls the <em>TakeDamage<\/em>() function that will reduce the players health. It also passes a reference to the player that did the shooting, as this will be needed later. We can&#8217;t call this function directly from our <em>Fire<\/em>() function because we don&#8217;t own the hitPlayer gameobject; it belongs to another player in the game, therefore the only way we can interact with it is via the server.<\/p>\n<p>The full PlayerShoot script should look like this now, save this (<em>ignore any errors regarding the HealthAndDamage script being missing<\/em>) and we&#8217;ll move on:-<br \/>\n<script src=\"\/\/pastebin.com\/embed_js\/s1KeGXbi\"><\/script><br \/>\nNow we need to make the <em>HealthAndDamage<\/em> script, as at the moment it doesn&#8217;t exist.<br \/>\nSo in the <strong>Assets\/Player<\/strong> folder create a new script and rename it <em>HealthAndDamage<\/em>. Open it in your editor and replace the default code with the following:-<\/p>\n<p><script src=\"\/\/pastebin.com\/embed_js\/QwZraKZ1\"><\/script><br \/>\n So going through this one bit at a time, first of all we declare a variable to store our health in, and make a SyncVar with a hook, <em>OnHealthChanged<\/em>().<\/p>\n<p>Lets take a look at the hook; What this does first is update the health variable to reflect the new value, then it checks to see if health is less than 100. If it is then that means we have taken some damage, so we should show some kind of feedback to indicate this, and to do that we\u00a0start a coroutine <em>ShowHitEffect<\/em>().<\/p>\n<p><em>ShowHitEffect<\/em> is quite simple, it gets a reference to our player object&#8217;s material, saves the current value of its colour, and then sets its colour to yellow, waits for a short time and then resets the colour using the previously saved value.<br \/>\n So basically, when you get shot, your player flashes yellow briefly.<\/p>\n<p>In <em>OnStartLocalPlayer<\/em>() we call the server command <em>CmdSetHealth<\/em>, passing in a value of 100, this sets our starting health when joining the game. Because of the &#8216;<em>If(health&lt;100)<\/em>&#8216; check in the hook function, changing our health like this won&#8217;t trigger the hit feedback effect when the health value changes. If we didn&#8217;t have that check in place, we would flash yellow when our health was initialized to 100 when we joined the game.<\/p>\n<p>The remaining function is the <em>TakeDamage<\/em> function, which reduces our health by 10 every time it is called. It is this function that is called by the <em>PlayerShoot<\/em> script, when a hit is detected.<\/p>\n<p>With all the changes above made, save your script and then\u00a0add it to your player prefab, by dragging the script onto the prefab in the project window.<\/p>\n<p>Now if you build and run the game and start a host and client, you&#8217;ll see that every time you score a hit on your opponent he flashes yellow. If you run one game in the editor you can also check the value of health in the inspector\u00a0for each player, as it was declared as a public variable, and you&#8217;ll see it reduce as you score hits.<\/p>\n<p><strong>Part 5b &#8211; HUD<\/strong><\/p>\n<p>Now we need some way to display our health on screen, and the way we&#8217;ll do this is with a scene object HUD.<\/p>\n<p>So load the Online scene and add a Canvas (<strong>GameObject-&gt;UI-&gt;Canvas<\/strong>), then rename it HUD and\u00a0set the UI Scale Mode to &#8216;Scale with screen size&#8217;. Your HUD should look like this:-<\/p>\n<p><a href=\"http:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Hud.png\" rel=\"attachment wp-att-231\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-231 alignnone\" src=\"http:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Hud.png\" alt=\"Hud\" width=\"414\" height=\"597\" srcset=\"https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Hud.png 414w, https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Hud-208x300.png 208w\" sizes=\"(max-width: 414px) 100vw, 414px\" \/><\/a><\/p>\n<p>Next we&#8217;ll add a camera to the HUD, so right click the HUD in the hierarchy window and select Camera from the drop down menu that appears. We are using the camera purely so we can see the UI elements in the game window in the editor, as it makes it easier to check positioning while we are designing things. This camera will get disabled in play mode.<\/p>\n<p>Right click the HUD again and this time select UI-&gt;Text from the popup menu to add a child text object to it, then rename it <em>HealthText<\/em>. Then set the anchor to bottom left.<br \/>\n <a href=\"http:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Anchor.png\" rel=\"attachment wp-att-232\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-232 alignnone\" src=\"http:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Anchor.png\" alt=\"Anchor\" width=\"310\" height=\"451\" srcset=\"https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Anchor.png 310w, https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Anchor-206x300.png 206w\" sizes=\"(max-width: 310px) 100vw, 310px\" \/><\/a><\/p>\n<p>Now change the following other properties on the <em>HealthText<\/em> object you just added<\/p>\n<ul>\n<li>Pos X = 580<\/li>\n<li>Pos Y = 35<\/li>\n<li>Width 410<\/li>\n<li>Height 80<\/li>\n<li>Text = Health: 100<\/li>\n<li>Font Size = 64<\/li>\n<li>Alignment = Right<\/li>\n<li>Colour = White<\/li>\n<\/ul>\n<p>When you&#8217;re done your <em>HealthText<\/em> should be set up like this<\/p>\n<p><a href=\"http:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/HealthText.png\" rel=\"attachment wp-att-234\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-234 alignnone\" src=\"http:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/HealthText.png\" alt=\"HealthText\" width=\"414\" height=\"634\" srcset=\"https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/HealthText.png 414w, https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/HealthText-196x300.png 196w\" sizes=\"(max-width: 414px) 100vw, 414px\" \/><\/a><\/p>\n<p>and your game display should look something like this<\/p>\n<p><a href=\"http:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/GameDisplay.png\" rel=\"attachment wp-att-233\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-233 alignnone\" src=\"http:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/GameDisplay-1024x540.png\" alt=\"GameDisplay\" width=\"654\" height=\"345\" srcset=\"https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/GameDisplay-1024x540.png 1024w, https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/GameDisplay-300x158.png 300w, https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/GameDisplay-768x405.png 768w, https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/GameDisplay.png 1154w\" sizes=\"(max-width: 654px) 100vw, 654px\" \/><\/a><\/p>\n<p>And your hierarchy should look like this:-<\/p>\n<p><a href=\"http:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Hierarchy.png\" rel=\"attachment wp-att-249\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-249 alignnone\" src=\"http:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Hierarchy.png\" alt=\"Hierarchy\" width=\"289\" height=\"324\" srcset=\"https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Hierarchy.png 289w, https:\/\/www.doofah.com\/tutorials\/wp-content\/uploads\/2016\/02\/Hierarchy-268x300.png 268w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/><\/a><\/p>\n<p>Now create a new folder in Assets and rename it HUD. Then create a new script in the HUD folder and rename it HUD too. Open this new script in your editor and replace the default code with the following:-<br \/>\n<script src=\"\/\/pastebin.com\/embed_js\/vy0kCnsT\"><\/script><br \/>\nIn this script, the first thing that happens is that during <em>Awake<\/em> it sets up a static singleton reference, and ensures that only one instance of the HUD can ever exist in any scene.<br \/>\nThen it gets and saves a reference to the <em>HealthText<\/em> object.<\/p>\n<p>It has one other function, <em>DisplayHealth<\/em>() which as the name suggest displays our current health in the <em>HealthText<\/em> Text component of our HUD.<\/p>\n<p>So now we have our HUD script\u00a0we need to save it\u00a0and drag it onto the HUD game object in the hierarchy.<\/p>\n<p>Now all that remains is to make a small change to our <em>HealthAndDamage<\/em> script to make the HUD update as our health changes. So open up the <em>HealthAndDamage<\/em> script in the editor and add the following lines of code to the end of the <em>OnHealthChanged<\/em>() function<br \/>\n<script src=\"\/\/pastebin.com\/embed_js\/QLPb2YiX\"><\/script><br \/>\n What this does is, first of all check if <em>isLocalPlayer<\/em> is true, as we only want to display the health as it changes for our local player. If it is, we call the <em>DisplayHealth<\/em> function on the HUD and pass it our current health. This will in turn update the text display as our health changes.<\/p>\n<p>This is the full <em>HealthAndDamage<\/em> script with the above changes:-<br \/>\n<script src=\"\/\/pastebin.com\/embed_js\/VNq788LQ\"><\/script><br \/>\nSave the <em>HealthAndDamage<\/em> script, then save the <em>Online<\/em> scene and load the <em>Offline<\/em> scene. Now if you build and run the game, you&#8217;ll see the health displayed in the lower right hand corner of the screen and as you take hits from the laser from the opposing player your health will decrease in value and be displayed on screen.<\/p>\n<p>There is no check for when it reaches zero yet, but we will fix that in the next tutorial, along with handling re-spawning and scoring.<\/p>\n<p>See you next time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to part 5 of my Unity 5 basic networking tutorial, in this part we will add damage and health, so at least your laser will have some purpose now! Before we get to the laser, I want to make a small change to the NetworkPlayer script, with the addition of two lines. So open [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":14,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[11,12,13,16,9,15,10,14,8],"_links":{"self":[{"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/posts\/221"}],"collection":[{"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":27,"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"predecessor-version":[{"id":407,"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/posts\/221\/revisions\/407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/media\/14"}],"wp:attachment":[{"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.doofah.com\/tutorials\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}