Announcement

Collapse
No announcement yet.

Diablo Style Wall Hiding in Blueprints.

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

    Diablo Style Wall Hiding in Blueprints.

    Hey all! I made this a couple weekends back as part of a pet project I'm working on, figured I'd share with the class. I wanted to emulate the wall hiding feature in Diablo in my game, where the geometry that blocks you from the camera fades away as you move behind it, and fades back in as you move in front of it. Note: There are many ways to accomplish this task, but this is how I went about it (Forgive the non-uniform screen grabs, its late)

    To approach this problem, I broke it down into the two parts that would be interacting - The Player and The Wall.

    I knew I needed to know when my player went behind or came out from behind the wall. These two Events needed to trigger two Actions - Hide and Show.

    The Player causes the events, the wall receives the calls to action.

    The Wall - Hideable_Actor

    Since I wanted to fade in and out over time, I knew I needed to handle the fade using the Tick function's delta, and a Material instance of a material with a scalar parameter into it's Opacity channel. See 3 pictures down that I set this up as a dynamic material instance as well, and cached it to a class variable on the EventBeginPlay.

    Click image for larger version

Name:	Hideable_10.PNG
Views:	1
Size:	232.7 KB
ID:	1137597

    Click image for larger version

Name:	Hideable_9.PNG
Views:	1
Size:	92.5 KB
ID:	1137596

    Fading over time meant I'd have to do some internal state control on the Hideable_Actor, and I handled this with two booleans - ShouldHide and ShouldShow. Using these two variables, The blueprint could decide whether or not it should UpdateVisibility, another function I added to control the fade at each frame via Tick. If either of these was true, the fade would happen in the appropriate manner. I even added a fadespeed so I could make the fade in/out faster by multiplying it by the Tick's delta.

    Click image for larger version

Name:	HIdeable_3.PNG
Views:	1
Size:	249.0 KB
ID:	1137595

    Inside the UpdateVisibility function, I set the opacity parameter on my dynamic instance by a little more, up or down based on which boolean was true. I used some logic to clamp and reset the ShouldHide and ShouldShow booleans in order to stop the function from being fired once the desired opacity was achieved.

    Click image for larger version

Name:	HIdeable_6.PNG
Views:	1
Size:	325.3 KB
ID:	1137598

    I built the wall to have two public functions to handle these actions - Hide and Show - that could be called by an outside force. These basically just toggle the booleans for ShouldHide and ShouldShow.

    Click image for larger version

Name:	Hideable_5.PNG
Views:	1
Size:	162.0 KB
ID:	1137599

    Click image for larger version

Name:	Hideable_4.PNG
Views:	1
Size:	114.3 KB
ID:	1137600

    And that's it for the Wall.

    The Player

    I build this originally from a modified version of the topdown content example. Basically, I re-positioned the camera to something a bit more what I was looking for, and added a long, scaled Box, used as a trigger in between the camera and the player mesh. This box will be what we use to test if the player is going behind the wall.

    Click image for larger version

Name:	Hideable_2.PNG
Views:	1
Size:	409.0 KB
ID:	1137601

    With the box selected, I added our events, choosing OnComponentDidBeginOverlap and OnComponentDidEndOverlap. In these events, I cast the OtherActor from the Event to our Hideable_Actor, and do the appropriate function based on going behind or coming back out. When the box overlaps with the Hideable_Actor, we want to hide. When it's no longer overlapping, we want to show.

    Click image for larger version

Name:	Hideable_1.PNG
Views:	1
Size:	215.9 KB
ID:	1137602

    And here is the result!

    Before

    Click image for larger version

Name:	HIdeable_7.PNG
Views:	1
Size:	839.6 KB
ID:	1137603

    After

    Click image for larger version

Name:	HIdeable_8.PNG
Views:	1
Size:	856.0 KB
ID:	1137604

    And again in horrible, phone recorded glory from my vine

    https://v.cdn.vine.co/r/videos/A1A29...C6EuYvS1Mhmvdg

    Thanks for playing!
    Let's Connect [Twitter]

    #2
    I was literally looking at Project Zomboid earlier today and wondering how I would handle wall hiding myself. Thanks for the timely guide on this method.

    Comment


      #3
      Thanks for posting this. I'll have to look into adding this to some projects.

      Comment


        #4
        Sure thing! and you should be able to subclass the Hideable_Actor so you can make many different Blueprint assets with it I'll try to get the BP uploaded at some time, too
        Let's Connect [Twitter]

        Comment


          #5
          Here's the uasset, too. - Download

          If you use this as a base blueprint class, Set the mesh, fade rate, and name of your Scalar Parameter from your Material Instance inside defaults.

          Click image for larger version

Name:	Hideable_Actor Settings.PNG
Views:	1
Size:	61.8 KB
ID:	1053673
          Last edited by Ivey; 08-19-2014, 10:46 AM.
          Let's Connect [Twitter]

          Comment


            #6
            I did something similar to this but my wall don't fade the just disappear when my player goes behind it.

            Comment


              #7
              Hi,

              This Mesh good for all, like hiding object from UE4 mesh and import object from (Ex: 3Ds Max, Maya, Modo and Etc.)

              Thanks.

              Comment


                #8
                nice solution. If i see it correctly, you need 2 Meshes per entity? One for the base and one for the hideable one?
                If that's the case, why not using a normal mesh with a clipplane to cut the mesh at a given height? By drawing the backfaces in a solid color it's possible to fill the hole.

                EDIT:
                Originally posted by Chance Ivey View Post
                Note: There are many ways to accomplish this task, but this is how I went about it
                Didn't read that one at first my bad^^"
                Last edited by Memnarch; 12-02-2014, 10:46 AM.

                Comment


                  #9
                  Thanks! This is really great. I'd been trying to solve the fade in/out a PSR blueprint I'd built for general interaction. I kept trying to go about it was a Material Param. Modification, but this works much better.

                  Comment


                    #10
                    What would be the performance difference or preference between doing a trace from the camera to the player vs setting up a box like you a have done to detect walls?
                    UE4 Tutorials for 3rd person Blueprint project from scratch: Youtube Channel
                    Use Blender 2.8 to make UE4 compatible animations: Blog

                    Comment


                      #11
                      Hello ! Really great tutorial !

                      I have just a little problem with it, it's working, but when the object disapears, there is no fadeout on it, and when it supposed ti show again, nothing happen...

                      Comment


                        #12
                        I should probably update this now that it's nearing a year old, heh I'll see what I can do to better break it down and update for 4.7 / 4.8
                        Let's Connect [Twitter]

                        Comment


                          #13
                          Originally posted by Waves View Post
                          What would be the performance difference or preference between doing a trace from the camera to the player vs setting up a box like you a have done to detect walls?
                          Im not entirely sure what the difference would be, but I can't imagine that a continual trace check is more performant. I prefer the box because it's very easy to quickly adjust the size for testing until it feels just right. Just be sure to appropriately set up the collision channels
                          Let's Connect [Twitter]

                          Comment


                            #14
                            Hey Chance thanks for the tutorial. I was intending to do something similar but I am cautious of performance hits on translucent materials as well as their reflection limitations.

                            My theoretical workaround is one of these two:

                            a) Have an opaque and a translucent material for each hideable object (realistically that'd be two different master materials) and change the object's material as it hides / shows.

                            b) Use one material but change it to opaque / translucent as needed.

                            I am not sure if b is even doable at runtime (I know you can override the opacity mode in instances) and if it is, which one (if any) is performance friendly?

                            I will have to use the same technique to say, fade out the player when he teleports.

                            Comment


                              #15
                              Hey Chance,
                              You should totally make it network friendly so it only turns invisible to the player 0

                              Comment

                              Working...
                              X