UMG: Change weapon panel

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! 

This Tutorial has been created using Unreal Engine 4.8.2. 
Make sure you are working on the same version of the engine.

SOME THEORY Screen Shot 2015-07-17 at 11.20.25 I won’t be using Bindings in UMG – it would be to heavy in my opinion. Flow in theory:

  1. GameplayCharacter will send all weapons information to UMG. CurrentWeapon and weapons in slots. UMG will be able to fill data then – images and ammo,
  2. GameplayCharacter will tell UMG when to update the widgets, (when weapon fired, when equipped etc)
  3. UMG will tell GameplayCharacter when Panel is Toggled. Character can toggle DOF then,
  4. 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: ui_brush


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,

setweaponreferences

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

checkwhichweaponiscurrent

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.

construct

  • Custom Event: UpdateData

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

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

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. buttonsevent

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: choseweaponpp

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

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

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. updatedataoncharacter

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

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

And that’s all!

2 thoughts on “UMG: Change weapon panel

  1. Nice work you did there !
    Just to know, could you make an alternative of this post, with the weapon change after having made a scroll up or down with the mouse wheel ? If not, don’t worry, that’s already an amazing project and a great tutorial once again !
    Thanks for this site and good luck for future work !

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s