Building Better Blueprints | Live Training | Unreal Engine Livestream

hi and welcome to the Unreal Engine news and community spotlight during SIGGRAPH 2018 epic devs presented a series of tech talks on uses of Unreal Engine for media and entertainment in case you missed them or looking to revisit your favorites we recorded several of these informative one-hour talks which are now available online if you're interested in learning more about virtual production mixed reality production animation pipelines or real-time mocap in ue4 make sure to dive into those videos following the link below announced at oculus connect 5 the new oculus quest is an all-in-one virtual reality system utilizing six degrees of freedom and touch controllers to provide a fully immersive experience it'll be available to consumers next spring but you can start building high-quality games and applications for oculus quest using Yui for right now oculus quest will include popular unreal power drift game such as Maus and Robo recall in addition ILM xlab announced their highly anticipated VR project Vader immortal a Star Wars VR series the first of a three-part episodic series to brutally to be released around much you can watch the entire incredible trailer on our blog series takes place between Star Wars Episode three and rogue one and is connected to ILM xlab and the voids location-based hyper reality experience Star Wars secrets of the Empire which is also built with Yui for Dragon Quest 11 echoes of an elusive age is the biggest and most beautiful game in the long-running esteemed JRPG series vibrant colors and cel shaded visuals draw you into an ethnic anime looking world that appeals to series newcomers as much as it does longtime fans to find out more about the project we connected with dragon quest 11 director Takashi Ichikawa to discuss how he and his team at Square Enix were able to bring the acclaim title to life using Yui 4 read our interview to learn about the development journey of Dragon Quest 11 episode is Eiland and Southeast Asia we'll be touring over the next couple of weeks to lead a series of unreal engine workshops he'll have sessions on getting started in ue4 and advanced VFX and technical art in Unreal Engine at torrhen's University in Adelaide he has scheduled for more details if you're in the air yeah he'd love to meet you also on the road some of our team in Europe they will be all over the map this October starting this weekend with Milan Milan games week and dev play in Bucharest short de Jong our European evangelist milena Colton sick field marketing manager and Joseph Azam our newest evangelist focused on the Middle East and northern Africa will be visiting Munich Warsaw Poznan Moscow with a final stop in Sweden at a number of conferences full details are in their schedule are available on our blog be sure to stop by say hello at one of the shows or one of the mixtures they're hosting for you all we're excited to say epic games technical director of XR Nick whiting is one of the keynote speakers for magic leaps a first developer conference leap taking place October 9th and 10th in Los Angeles during Wednesday's keynote which runs from 9 a.m. to 12 p.m. Pacific will be live streamed whiting will appear alongside what a workshop co-founder richard taylor actor in the imaginary and studios founder andy serkis and other notable speakers following the keynote whiting an epic games partner manager chance IV will host a practical guide to getting started with magic leave and ue4 attendees will learn how to take full advantage of you for his capabilities for spatial computing especially for the many unique features of the magic leave one mixed reality platform be sure to visit these event sites platform or is Vince a website for more information our unreal dev days are quickly approaching the first taste King place in downtown Los Angeles on October 18th and followed by one in Montreal on November 14th there an exclusive series of events designed for developers looking to take their pipeline to the next level with ue4 full details about the talks which include an Unreal Engine roadmap and intro to Niagara adjusting your content to perform on target Hardware among others are now available sign up today for what will be some great sessions by our fantastic devs in the 420 release an experimental rich text block widget was made available to you mg2 helped make it more flexible and robust we've set the rich text block up to accept decorator classes and they belong you to define the mark-up behavior behavior you need for your UI elements such as style changes inline images hyperlinks and more in our latest blog Def Support Engineer Cody discusses how to work with this new rich text block widget as both a UI designer and programmer explaining how you can extend it with additional functionality using decorator classes if you'd like to take your UI elements to the next level be sure to give it a read so time for our weekly karma these lovely devs are taking time out of their day to offer help and suggestions to their fellow community members many thanks to Thompson in 1:3 every nun shadow River shadow boss 12 Firefly 74 by Maki girl Jay Mueller RFG mighty an enigma and secon great to see some new names along our sages our first community spotlight this week is an absolutely amazing digital human study by Lucas Hodgkin he's pulled photogrammetry datasets created by the great folks at 3d scan store for Yuto and rich the scene setup and details showcasing here are just absolutely outstanding we're blown away by what Lucas has put together capturing all this footage on an oculus device definitely encourage you to check out his art station page see all the work he's doing these are absolutely phenomenal pieces our second community spotlight is fan gold the eventful adventures of land of britain it's not free-to-play TCG with role-playing elements typical of MMORPGs potato killer Studios based in Italy created fan gold to be an adventure with in-depth storyline lore and many mysteries that wait to be discovered you need a break from this challenge against players or their dynamic AI there is plenty else to do such as personalize a tavern explore the nearby lamps to discover new quests and gather materials if fan gold seems up your Ellie you can support their Kirk's Kickstarter campaign in our final spotlight this week is a zombie physics hit reaction system built by semilla the project includes calculations for the projectiles hit location on the body is a variety of hit reactions and movement states among others they're looking to build a tutorial around the system so cut let them know if you're interested in seeing how it was built this looks awesome these zombies are creepy as all get-out so great work thanks for joining us for the Unreal Engine News and community spotlight hi and welcome to our Unreal Engine livestream I'm your host Amanda bot with me we have Zack Parrish Hey our senior Debra a tech artist and Tim Slager fellow community manager so thanks for joining us I need to go ahead jump in if you want stream out the door for a very long time and it just didn't work out that way so um what we're gonna be taking a look at today is how to build better blueprints now this won't be a discussion of like how to make every blueprint you've ever seen the best I can possibly be we're gonna tackle a single problem we're gonna show off some best practices at the very least some really really good practices this is always kind of interest interesting side thing so without anything else let's just kind of jump in and take a look at what we've got in the editor so here I am inside the content examples project which all of you have access to and you've probably looked at at one point if you haven't yes should so I'm in the animation map specifically and you can see we have these sliders back here in the background now they work right you can grab and drag the sliders and you get a response out the problem with these are at least the challenge with these is that they were designed a really long time ago they never received an optimization pass and they're doing some pretty bad things so for purposes of our discussion they're a really good example of something that is functional that does the job it's supposed to do but could be doing it in a better way if we jump inside the blueprint for it now again this was architected a very long time ago some of the functionality we're gonna be using today to redesign this didn't exist when this was put together so I'm not getting on to anybody's work here but we're doing a whole lot of things on tick if you look at this blueprint on your own I'm not gonna like take it apart but most of the functionality that we're doing here is all taking place on tick which I've said in several different videos in the past is generally a bad habit you shouldn't do it if you have to do it do it for almost nothing what we're gonna do is make a version of this slider that actually behaves better so as you can see here like as I drag this back and forth you'll see how the slider is kind of getting away from my cursor it's like it doesn't it's not a one-to-one ratio it's kind of unnatural so we're gonna make it behave better and we're going to make it not tick it off we're in fact we're gonna completely turn tick off and it's still gonna work just as good so to get started let's jump down here to just the two static meshes that make this up I'm gonna right click and I'm gonna migrate them over to a new project that I already have set up so sorry as I dig through menus the the screen is very far away so what ice takes me a second to reorient now let's see here I stuck this over in the D Drive there's an unreal projects folder and there's my slider project so we'll just stick it in content that's good successful I'm gonna assume this is safe to do and here we are over here at my project so now we have the demo room folder which has got some meshes and inside that you can see we have our slider and our slider base now this is a blueprint first person template I'm doing that because it already has a targeting reticle it's already first person it's gonna be kind of well situated to do what we want without a whole lot of work but we are gonna begin with a hammer and slam out the pieces of this that we just don't need right so I'm gonna jump into the first person character blueprint and with impunity I'm gonna start destroying things so we have like the spawn projectile system it's all gone I'm not spawning projectiles if you care about projectiles you can reimplemented there's some stuff on begin play for like motion controllers and stuff I do not care about VR for the purposes of this discussion so I'm destroying that as well then let's over here we've got the mesh for the arms I don't need that that'll just get in the way and be confusing so let's delete that let's delete the first person gun we'll delete a little sphere attached to it will delete the motion controller components as well the VR gun can also go away and I think that's it so bare bones yeah super bare bones we technically could have just started with a whole new character blueprint but we already had this nice stuff set up for motion and the mouse controls and all that and I didn't want to redo that so this was much faster so we'll compile and it's gonna tell us that we broke something because we deleted something we shouldn't have and it looks like that's in the construction script it was just setting up some components we don't need that so delete that as well fixing it with a hammer is always the most fun so this is now working fine now what we are gonna do is set up an interaction system that affects two different states that we care about whether we are hovered over the slider so we can change color and whether we are interacting with it so we care about those two things in order to handle communication between our player and whatever it is we're interacting with in this case a slider we're gonna set up a blueprint interface so we may be really careful with my windows because I'm gonna do a lot of jumping around I'm used to having two screens actually know what that's a lie recently I switched over to a Mac some music an iMac now I have off-screen been a growing process also if incidentally I forget where the control and all buttons are anyway so let's go ahead and we can just do this all in the blueprints folder this is for demo purposes I'm not gonna worry too much about folder structure if you're doing this for a real project of course you should care more than I do so let's go down to blueprints and we'll choose a blueprint interface and we'll call this I interactive I short for interface it's an old coding standard okay now here are the functions that we care about we care about whether we're interacting and whether or not we're hovered and we're gonna do this in kind of an interesting way so let's just have one for begin hover and let's add another one for end hover so those will be two events that we will send across when we start and end our hovering process now interact is gonna be a little different we're gonna have begin interact I think I got that right it looks right it looks good excellent it's I almost can't read it from here well okay so that monitor is really far away and it's not native I just want to point that out all right so next instead of going straight to end we're just gonna do regular interact and then one more that'll be N interact so essentially we're gonna have an interact function that we can call across the interface that will essentially take the place of any ticking operation we need to do will bookend that on either side with it begin and an end so we can switch on and off our functionality as we need to so compile we'll save that now we can go back over to our firstpersoncharacter now the first person character as the interact tour does not need to implement this interface anybody can call the functions on an interface only the receivers need to actually implement that interface always keep that in mind uh so now with that let's start setting up our pond now have a few things to clean up here ooh there's one thing I forgot when I was deleting stuff and when I was first setting this up and building for the first time I screwed this up and I was so frustrated cuz I couldn't figure out what was wrong check us out in the first person hood there's all this cool stuff going on and we like all this there's like if you're in the ER we don't care but check this out offset sighs why to realign crosshair with the projectile so when this was built the cruddy projectile does this like funky arc thing and it falls fairly rapidly so rather than trying to tweak the projectile to hit exactly what you were aiming at they just moved the reticle which I get so I'm just gonna destroy that and just wire this straight across and this will put the reticle right in the middle of our screen which is better for interaction purposes and Wow it took me a while to figure out what that was I just didn't stop to think you should look inside the HUD class Alex does not like the first-person hood well it's it's super basic but it's gonna get us by it'll do what we need to do so it's fine and it keeps me from having to draw one from scratch okay so we fixed that now we're going to start setting up our interaction behavior here inside of our pond now let's start off with a begin play alright and I'm zoomed in to negative 4 I'll keep 10 as I can I have to zoom in and out a lot to make sure I can show as much of the graph as possible but I'll try to be nice because I know we're on a video also you might have caught on already I'm gonna try to get through this as quickly can to make sure we have time to cover everything so if I'm going really fast wait for YouTube and pause me or slow me down so the what we're gonna do for interaction is we need to do a trace from the camera to figure out what it is we're looking at whatever we're looking at we're just gonna send our interaction interface calls to if it implements the interface it'll do the thing if it doesn't implement the interface it doesn't and we're no worse for wear so let's do a line trace by Chanel introducing line trace by Chanel alright next so now we need to know how we're gonna do that trace we're gonna from the camera through the essentially whatever direction we're looking for a given distance I can't believe I just made that joke alright we'll get the camera not the camera we'll get the camera manager get player camera manager that's what I want so this is the class that kind of owned the camera and what it's doing from this we can say get camera location just super useful especially in first-person and then we can also get camera rotation and using these two points of data we can get a really nice trace kind of straight through wherever we're looking we do that by saying use the location as the start we get the rotation and let's get the X vector of that rotation which is kind of like a vector that represents what way that's aiming let's multiply this by a target lengths so we'll say vector x float I'm gonna set this to I'll say 5,000 units your mileage may vary I'm gonna right-click and promote that to a variable which we will call interaction distance groovy okay cool and by setting the number first and then promoting it we've already given it a default value of 5,000 nice little trick there now the last thing this is easy to overlook add this to the location and now the endpoint is lined up with exactly what you're looking at so very very useful okay so now we've done a line trace we've taken in the world I generally recommend actually we're not going to do this from begin play at all by the way we just wanted to set that up let me put a commenter on this I just find this is good practice trace through objects or traits I'm gonna get picky about what I write in a comment on a video that's terrible trace to objects in center of view it's pretty good practices I might I will see how how many of those I do as we get through time so what we want to do is we want to perform this trace about 10 times a second and we can change that speed if we really really wanted to but I find 10 times a second is pretty good so we'll set a timer by event now a common way to do this and usually it's the way I do it more often than not is from this Levent guy I will do a custom event and then this can be called like look for Interactive's or whatever and then you would just connect this in right you've probably done this a few times if you've never seen it before though you should check this out you could do just a regular custom event look I didn't have to do this again but I did anyway look all right let's call it look for now what it's called is not that relevant but check this out you can from this little event guy you can say create event and then there's my look right there and that's the same as connecting that to a wire it's super useful if you need to connect that up but like maybe begin play for whatever organizational reason needs to be really far away you can totally do that it can be it can also be confusing right because now they're they're separated it's just it's a tool you should know about and use when it makes sense we're gonna set the time on our loop to point 1 so 10 times a second we'll make sure it is looping now I also need to be able to talk to this timer so I can turn it on and off if I ever need to so we'll take the return value here we'll promote this to a variable we will call this interaction trace time as long as it's descriptive and speaking of descriptive look it's a terrible name so we'll call this look for Interactive's check commented on the name look yeah we'd like terrible misspelling because honestly so my my fingers are cold have you ever tried to type with cold fingers it's just it's trickier than you'd think we do know you have a face I don't know I do care of course I care that my might trip you ugly okay well it shouldn't because I think we're never actually having to type that name again okay cool so now we're performing a trace and the question is cool now that we've traced that out what do we do next well let's take our out hits truck and let's put this part so we can started playing with data in it and the first thing we want to do really all we want to do is do stuff with this actor so we'll start by doing an is valid check off this is valid checks are super useful to make sure you haven't broken something or you don't have like a null in place of something you want to reference and all this is doing is basically saying hey that actor did it does it exist it's kind of the same thing as saying hey did we hit anything if we did hit something we need to store it in a variable so I'm gonna drag another wire off this and promote it and I'll drag it out here so I can kind of see it and we're gonna name this come on you can do it keep up with me this will be our current target so it's what our this is the thing that we are looking at right now now we also will want access to a previous target so I'm gonna cheat we will just drag a wire out from this and we'll promote this as well and we'll call this previous target and then just sniff its wire okay so what we'll do actually and we need to get the getter for that thank you we're gonna take our current target we're gonna see if it is equal to our previous target basically we're gonna make sure that the thing we're looking at is the same thing we were looking at just a moment ago because if it is the same thing then we're hovering over it and we need to act accordingly so let's do a branch so if this ever tests true that means we are we've been looking at the same thing now for two tests and we can officially say that it's time to hover so now we can take our current target let's just get it and if you see me not using the ctrl and alt hotkeys to use get to make getters and setters again it's just because I'm on a Mac and that now confuses me again it'll be that way for about a month I think come back to PC if only it was easier to work so next we'll take our current target and we're gonna call begin hover on it because we are now hovering we'll connect that up and then if this tested false then we have stopped hovering so we are we moved on to something else basically so let's take previous target and we will say end hover I'll try to line these up so they're a little more readable and also zoom out a little bit so you kind of see where we're going if you're trying to build this with me you're gonna be doing a lot of pausing ok ok so next what the other thing I want to do is if this is valid test 2 not valid that means there's nothing in this then I want to take our current target and we're gonna set it to nothing so basically if I aim this off into space and our trace now hits nothing I want to clear our current target okay so now we've said we can begin hovering on our current target we can stop hovering on our previous target then the last thing we want to do is we want to set previous target at the end of the process to to our current target so let's walk through the operation real quick so we are tracing down the center of the screen when we hit a thing first off make sure we hit a thing we'll do a quick check hey did I hit a thing if I hit a thing see if it's the same thing I hit last time if it's the same thing I hit last time engage hover oh and whatever we were aiming up before stop hovering also last thing take the thing that we were looking at just now and make it the last thing we checked then the next time this goes through it'll just loop back around and then if we ever look away it'll stop hovering and so forth so that should just work there wondering if you should check if and actor implements the interface you could but you don't have to the great thing about interfaces is you can just fire them off into the ether and if a thing implements the interface cool it'll work if it doesn't implement the interface cool nothing will happen and nothing breaks in the meantime that's actually why interfaces exist so you can just send those calls into the ether and if something doesn't implement the interface you're no worse off so yes you can do a check to see if it implements the interface but since the native behavior of an interface is to not have to worry about that anyway it's just an extra check you didn't have to do ok so now with that let's sort of comment maybe like handle hovering that's their gig that could be better but I'm just for me it's more important to let you know that you should be doing comments than it is for me to spend a whole lot of time on the video typing out really really descriptive chapters of comments ok so I think that's pretty good so let's take a look at the next thing we want to do which is to handle our interaction process so we've handled hovering from the standpoint of the character we haven't done anything with interact we're gonna do that based on mouse clicks and because we're using the first-person blueprint that's already tied to a fire input event or an action event excuse me so we're just gonna leverage that so when we click the mouse button that's gonna call fire and we're gonna take our current target and we're going to call interact so we want to begin Intel yeah we're gonna call begin interact that's right so make sure I get this right there it is aha so the moment we clicked the mouse we want to call begin interact I would also like the player the the character to have like a state for I am in the process of interacting so we'll set that up as a boolean let's jump over to variables and we'll call this interaction in progress progress I'm really bad at this I'm telling you man like like all the works get sticky when you're when your fingers get called yep still bringing in hand warmers for you no kidding right the cool one yep and shake him up I love those those are so much fun actually that'd be cool too like 80s style thing you look buff this is that really okay okay hang on no no no I'm not gonna get too distracted we have much work to do alright so now let's call and interact when we release the mouse and we have our interaction in progress and we're going to see I did at that time actually use my hotkey when we click the mouse interaction in progress is set to true when we unclick the mouse when we release the mouse that's set back to false now the other thing we're gonna do that it actually is kind of fancy is remember earlier we took our timer and we made a handle for it let's get that handle and we will say while we're interacting I want you to pause the timer by handle that essentially you're saying hey while we're in the process of interacting stop looking for new things to interact with because if you had a whole bunch of these sliders or switches or something right next to each other that could get really nasty really quickly so let's see let's just control-c control-v and now we'll do an unpause when you release the mouse there it is unpause timer by handle it probably also doesn't help that I'm extremely caffeinated right now the coffee in our break room is really good okay so now let's throw a comments around this activate/deactivate interaction based on mouse button inputs okay cool now there's one more thing I want to do and this is the core of how we're gonna get around the fact that our sliders never gonna tick so we got this we're gonna have this thing a slider that it is gonna behave as if it were ticking but it will never tick not even once in fact we're gonna deactivate its ability to tick at all but we're gonna steal a tick that is already taking place on our character because it occurs to me actually didn't occur to me it occurred to one of our engineers who was looking over my blueprint decided to smack me it occurs to me that the in order to even move something around to interact with it we are having to move our mouse we're having to do things that are constantly being pulled by the nature of the game yep so we're always doing axis checks for in this case our mouse if you had a whole bunch of other inputs you might have to think about other inputs for this we're gonna cheat and just use the mouse but since that has to pull on every tick anyway why don't we just use that as a way to drive an event over on our slider and make it just behave at the same time so you're gonna say we're gonna we're gonna tick off the slider they take yeah be gone but essentially yeah so what we're gonna do is grab any one of these axis events I'm just gonna grab mouse input X I guess which is our turn axis and we're going to leverage that essentially steal the fact that that is being called on every frame and use that in place of tick okay now the way we do that is remember earlier we were tracking interaction and process we get that and we run a branch that's hold down the B key to to create that so hold on B and click and you'll make that and if that tests true that means we are in the process of interacting this more starts here really easy we grab our current target and we call interact on it and that's through the interface message so remember we had three events in our in our interface to handle this we had begin interact and interacted right in the middle we have interact and that's gonna be the one that does all the work the other two are just bookends okay cool and let's go and throw a comment on this - if interacting send all these quotes tick over to interactive object so hopefully when I come back to this in a month and be like oh I see what you're doing you're just stealing the fact that that input pole is happening so often okay so we'll compile we'll save and I think with that we can start hammering on our slider now our slider doesn't exist at all we've got to build this up entirely from scratch so I look at my time I'm doing okay so let's create a new blueprint class of type actor and we'll call this beatbeat underscore slider I think it says slider okay cool and we'll open this up now we need to add some meshes to this so let me float this window real quick hopefully it won't give me too much grief yeah let's drag slider and slider base in here as well cool now because the pivot points for these were in such nice places we're pretty much done but I'm gonna take the slider base well first off I'm gonna unparent it from the slider because that's terrible they should not be parented to one another leave them separate that can just be parented to the scene route let's grab the base and we'll slide this back also just because the whole SM slider one is too long of a name for me I'm going to call this slider and I'm gonna drop the SM on the front of this this can just be slider base that's fine okay cool so that's all of the components that we need in order for this to work now it's all just about setting up some behavior now uh let's see let's talk about some variables that we know we're gonna need to track some things that we know we're gonna have to care about so here in our variables list I'm gonna add one for Hubbard it's a boolean you're either hovering or not yes or no let's also add one for interacting so you know what I'm gonna change the the tense here instead of Hubbard let's just say hovering there we go and not to get too nitpicky so we have one for hovering we have one for interacting I also want a couple of vectors that we can track as well this will be start I'll set that to a vector and another one for end so these are the gonna be the start and end of of the slider we're gonna set end to let's compile so we can set it to anything well set that's a two hundred and X which is should be about the end of the slider but it's probably smart to go ahead and make this instance editable and turn on the 3d widget so click on show 3d widget let's compile let's say let's go to our view real quick and a couple things for the scene I actually don't like the fact there's a pawn in here by default so I'm going to remove that cuz it's gonna just get in my way and annoy me that'll make the whole video bad so now let's grab our BP slider and I'll just stick it to the wall let's rotate her to room cuz it's facing the wrong direction and I'll pop it out just a little bit remember the slider base slid back a little okay that that should be good now over here in play I'll go ahead and set this up now so I don't forget we'll go from our current camera location and now when we hit play we should just jump right in okay perfect nearly perfect anyway I mean I guess I could take the time to Center this up the important thing is that you can see our little end vector sitting right there at the end of the slider which is exactly what we wanted okay so now we've got our start we've got our end and it's time to start setting up some functionality the first thing I'm going to do possibly the most important thing or one of them go over to class defaults and come over here to start with tick enabled and turn this off so a little secret you might have known you might not known all blueprints you create all actor blueprints anyway have this on by default that means they are all ticking even if you didn't connect anything to the tick event they are all still ticking it's just the nature of things we set it up that way a long long long time ago so that if you're ever playing with blueprint and maybe you're new to scripting new to coding and so forth if you plug something in to tick you would expect it to just work so we leave that on by default but as a best practice if you know you're not going to tick you should take the time to turn that off in fact there are studios out there where they have gone through the the process of making sure that whenever you create a new blueprint that is automatically switched off by default and you have to explicitly turn it on okay so now we've got that we're ready to continue we're never gonna tick let's focus on setting up our hover ability and that's gonna be starting over in the construction script so we can adjust our material so I'm gonna grab our slider drag it into the view and let's just type in dynamic so we can create a dynamic material instance because we're gonna need to change the material and let's promote this to a variable so we can talk to it later we'll call this slider Dynamat dynamic material for the slider that's it compile doesn't it sound like a place like like back in the day like the fotomat right which means I'm old that I know what that is okay there hasn't been one those in a very long time but whatever okay so now we need to set the actual functionality up oh also real quick just so that everybody is kind of on the level if we go to the slider and take a look at the material that came in with it M underscore arrows it has a color parameter named color so just remember that name because we're gonna have to reference it by name later on alright so now to actually handle the hovering functionality I'm going to add a function so we'll just click plus on function will call this manage hover color there we go perfect now what's is gonna do well it's gonna change behavior based on first whether or not we're hovering so let's start off by dragging hover into the graph like and then will branch off that again hold down B click all right cool so if you're hovering we want to do one thing and if you're not hovering want to do another so real fast let's set up some variables that hold our hover colors for hover and and regular so we'll have one called hover color I guess if you wanna be hardcore you call it color underscore hover or something but I'm not that hardcore we'll make it a linear color type and let's go and create another one that we will call non hover color instead of regular color because regular color sounds boring alright now the thing about that though is we already have a nice color that our art department has did has deemed is the best color for this so let's go get that I'll grab the hex linear version doesn't matter which one just make sure you're consistent I'll control C to throw that up into the clipboard back over here my slider for our non hover color we'll open our color picker and paste that into the linear so in the same color next over in the actual hover color yeah okay thanks go away let's set this to some shade of green we got like a really obnoxious internet lime green a la 1996 a man websites were built in hey man I'm green yep ok cool so we got a hover color we have our base color that's perfect so now if hovering is set to true then we want to grab our slider Dynamat and we want to set are there any good questions coming in that I should know they're running so you mentioned the tick is that something you can just disable the entire project yeah there's a project setting that I think you can set but I believe it has to be set by way of an ini and I don't remember what that is off the top man ok tick box there's not a tick box yeah there's not a tick box that runs across the entire project that I'm aware of but I believe it can be set in an eye and I will timelines work if the actor is take disable timelines run entirely on there so they should just work I I always try to advise people to be careful of timelines they're great they're awesome and in a lot of cases they're the only way to do whatever it is you want to do but just know that they come at a bit of a cost because not only did a tick but they have to like they actually have their own little subroutine that solved the value of that curve with keyframes and all that so they have a little bit of weight if you can get by without them I'd recommend that you do but they're not like I don't want you to be scared of them right just use them responsibly okay because yeah someone was asking earlier if you did why not use this at timer by function when you did the event yeah I'm the event bacon it's because they're a little more costly yep just just a little bit and like that's not to say that this is the only way you should ever do what I'm doing right right there's a million ways to solve this process this is one of them and I do like the fact that it doesn't leverage time line that makes me kind of happy okay so if we are hovering we want to set this to the hover color by setting up all these variables it becomes just like almost natural language it's very easy to say what's happening so now if we stop hovering in like in your gut you'll be like okay you want to set it up like this actually let me set up my color name here so I don't forget because I will and then this won't work and you'll all laugh at me which I get so in your gut you probably be like this right and then attach this to the non hover color technically this will work technically this is fine but we're gonna get a tiny little bit fancy and we're gonna say if we are in the process of interacting then don't bother to switch back to normal so if interacting equals false so what this means is if we mouse over this slider it's gonna turn green as we start to slide it around our mouse could really go anywhere it could go slightly up and go slightly down it could move away from the slider entirely if that happens we want it to stay green for as long as we're interacting and the moment we stop interacting then we switch it back to normal right so that it'll be a visual cue for the user so they know hey I'm still interacting with this thing it is still green and everything is still good despite the location of the mouth despite the location of the mouse because I found early on when I was putting this together I am not capable of dragging the mouse perfectly along the line of the slider and it started to look really distracting if I started to get on and off the slider while I was moving the mouse it would kind of flash there was sliders it bounced back if you're not yep it would flicker back and forth between these two colors and I didn't like it so we set this up instead because it's only like two nodes okay so that is now in place we technically are all we're almost done let's go back out to the event graph for a slider and let's actually implement the events themselves so we can right-click and create a hover event oh you know we can't yet you know why because we didn't implement the interface how silly alright so we'll go over to our class settings there's I interactive will implement that make sure you compile because until you compile you won't see any of this so now we can add a hover event so there's begin hover like so and since we're right here let's also do an and hover and here's how this is gonna work we earlier set up the hovering variable let's go ahead and bring that in if we are hovering we want to set that to true if we are not hovering we want to set that to false either way as soon as we've set that variable the next thing we want to do is call manage hover color boom so walk it through real quick once we get this signal that we have started to hover we set this variable to true and then we step inside here and we test our logic cool hovering would be true BAM let's set this over to our hover color which is orange then back out our in the event graph alright cool we received the signal that we are not hovering awesome set this to false jump back in to manage hover color we're not hovering cool are we still interacting because if we're interacting do nothing the moment we're not interacting then we will switch back to normal okay that's not what I want to do at all I'm so used to having multiple windows going okay so now let's jump back out to the event graph and we can continue so let's put a comment on this manage hover coloration based on events from the interface interface tariffs yes interface that sounds like a like a industrial band name or interface all right so uh okay next we're gonna move down we I guess we could probably test this if we were so inclined let's see what happens what Oh pink so interacting is not good I mean you can kind of see it working so you have to take my word for it I'm holding down the mouse button I drag the mouse away it stays green as soon as I let go of the mouse BAM yeah so that's all working but nothing else is working so it's only semi boring alright so now here's where we start to get kind of sort of fancy we are going to set up I guess the first part of actually interacting and that is to have the begin and end interact functions set up subscribe begin interact lets do and interact are there any questions coming through I'm kind of trying to tackle some of them as I go because I don't know what kind of time I'm gonna have one wondering when so when does the input event fire in the context of a frame so is it before the regular tick or after I mean I honestly do not know and frankly for offer our purposes it doesn't really matter that would only be really important if you had something that was super frame-by-frame critical for gameplay and the setting of a slider would I can't imagine that never being the case it's a good question and I wish I had a rapid-fire answer I could just throw out at you but I honestly have no idea they did ask how you made the pivot point on the material graph pivot point on the material Brown not sure um let mr. Brown that's the material graph right I don't know if you get more details come back to me magic mats okay so begin interact we're going to turn interacting on and in we're gonna turn interacting off that is all we're gonna do with those events all they're doing is changing an internal state to our slider so let's put a comment set interacting state based on events from interface interface anyways so now we can start building up the actual functionality that will eventually do things here's how we're gonna do it let's come in here to a blank area by the way you can kind of see what we've done so far is really not much to it we have the beginning end hover and then we just have some interact logic now when we receive the actual interact event and remember that's the one that we're kind of stealing tick from event interact we want to do two things or at least I'm gonna split it up into two things this could totally be one thing for sake of readability and my own sanity I'm splitting into two processes so I'm gonna create a sequence node to fire them both off and let's jump over to our functions list and I'll make bear-like unimplemented functions to hold this this is almost like a way you can pseudocode early so we'll make one function called move slider and then another function called solve and report it's a move slider and solve and report they have they do nothing right now they're shells they're hollow but we're gonna call them both first we'll call move slider that'll just be responsible for moving the actual static mesh of the slider puck back and forth and then solving report we'll handle the math or maths of moving that and we're not moving but like figuring out what our actual number would be and sending that out okay cool so when we are told to interact move the slider and solve report and that'll make more sense as we get into those functions which is probably where we should go next now this is where it starts getting kind of fun because up to this point if you were to look in the old slider which I'm not gonna do because I already closed content examples there's a lot of really fun funky math going on to figure out where the slider puck should be when I was so this a quick story time this all came from a project that I was working on for a GDC one year I think was actually it was either last year the year before last and I just I needed sliders to show some features off and so I just grabbed the sliders out of content examples because time and the folks I was building the demo for we're like hey the sliders have really kind of wacky behaviors there anyway to make them more expected behavior so this is that's why I ended up doing this and along the way I just kept making them more and more efficient GDC came and went and then I kept making them more efficient and finding new ways to do it and so now you get to see those results so we'll start off in the move slider function and the way we're gonna do this is we need to figure out I'm gonna talk with my hands for a minute so we need to figure out where when the when the mouse does this little trace into the world we need to figure out where along the slider we think we want to aim one way to do that is to define a mathematical plane that is parallel to that slider so it like here's a big plane I shoot my little trace out it could strike anywhere on that plane then we take the shortest distance from that point to the line that represents the slider and that's probably where you want the slider to go the cool thing is we could do all of the math to do that like a whole bunch of nodes to solve that kind of stuff actually look those equations up and then it turns out they already exist as native functions in the engine so we're gonna use those so here's how this works on move slider what I want to do is start off kind of the same way we did with our trace in fact if I was in a rush I could probably just steal some of the math I did earlier for that trace so remember how we got the get player camera manager I've got if location and all that jazz let's hit ctrl C and then jump back over to our slider and we'll hit control V and paste that in now interaction distance doesn't exist so let's just right-click and this could be a local variable or a regular variable I'm gonna make it regular we could argue the semantics of whether that's a good idea later so this is doing the exact same trace it's just tracing through the direction of the camera 5,000 units out but what do we want to do with that data once we have it we are going to do a line plane intersection actually that's not that's not the one I want that's close to it line plane it's we actually want the one that has an origin and a normal that way we can define where this plane actually lives so here's how this works we grab the cameras original location just like we did before and that is the line start here's our math of grabbing the cameras rotation getting its X vector multiplying it by a distance adding that to the location that becomes our line end exactly like we did with our trace if you don't remember how that works just rewind and then when you can is really if you're live you can underline then we we now need to define where the plane is and how its rotated so we'll grab our slider I'm starting to scare you on time yet all right cool we will get its world location not transformed EOS location and that'll be the planes origin so the plane will be wherever the slider happens to be now the planes normal if you don't know if you're not familiar with the normal of a plane if my hand was a plane normal it would be a line facing out the front of it so we are going to grab the actors rotation basically this whole slider gizmo we're gonna get actor ah helps if you right click first get actor a rotation I've done that so many times it's actually kind of embarrassing and we're going to take we're actually gonna rotate a vector to align the plane so let's just right click and say rotate vector got it and there's our guy now what vector we're gonna rotate we're gonna grab the y-axis this is just a vector that is just Y pointing up because if we were to look at our slider in the viewport the y axis if you check this out my axe is actually pointing right out the front that is the axis that we want to be facing back out to define the plane so we grab the actors rotation and we rotate the slider using that vector where did I leave off I'll be on the slider so we set that to Y plug this in to rotate like so and this becomes the planes normal now this already gives us a point on a plane we should probably test it to make sure we're not crazy so let's just draw a debug point you have a really expected look like it was in my direction all right draw D what can I do for you draw a debug point drawing debug points is fun and it's only in a development build so if you ship this this just simply won't work keep that in mind so we'll plug the intersection into this position we need to set up a few settings let's give it a size of 10 point color of I don't care then it's this funny shade of pink is fine and for duration let's do like 0.1 this is gonna be firing off on every tick so that'll leave it with a little bit of a trail but that's okay so compile let's do a test and did it work well it's not working why is it not working that looks like it should be doing that thing oh yeah I know right oh oh you know what because we're never sending over interact or oh no I'm sorry hang on all I gotta do is hold on the mouse button we should be okay Mouse oh okay okay I'll just sort that out all right so what I can do is hit play in here and then slide this out of the way and are you ever are you actually looking you should be doing just fine all right cool I love that it looks like an old late 90s arcade game yeah that's working interaction is not in progress which is great and move that up a little bit I love blueprint debugging oh cool so it is sending interact yeah which is awesome that's what we wanted Wow okay cool so now what we do is we go over to slider and now we should be able to check interact and it looks like it's never deceiving okay cool but it was receiving begin and end hover so that's right that's interesting you know the self okay current calling interact okay all good that's that's wacky town it's probably something very simple that is just missing me because I've been talking so much I want to go to wacky town that is the actual story of my life too alright so begin interact that's good this is also good then we're just calling this guy but it looks like this guy's never receiving a signal I mean double check and make sure this guy would show signals as well while we're at it this is where it helps to have two monitors by the way well theoretically you do yeah theoretically so interact is not sending anything but I don't expect that well that was actually working you could see it jump back wait that's not what I want I want to see interact so call interact up yeah yep release release cool so actually everything is working it's just not actually sending over interact from my interactive that's interesting well so usually what I would do in this case like if this were this is a real and I was actually at my desk I would just do like a print string at this point and just be like yo I'm interacting or trying to yeah cool and then we just try this blam I tried you I might have just been you know what oh my god 100 bucks says everything was fine I'm not gonna pay all of you hundred bucks just just the two of us I'm probably not you guys either because I'm not shaking hands other than the shaking of my very cold fingers I did I'll bet the problem is that I just simply wasn't clicking on Slyder to test this so let me let me give a little bit of backstory in an earlier version of this we were always tracing this dot yeah and slowly as I refactor it became only tracing this dot when I'm truly interacting so right now oh wow it's okay so cool it it is sending so that means the draw is being silly it's jumping to move slider you're drawing a point point colors good durations good all of this is fine okay so again if I were doing this in real life it's because I'm a huge believer in print strings let's do another print string you guys get to see like debugging - we'll just call it a feature of the video KaBlam okay cool now this should just mean we're printing out whatever that number is so let's do another test it's just receiving zeros okay cool so why it's ticked off oh don't be that way I'm sorry okay um so line start camera manager this all actually looks pretty good oh wait there's a problem when I copy pasted the interaction distance it did not bring the default value win it I didn't think about that because I thought I would save time by doing a copy-paste as opposed to craving all over again turns out I was wrong because I didn't think of this when I did this before I recreated this graph from scratch okay so if you've been keeping up the problem was when I copy pasted this entire graph over and then right clicked and then added the variable for interaction distance it didn't bring the default value over with it and I didn't expect it to and Autodesk would like us to know there's an unexpected error it's very important yep just so everybody knows okay so now let's test this again nandhu I feel silly okay cool you can see those values and going up and down and more importantly we get that little debug trace their little pink yeah trail and you can I know it's kind of hard to see on the video but it actually is kind of following a plane that is in line with our slider if we start to look right down that edge it disappears off into infinity yeah so it is on the plane cool now uh we apparently I was typing instead of trying to create a comment so let's just put the real quick comment on this find point on plane defined by the slider cool now we know it's working let's go ahead and remove our why isn't this working debug stuff and we can move on to our next piece which is to now that we have that point let's find the closest distance between that point and a line of the slider itself so we'll go back over to our graph I'll try to zoom out so you can kind of see what I'm doing a little more cleanly we'll bring in a slider and we'll say get world location for the slider itself so we know where it is in the world we want to get its world rotation what are you laughing about the problem was hiding in plain sight okay that is always the case but the plain sight everyone closed the stream now the whole reason I wear glasses so I can occasionally pinch the bridge of my nose okay right so now let's go back to what we were doing so we we get wow that's like I saw the logo for a second so we get world location we get world rotation we are going to rotate the vector a at the X vector so we're gonna figure out the side to side vector of our slider which is X we're gonna rotate that oh that we yeah I'll be floored if we're done in that much time if you have to kick me off when we have to finish later let me know okay all right so now we're gonna find closest point on line so this is another engine function we're gonna leverage so our line origin will be the origin of the slider the line direction will be that direction we define by rotating the X vector and then we'll just take our intersection point from our plane and plug that in so comment find nearest point online from the plane okay now real quick let's do another quick debug line so we can show this in action it's looking like we probably won't be able to finish every part of this before I get booted off the air which I blame Amanda for but if we do have to dive off then I'll finish the rest of it in a future a part two part two and if that's the case I'm sorry in advance all right so let's jump back in hit play and now when I interact check it out so we have a point that actually defines where we want the slider to be and we've got everything we need to start moving the slider actually I can probably get the slider working I probably won't be able to demo it in action but you'll you can probably do that on your own so I think I think we'll be okay but I got to work fast okay so now what we're gonna do is move the actual slider geometry we're gonna do that with a V interp too if you've never used one of these before there's an entire blog post about them that Jeff Ferriss wrote years ago and it's still valid and it's still amazing let's take our return value promote that to a variable we'll call this slider goal this is where we want the slider to be will also take slider goal or a goal man typing from so far away and we're gonna plug that into current as well our target is going to be this number that we just solved out on our line our delta time will be world Delta seconds and we'll set our in Terps bead to five which you might end up changing as you go through this next we want to clamp this value actually even before we do that we need to convert this from world space to local space currently all of our solution everything we've been solving this point on the plains point on a line they've all been in world space but we want to move our slider in local space fortunately there's a really easy way to do that there's a invert transform actually let's do inverse transform Thank You inverse transform location because all we're inverting is a location what this does is this inverts whatever you feed it into the opposite so right now we're gonna feed it a global value a world location value by feeding it our objects transform it'll flip it into local space for us so let's say get actor transform don't plug that in so this now our end result here is in local space and now we need to clamp it so that we're gonna clamp this in all three axes even though we don't really need to do that we'll break the vector apart guys I'm gonna stop commenting and just kind of start slamming through this to see how fast I can I can get this done to start a clock I think we already did so we're gonna clamp it in between the start and end points we need to break that and break that I'll try to keep these relatively clean but I'm moving very fast now which is a lot more how production works anyway so now let's make a clamp no not clamp access thank you and only type is clamp don't assume I also want to add axis we want to clamp a float thank you now the value we are going to do in this case is X and we're gonna clamp that by x start and X end and we'll copy/paste this now let's clamp the y axis between Y start and Y end and clamp the Zed value between Z start and Zed end finally let's take the result and make a vector out of it and just plug all the bits in X Y and Zed and we're good to go so now we have a clamp the reason we clamped after we solved everything is that if we clamp before the interrupt to will cause the slider to slow down as it approaches our value and you wouldn't be able to like slam the slider all the way to the right or left which is really satisfying I don't want to take that from you next let's get our slider and finally we can move it so when I will say set relative location how much time do I have left few minutes a few minutes that's the worst value I've ever heard okay cool so now we'll plug this in to set relative location I'll try to zoom out so you can see this because if you're trying to build this along on your own you'll want to see that so we find a point on a plane and I'm going to try to do my best to okay find a point on a plane we find the nearest point on the slider from that point on the plane we interrupt to that we invert that to put it into local space we clamp it and then finally we move and we're good to go so we can test this well and it pops at the very beginning that's expected that's actually okay we can fix that we can how much Sun Drive left really like three minutes okay yeah it's it's a really bad spot because it's like not enough time for us really ever to so we could stop here or I could just continue but you're the one who owns the hard stop we have some folks that are participating in this dream that have other okay okay so we'll have to stop here then yeah okay cool well they have a working slider yep yep there's a little snap so maybe at some point we can talk about like how to clean it up and maybe some of the principles behind exactly what we're walking through really yeah all that so exactly yeah so thank you for speeding like it definitely shows how to clean up a number of the things that we are there in like some alternative approaches to you yeah and I'm sorry we didn't get through it all there's it's not that not just there's a lot to cover Bonin to make sure it all got explained as thoroughly as it could doing because some of the map on here it gets really fuzzy if you don't understand what we're doing and it's like it's like it's all just turns noodles at some point so maybe the that now that you've built it maybe the next dream can we can walk through and talk about some of the why and the math behind it and know that so it'll be a little more of an explanatory yeah so thank you so much for coming in we said again long long overdue but again if you have feedback for us obviously get it all done hopefully enough stream but we definitely love to hear from you I'm gonna be dropping the survey into each of the chats we want to know how you think we're doing we also would like to know what what topics you would like us to cover in their future so that's always great feedback for us also we pull if you drop in your email will send you a t-shirt actually potentially will randomly raffle a t-shirt or one of the folks in there always check for your local ue4 meetups meetup comm / Pro / Unreal Engine odds are there are some really cool devs in your area that can help you build cool things and if not you could start your own and if you'd like to be on the community spotlight that's the bit after the news we often check the work-in-progress and release project sections of the forum's so there we're always scavenging those for really great projects and we'd love to see you be active in there and also the count down we always are looking for new timers so if you've got 30 minutes of development crunch it down to 5 minutes we can toss it up there with a logo and we'd love to see your work so be sure to follow us on social and all that jazz and we'll see you next week thank you again [Music] you

Channel: Unreal Engine

Views: 24,196

Rating: 4.9000001 out of 5

Keywords: Game Development

Id: WA8ihra87cM

Length: 70min 57sec (4257 seconds)

Published: Thu Oct 04 2018