<?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[UMG UI: Draw current weapon&nbsp;information]]></title><type><![CDATA[link]]></type><html><![CDATA[<p><a href="https://shootertutorial.files.wordpress.com/2015/07/weaponinfoscreen.png"><img class="alignnone wp-image-709 size-full" src="https://shootertutorial.files.wordpress.com/2015/07/weaponinfoscreen.png?w=216&#038;h=106" alt="WeaponInfoScreen" width="216" height="106" /></a></p>
<p>In this post I will focus on creating another UMG widget which will:</p>
<ul>
<li>Let me know how much ammo do I have in mag and backpack,</li>
<li>Let me know when I&#8217;m reloading weapon,</li>
<li>Will be implemented as UMG pipeline was created,</li>
</ul>
<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>In <a href="http://shootertutorial.com/2015/07/12/umg-ui-draw-player-health-and-armor/">last post</a> I&#8217;ve showed how to use events to drive data to UMG, this time I will use UMG bindings to drive data to widgets. It&#8217;s less optimised because when binding to functions they will tick all the time but it&#8217;s great UMG feature which you should definitely use!</p>
<hr />
<p><strong>Creating widget.</strong></p>
<p>Create new Widget Blueprint named HUD_WeaponInfo and open it. Try to recreate my hierarchy:</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/ACTH4ndKex4?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></p>
<p>Now in Graph add those variables:</p>
<ul>
<li>CurrentWeaponRef (BP_BaseWeapon actor),</li>
<li>isReloading (bool),</li>
</ul>
<p>Go back to designer and select your TextBlock_AmmoInMag. Create new binding.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/bindtofunction.jpg"><img class="alignnone size-full wp-image-710" src="https://shootertutorial.files.wordpress.com/2015/07/bindtofunction.jpg?w=559&#038;h=249" alt="bindtofunction" width="559" height="249" /></a></p>
<p>By default function will have name like GetText_0 or something. Rename it to GetText_AmmoInMag. Here&#8217;s the function:</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/gettextammoinmag.jpg"><img class="alignnone size-large wp-image-711" src="https://shootertutorial.files.wordpress.com/2015/07/gettextammoinmag.jpg?w=1024&#038;h=457" alt="gettextammoinmag"   /></a></p>
<p>Create binding for TextBlock_CurrentAmmo named  GetText_AmmoInBackpack:</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/gettextammoinbackpack.jpg"><img class="alignnone size-large wp-image-712" src="https://shootertutorial.files.wordpress.com/2015/07/gettextammoinbackpack.jpg?w=1024&#038;h=409" alt="gettextammoinbackpack"   /></a></p>
<p>Create last binding for TextBlock_Reloading named GetText_IsReloading:</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/gettextisreloading.jpg"><img class="alignnone wp-image-713 size-large" src="https://shootertutorial.files.wordpress.com/2015/07/gettextisreloading.jpg?w=1024&#038;h=698" alt="gettextisreloading"   /></a></p>
<p>Basically you can bind almost everything in UMG. This feature is really powerful if you have references for your data.</p>
<p>Now in Event Graph create those functions:</p>
<ul>
<li>SetIsReloading (input bool: newreloading),<br />
<a href="https://shootertutorial.files.wordpress.com/2015/07/setisreloading.jpg"><img class="alignnone size-medium wp-image-714" src="https://shootertutorial.files.wordpress.com/2015/07/setisreloading.jpg?w=300&#038;h=102" alt="setisreloading" width="300" height="102" /></a></li>
<li>SetWeaponRef (input BP_BaseWeapon actor: Current Weapon),<br />
<a href="https://shootertutorial.files.wordpress.com/2015/07/setweaponref.jpg"><img class="alignnone size-medium wp-image-715" src="https://shootertutorial.files.wordpress.com/2015/07/setweaponref.jpg?w=300&#038;h=88" alt="setweaponref" width="300" height="88" /></a></li>
</ul>
<p>On event construct we need to play Reloading Animation.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/construct.jpg"><img class="alignnone size-medium wp-image-716" src="https://shootertutorial.files.wordpress.com/2015/07/construct.jpg?w=300&#038;h=139" alt="construct" width="300" height="139" /></a></p>
<p>And that&#8217;s all for the Widget!</p>
<hr />
<p><strong>Attaching widget to Character</strong></p>
<p>Open GameplayCharacter and add Widget Component named HUD_WeaponInfo . It should be attached to Camera-&gt;FPPMesh-&gt;SpringArm as in <a href="http://shootertutorial.com/2015/07/12/umg-ui-draw-player-health-and-armor/">earlier post</a>. Here&#8217;s the widget properties:</p>
<ul>
<li>Location: (X=-12.177326,Y=11.173154,Z=5.743647)</li>
<li>Rotation: (Pitch=0.000068,Yaw=89.999947,Roll=89.999947)</li>
<li>Scale: (X=0.034050,Y=0.034050,Z=0.034050)</li>
<li>WidgetClass: HUD_WeaponInfo,</li>
<li>DrawSize: 300 / 100,</li>
<li>Collision Presets: No Collision,</li>
</ul>
<p>Now we need to set CurrentWeaponRef in this widget and update isReloading.</p>
<hr />
<p><strong>Updating widget</strong></p>
<p>SpawnWeaponsAndAssignToSlots function:</p>
<p>In the end of this function &#8211; you can use sequence let&#8217;s set current weapon in widget.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/spawnweaponsandassigntoslots.jpg"><img class="alignnone size-medium wp-image-717" src="https://shootertutorial.files.wordpress.com/2015/07/spawnweaponsandassigntoslots.jpg?w=300&#038;h=122" alt="SpawnWeaponsAndAssignToSlots" width="300" height="122" /></a></p>
<p>Create new Custom Widget named UpdateHUDWeaponInfo:</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/updatehudweaponinfo.jpg"><img class="alignnone size-medium wp-image-718" src="https://shootertutorial.files.wordpress.com/2015/07/updatehudweaponinfo.jpg?w=300&#038;h=95" alt="updatehudweaponinfo" width="300" height="95" /></a></p>
<p>So we will have one event to update the hud and it will be called from other places.</p>
<p>In Reload Event &#8211; after changing GameplayCharacter isReloading bool.</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/reload_updatehud.jpg"><img class="alignnone size-medium wp-image-719" src="https://shootertutorial.files.wordpress.com/2015/07/reload_updatehud.jpg?w=300&#038;h=110" alt="reload_updatehud" width="300" height="110" /></a></p>
<p>In EquipWeapon event:</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/equipweapon_updatehud.jpg"><img class="alignnone size-medium wp-image-720" src="https://shootertutorial.files.wordpress.com/2015/07/equipweapon_updatehud.jpg?w=300&#038;h=181" alt="equipweapon_updatehud" width="300" height="181" /></a></p>
<p>It would be much easier if we will store isReloading in BP_MainWeapon but it will be too much change for me at this point.</p>
<p>Final Effect</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/SRvQm1XgQ7I?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></p>
]]></html><thumbnail_url><![CDATA[https://i1.wp.com/shootertutorial.files.wordpress.com/2015/07/equipweapon_updatehud.jpg?fit=440%2C330]]></thumbnail_url><thumbnail_height><![CDATA[265]]></thumbnail_height><thumbnail_width><![CDATA[440]]></thumbnail_width></oembed>