This will be more advanced post but you will learn a lot about UMG->Blueprint communication. Here are my goals:

Draw all slot weapons informations,

Change weapons from UMG panel,

Will work on PC and Touch,

Player shouldn’t be able to choose weapon which don’t have ammo,

Player should see which weapon is currently equipped,

When choosing weapons do slomo and DOF effect,

Lot’s of great stuff do to!

<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. 1 2 < 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 .

SOME THEORY I won’t be using Bindings in UMG – it would be to heavy in my opinion. Flow in theory:

GameplayCharacter will send all weapons information to UMG. CurrentWeapon and weapons in slots. UMG will be able to fill data then – images and ammo, GameplayCharacter will tell UMG when to update the widgets, (when weapon fired, when equipped etc) UMG will tell GameplayCharacter when Panel is Toggled. Character can toggle DOF then, UMG will tell GameplayCharacter when player want to change weapon. Character will try to equip this weapon,

So, let’s start blueprinting.

Updating BP_BaseWeapon. Open BP_BaseWeapon and add two new variables:

UI_Brush (Slate Brush),

UI_WeaponName (Text, default: None)

In earlier post I have shown you how to create icons from 3d meshes. 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:

Creating UMG. Create new widget blueprint named HUD_ChangeWeapon. Open it and try to recreate my hierarchy from this video: Now to go graph and create variables:

SelectedColor (LinearColor: (R=0.943400,G=1.000000,B=0.235147,A=1.000000)

NormalColor (LinearColor: (R=1.000000,G=1.000000,B=1.000000,A=1.000000)

NoAmmoColor: (LinearColor:(R=0.000000,G=0.000000,B=0.000000,A=0.000000)

isOpened (bool)

Event Dispatchers:

PanelToggle (inputs: isOpened bool)

WeaponSelected (inputs: WhichSlot int)

Functions:

SetWeaponReferences, Inputs: Slot_1_Weapon, type: BP_BaseWeapon, Slot_2_Weapon, type: BP_BaseWeapon, Slot_3_Weapon, type: BP_BaseWeapon, CurrentWeapon, type: BP_BaseWeapon,

CheckWhichWeaponIsCurrent, Output: CurrentWeaponButton, type: Button, Local Variables: LocalCurrentWeapon, type: Button,

This function will return us button for current using weapon, so we can change button color later. Now events:

Event Construct: Play hide panel animation.

Custom Event: UpdateData

This event will actually update the data on buttons. Set ammo texts and disable buttons if we don’t have ammo.

Custom Event: SetStartData

This will update weapon images and maybe later on weapon name text. This will be called only once that’s why it’s not in UpdateData.

Custom Event: TogglePanel

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.

And that’s all for UMG!

Updating GameplayCharacter Open GameplayCharacter and add Widget to Components named HUD_ChangeWeapon. Widget should be attached to SpringArm like others HUD widgets. Widget Properties:

Location: (X=-12.177324,Y=15.154049,Z=17.319519)

Rotation: (Pitch=0.000075,Yaw=109.999832,Roll=89.999924)

Scale: (X=0.034050,Y=0.034050,Z=0.034050),

WidgetClass: HUD_ChangeWeapon,

DrawSize 550×300,

Collision Presets: UI

Now create new variables:

NormalPostProcess (Post Process Settings)

ChoseWeaponPostProcess (Post Process Settings) In this settings we will change DOF like here:

Go to SpawnWeaponsAndAssignToSlots function and in the end let’s assign weapon references to our UMG.

Now go to event graph and add this to your BeginPlay:

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.

Find Fire custom event and in the end let’s update the UMG.

Create “G” keyboard input event which will toggle the panel.

And that’s all!