<?xml version="1.0" encoding="UTF-8" standalone="yes"?><oembed><version><![CDATA[1.0]]></version><provider_name><![CDATA[Shooter Game Tutorial]]></provider_name><provider_url><![CDATA[http://shootertutorial.com]]></provider_url><author_name><![CDATA[andrzejkoloska]]></author_name><author_url><![CDATA[https://shootertutorial.com/author/andrzejkoloska/]]></author_url><title><![CDATA[How to add spread and dynamic crosshair to&nbsp;weapon]]></title><type><![CDATA[link]]></type><html><![CDATA[<p><a href="http://shootertutorial.com/2015/06/13/how-to-add-spread-and-dynamic-crosshair-to-weapon/"><img class="alignnone wp-image-393 size-full" src="https://shootertutorial.files.wordpress.com/2015/06/spread.png?w=477&#038;h=248" alt="spread" width="477" height="248" /></a></p>
<p>In this post I would like to work on:</p>
<ul>
<li>Increasing spread when shooting,</li>
<li>Decreasing spread when in idle,</li>
<li>Dynamic crosshair that will tell me what&#8217;s the current spread,</li>
</ul>
<p>Crosshair and spread is one of my favorite topic. You can<a href="http://technicalgamedesign.blogspot.com/2011/04/aim-systems-in-first-person-shooters.html" target="_blank"> read here</a> great article about aim systems, and math behind spread in <a href="https://answers.unrealengine.com/questions/135003/what-is-the-math-behind-a-crosshair.html" target="_blank">AnswerHub</a>. Let&#8217;s try to do this by our self!</p>
<p><!--more--></p>
<pre><strong>This Tutorial has been created using Unreal Engine 4.8.2</strong>. 
Make sure you are working on the same version of the engine.</pre>
<p><strong>Implementing spread.</strong></p>
<p>In <a href="http://shootertutorial.com/2015/06/12/tutorial-how-to-fire-a-weapon-create-ammo-data-impact-effects/" target="_blank">earlier post</a> we have created couple of variables in BP_MainWeapon. We need more:</p>
<ul>
<li>DeltaTime, (float)</li>
<li>SpreadDecreaseSpeed (float, default: 0.1)</li>
</ul>
<p>Functions:</p>
<ul>
<li>IncreaseSpread (input IncreaseAmmount (float) )<br />
<a href="https://shootertutorial.files.wordpress.com/2015/06/increasespread.jpg"><img class="alignnone size-medium wp-image-381" src="https://shootertutorial.files.wordpress.com/2015/06/increasespread.jpg?w=300&#038;h=105" alt="increasespread" width="300" height="105" /></a></li>
<li>DecreaseSpread (input DecreaseAmmount (float) )<br />
<a href="https://shootertutorial.files.wordpress.com/2015/06/decreasespread.jpg"><img class="alignnone size-medium wp-image-382" src="https://shootertutorial.files.wordpress.com/2015/06/decreasespread.jpg?w=300&#038;h=116" alt="decreasespread" width="300" height="116" /></a></li>
</ul>
<p>In Event graph create Tick event.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/06/mainweapontick.jpg"><img class="alignnone size-medium wp-image-383" src="https://shootertutorial.files.wordpress.com/2015/06/mainweapontick.jpg?w=300&#038;h=148" alt="mainweapontick" width="300" height="148" /></a></p>
<p>So basically we are decreasing spread all the time.</p>
<hr />
<p>Now in <strong>BP_Weapon_Pistol</strong> set variables:</p>
<ul>
<li>SpreadMin = 0</li>
<li>SpreadMax = 0.3</li>
<li>SpreadCurrent = 0.3</li>
<li>SpreadDecreaseSpeed = 0.25</li>
</ul>
<p>And in Fire event add IncreaseSpread by 0.1 like here:</p>
<p><img class="alignnone wp-image-384 size-full" src="https://shootertutorial.files.wordpress.com/2015/06/pistolfireincreasespread.jpg?w=328&#038;h=187" alt="pistolfireincreasespread" width="328" height="187" /></p>
<p>So every time we shoot we will increase spread by 0.1. At this point you will see that spread is working correctly.</p>
<hr />
<p>Now we need to <strong>create an crosshair</strong> indicator to show us the spread.</p>
<p>Basically the best way to do this is in C++ using canvas (like in Shooter Example from Epic) I&#8217;ve tried to create this in HUD blueprint using Canvas as well but there is still couple of functions not exposed to blueprints (drawicon for example) so I decided to do this using UMG.</p>
<p>Create new User Widget and name it UI_Debug_HUD.</p>
<p>You would need to find crosshair assets. I&#8217;ve copied them from Shooter Example HUDMainTexture. UMG can&#8217;t draw image based on UV so each part of the crosshair need to be separated (center, left, right, top, bottom)</p>
<p>Here&#8217;s the designer settings for all of them:</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/06/crossleft.jpg" target="_blank"><img class=" wp-image-386 size-thumbnail alignnone" src="https://shootertutorial.files.wordpress.com/2015/06/crosscenter.jpg?w=150&#038;h=103" alt="crosscenter" width="150" height="103" /> <img class=" wp-image-387 size-thumbnail alignnone" src="https://shootertutorial.files.wordpress.com/2015/06/crossleft.jpg?w=150&#038;h=96" alt="crossleft" width="150" height="96" /></a>  <a href="https://shootertutorial.files.wordpress.com/2015/06/crossright.jpg" target="_blank"><img class=" wp-image-388 size-thumbnail alignnone" src="https://shootertutorial.files.wordpress.com/2015/06/crossright.jpg?w=150&#038;h=94" alt="crossright" width="150" height="94" /></a> <a href="https://shootertutorial.files.wordpress.com/2015/06/crosstop.jpg" target="_blank"><img class="alignnone wp-image-389 size-thumbnail" src="https://shootertutorial.files.wordpress.com/2015/06/crosstop.jpg?w=150&#038;h=98" alt="crosstop" width="150" height="98" /></a>  <a href="https://shootertutorial.files.wordpress.com/2015/06/crossbottom.jpg" target="_blank"><img class="alignnone wp-image-390 size-thumbnail" src="https://shootertutorial.files.wordpress.com/2015/06/crossbottom.jpg?w=150&#038;h=102" alt="crossbottom" width="150" height="102" /></a></p>
<p>Now in Event Graph create Tick event and let&#8217;s move crosshair elements depending on CurrentSpread.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/06/crosshairdraw.jpg" target="_blank"><img class="alignnone wp-image-496 size-large" src="https://shootertutorial.files.wordpress.com/2015/06/crosshairdraw.jpg?w=1024&#038;h=486" alt="crosshairdraw"   /></a></p>
<p>Now in GameplayHUD in Begin Play create UI_Debug_HUD and add it to viewport. Remember that your Game Type should have GameplayHUD connected as HUD class!</p>
<p><span class='embed-youtube' style='text-align:center; display: block;'><iframe class='youtube-player' type='text/html' width='640' height='390' src='https://www.youtube.com/embed/cK6XRJV56S0?version=3&#038;rel=1&#038;fs=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' frameborder='0' allowfullscreen='true'></iframe></span><br />
Watch in HD it&#8217;s hard to see crosshair.</p>
<hr />
<blockquote><p>Creating ShooterTutorial takes a lot of my free time.<br />
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=8UXM3JZGDPPPE"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" alt="Buy Now Button" /><br />
</a>If you want you can help me out! I will use your donation to buy better assets packs and you will be added to Credits /Backers page as well.</p>
<p>Implementing game is taking time but writing about this is taking much more effort!</p></blockquote>
]]></html><thumbnail_url><![CDATA[https://i1.wp.com/shootertutorial.files.wordpress.com/2015/06/crosshairdraw.jpg?fit=440%2C330]]></thumbnail_url><thumbnail_height><![CDATA[208]]></thumbnail_height><thumbnail_width><![CDATA[440]]></thumbnail_width></oembed>