Getting Started with Technical Art in Unreal Engine 4 with Chris Murphy (Unreal Engine Evangelist)

it's Chris Murphy I'm a little engine evangelist someone's at the door sir I I watch originally it's tech artist but also a bit of generalist as well my my role in in project has always been kind of a bit of a difficult one to design for tonight though we're going to be covering a couple of topics that I really wanted to start kind of approaching some cool stuff you can do within unreal some just kind of the fun stuff but also we're just opening up here your minds a bits of things that are achievable I find it one of the most important things in in game dev to me anyway has always been most things are reasonably straight for their small patterns that we you know when you reproduce on mass you can create something really cool right but the interesting thing for me has always just been it takes someone to show me that a patent exists the first time and once I know who exists I will rip it apart and do whatever I can and it'll be cool but there's always that that period of time where you know just I need a quite often need to see a concept so as I'm saying before this all started one of the things that I've ID'd quite commonly is whenever I see a something in their game that I think is pretty cool I tear it apart and I try and reproduce it myself even if it's not in unreal like if it's in Cod or if it's in whatever else I'll sit there and I'll be like alright how could I do the same kind of thing what's it going to take for me to do it and that always helps me understand things because I'll figure out a design pattern that I can then just reapply and reapply and reapply to a thousand one from projects you know Naveen so for tonight we're going to be creating something kind of interesting she's going to create a blank project called bridge tech project because I'm bad inventive and then we'll just give it a second to load up and we'll go from there now if at any stage this projects going to be kind of a kind of freeform I'm going to be doing my best to just get me doing my best to Orwell everything is on wheels okay I like move the desk all right I'm going to be doing my best to kind of like work through with everyone I am going to pull out my phone though and be a little bit rude just so I have a point of reference for a couple of the things it's the kind of stuff that I both know but know that I can screw up reasonably quickly and if I mess it up it'll take me a little bit of debugging so I'd rather just have examples there so please forgive me for that yeah so what I'm going to be doing to start off with is I am going to go to pull in some of the assets from the marketplace I'm just going to rip over the Infinity Blade Grasslands stuff so I'm just add the project and this is called bridge tech project I'm just going to quickly just add those assets in for me because it will be way more interesting if I have something that is a table I mentioned last night that typically whenever I start a new project the thing that I'm destroying is these those tables over and over and over again we're gonna do our best to avoid doing that tonight and instead we're going to work on something else I'm thinking a rock would be good so just going to quickly grab an asset that we have in here this plains rock I swear it's rock Mesa from UDK I also think that it's really dangerous to be able to recognize rocks but that's okay so I'm going to get this and I'm just going to drag it into the scene so you can see what we're kind of messing with for the most part just going to just delete the starting stuff okay there is our rock in all of its glory so we're going to work through a few things initially what I'm going to do is I'm going to create a material that creates this as if it was some sort of hologram so it's going to go and just assemble it that's the sound effect it's going to make in my head the entire time so just make sure you're all ready to add the ambience when necessary the I'm going to start with that I'm going to move on to something a little bit cooler as we go forward so for this what I'm going to do is I'm going to begin by going to my content browser going to make a new folder and it's just we called effects okay now this is just going to be where I'm going to throw everything for the time being it's not going to be a particularly organized project this evening I'm not caring about where things are ending up I just kind of care about showing you the results of what it is that I'm trying to achieve and I'm just going to call this M underscore vertical creation yeah that sounds cool let's do that okay so vertical creation is what we're going to using as our material it's going to drop you on you and I'm going to open this up and I'm quickly just going to get the existing rock stuff that we have which was this rock I'm going to set this as my default mesh so I'm going to click here and you can now see that the rock is Koken we've got that and I'm also going to apply the default textures did it use which I suspected these two will find out really quickly if there's normal map and such don't match I'll have to look it up but reasonably short so those two that looks promising so far I'd say we've got a winner cool so we've just got our basic rock and everything looks how it usually would all right so we've got a rock and from here what I'm going to do is I'm going to start looking at this idea of moving around aspects using the world position offset can I get a show of hands here if you've ever touched world position offset in unreal three of you who's intentionally touched or position okay you've got someone up there again so sorry the glass window was facing me so I'm the one that's kind of like spotting them so we've got ourselves a situation where we're going to use one position offset now there are two ways that you can move vertices around in the shader you can use it through either tessellation or you can do it through world displacement it's like well displacement or web position offset well displacement does it when it's a tessellated mesh world position offset just gets an existing courtesy now I know I may have just jumped through a lot of stuff just in but essentially what I'm talking about is if I want I can move any vertice in unreal around by simply accessing like where it is and just pushing it up down left or right and that's what the world position offset output does over here so an example of that would be just really quickly if I was to go ahead and get the wall position offset if I was to get a sine wave oops sine I'm just going to get sine and what I'm going to do is if I were to get time so the current time in the game and run it into a sine wave we're now going to get at doing between 1 and negative 1 and 1 and negative 1 right because it's what a sine wave does so if once you get something like that and then plug that into the world position offset what we're going to see is very small so I'm going to multiply it by a big number you've got someone at the door again Alex now I'm just going to multiply that by a bigger number I mean I multiply that by 50 just as a quick thing and I'll show you what's going on so can everyone see that now what is our ROK doing when I plug that in anyone gyrating yep so here's what it's actually doing it's moving between every every vertice that is in the model is moving between negative 50 on the x y&z axes at the same time and then up to positive 50 XY and z axes at the same time which is why it's doing a diagonal movement because it's actually shifting simultaneously on every axis if I was to get that and multiply it only against the dead axis which is the up and down axis so I was multiplied against 0 0 and 50 this is an example now going to move up and down on the spot can everyone see that now here's where things start to get interesting if I wanted to I could actually also do some other stuff so I could access the vertex normal which gets me the direction that the vertex is facing and I could multiply that by say 20 and plug this in anyone see what it's doing every surface is compressing in on itself and then blowing itself out again compressing in on itself and blowing itself out again PS if you ever need to make a hot mesh this is a good way to do it and you know this was obviously going to break at some stage if I crank up the number too high but we can start to get a feel for what's happening right so in this situation every vertex is getting a different thing they're not moving uniformly every vertex looks at the way that that is currently facing and then shifts in a call it accordingly that makes sense wonderful so what I'm going to do here is something way cooler than this and that is I'm going to go ahead and I'm going to access a position on the mesh that is going to be I'm going to access I'm going to create the equivalent of a plane okay so a flat square that is sitting beneath the mesh and what I'm going to do is Alex the door is I'm going to move that plane up and down and use it as a way of shifting vertices within the mesh okay now what I mean by that is I'm going to do this if I was to go ahead and get the active position in world space okay so that gives me the location of the actor that doesn't give me the location of the vertices it gives me the location of the actor does everyone understand the difference between those two things every vertice has its own unique position that the actor has a single central position okay now by getting the position of the actor I can then also go ahead and just make a value that's just going to be called Z offset okay and I'm just going to create this and set it by default to say negative 200 okay and all I'm going to do here is I'm going to I'm going to get a the actors position and subtract 200 from the dead axis to find a overall point in space so I'm going to go ahead and get a what's called a component mask so at the moment the actor position outputs x y&z position right but if I was to go ahead access this and mask it I can tell it to only export the B channel now what's the B channel anyone so the B channel is the height the B channel is the z axis so it's up and down okay now if I get these and I add them together I now am able to find a position like this value here is going to be 200 units beneath where my actors said location is all right now the reason that I'm doing that is check this if I now go ahead and get the wall position of the current vertice and I look at the distance between it and oh I want to get the distance on the z axis between it and the active z axes and just a quick thing here is that I'm going to output the distance but this isn't going to look very good the reason is I'm going to look very good is if I preview it we're going to get that anyone know why I'm getting that if I make it positive 200 you can see what's going on distance is giving me the distance away in centimeters okay now keep in mind that a value of 1 when output as a color is full white which means anything that is more than 1 centimeter away is now going to be super-bright that make sense to everyone so if I divide this by a distance and I just say divide it by say 200 it now means that when I preview this we can now see that we have this the any pixel that is equal to that offset here it's going to be black any pixel that is further away is going to be white and if I wanted to I could clamp it to make sure it never got too bright as well so why is that useful well that's useful because if I wanted to I could start to use this to control my world position opposite and do some interesting stuff because so right now I have the the distance Queen I have the distance between the current vertice and this imaginary plane in space right now because I have the distance between the two of them what I can do is I can say if if the absolute position is below the the absolute position is currently below the offset position I can do a world offset that is equal to the distance multiplied by just on the dead axis and it would be this versus just this I think I did that right nope backwards definitely backwards okay can you see what's happening here watch this if I get my Z offset really quickly and I'm just going to set up a sine wave that's going to change the Zed offset over time so we can see it moving so to do that I'm just going to add a sine remaps which just gets a value with it's an F sine phase so I'm just going to run time into that and I'm just going to make it a value between zero and my offset and I'm going to plug this into here here and see what's happening here so if that was actually between say negative if this was between 1000 I guess anyone see what it does when it reaches the top it actually flattens every vertice to that plane unless it's unless the pixel width above it that make sense to people so I'm probably doing this backwards because whenever we wanted to create something from the ground we would probably want to create it from the ground upwards so to do that all I need to do is just flip my a and B and then set this to be I think negative one yeah that'll work so now I'm just gonna make sure that my position is a set and tell it to go between say negative 200 there you go so if I also apply this and drop it in the world so it's a little bit clearer for you to see what we have is this now that's pretty pretty quick right now so I'm just going to get time and I'm going to divide time by a value of like five six that was accidental and now so can anyone understand what's going on here it's my grabbing a position and we're moving it because we know the distance between it and the plane we can just say if you're currently built like above the axes we want to show if you're below the axes we want to know know above I was right first time we want to pull you down to the plane but if you're below the axes just keep you where you should be that way as the verts reach their actual position they'll stay in place you know if we wanted to get out some extra stuff as well so that as we approach the bottom we pull the verts in that week we kind of get this and it forms down out of a thing which would look like the trap in ghostbusters I guess it's really cool but I'm not gonna get suckered in by myself sir okay that's the start of something cool but let's let's make this a little more interesting let's go ahead and remember before we could calculate the distance between it so you can see here that I can see this line moving up and down the mesh yep after I'm gonna quickly swap these two values because they're technically backwards like a sine wave doesn't matter but it's just where it starts is a bit different so what I'm going to do here is at the moment I'm getting the sine wave just remapping between these two heights and it's giving me this and you know that's great but because I have the distance here if I wanted to I could divide this by a number say 50 in 2020 sounds nicer start previewing it and what I end up with is this yep now if I was to get this value that is currently being divided by 20 I was to clamp it so does everything everyone know what a clamp does a clamp if that's between any two numbers all it does is if it's friend 0 & 1 any number that would be higher than 1 is now equal to 1 any number below zero is now equal to 0 does that make sense for everyone so by clamping it you see that we go from blooming to just being a flat color here yep so I can do that and I can then go ahead and I can if I do a 1 minus it's going to flip my black and white on a client value because it's going to like 1 minus 0 is now going to be white whereas 1 minus 1 which is why it is not going to be black so we end up with this where'd that cool I'll show you it's cool because if I hit em and I drop in a multiply we get some cool stuff happening I can then just drop in like some sort of vector emissive color plug you in I'm going to set you up as someone pick a color you might say I'll be gene dead to me okay if you're red ish I'm going to go okay cool so I'm going to plug in those values I'm going to stop previewing and we look at this me in here what's happening now so because we are able to isolate that band like in space we can then multiply things against it and do some some pretty cool effects right now if I wanted to make this slightly cooler I could do other things as well so I could go ahead and what's a nice thing to do okay yeah by the way remember how I said I planned to these things I lied I landed out but every time I'm doing these live demos I start thinking of cool things that I had no intention of doing if I wanted to get a noise texture so I'm just going to get some Perlin noise so Perlin noise by default looks like this I'm gonna get that texture that's currently wrapped around the rock I'm just really quickly going to throw a panner onto it so that we can just get a little bit of movement it can also look like that actually I want to be a little bit slower than that well whoa mr. decimal yeah whatever Oh getting too picky but that'll do if I wanted to I could get a value like this and just quickly multiply this against a value say five ten and I could subtract that from my mask now remember by default my mask it looks like this but if I were to subtract this gradient noise from it it would now look like this that was way cooler than I expected it to look but that's alright hit stop and now when I look at in the game how much more videogame he did that feel yeah I'm going to see it here in just Marvel marvel at it for just a minutes just prepare yourself now so you can see how I'm going like with these kind of effects are kind of cool right like we just made something like it didn't take me too long to get that up and running and here's the thing if I'm spawning items in the game do you know how much cooler it looks when you're playing a game and instead of just it scales up from zero which is what a lot of people do it just pops into existence by going group like you would in your you know like it's a drop thing I'm sure look it's like you know when something is forming like a demon is starting to give chase because you could apply this if you wanted to to character mesh so whenever you play like a summoning animation for a spawn effect your player could actually just be like yeah and just materialize from the ground up and it would look sick so keep it in mind what I'm going to do next though is I'm going to make something a little more interesting which is going to require some blueprint integration as well as a couple of different measures that are all sharing a little bit of information with one another and this is the section of the project I am most likely to mess up FYI okay so what I'm going to do here is initially I want to create something I'm just going to save my minimal default map I'm going to go file new and I'm going to create an empty level okay completely empty why why would you do that I would do it because if I was to get rid of this and create a new material I'm just going to call it m on the score of star field also I really like real-time demos because when that chills out there and it does that it just feels really cool if I was to have a star field I'm just going to generate a star field that's going to be in the map so I just need one thing here really I need to get a a sphere of some descript then I'm just going to drop into the world I'm going to multiply it by a very big number on every axis okay that may have been too big we'll figure it out I'm just going to then also set its material to be the the thing that I just created which is going to be star field so I'm just going to set it star field and now I'm just going to plug in noise sorry I want a if I plug you into emissive that's what we see by default actually I probably wanted a regular noise oh no think about it so if I plug you in that's what a regular noise looks like can ever see that it's going to set this material to be two-sided that way it renders on both the inside and outside of the screen now the reason I'm doing this just really quickly is if I go into the world that's what we've got what I'm going to do is if I get a noise and I multiply it against a slightly different noise it's only going to show white where both values are currently white so I'm going to set this for like 0.5 put more maybe and if I then multiply that against another noise oh yeah okay why not two of them it's going to really quickly just generate some sort of star field can apply starting to get somewhere still way too much though so all I'm going to do here is I'm going to power it so a show of hands who knows what a power node does power just gets the number and makes it something but like whatever the exponent is to the power of the value that's going in the reason we use this is it's a very simple way for us to add contrast because once the power of two is still equal to one we're at 0.5 to the power of 2 is going to equal 0.25 so it's going to push values toward dark unless they're close to white so the closer it is to a black color they're quicker it'll get dark and I'm just going to punch this up to like 20 that shouldn't have done that okay I know why it's because this noise value is currently needing to be clamped so just quickly push that up to there there we go we've got something that's a bit more of a slight field going on that is totally just not coming out on your screen if I drop this down a bit it should work a little bit better sorry the atom rail is how strong the contrast what's on the screen okay that's excessive so but you can see how I've just quickly generated some noise now the reason I've done this and you can do this in a lot of different ways but I'm just going to find a value that I like I'm gonna apply I'm gonna hit save the reason I've done this is cuz what I'm actually going to do is I'm just gonna because they didn't have a star-filled picture already laying around that's pretty good because I didn't have a start a texture laying around I'm just going to get a a scene capture cube she's going to get it and just drop it at zero zero zero now all this camera does right here is that it takes a screenshot of the current environment that it's in and saves it out to a texture so I can create a cube render target in my effects folder that's just going to be called RT underscore star cap and if I open this texture autistic CAPTCHA you can see here that it actually is saving out the environment around me into a cube map ok so I'm just going to get this and there's a nice little cheat thing that I can do where by Iraq click on this and they create static texture and it just saves out a version of that right now and instead of real time capturing it it just leaves it now so I did all of that purely for the sakes just the end of having a start CAPTCHA but that's alright the reason I did that is that if I open up the original map that we were working on I can now start creating some cooler stuff I get rock you're dead to me if you've had your time so what I'm going to do is I'm going to I'm going to go ahead and make two things I'm going to have a portal in space that's like floating there and then I'm going to have a big asteroid and how the asteroids going to work is you've got someone at the door how it works is that as the asteroid you look through the portal you're going to see the asteroid approaching but if you're not looking through the portal we're not going to see the asteroid does that make sense and then as it breaches the portal it will look all completely rad and just like shoot out at the end of it okay yeah correct correct so how do I do that well I need two things what are the two things that I really need to have within my build anyone a portal and asteroid suite so we're going to use that rock that we had a second ago as our as a mesh so I'm going to create a new blueprint that's just going to be called a VP portal effect that'll do okay so we've got the portal effect and the first thing that I'm going to do is I'm going to add a basic shape which is just going to be a plain mesh now one little thing I want to point out right now is [Music] four words for my plane is which direction at the moment yeah it's pointing upwards so I'm actually going to be getting the up vector a couple of times where if this will set up correctly I would be getting a forward vector which be along the x-axis just be aware that I'm going to be accessing it that way so I've got this which I'm just going to rename to portal and I'm going to go ahead and make another static mesh component which is going to be called asteroid I'm going to parent the asteroid to the scene route instead of the portal and I'm going to set this to be the rock and then I remember which record was nope really going to be like that I think that's the right Rock looks good to me yep so that's going to be my asteroid over here and as it passes through the portal it's going to look cool time being I'm just going to quickly move you over to here rotate you around I'm going to just shrink down my asteroid as well something that's a little bit more manageable and I'm going to beef up my portal size to be about six six it could have gone too far on one of them I don't know which but it happens now okay yeah you'll do so I'm going to get my portal and I'm also just going to quickly get it up that way so it's facing wrong there so this is what I have at the moment it'll look better and so it's time for us to stop making there are two sides to this that we could choose to make I could make the asteroid first or I could make the portal first either or I think it's probably going to be cooler for me to make the asteroids first so it's about this time that I'm going to make sure that I've got a point of reference going so that I don't mess all of this up at all wonderful just got my point of reference now what I'm going to need is okay so how do I make an asteroid invisible if you're looking at it through the portal versus not actually do you want me to show you the effect that I'm creating first so you can get a better idea of what it is that I'm making the final effect is going to look like I hope gets play when you double-click them ask me later final effects were creating is going to look like that okay now you'll notice that the asteroid is not visible on this side of the portal and then it comes out okay well sometimes I just really love my job because this is rad okay so let's make a big asteroid so I need to make it so that I can't see it from one direction and I can from the other so the first thing that I'm going to go ahead and do is I'm going to create a new material that's going to be called M underscore asteroid okay now M under asteroid I'm just going to quickly just copypasta the two textures out of here because I know they're correct content browser M asteroid so I'm just going to drop them in that's gonna be my base color and my Knoll and I'm going to also plug in the the mesh itself which is called rock too and I'm just going to tell it to be that so this is what we have by default okay simple rock okay so we've got this kind of placed and that's what we're gonna work with the thing that we need to calculate for all of this is going to be based off of my mask so I'm going to mask out the areas of the rock that I want to see and the areas of the rock that I don't want to see does that make sense to everyone cool so what I'm going to do here is I'm going to go ahead and get a vector that I'm going to add into my material and this is going to be a variable that we change and we set to if I want to make a portal I need to know three things all right I need to know where the portal is in space I need to know which direction the portal is facing and I need to know where which direction it's facing and I need to know how big the portal itself is that make sense to everyone right so this first one is going to be portal location okay now this next one is going to be portal forward vector okay so that's going to be the direction that it's facing this is going to be where it is okay now the thing that we're going to work with here is if I was to get the world position of every every vertice that we currently have what I'm going to get is I'm just going to clamp this so you can see it a bit better you start previewing it now if I if I draw the current world position of every pixel onto this asset this is what we see now who here in the audience can describe what we're actually looking at here anyone why are we getting some weird colors XY and Z so X corresponds to red Y corresponds to green and dead corresponds the blue does that make sense so what happens is as the pixels go along the x-axis from zero they're going to become red as they move away from the x-axis they're going to become black that make sense now essentially what we need to do is we need to instead of finding out the pixel location in terms of the space of the other DiGiorno did you order pizzas already it is good sweet in man let's transfer oh yeah instead of finding out where the pixel is in terms of world space we need to find out where the current location of the existing pixel is relative to the portal opening okay so we need to find out if the portals facing this way we actually want to project them along that axis instead so that's the first thing that we know we need to do and the other thing that we need to do is create a cylindrical intersection between the two locations so to start with on that I'm going to go ahead and I'm going to create the best place for me to start on that is going to be the cylindrical intersection so I'm going to right-click and type in cylinder and luckily enough there's actually already a sweet function called cylinder intersection that I can start taking advantage of if I open this up I can see what it does it's kind of complicated but essentially this projects a cylinder into space essentially it's projecting a cylinder into space with a position of rotation and then it's telling me whether I can see the cylinder or not okay so what I'm going to be doing here is I'm going to set it up with a few things its origin just going to move this across can you read all of that okay by the way I'm trying to zoom in with possible make sure again if I lose you at any stage feel free to raise your hand and I'll try and explain what's going on if I get this and I plug in the origin I'm just going to tell it for the time being that it's position is zero zero zero I'm going to tell it that the the forward vector is going to be the direction that we're currently looking at the cylinder farm so I'm going to plug that into the the z-axis now this forward vector is currently set to zero zero zero so I'm actually going to give that a default Direction just something that is visible to me okay I'm also going to go over here and just this mask I'm going to go ahead and make a component mask of the B Channel and I'm going to preview that okay so you can actually see what's going on there see everyone see this cylinder in space the rock is bigger than the the rock is bigger than the cylinder so it's always going to be able to see a similar power to look through it but it has to change the radius on this to say a larger cylinder the moment that's at the zero I'm going to crank it up to 320 okay can you vaguely see what's happening there it's picturing a cylinder on top of it and wherever we would be able to see the pics the cylinder like the rock through the cylinder it does that and wherever we can't we're going to get blackness okay now if you think about what our portal is going to require it's going to require me to have a capped cylinder which I think it is by default and it's also going to require the sides of the cylinder to be can you ever think of what size the cylinder actually needs to be basically actually needs to be a zero point in space so that can everyone do that now now what I'm essentially going to be doing is I'm going to now have to work out which direction I'm looking at the cylinder from to work out whether I can see things through it or not okay so what I mean by that is I'm going to go ahead and get this and this part I'm probably going to lose you a little bit unfortunately in term thing to have the nicest way for me to explain this is really going to be yeah let's just see what happens okay I'm going to go ahead and get a function that's called transform to Zed vector now Zed victor takes in a central location and a direction and it then converts something from one set of axes like world position into another set of axes which in this situation is what i'm going to use to figure out which direction I'm looking from and whether I can see this or not that'll make a bit more sense in just a second but I'm going to set this up so that essentially the Zed vector that's getting read in is going to be the portal forward vector and hopefully if I do a component mask on risk and just get the B channel you'll be able to see what's going on can everyone see that remember I put in zero point three three three zero point three three three zero point three two three that essentially made kind of like a diagonal angle if you imagine that I go Korea doesn't know how direction vectors work totally fine if you don't okay that's fine so you know have existing vectors work right whereby at the point in space a direction vector is essentially imagine we were at zero zero zero and whatever number was getting read in we were pointing towards so if I read in a number of zero zero one we would be pointing directly upwards because we would be pointing at a pixel in space located at zero zero one it's on the other hand my value is 0.3 0.3 0.3 my value is going to be a little bit along this axes a little bit along this axes and a little bit along this axis which creates a diagonal direction does that make sense to people great so by getting this I can now figure out which side of the portal I'm looking like it the asteroid is currently on so if I was to get this initially I'm just going to get this and I'm going to straight up just plug that B value into the opacity mask so you can see what just that is doing by itself I'm going to set this to be masked with my blueprint so at the moment this is going to be haven't actually applied the material so at the moment it's kind of trimming off because I'm hard coding that value can everyone see that so it's at this point that I'm just very quickly going to set up in the construction script I'm going to get the asteroid I'm going to we're going to create a dynamic material instance of it and the source material is going to be M underscore asteroid I'm going to promote that to a variable just so I've just stored it and it's just your called asteroid mid mid stance or material instance dynamic at which point I'm going to create a new function that is going to be a new function it's just going over pizzas great yeah throw them over there and I'll just quickly get this part done just give me called updates asteroid and all we're going to do whenever we call update asteroid is I'm going to get the asteroid material instance dynamic and I'm going to set a vector parameter on it and the vector parameters that we're going to set our container and remember which which values that we created we had the portal forward vector which is going to be equal to the up vector of the because remember the plane was facing downwards so I'm going to just get that and feed that into the portal forward vector and I think that one was called was a portal location is that what I call the variable probably I'll just try it and see if it works so I'm also going to set the new get location and I'm going to plug that in as the value here and I'm just going to call this there's portal location that was not that was not quiet a pod a location forward forward vector cool great and in theory if I compile save oh woops and I've got to tell this to do it as well to the mid great compile save so I've just set that up like that and in my construction scripts I'm now just going to tell it to update asteroid so can everyone see that so the dead is currently doing this however what I want to do is when I'm this way I still want to be able to see the asteroid through the portal and when I'm this way I don't want to actually see the asteroid because I want it to kind of be occluded by the cylinder itself that way we don't get these weird back faces because they're ugly so to set that up what I'm now going to do is I'm going to get the when I am getting this channel I'm going to on one side I'm going to get the max between I'm going to get the max value between that and the dead vector which is this so if I stop preview so one side of my graph is going to do this and the reason for that is I'm just gonna clamp that in just a little bit and now on the other side of my graph I'm just going to this one little bit done and then we'll be good I'm going to go get the min between the two values so min between this and I was right between this and one - so it inverted and now that sounds weird but that means it on one side I see this and on one side it's going to be that and to blend the two of them together I now need to do one last thing I swear sorry guys we're almost there and then we can eat the pizza next I need to convert the camera into plane coordinates to work out which side of the asteroid I'm on which again I know it's kind of a strange one but I convert the camera into I get the same transform back to the location that we had oh by the way sorry actually I forgot to set one little thing which is the central location that has to go so this has to be plugged into because we haven't moved it yet we're not seeing it but that had to be plugged into there and the vectors transform by default is absolute world there we go cool the last thing I'm going to quickly do is just get the coordinates of the camera in the space of the portal to work out which side of the portal I'm on and then this will be done for the most part this is actually the most complicated bit so you have my apologies if this is kind of losing you I need to get the camera permit a comment I need to get the camera position in world space and I need to transform it into the coordinates of the portal which is going to be that vector is equal to this center point is equal to this and this connects to a loop and this is the last thing I need to do max in a B stop preview yeah yeah of course this needs to know the B channel of this value okay and may put those two values backwards [Music] so I've definitely put something backwards and what we're going to do is just quickly while we eat pizza I'm going to work out one so you can see that it's working right now however I'm missing a pretty important part which is the the what do you call it portal itself so let's do the portal next that's currently what it looks like I'm going to set the asteroid to be just a little bit smaller because it's kind of huge so 0.5 0.5 0.5 sounds good in this I've got 320 now so this way this will work quite nicely at this point that I'm actually going to drag in the blueprint that we created of the asteroid into the world so I can kind of start seeing it and pull it up here so that's what we have at the moment yell dizzy yet okay so next thing force to do is create a portal around here now this is the easier part but there is one little tricky part that we're going to do that hopefully you're like because it's a nice little trick I'm going to create a new thing that's called M underscore portal and the M underscore portal is essentially going to be a set up for us to have like a single plane that's going to look like the portal okay and it's going to be translucent okay now first things first remember we created that texture a little while ago this one the texture cube I'm going to drag that into my M underscore portal it's going to plug that into base color and under UVs I'm going to plug in a reflection vector okay now can everyone see that see what it does it's even cool if I wrap it on a sphere actually it basically grabs a reflection vector and uses that as like projecting the cube map that we had into the thing so the reason we use that is that if I was to now just make sure that Emma's got portal was the thing that we were using in our blueprint I could have this starting to go on so it's at this point that I realized I made my texture way to high res that's all right people won't notice it too much and I can probably cheat a little bit if I was to yeah the problem is is that when I did my CAPTCHA I captured it as a 256 by 256 and I really should have captured it as like a 1024 or something I might just really quickly make that adjustment because it's going to slowly drive me crazy sorry empty level I just once again I'm just literally going to drop in a sphere it's just material sphere and I'm going to plug you in as space what I call it something to ten points if you remember what I called star field yeah that sounds like a thing I called it right cool I'm just going to go back to my render targets sorry about this everyone sorry it's called a scene CAPTCHA actor it's going to set you to be in the middle I'm going to set the scene target as this one get it cranked up that resolution and if I look at it again that looks a bit nicer I'm also going to do what I did the first time which was crank up the power on it to be a little bit nicer but I think a little bit nicer save and now I'm going to quickly capture that hopefully no one will notice I create static texture cool that's the one I'm going to use instead which looks like that whereas the previous one looked like that look at how much nicer that looks oh my god okay cool let's go back to the map and let's get rid of that abomination and set it to be text - that looks so much nicer okay save there we go so now we have a star field on the other end of this still not particularly great and I would do something however what is the issue that I currently have with what we're seeing can't see the other side of the asteroid so ah let's have a quick look at to how to do that so who here has ever used the custom depth buffer I'm surprised that any hands went up that's nice so here's how it works when we render the scene we render out all images right but if I want to I can do something that's quite cool whereby if I go to my project settings and I go to rendering and I type in depth there is a thing here that says custom depth stencil path and that's already been enabled which is good because what that means I can do now is if I go to my portal and they go to my asteroid and I type in depth has this little check box here that says render custom depth can everyone say that you click on that and I'm going to put it on the first stencil buffer now check this out this is how am I saying it scene looks right now right however if I was to go Shh here lip buffer visualization custom depth see what we see or if I go here and I go buffer visualization where is it buffer visualization stencil pass oh okay since was not working for some reason ah you are correct I'm off the team so see we have that now and actually shows that it's material idea one can never unsee that so the cool thing here is that actually goes off and renders just an extra just pass of the scene then includes any actor that's been tagged with in a certain stencil okay which means if I was to go to my if I was to go to my portal material and I was to say supposed to get the scene texture and I was to select stencil custom stencil which is somewhere on this thing and I'm just not seeing it third from the bottom thank you so if I was to get my custom stencil and I was to just script the our channel of that and I was to just plug you into opacity this is going to be inverted actually no I think that's inverted and the other thing I need to do is I think I need to put a seal on the stencil because I think otherwise it doesn't ID come on and I'll explain what's going on in just one sec it's also that I've gone off of my references right now and I'm just waiting to see that so I'll show you a bit better of what's going on you can click on the asteroid see what it's doing now so we can actually see through the asteroid at this is making itself invisible wherever something is on this custom stencil buffer but if something's not on the depth buffer it just shows star field which in doing so creates the illusion something's there that make sense : it's good it's good so because we're masking out the asteroid like the asteroid masters itself out and the stencil buffer handles the rest we end up with this really nice illusion where something exists that doesn't right cool stuff so the next thing for me to do is to start working out like let's make this round steer like a round portal in space because that would look way cooler and then we'll do a couple of other little things I can we say this is going to be two hours okay yeah oh yeah so the seal function does this the seal function does so if I get a value if I get a value that's zero point one it just rounds it up to the next integer so any value just pushes up to a full number the stencil buffer by default if I also plug this in without the stencil buffer it would look like this and pretty sure it puts out a value that's equal to the stencil buffer value I could be wrong there it might actually just Apple to the buffer in general oh yeah that puts to the buffer in general my bad so I didn't need the seal but if I wanted to make sure that every value pushed up to the next integer rounds it off that's how I'd do it looks like I don't need it there because that works getting that so that's because right now I haven't actually synced up our cylinder to be the same as the thing because remember the remember the asteroid is masking itself the portals not actually masking the asteroid which is creating the illusion that the portal is masking the asteroid that makes sense yeah yeah so once we shrink that down a little bit and we give it like a sick electric looking effect around the outside no one's going to know just hide all of the ugliness it will be good so I'm going to go ahead and I'm just going to set my first off on the asteroid I'm going to turn down this value convert that to a parameter actually that's just going to be called portal size and I'm going to set up to 300 by default instead of 320 okay also I have the chain stuck in my head and this entire thing has basically had an entire musical going on in the background that no one else can hear okay so that's set up at set to 300 so you can now see it's doing it a bit earlier see that so okay good without in mind let's go ahead and make a portal effect way cooler than what we've done already because it's hideous okay cool so that's all it took for us to be able to see through an object and have that illusion right but next up the trick is going to be for me to go ahead and I'm going to create area just type radial and it will give me a radial gradient exponential which by preview looks like that editing you can all see where this is going so if I was to get my opacity and multiply this against this that's what we're left with so I'm going to apply so you can just see the stars kind of going through it right now but what I need to do is make this a really strong circle instead so I'm actually just going to up the density here which I'm just going to step to like 20 which should create just a hole in space cool so now it's time for me to start working out where this value is to kind of get it a little bit nicer so I'm just going to go I'm going to up the radius to 0.5 2d pop value is about 0.5 so I think that'll be right yeah pretty close and I think when we get a rim on this no one will notice so I've got that as a quick section of like the thing in space if I was to go ahead and duplicate this and I was to do a one- which generates this and I was to multiply that against that think about it this way if we have a circle of collapsing inwards and in a circle that's collapsing outwards and we multiply them together which is the only part of the circle that we see the doughnut part so what I can start doing now is increasing my density to kind of carve out that so it's a bit higher and then we get this right and the reason that's really nice is actually I'm going to decrease my density now because I think I my density my radius because I think 0.5 was right I just got ya ya further prod was good so we've got that quickly multiplied against it if I was to get this value that we're now spitting out and multiplied that against like by color and emissive color someone give me a portal call stop preview now the next thing I need to do is I need to tell it wherever its emissive also mask out that part of the asteroid because we don't want to see that part of the asteroid so I think that blue was kind of cool but I really probably needed to crank up the numbers substantially to make it cooler closer get better I'm also just going to really quickly because I've started on this pathway add a power which is going to be used to yeah sorry one sec I'm going to multiply it by a number to beef the values and then plug that into there and then clamp it and I'll explain what I've done in just a sec a bit nicer save okay good so rings nice up but now we need to get it occluding our section here so to do that all I'm going to do is in the asteroid material because we know what's getting set like as a value like a ring so sorry what I did just end was so this is the ring that I had so notice that the ring kind of fades out by multiplying that by five I made it brighter and by powering it by five I increase the contrast but only for the values that are still below one because I power it anything that's above one is now going to get bigger but anything below one is going to get smaller and then when I clamp it off it doesn't matter because a lot of those values above one and out equal to one but the others dropped off which gives me a nice like cleaner tighter ring and then when I multiply that against the color I get this which means if I go back to this and I were to add that to my existing opacity mask and yeah that makes sense and save it what we get so see that ring is now including it problems we've still got a little bit of a tail end here because I've still got to try and get in a good number for the asteroid itself so I'm just going to go ahead and set the portal size to be just a little bit smaller I'm going to call it to 295 even I think I'm probably only off by about 10 or 20 centimeters yeah we go look at that cool that looks reasonably well I'll probably need to get this a little bit nicer but it seems to be working pretty well I keep in mind as well that I can like pull this ring in as well and get some other nicer effects that would probably occluded a bit better like if I wanted to I could have like some dancing energy kind of around the edges of the ring and just whatever I wanted to have there I'm sure would look reasonably cool the next thing I'm going to do though is I'm going to add some we're going to add some cool looking like electric rings that are kind of coming in to the circle if you know what I mean and there's a couple different ways I can do that it's a really a kind of cheeky way that you can do it that I personally like so if I get a pail in noise I'm going to actually I'm going to quickly load up a reference image again for this one just to make sure that I'm on track yep so if I was to get the pose to get this texture so everyone knows differently short regimens we know how you these work okay cool so it's just x and y and it tells of which pixel to sample yep cool thing with that is that if I go ahead and I get time and I divide that by a number just so that's a bit slow moving so like I'm just going to guess like 200 if I get time divided by 200 and I append that to the distance between a standard texture coordinate and a value of 0.5 have I lost all of you we get this so just quickly the distance so to a texture coordinate goes between 0 and 1 right and 0 and 1 which means in the center of it is the point that is equal to 0.5 and if I get distance between those two I get a radial fall-off and if I use that as my y coordinate instead of the actual y coordinate what I get is this and I might be a little hard to see what's going on there but can you see that that's pulsating it's because it's actually sampling the texture that doing it is in a radial way that's pulling a pure single line of textures out which that's just going to be the time so it's going to be like that because it's a position in space so if I do something like that and then I was to do that thing that I've been doing all evening where I've just increased the contrast that looks kind of cool only the values where it's equal to one are we gonna actually see these rings so see I've got that happening now and it should give me inner rings and outer rings every now and then it's up to me as to what kind of values I want to have like actually five looks pretty ready let's go with five so opposed to get that and kind of back before where we have the the outer ring if I wanted to I could simply just add the current set up but I've got to include these rings and drop that in there and there is one other thing that I need to do here which is if I look at this here it's a good idea for me to multiply this against the Rings because did anyone see what the issue with my rings is right now what are my rings doing on that square that I don't want them to do opponent yes they're clipping the edges so if I multiply them against the sphere that we've already got it's going to do this to them see that and if I then add that to my set up I get that effect if I hit stop preview and I look at it just generally now we're going to start getting that effect which is kind of cool I'm going to need to change my contrast value again because a bit too hiding the coolness of what I've done so I'm just quickly going to get that only wants to be like a very light thing so I really hope we're gonna dare and there's one of those things that I could tweak the numbers for hours and still not be satisfied apply save what we end up with is this looks a bit cooler and now the next thing that I want to do isn't affect our next thing going to do is when we look it up from behind we see this which is both cool and not cool so what I'm actually going to do is I'm going to get my portal and I'm just going to say two-sided apply save and now you get this effect which actually thing is pretty rad because now it looks like I'm looking through the other side of space and because it's gone through the portal it no longer exists in that dimension and now it looks like it's in-house so make sense I kind of like that I think that's cool we so next thing for me to do is I'm going to start setting this up so that as we clip through the portal we get I got really cool rule that effect that we did on the first asset that we created whereby we had that rad looking like distortion effect going on let's just do that because it'll be cool so I'm going to go to I'm going to go to my actually wait which thing do you think I need to modify here to get the cool-looking distortion on yeah so I'm going to go my asteroid and all I'm going to do here is so this B value over here if I preview it it looks like that right now right now remember this B value is the portals direction and it's facing along the way that the portal is facing that make sense to everyone now the reason that's really useful is because we know the direction that the portal is facing remember before all I did was I divided it by a value to kind of like isolate it if I get this and just really quickly divided by like 20 or 50 and I did ABB's so they never know what an ABS does absolute value you never know what an absolute value is yep positive yep which means that negative 1 is now equal to 1 negative 2 is now equal to 2 that makes sense so if I had a graph that was going to do this and hit 0 and now is going to do this yep so the reason that's really useful is what happens when I preview the ABS see what we get I never understand why we get what we're seeing right there great so by getting this line we're going to do really quickly I'm just going to once again I'm going to get that line I'm going to add yeah I'm just going to steal wholesale the effect that I did before because I was pretty happy with how that looked so once again I'm just going to get this texture sample multiply it by a number and subtract it from what we've got which is oh I hit control B instead of control V where am i what is going on there we go abs and then I'm going to subtract a little bit of client which in doing so is now going to look like again I may have gone a little aggressive divided by like 20 instead so see we've got that happening now that's pretty rad so let's go ahead and get that and going to pull this down here for a sec so we've got that kind of going on and all I'm going to do here is I'm going to do a quick 1 minus so I flip it that way only this intersection is doing that I'm going to multiply it against a value that's going to be I'm sure I'm just going to set this to be the same color as my portal so that the color scheme kind of matches this is going to be I'm just an actually named this portal color so I'm going to multiply this against this which is going to give me something looks like that and then I'm just going to plug that into my emissive color that's a good start it's not the total effect of what we want just yet so I think this needs to be super tight going to mean like a really really fine line I think would look really good so to get a really fine line all I need to do is this number of the way divided it by ten I could divide that by something way smaller like two I'm going to get something that's closer to that which is alright I guess yeah it's kind of cool so now if I was to get the portal sorry get the asteroid and move it through the portal B and we end up with that which I think looks pretty cool you know we've got to solve like a nice simple effect that good start cool so the next thing I'm going to do how do we have time for we've got just enough time for me to okay what would you rather see how to set the asteroid up as basically a projectile that gets properly fired through the portal or particle effects so that there's like heaps of small rocks getting blown out of the thing wow I'm really surprised everyone went that direction okay okay so for the particles that's actually easy which is great for the for the particle is actually reason you know now that I'm looking at this effect by the way I'm going to not even divide this by two I'm going to make it even even thin online and I'm going to make this less aggressive you value by four so it's go to and make you less aggressive on that front just cuz I want like a really crisp line there's a kind of passes through the portal a little bit better not grade sorry I'm just getting carried away now just two centimeters it's a four centimeter spread yeah that you would save eight centimeters because it's radium there that may not be enough now okay you like just do the thing sorry okay so alright so we've got something cool we've got the basics of that thing set up the next thing that I'm going to do is get rocks just shooting out of the portal because that will be cool so to do that it's actually reasonably straightforward all I need to do is get my portal effects I'm now I'm going to go ahead and add a particle system and now I have to quickly make myself a particle system so I'm going to go to here I'm going to go P underscore trouble okay so that's how my particles would typically look if you imagine each of them is going to be a rock just just use your imagination here I'm going to get those particles I'm going to spray them through the portal so I want them to last potentially a little while so I'm going to say between one second and five seconds that looks kind of cool so they're going to sprout like that I want them to spray out from kind of a cylindrical speed like a cylindrical set up going on so start radius is going to be around I'm going to set the radius to be 50 because that way I think this will work I think if I said the Rays 250 it'll scale with the the size of the thing that that makes sense in my head the initial like the cylinder location as well is going to be going to offset it to be just down a little bit by like 100 units that way it's coming from behind the portal the next most important part is I need to make sure that these are as their life goes they start small they scale up to a full rock and then towards the end of their life they scale down again because we want them to disappear so I'm just going to go sighs besides my life and I'm going to tell you in here that so this is a series of points that ain't at each stages of life I can tell it to be something else so I'm going to say at 0 percent of your life you are zero zero zero okay and we can see you can see those crosses are kind of blinking in a little bit they look down you'll see so they're kind of growing and then I'm going to say it at zero point zero point two of your life you're at full-size and at one of your life you're back at zero so see how they what buh-buh-buh-buh yep cool at this point that I'm going to go emitter type data add mesh data and we're going to set the mesh to be what's called rock to think it was now by default the initial size for an emitter is zero twenty five which for those keeping track at home is 25 times the size of that rock is enormous so it retails to be between 0.1 and 0.15 or one to five okay so just quickly I'm going to drop that into the world so you can kind of see what it's doing can everyone see that it's kind of cool by itself to be honest next thing I want to do is I want to start them with like a random rotation because they're all currently just facing me which looks lame so I'm going to go to rubble I'm going to go here and I'm just going to add initial mesh rotation it's just random and here I'm going to go rotation rate and I'm going to just shrink that down massively because I really just want like a little bit of spin on them maybe a lifetime I'm going to say it between 3 and 5 actually and I'm also going to set the radius here to be 300 and I'm going to set the velocity I'm just going to crank that up as well to be between 500 and 200 so we've got something like that right now yep so if you think about what I'm doing all I need to do is in my in my exercise is yep so in my cylinder yep that's all set up good okay good all I need to do here is I need to set it up such that in my blueprint and now add component and I'm going to add a already out of my particle system which is parented to the portal and I'm going to set that up to have zero out all the values cool or whoops that was the scale derp and I'm going to set this to be the effect that I just made which is called ruble okay so the problem is right now it's scaling with the portal so it's up to me to how I want to handle this if I want to parent it to that I just need to decrease the rest of the values to go with it six for one really I might do that just so that theoretically as we scaled up the portal size it would also adjust which means just going to dividing you by six and I'm going to set the cylinder just spitting out like that right now that's kind of okay the next thing that I'm going to need to do to kind of get this effect really working is simply in my blueprint where I spit these rocks out I'm now going to tell it I'm going to go compile and save just quickly in okay first off in the mesh data I'm going to click this button says override material which means use the emitters material instead of the default rock material now the reason I'm doing that is that if I go back to my portal when we run the construction script and we create a dynamic material instance for the asteroid what I'm going to do is I'm going to get my rubble particle system and I'm also going to create a dynamic material instance of that which is going to sample the first things indexed so the first material index and that's once again going to be the MMS core asteroid and which point once I've sampled that what I'm going to do is I'm going to again promote the variable and I'm just going to call this ruble mid and if I in update asteroid when we call these functions here where I'm saying when I'm setting up that one sorry rubble mid when I'm calling this thing that says set set parameter value I'm actually just once again going to re reference this so that it's now setting that value on both of these materials at once does that make sense so whenever I'm updating the forward vector running regular I store I'm also updating it on the Java trainer myself and the final thing here that okay so this is going to in my head this will work in ed it up but it should be broken normally and I'll show you why in just a sec so if I look I'm going to move the portal back there's two issues with this right now and first people to get them I'm not going to say win the prize because they didn't bring any with me so something is working here but what's not working anyone well I mean I didn't want them to necessarily follow the asteroid correct so what do I need to do what do we have to do before yes so in my blueprint I'm going to go to my rubble get it tab in cusp and once again I'm going to say add that to my custom depth buffer and in doing so so you can now see them through the thing I actually probably want to move that that particle effect even further back then where it currently is but I mean I can do that pretty easily by just grabbing it shifting it back to here for instance because it does look way cooler when it's really coming from a distance yeah I mean like when they were kind of doing nope really I mean I could I could do that in a couple of different ways acceleration I could add acceleration of a life and probably just fake it I would just add ads or you have zero zero zero acceleration at from zero point five of your life we start to kick in gravity and then at the end of your life we're adding like negative 400 I guess so I say they're starting to fall those are some just real ballpark figures by the way so and you know there's a couple of different ways I could do it I could say here start to kick in but then don't really kick in and so a little bit later second that looks kind of cool actually so now the kind of spraying out but in here for the most part they're not really falling until they kind of hit that portal really yeah I mean realistically this is actually one of the defects that would look a lot better if I had fewer of them I know I just said that yeah there's a couple of different ways I could do that I think in here when I go to cylinder I could say surface only which only spawns them on the outside of the cylinder which if I was to then scale correctly would project just around the rim of it you know I could like I could create a safe zone or something like that a bunch of different things I could really do to kind of smash it out and otherwise that'll kind of work that way but there is one other thing that's currently busted and that is that if I hit play you see what broke what's actually the stencil buffer as much as it was just it's not updating the material anymore the reason is not updating the material is this weird little thing that you've got to do whereby on begin play I need to rear ever encima Tyrael I need to call set material it's just a weird thing with it's a weird thing with a particle systems they're not really meant to have the materials overridden like this so I have to actually reset it to the one that I set it up as in the construction script and now when I hit play go work we get this and if I wanted to do the rest I could fire it out because like the the asteroid doesn't need to be a component of the portal it's just I just did it that way for the sake of simple testing what I would actually normally do is make it a child actor and then just give it a projectile velocity and just to out of the thing which wouldn't take too

Channel: Brisbane Unreal Engine

Views: 10,978

Keywords: Unreal Engine, Epic Games, Brisbane, Brisbane Unreal Engine, Tech Art, Paragon, Particles, Game dev, game development, Interactive, VR, particles, visual effects, 3d, modeling, animation, effects, game effects, development, real time, real time 3d

Id: WzeeXMcui_0

Length: 89min 51sec (5391 seconds)

Published: Mon Jun 12 2017