Unreal Engine 5 Portal Gun - Part 1

hello everyone so recently I played the game portal which is a very famous game I'm pretty sure you will have you all know that so I thought of implementing this portal effect in a real engine so this is what happens in the game we can show that world certain type of walls and on those places a portal app yes and this blue from this Blue Portal when we enter from the Blue Portal we exit from that orange bottle so that's the basic gameplay mechanism we have here regarding the portals so that's what I am going to implement so in this episode we are going to implement this that portal effect and not everything just this how to show from one portal what we would see from another portal so this is the blue bottle and I have placed another orange bottle here so from this portal I see what I would see from the other one and as we move around you see uh the view also adjusts just like we will be seeing from the other one so here you can see these three boxes uh these three boxes would we can see from here see so yeah let's see how to implement this effect today later on we will Implement all the mechanisms of the bottle game such as how to jump this and how to shoot at walls and create a create the portals in the locations that we need but first let's figure out how to do this camera as well before we get started with the tutorial I'd like to remind you that you can download the project files of all of the tutorials that I have done in my channel in the pattern page so this is going to be uh 1637th tutorial today so for all of those thousands of tutorials you can download the project files for the membership without a limit so I'll leave the link in the description below and let's get back to the tutorial all right so let's start by creating a new project using the first person template I'll name this code [Music] right right so this is what we got from the beginning so the usual first person template uh now let me create a BP folder here I'll create a new blueprint class so I'll name it foreign [Music] so before we Implement like in the Portal game you know we can from the portal gun we can shoot at the wall and in that place the bottle appears and if I right click another portal appears in another place but before that part I just implement the portal mechanism so then later on directly change the allocations and Implement that behavior okay okay it's blueprint now we're gonna need two dose quarter dose so for each of uh portal we're gonna have the dough and the same capture element scene capture component so couple of things so therefore I'll create two blank same components T1 so this is the root of the first row I'll keep it here and T2 the root of secunda I'll move it somewhere like this [Music] um oh it would be better if the 51 is here T1 is first right now uh the portal so this I'll add a plane I'll call it the one see should we face this way let me place this here and so we can get an idea okay so right let me rotate it to the other side because play starts here place it over here and as you can see it's on the ground also I think it would be better if we have if it is a bit larger so how about two right and if I go to front you see uh I it should match with this ground level so I'll move both T1 and D2 up okay now it's like this nice so we need another dough so duplicate this one with Ctrl d Android auto these two keep changing so I'll leave it that like that and data is here day one is here wait I'll move the D1 over here and the toe here like this now we need to see in capture components for each Dough because from this door we should see what it would see as if Playa is looking from this side so like this so and when I look at from here we should see as if player is looking from this side through this window so therefore to capture that we need to see in capture components and right so here scene capture component 3D I'll call this fee this is dou 2 so we need to capture and correctly copy paste this is P1 capture and it also should be under D1 all right now it's like this now for testing purposes let me all these two pull back a little bit and we need a texture Target so let's create let me create a new folder okay right here now I create under texture one uh render Target I'll call this V1 RT the one friend Target for Portal 1 and duplicate this RT P2 wait wait so here in the settings this is by default size 6256 so I'll make it 1K and Save and duplicate now we have settings so we can assign RTP one to this and rtp2 to the P2 capture okay now we need to create a material to apply to these planes so that we would render what we see through this CN capture components on these planes so RTP one let's create material I'll call it m so as you can see here let me convert the store parameter I'll call it RT stands for render texture and I'll convert this to uh on electron and connect this to a missio caller right apply now create another instance from this and I'll call it MI order D2 this is for the second bottle now here instead of this render texture I'll assign RT V2 okay now this one contains first render texture this one contains second render texture so first render texture should be rendered on the second row so assign it here and the second render texture should be rendered on the first one so assign it here if I compile and play as rotated but we can fix it rotate 90 degrees okay compile I should be correct here yes now as you can see even though I move it just looks like a static image that's because we are not moving this capture components as the player moves once we do that this will look like a actual portal but before that I need to get the this uh iconic portal shape so let me have one Photoshop everybody okay so here I have created a circle uh with this outline in red and I'll make the filling green because I need a way to distinguish there zero oh sorry two five five zero and outline fully read okay it's already fully red okay now I'll save this let me import the portal texture d portal this is how it looks uh let me try again drop it here now I'll convert this to a mask material and connect Alpha Channel here so if I change this to a plane now this is how it looks now we need frame in one color so for the frame I'll get the red Channel and multiply it by your character parameter I'll call this Korean color and I'll make it blue uh bit brighter blue and I'll add it to this and connect to MCU color now you get a frame it's a bit white-ish so in the frame also I can see the details of the text Journey so what if I yeah let's multiply this first with the green Channel because middle is totally green so yeah now it's only blue okay I'll add a little bit of emission too okay apply now you see it has a frame but both frames are blue but what we can do is uh convert this so it's already a parameter so this one change it to Orange that's the color there you see okay here is the Ranger here is the blue one later we can add the effect to make it a little more interesting now let's continue with the uh portal camera so now as you can see it just looks like a static image so let's make this interactive now so in order to make this correctly work we need to do two things first thing is we need to adjust these same capture components locations based on player location and also the next thing is based on their location distance from the powder dough we need to adjust they are field of view so let's first look into how to register locations and first before anything we let's change the location of the second portal to T2 to this wall so it makes more sense and this one yeah now you see it's just this wall because that's what it sees from this side and you may have noticed in Portal game we can only place portals in certain word types so I'll delete this one 31 4. let me copy this care I'll delete this one and add a plane here like this so that from this side we don't see anything because it's a plane one-sided play okay I'm gonna do the same thing to the other hole itself before that let me change the copy change the material right so this is also a wall okay now first portal let me move that one also here thank you okay okay now let's go back here so we need to calculate the position of this uh capture components based on players location so for that I'll add some support elements to make our calculations easier one thing one under D2 and a black scene component I'll call it p Sim T2 PC means player simulator so this should copy essentially copy the location word location of the player so that we can use it to calculate relative locations similarly let me duplicate that and add another one under PC [Music] uh no agriculture update PCS no update cameras which deterred scene bro it should be a function update for us and I'll call it in the tip so note that this we only need to call this when the bottles are active but for now I'm doing I'm Gonna Keep Them active by default so I'll just call it here but you can disable it when you don't need it now we can get player camera manager so essentially we need to know the location of the camera to match the same capture component locations and get but transfer no there should be another method get location no oh wait kit camera oh yeah this get camera location [Music] uh well I don't really think I need rotation now basically what I want to do is uh get these two components set word location for both of them with the camera location now let me explain now consider this is the top view and this is portal one and this is portal 2. it's portal one this is portal 2. Viva V 2 okay now let's say player is here this is player is here and let me get another color so when player is here what I'm gonna do is this one has a PCM component I'm gonna place the PC in component of both dose in this location for all both of the PCM component of this two and PCM component of this one so that's what happens here the reason I do that is so when player look at this window from this location what we see inside here should look like what player would see from a location like this in this direction through this window so that's why I have these two components and similarly if player is looking at somewhere over here towards at this window it should look like let's say player is here here so it should look like player is looking at looking through this window in a location like this so that's the reason I created these two PCM components but now from the relative locations of these PCM components we need to calculate this relative location that player should be in order to look at in order to see this way so and that's the location the capture component we should play the that's the location we should place the captcha components of each term hope I'm making sense so basically the capture component will have the same relative location as this guys but with 180 degree rotation so to make that easier what I can do is I'll put this captcha components on another black same component are at C I call it can root this one zero and this 1080 because we need to rotate it and put vcm D2 sorry to capture under that similarly I'll add another 100 us where do one as well same component root [Music] location zero and rotation 180 relative rotation put the P1 capture under that all right now here get the P1 capture and also get the so we should calculate the P1 capture using this PC Sim D2 so what you need to do is set real content to you location same as get relative location of this PCM D2 simulate the logic that I explained here and the rotation well we need to calculate rotation should be from this location from this location looking at the root of the camera that means the center of the window that means get the result location of this component and get word location and the parent of this component the parent no get attached the reason I do that is because I can promote this part this total part into a macro and reuse the code so that's why instead of just getting the D2 and getting location I got the pay rent okay to your location okay now from this location find look at rotation so that's word rotation that's a word rotation so set the world rotation all right now we need to do the same thing for the other capture component so let me promote this to a macro update capture right now duplicate this and give veto capture and be Sim [Music] all right now if I test and go fully screen here see so this looks like we are looking from that window but as you can see this looks a bit warped and also we see down underneath the platform as well yeah especially if I go further so we need to avoid that but essentially this is working now to avoid this problem when we are further away we should not see this part what we should see is only what we would see from uh from this window so if you are saying if we are saying from through this window there is no way we are going to see these parts So to avoid that what we need to do is based on the location of the captcha component we need to adjust these field of view let me explain that to also with diagram let's say um this is one portal okay and player is here this is uh sorry capture component is here so now in order to see in order to render only the part that we will see through this window for that we need to have a field of view like this sorry like this that Encompass only this area let's say this is 30. okay now let's say play a move to a location like this in that case we need to adjust sorry the angle to something like this so this would be larger let's say 60 degrees so as we go further away from the window we need to reduce the field of view and and as we get closer we need to increase the field of view so to calculate that uh how large is this window we can measure it in an orthographic View this is yeah that the portal okay that's important so using the middle Mouse button and drag in the line you can see the distance yeah X200 see is 200 okay so let's go back to perspective here now we can let's do the update in field of view part also inside here hmm set field of view so how do we do that we need to know the distance and PC so we need to know the distance from the window so actually if we just get uh the relative location of the captcha component okay to you why can't I access that [Music] related location okay well I should be able to use that this right and then get Vector length so this will give us this this distance from the center to the camera and then we know the height so we need to divide now this divide 200 from this distance 200 from this distance 200 means this size this size is 200 so and then so in case we get a 0 here we might run into problems so I make the one as the minimum value we can get from this calculation right and then we can get a open inverse of this value so this will give us this uh this angle so this also our clamp in between let's say 5 and 180 okay now let's see [Music] let's see now we don't see anything underneath it looks correct yeah like we might see from a location like this so okay and even if I move this the logic will not break it will work let me move it a little bit here [Music] see still works if I check from here we should see those blue boxes now see right so yeah that's how we let me move this up a little bit [Music] yeah that looks better okay so that's the first part of the portal uh now this jumping through the portals and also show the networks with the portal gun and place in the bottles in the places we need dynamically changing them those parts I will work on in upcoming episodes and I'm gonna stop this episode right here so thanks for watching updated project advice will be available for the download in Patron page link would be in the description below and if you like to support my work you can get the membership of Patron Club see you in another episode bye

Channel: CodeLikeMe

Views: 11,489

Keywords: codelikeme, unrealengine tutorial, unreal engine 5 portal, unreal engine 5 portal doors, unreal engine 5 portal system, unreal engine 5 portals, unreal engine 5 portal recreate, unreal engine 5 portal clone, unreal engine 5 portal gun, unreal engine 5 portal jump, unreal engine 5 how to create portal, unreal engine 5 portal mechanism, unreal engine 5, ue5 portal, ue5 portal doors, ue5 portal system, ue5 portals, ue5 portal recreate, ue5 portal clone, ue5 portal gun

Id: pHAAGL3SDhI

Length: 38min 56sec (2336 seconds)

Published: Sat Sep 09 2023