Announcement

Collapse
No announcement yet.

Tutorial overview: Working Stamina/health/magic bar that updates to the hud and more

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Tutorial overview: Working Stamina/health/magic bar that updates to the hud and more





    If you are in to RPG type games, then this will definitely be something for you. This covers quite a few already explained things, but this will tie it all somewhat nicely into something a bit more playable.

    It will cover:
    Drawing a basic crosshair to the screen
    A really quick and dirty Mini Map.... Super basic (still working on it lol)
    How to draw the health bar, mana and stamina bar (They are essentially a clone of the same thing.)

    And the real bread and butter of it, the main part:
    How to make the character expend stamina while sprinting, and when there isn't enough energy revert back to normal movement. And update this info to the hud!


    What you will need:

    The blueprint editor.
    A mask texture for the stat bar. there is a nice one provided by Epic in their blueprint HUD example.
    A crosshair texture. There is an ok basic thing we can use in the engine assets.
    perhaps a new keyboard and mouse and some arthritis cream, because there is a lot of typing, and mouse activity.

    Now aren't you lucky I was up for 2 days working this stuff out for my self

    The second video, can be found here:
    https://forums.unrealengine.com/show...ll=1#post79573

    The third video can be found here:
    https://forums.unrealengine.com/show...ll=1#post81754

    The below text is now outdated, as the video covers it all. But I will leave it here as a supplementary.
    Code:
    1. Drawing the crosshair
    
    Now to get started, we need something to actually draw our funky goodies to.
    
    We need a HUD blueprint. 
    If you haven't got one, create one now and if you also don't know how to make it default to your game then look here: 
    https://www.youtube.com/playlist?lis...t4chjhypxIO9ZB
    
    And come back a little bit later once you get a little bit better understanding of how it works. I'll likely add up another mini tutorial here in case you are definitely like me and DEEP END)
    
    Once the HUD is open, we will need the somewhat standard get screen resolution stuff.
    Click image for larger version
    
    Name:	1.JPG
    Views:	1
    Size:	33.6 KB
    ID:	1135979
    
    The Screen Dimension is a "Vector 2d" Variable type and will get called on quite a lot throughout your HUD. once you have this set up we can now draw the HUD on the screen.
    
    Click image for larger version
    
    Name:	crosshair.JPG
    Views:	1
    Size:	73.9 KB
    ID:	1135980
    
    This will get the screen dimensions and then do a little bit of math, to get the center of the screen. The add and minus usually offsets the texture drawn to line up properly. (usually half the texture dimensions)
    
    The crosshair variable uses a crosshair that can be found in the engine content. just make sure to check "show engine content" if you can't find something. Its a variable so we can change it easily later.
    Click image for larger version
    
    Name:	crosshair vairable.JPG
    Views:	1
    Size:	21.6 KB
    ID:	1135981
    
    Last thing we need to do is set the texture transparency in the "Draw texture" to masked. just click the arrow to expand the rest of the options.
    
    Save and compile, test the engine. you should end up with something like this:
    
    Click image for larger version
    
    Name:	cross.JPG
    Views:	1
    Size:	18.2 KB
    ID:	1135982
    
    That's the crosshair done. Make a cuppa tea, pat yourself on the back or shout from a mountain top. You have earned it.
    
    Now to draw the very basic Mini map. But be warned this isn't very great at the moment as I am still figuring out how to do the things I want with it. It can be unhooked if you don't like it at the moment.
    
    2. Drawing the Mini Map
    
    To get our minimap, we will need character/pawn blueprint and to get a new camera attached to it.
    Position it somewhere above its head. Mine is currently set at 500 on the Z axis, but I still think that's a little bit too close.
    
    Click image for larger version
    
    Name:	camera cap.JPG
    Views:	1
    Size:	12.9 KB
    ID:	1135983
    
    We also need a scene capture 2d component to be linked to our minimap camera.
    
    Click image for larger version
    
    Name:	render texture.JPG
    Views:	1
    Size:	22.4 KB
    ID:	1135985
    
    Now we will need a texture we can render to. In the content browser, preferably in somewhere obvious for it, create a TexterRenderTarget2D and name it "Minimap" or something obvious.
    
    Click image for larger version
    
    Name:	cont brow.JPG
    Views:	1
    Size:	84.7 KB
    ID:	1135986
    
    Open up the new texture and set the dimensions to 256*256. We wouldn't really need anything more than this and higher resolutions depending on what this camera is drawing may get quite intensive.
    
    After that, we need to set our camera to use it. so click on your character blueprint and on the scene capture component, set the render target to your newly created texture.
    
    Click image for larger version
    
    Name:	targets.JPG
    Views:	1
    Size:	51.1 KB
    ID:	1135987
    
    There is a video on youtube, created by pepe thefrog detailing this previous part, found here:
    https://www.youtube.com/watch?v=adYVI5XYmoI
    
    Now that we have our minimap camera set up, we can now add it to our hud. and this is the easiest bit.
    
    Open up your hud blueprint, and where we had our crosshair, on the last node, create a new "draw texture" and set its texture to the minimap texture we made earlier.
    
    Click image for larger version
    
    Name:	minimap.JPG
    Views:	1
    Size:	75.0 KB
    ID:	1135988
    
    I have mine set up to be opaque, as it will show on the screen invisible else, and located in the bottom right corner of the screen. you can change its position by changing the values there. Just play around and experiment.
    
    You will get something like this:
    
    Click image for larger version
    
    Name:	minimap view.JPG
    Views:	1
    Size:	34.0 KB
    ID:	1135990
    
    Now as you can see there is a lot more work to be done for it, like locking the camera rotation, adding in a zoom in/out for the minimap and to add some sort of texture overlay a bit later on to make it look nice. If you don't really want it there, you can just unhook it from the crosshair node or delete it until there is something better.
    
    Now that we have these out the way, now we get to the even bigger wall of text, at this point I hope someone makes a nice clear video about it.
    
    The real reason you are here:
    
    3. Drawing the Health magic or stamina bars
    
    3A. Getting started.
    
    First thing we need to do, is create our Blueprint Interface. These can be a little bit scary if you don't know how to use them effectively (I still don't) But it is used to store/gather incoming/out going values from one blueprint to another. In this case our main character BP to our HUD BP. And the values mostly health, stamina and magic. 
    
    Create the blueprint interface, and name it to do with your hud. here we will create 3 new functions. each function will have 2 "float" outputs.
    
    Function: Get Character Health
    Float: Current Health Value
    Float: Max Health Value
    
    Function: Get Character Magic
    Float: Current Magic Value
    Float: Max Magic Value
    
    Function: Get Character Stamina
    Float: Current Stamina Value
    Float: Max Stamina Value
    
    Click image for larger version
    
    Name:	hp.JPG
    Views:	1
    Size:	32.0 KB
    ID:	1135992  Click image for larger version
    
    Name:	magic.JPG
    Views:	1
    Size:	31.4 KB
    ID:	1135993  Click image for larger version
    
    Name:	stamina.JPG
    Views:	1
    Size:	31.9 KB
    ID:	1135994
    
    Compile/save and then add the newly created interface to both the Hud and your character blueprints through their blueprint properties button.
    
    Now we need to have assets for our attribute bars to draw.
    
    The content examples have a nice simple texture, and a material created for us already that we can use.
    I suggest copying them over to your project. you will have something like this:
    
    Texture:
    Click image for larger version
    
    Name:	generic.JPG
    Views:	1
    Size:	101.7 KB
    ID:	1135995
    
    materials: 
    Click image for larger version
    
    Name:	material.JPG
    Views:	1
    Size:	90.1 KB
    ID:	1135996
    
    I've changed the names of the parameters to max bar and current bar, to make it easier.
    Once you have the main material, make a few instances, one for health, mana and stamina and customise them here.
    Click image for larger version
    
    Name:	barsmat.JPG
    Views:	1
    Size:	16.5 KB
    ID:	1135997
    
    By now we should have our materials and texture set up. the rest is now just coding :)
    
    
    Here, it gets deep. And this is the more in your face, that is a lot of stuff going on let me go cry in the corner bit. But i will try and break this down as much as possible. Get ready for that arthritis cream.
    
    3b. Drawing the health bar to the hud.
    
    From our minimap node (or crosshair one if you decided not to minimap), we will get our "Get Character Health" function from which we created in the blueprint interface earlier.
    Our target would be "get player pawn". 
    
    Next we want to get 2 "Set Scalar Parameter Value" nodes and link them up in a line. These will read from the materials you created earlier and will do the texture updates on your hud for when your health is low or refils etc.
    In the first one, set the parameter name of it to the max variable that is in the material we created earlier. the second one will the current. also note the order of these, as this is the order they are rendered in.
    
    Click image for larger version
    
    Name:	scalar parameters.JPG
    Views:	1
    Size:	61.3 KB
    ID:	1135998
    
    We now want to create a new Variable. This will be a "MaterialInstanceDynamic" type. Call it Health bar. connect up the variable to both parameter value targets. This gets the actual material we are going to use for the hud.
    Next connect the current health value to the "Current bar parameter value" node and the the max health value to the other one.
    Click image for larger version
    
    Name:	linked.JPG
    Views:	1
    Size:	40.6 KB
    ID:	1135999
    
    Now we will draw the material to the hud, and set it with our "Health bar" Variable
    
    Click image for larger version
    
    Name:	render bar.JPG
    Views:	1
    Size:	43.5 KB
    ID:	1136000
    
    We now have one thing left before we can save, compile and see what we have ( a nice HP bar). 
    
    We have to go into the construction script of our hud.  here we need to actually set it to use our Health bar material instant we made and set it to our Health bar Variable.
    
    Click image for larger version
    
    Name:	hp b.JPG
    Views:	1
    Size:	41.3 KB
    ID:	1136001
    
    save, compile and see what you get :)
    
    Click image for larger version
    
    Name:	HP bar.JPG
    Views:	1
    Size:	58.8 KB
    ID:	1136002
    
    
    Whew, wasn't that a lot? but we have only just drawn something to the screen. It can recognize our health is lost, but that isn't connected up yet. Plus what if we wanted to draw some text over the bar saying what our total HP is, and whats left before the grim reaper with a megaphone comes to collect us? ah well that will be typed up shortly with plenty more goodies. 
    
    
    But for now...
    
    - being typed up, check back soon :)
    Last edited by HorusHeretic; 06-24-2014, 10:23 PM.
    Not all who wonder are lost in thought.

    #2
    very helpful and beautiful tutorials i'm following

    Comment


      #3
      Second video is now live, this will cover adding statbars on the hud, the minimap and cross hair, along with making the stats update the hud.



      This should bring the thread back up to date before the maintenance happened.

      If there is anything you need clarification on that i can help with then ask away.
      Last edited by HorusHeretic; 06-19-2014, 10:55 PM.
      Not all who wonder are lost in thought.

      Comment


        #4
        Horus I wanted to say great job!! Thank you for bringing this to the community, I have read over the tut before the video and will make time to watch the video tonight. Again thanks and keep it up!! Feed back to follow

        Comment


          #5
          I've got lots of coffee and will be up most of the night/morning, so i can try and get most of them up tonight.
          Not all who wonder are lost in thought.

          Comment


            #6
            i must find time to watch these, i'm not a rpg fan except DoW but HUD work is always good to know
            UT40K:The Chosen - Warhammer 40,000 for UE4
            ut40kgeodav - UE4 Tutorials

            Comment


              #7
              There is a lot of stuff i am working on function wise that was inspired from dawn of war but tbh i am just getting a code base at the moment so i can make any type of game from with minimal effort.
              I'm trying to expand the basic hud in to a more refined menu system but that's throwing me off atm how i want to go about it. But something will pop up somehow. xD
              Not all who wonder are lost in thought.

              Comment


                #8
                After a bit of a hectic weekend of crashing from bipolar and my friends birthday parties to cheer me up, part 3 is up. Not perfect, but I'm not a perfectionist xD



                (may still be processing if it is unavailable or low quality.)
                Not all who wonder are lost in thought.

                Comment


                  #9
                  Hello,
                  ive just realise when i was linking your tutorial for someone that i forgot to say thanks : so : Thank you, i learned by your tutorial and it helped me.

                  Comment


                    #10
                    THanks a lot, very usefull tutorial.

                    Comment

                    Working...
                    X