<?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: Change weapon&nbsp;panel]]></title><type><![CDATA[link]]></type><html><![CDATA[<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/Wf7cV7ljTfo?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> This will be more advanced post but you will learn a lot about UMG-&gt;Blueprint communication. Here are my goals:</p>
<ul>
<li>Draw all slot weapons informations,</li>
<li>Change weapons from UMG panel,</li>
<li>Will work on PC and Touch,</li>
<li>Player shouldn&#8217;t be able to choose weapon which don&#8217;t have ammo,</li>
<li>Player should see which weapon is currently equipped,</li>
<li>When choosing weapons do slomo and DOF effect,</li>
</ul>
<p>Lot&#8217;s of great stuff do to! <!--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>SOME THEORY</strong> <a href="https://shootertutorial.files.wordpress.com/2015/07/screen-shot-2015-07-17-at-11-20-25.png"><img class="alignnone wp-image-758 size-large" src="https://shootertutorial.files.wordpress.com/2015/07/screen-shot-2015-07-17-at-11-20-25.png?w=1024&#038;h=650" alt="Screen Shot 2015-07-17 at 11.20.25"   /></a> I won&#8217;t be using Bindings in UMG &#8211; it would be to heavy in my opinion. Flow in theory:</p>
<ol>
<li>GameplayCharacter will send all weapons information to UMG. CurrentWeapon and weapons in slots. UMG will be able to fill data then &#8211; images and ammo,</li>
<li>GameplayCharacter will tell UMG when to update the widgets, (when weapon fired, when equipped etc)</li>
<li>UMG will tell GameplayCharacter when Panel is Toggled. Character can toggle DOF then,</li>
<li>UMG will tell GameplayCharacter when player want to change weapon. Character will try to equip this weapon,</li>
</ol>
<p>So, let&#8217;s start blueprinting.</p>
<hr />
<p><strong>Updating BP_BaseWeapon.</strong> Open BP_BaseWeapon and add two new variables:</p>
<ul>
<li>UI_Brush (Slate Brush),</li>
<li>UI_WeaponName (Text, default: None)</li>
</ul>
<p>In earlier post I have shown you <a href="http://shootertutorial.com/2015/07/15/umg-how-to-create-icons-from-3d-assets/">how to create icons from 3d meshes</a>. Use this method to create icons for your weapons and remember to fill UI_Brush variable in your weapons as I did for BP_WeaponPistol: <a href="https://shootertutorial.files.wordpress.com/2015/07/ui_brush.jpg"><img class="alignnone wp-image-767 size-full" src="https://shootertutorial.files.wordpress.com/2015/07/ui_brush.jpg?w=446&#038;h=199" alt="ui_brush" width="446" height="199" /></a></p>
<hr />
<p><strong>Creating UMG.</strong> Create new widget blueprint named HUD_ChangeWeapon. Open it and try to recreate my hierarchy from this video: <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/JbaA3SnBlxs?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> Now to go graph and create variables:</p>
<ul>
<li>SelectedColor (LinearColor:  (R=0.943400,G=1.000000,B=0.235147,A=1.000000)</li>
<li>NormalColor (LinearColor: (R=1.000000,G=1.000000,B=1.000000,A=1.000000)</li>
<li>NoAmmoColor: (LinearColor:(R=0.000000,G=0.000000,B=0.000000,A=0.000000)</li>
<li>isOpened (bool)</li>
</ul>
<p>Event Dispatchers:</p>
<ul>
<li>PanelToggle (inputs: isOpened bool)</li>
<li>WeaponSelected (inputs: WhichSlot int)</li>
</ul>
<p>Functions:</p>
<ul>
<li>SetWeaponReferences, Inputs: Slot_1_Weapon, type: BP_BaseWeapon, Slot_2_Weapon, type: BP_BaseWeapon, Slot_3_Weapon, type: BP_BaseWeapon, CurrentWeapon, type: BP_BaseWeapon,</li>
</ul>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/setweaponreferences.jpg"><img class="alignnone wp-image-762 size-large" src="https://shootertutorial.files.wordpress.com/2015/07/setweaponreferences.jpg?w=1024&#038;h=258" alt="setweaponreferences"   /></a></p>
<ul>
<li>CheckWhichWeaponIsCurrent, Output: CurrentWeaponButton, type: Button, Local Variables: LocalCurrentWeapon, type: Button,</li>
</ul>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/checkwhichweaponiscurrent.jpg"><img class="alignnone size-medium wp-image-763" src="https://shootertutorial.files.wordpress.com/2015/07/checkwhichweaponiscurrent.jpg?w=300&#038;h=192" alt="checkwhichweaponiscurrent" width="300" height="192" /></a></p>
<p>This function will return us button for current using weapon, so we can change button color later. Now events:</p>
<ul>
<li>Event Construct: Play hide panel animation.</li>
</ul>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/construct1.jpg"><img class="alignnone wp-image-764 size-full" src="https://shootertutorial.files.wordpress.com/2015/07/construct1.jpg?w=521&#038;h=295" alt="construct" width="521" height="295" /></a></p>
<ul>
<li>Custom Event: UpdateData</li>
</ul>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/updatedata.jpg"><img class="alignnone size-medium wp-image-765" src="https://shootertutorial.files.wordpress.com/2015/07/updatedata.jpg?w=300&#038;h=172" alt="updatedata" width="300" height="172" /></a></p>
<p>This event will actually update the data on buttons. Set ammo texts and disable buttons if we don&#8217;t have ammo.</p>
<ul>
<li>Custom Event: SetStartData</li>
</ul>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/setstartdata.jpg"><img class="alignnone wp-image-766 size-large" src="https://shootertutorial.files.wordpress.com/2015/07/setstartdata.jpg?w=1024&#038;h=710" alt="SetStartData"   /></a></p>
<p>This will update weapon images and maybe later on weapon name text. This will be called only once that&#8217;s why it&#8217;s not in UpdateData.</p>
<ul>
<li>Custom Event: TogglePanel</li>
</ul>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/togglepanel.jpg"><img class="alignnone size-medium wp-image-768" src="https://shootertutorial.files.wordpress.com/2015/07/togglepanel.jpg?w=300&#038;h=105" alt="togglepanel" width="300" height="105" /></a></p>
<p>This is showing / hiding our weapon selection panel. Last thing is button events. If you read earlier posts you should know how to add OnClicked event to Button. <a href="https://shootertutorial.files.wordpress.com/2015/07/buttonsevent.jpg"><img class="alignnone wp-image-769 size-large" src="https://shootertutorial.files.wordpress.com/2015/07/buttonsevent.jpg?w=1024&#038;h=685" alt="buttonsevent"   /></a></p>
<p>And that&#8217;s all for UMG!</p>
<hr />
<p><strong>Updating GameplayCharacter</strong> Open GameplayCharacter and add Widget to Components named HUD_ChangeWeapon. Widget should be attached to SpringArm like others HUD widgets. Widget Properties:</p>
<ul>
<li>Location: (X=-12.177324,Y=15.154049,Z=17.319519)</li>
<li>Rotation: (Pitch=0.000075,Yaw=109.999832,Roll=89.999924)</li>
<li>Scale: (X=0.034050,Y=0.034050,Z=0.034050),</li>
<li>WidgetClass: HUD_ChangeWeapon,</li>
<li>DrawSize 550&#215;300,</li>
<li>Collision Presets: UI</li>
</ul>
<p>Now create new variables:</p>
<ul>
<li>NormalPostProcess (Post Process Settings)</li>
<li>ChoseWeaponPostProcess (Post Process Settings) In this settings we will change DOF like here: <a href="https://shootertutorial.files.wordpress.com/2015/07/choseweaponpp.jpg"><img class="alignnone size-full wp-image-771" src="https://shootertutorial.files.wordpress.com/2015/07/choseweaponpp.jpg?w=295&#038;h=300" alt="choseweaponpp" width="295" height="300" /></a></li>
</ul>
<p>Go to SpawnWeaponsAndAssignToSlots function and in the end let&#8217;s assign weapon references to our UMG. <a href="https://shootertutorial.files.wordpress.com/2015/07/setweaponref2.jpg"><img class="alignnone wp-image-774 size-large" src="https://shootertutorial.files.wordpress.com/2015/07/setweaponref2.jpg?w=1024&#038;h=295" alt="setweaponref"   /></a></p>
<p>Now go to event graph and add this to your BeginPlay:</p>
<p><a href="https://shootertutorial.files.wordpress.com/2015/07/beginplay.jpg"><img class="alignnone size-medium wp-image-772" src="https://shootertutorial.files.wordpress.com/2015/07/beginplay.jpg?w=300&#038;h=204" alt="beginplay" width="300" height="204" /></a></p>
<p>We are binding to UMG here. This is driving DOF and equipping weapons. Now we need to update UMG in couple of places. Find UpdateHUDWeaponInfo custom event we had created  earlier and add updating data on UMG. <a href="https://shootertutorial.files.wordpress.com/2015/07/updatedataoncharacter.jpg"><img class="alignnone wp-image-775 size-large" src="https://shootertutorial.files.wordpress.com/2015/07/updatedataoncharacter.jpg?w=1024&#038;h=286" alt="updatedataoncharacter"   /></a></p>
<p>Find Fire custom event and in the end let&#8217;s update the UMG. <a href="https://shootertutorial.files.wordpress.com/2015/07/fireupdate.jpg"><img class="alignnone wp-image-777 size-large" src="https://shootertutorial.files.wordpress.com/2015/07/fireupdate.jpg?w=1024&#038;h=464" alt="fireupdate"   /></a></p>
<p>Create &#8220;G&#8221; keyboard input event which will toggle the panel. <a href="https://shootertutorial.files.wordpress.com/2015/07/toggleinput.jpg"><img class="alignnone wp-image-776 size-large" src="https://shootertutorial.files.wordpress.com/2015/07/toggleinput.jpg?w=1024&#038;h=297" alt="toggleinput"   /></a></p>
<p>And that&#8217;s all! <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/Wf7cV7ljTfo?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://i2.wp.com/shootertutorial.files.wordpress.com/2015/07/fireupdate.jpg?fit=440%2C330]]></thumbnail_url><thumbnail_height><![CDATA[198]]></thumbnail_height><thumbnail_width><![CDATA[440]]></thumbnail_width></oembed>