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! 

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!

10 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 !

      • Hey, Thanks for tutorial! But how you made slow motion effect?
        You used Set Custom Time Dilation? I tried it, but it not slowing down physical rigidbodies, just slows all update functions.
        For ex. if boxes are falling and you make slow down, boxes still continues falling at normal speed 🙁
        Also there is a moment that is not comfortable: when i run fast and press inventory, and when player slowsdown and you make normal speed again, it stops running, It resets velocity to zero, i mean you need to release W/Up key and press again to start accelerating and running.

        • Set World Time Dilation will change rigid bodies as well – I’m not sure if it will work in 4.10. I will be moving my AI / Gameplay to 4.10 soon and post about issues. Yes custom time dilation set in actor that have phys asset won’t work.

          I don’t have movement in ShooterTutorial but I don’t think your movement issue is connected with physics. If you open UMG probably your input won’t tick. Try to find out if ‘w’ key is ticking while in inventory.

  2. I am using UE4.9 and the issues that I have are: first, weapon selection works wrong. namely, when I am hovering over slot1 or slot2 or even slot3, it is not hovered and when I am hovering out of the panel somwere on the screen it is hovered but when click not hovered or even hovered slot it is not equipping weapon. Second, the post-process of “ChoseWeaponPostProcess” it is effecting even the weaponchose panel. Can you advice or tell me what is wrong?

  3. Hey Farrukh, for your second issue – I found that changing the HUD Widget from “World” to “Screen” fixed this. Specifically, go to your Gameplay Character blueprint, and select the “HUD_ChangeWeapon” widget which is on the spring arm. The option to change this is under the section ‘User Interface’ in the right hand panel. You may need to resize or reposition your art because they are not physically in the world anymore/held at a distance, so you may find that they get huge. That should be an easy fix though. I actually set almost every UI element in this project to “Screen”, as that also excludes the UI elements from motion blur.

    This tutorial completely broke my project incidentally. I think I went wrong here: http://i0.wp.com/shootertutorial.com/wp-content/uploads/2015/07/setweaponreferences.jpg?resize=676%2C170

    I’ve gotten used to filling in the “blanks” so to speak, reading through this tutorial series (that’s not a knock against the author, it forces me to learn this stuff and dive deeper – and author if you’re reading this you are awesome and I can’t thank you enough for taking the time to do this). In any case I think I made an incorrect assumption at that step above, I went and created fresh variables called “Slot 1 Weapon” “Slot 2 Weapon” etc., and then dragged them in and picked ‘set’ and connected everything as pictured. Each one is a reference to BP_Base_Weapon. We weren’t instructed to do this exactly but this was the only way I could think of to achieve that image. If this WAS the correct thing to do, then I’m even more stumped.

    The issue that I have is that the correct guns get spawned and attached to their socket when I switch, but now they all have the BP_BaseWeapon characteristics. Meaning, even if I have a shotgun now, he holds it like a pistol and lowers the gun to reload, because BP_BaseWeapon has those as default. I’m just going to tear down and start this section all over again, but any ideas are welcome.

  4. Also meant to ask – is there an updated download on drop box for your blueprints so I can check my work? The blueprints.rar file I was using is missing quite a few files, including HUD_ChangeWeapon

  5. Turns out something happened which reverted all my weapon blueprints to “Pistol” in the weapon type drop down. How or when this happened is a mystery and is actually kind of alarming. If I’d been in production on something and a variable changed somewhere at random that would be pretty aggravating.

    • Sorry for the comment spam but I got everything working. One thing I wanted to mention for the next person who tries this – I ended up having to fill in the “False” pins at the end of this step: http://i0.wp.com/shootertutorial.com/wp-content/uploads/2015/07/updatedata.jpg

      All you need to do is duplicate the ‘SetIsEnabled’/Button Slot target nodes at the end of each sequence, check ‘InIsEnabled’, and connect to the “False” pin in each of the branch nodes. Not sure if it’s a version thing or what (I’m on 4.10) but before I did this the buttons didn’t work – top one showed as selected and bottom two were greyed out even though I had assigned weapons which had ammo.

Leave a Reply