Turning an Optical Illusion Into a Playable Character

let's see what happens how cool is that you know how like movies sometimes like it's Dro to a low frame rate like you know ever since like you know spiderverse became a Monumental success and we had like I don't know like turtles movie or something trying to copy it right but basically the effect of a low frame rate is actually really interesting right and so the only way to naturally get low frame rate is just to to lag you just got to be on like a poor device to get like 15 frames per second but I've just been like you know playing around right here and I found something which I would say is like half gameplay and like half optical illusion in the way that like the thing the effect that you get with a low frame rate isn't what you think it is but it basically is what you think it is I know that makes zero sense but let me show you an example right now okay if I play the game this is my character okay I'm walking around I have a really really good device okay so you know my frame rate is actually very high so what if I right now wanted to turn this character into 15 frames per second okay and actually actually I'll make it a bit more challenging only this character so all of this will still remain the same so if if you know if I want to like turn my camera around it's still going to be fluid right the Bas plate the spawn location the sky blocks they're still going to like move around with my camera at 60 FPS or like you know however much I have but my character is only allowed to move at a low frame rate so how can we achieve that well the first thing we need to understand is how do games even render stuff okay like genuinely let's think about this if I make a script right now right there is a thing inside of Roblox and I assume a lot of other you know game engines called run service okay and basically this thing lets you detect whenever like a render happens or like after a render happens or like you know physics simul tion has completed basically this thing is all about rendering physics Etc and there's a function here or not a function sorry an event called render ST which if I connect it to a function it gives us this thing called Delta time which is a number so if I just call it Delta and then I print Delta right what this is going to do is every single time it renders a frame or sorry before it renders a frame it's going to print out the Delta right if you don't know what that means right now don't worry I'm going to show you right right that's my bad so I forgot that rendering happens low right because what rendering is it basically just like tells your device Hey listen we have these like you know 3D models here and everything and we need you to show them to the player right this is why if if both of us play the same game but you're using some like you know old Nokia phone and I'm here with like my MacBook I will get a higher frame rate than you even though we are playing the same game right the reason being is because your device is worse and so it just does rendering slower which hence the low frame rate but then how do renderers even happen right well in short right and this is a very like dumb down version you know I know I'm sure some like expert can you know come here and say actually you got this tiny thing wrong right basically the way I understand it and the way I I've always you know perceived it is that it's effectively your device every you know single like very small like millisecond or whatever every single like small period of time it effectively updates what you see on screen even it's actually doing this right now even as I'm moving around every single like little little fraction of a second it's basically doing a lot of math to understand like okay if I'm in this position and then this spawn location is in that position well then how can we draw this 3D object to actually appear 3D as I'm moving around every single fraction of a second it's basically redrawing this over and over and over okay now again I could be wrong with Roblox Studios specifically but I know that a lot of games and a lot of engines actually do it in this way and all we have to do is just mimic this genuinely all we have to do is effectively and I know this sounds a little weird we have to create our own game engine inside of Roblox Studio to even be able to make our character a lower frame rate than everything else in the game how do we basically make a drawing of our character inside of the game well this is where something called GUI comes in okay in case you don't know GUI is user interface and it's just stuff like it's a button right or like I don't know text box you could add like yeah buttons images you know like if I had a button here I can like move it around basically user interface is a 2d thing that is on your screen but the thing is have you ever seen those like videos where it's like someone takes like a 2d object and specifically you know does some complex math or like you know a lot of work and makes it look through 3D because that's effectively what's going on here right if you really think about this this right now right this like 3D World quote unquote is just a bunch of 2D images but there's like a lot of complex math going on to move these images and stretch them to make them look 3D right again I'm not sure if a Roblox Studio specifically does this but like like I said a lot of game engines do this so we just need to take a piece of GUI right and then like every like 0.1 seconds let's say we want it to update based on the player's position and the camera's position right to showcase the player's character so if we make it do that and let's say if I hide the player's actual 3D model and I only show like the GUI that we're making and the GUI updates every 0.1 seconds that's going to give us our low frames per second effect did anything that I just say make sense to you right probably not but that's a good thing because you're here to learn right if you already knew all of this this would be a pretty boring video we're very lucky in the sense that like we don't have to take a text button and try to turn it into like a character model right roblox actually comes with something called a viewport frame right in short all you have to know a viewport frame is effectively where you can put a model inside of this like I can put like a like a parts for example and then inside of this I also need to put a camera right I'll take this camera and so then in the viewport frame if I set the current camera property to be this camera as you can see the part is visible so this part only exists inside the viewport frame it's all it's all like an actual real thing that affects the um the 3D World right it's just in its own little world and we can see it inside of this viewp Frame only we can see it other players can see this unless they obviously have the same like viewport frame so then what we could do is we could take this viewport frame right we could scale it up to be like taking up the entire screen and I'll just check something called ignore GUI inset just because like it's going to fill up the entire screen otherwise it would like leave space open for like buttons and we don't want that and so if you think about it what we could do is we could take this viewport frame right we could set the background transparency equal to one right and then what we could do is every single 0.1 seconds we could just take every single part that's inside of our character we could place it inside of this viewport frame and then yeah basically just it we can just do that every 0.1 seconds right now obviously things will get a bit more confusing if we want to let's say make the entire game low frame rate which I will show you how to do as well but for now let's just focus on an easier part okay so I'll delete the camera I'll delete the part and then let's make a local script so we need to actually access the viewport frame and our character right which we can do by saying local viewport is equal to script. parents uh wait forch child Port so script. parents is the screen GUI and then we're waiting for the viewport frame inside of the screen GUI and so then all we need is just the character so I can say local car is equal to player or Not Sorry game. players local player so we can get the player who is currently playing the game this is only available on local scripts by the way if I were to use a server script it wouldn't be able to get a local player right just thought you know that'd be a fun little trivia we're going to try and get the player's character we're going to try the same thing with you know game The Players local player blah blah blah but here we're going to wait until the character is at added okay so we either get the character immediately or if the character doesn't exist we're going to wait for it it's going to give us the character and then either way we get the character and so then we just need to make a while loop so while task. weight um let's say 0.1 okay actually no let's just do nothing okay let's just do while task. weight which basically is going to make an update as fast as possible and so what I'm going to do is I'm going to Loop through our character okay so I'll say 4 I comma V in uh character get children do so we're going to Loop through every single item that's inside of our character right ignore I I doesn't mean anything right now we can actually set it to be an underscore meaning we're not going to use this V in this case is equal to the actual item We're looping through so we can actually name it to like item or I'll just keep it V okay we need to check if V is an actual part so if V is a base part right then what we're going to do is we're basically going to clone this part so I can say local new part is equal to is equal to V clone okay we're going to clone the part and then I'll just say local new part parent is equal to the viewport right and the very last thing we ought to do is just before we do this because what we want to do right is we don't want to just keep on continuously adding Parts into the viewport we want to add the parts and then we want to delete the parts and then we want to add new ones right otherwise that would just cause a huge memory leak so the way we do this is we just say viewport uh clear all children so we're clearing all children and then we're you know filling it up with new ones and then we're filling it up with new parts and then we're just doing the same thing so if I right now Run the game what's going to happen okay obviously something is a little wrong but we're we're getting there all right so the problem here is that I forgot to add a camera for the viewport frame right so what we need to do is we want to make sure right that whatever we see on the viewport frame is what our player sees right so I don't want this character to be here right I want the character to actually match with my character if my character moves over here I want this character to actually look like this right or you know if I move my camera around I want the character to also rotate alongside with my character cuz right now when I'm rotating is just just staying still and that is because the viewport frame only has one camera that's not moving right so I want to make the viewport frame's current camera equal to my camera right this one the one that's moving right now and the way we do this is actually insanely simple right you'd be surprised it's just a youport current camera is equal to workspace current camera which is our camera now if I do this there we go look at that it's like an it's like an x-ray of sorts now obviously a small issue is that it doesn't actually allow like stuff like accessories to pass through so the only thing that it can actually show or no it does allow accessories but that would just be like a little too much work right for now all we can really do is just show the actual parts right so like I have headphones I have my you know Chad bodybuilding suit but it's not going to really let us do that without much you know work and something interesting to see is that even though like it looks like we're actually inside of you know my character because because this is GUI it will always be in front of whatever is like in the 3D World this arm right it's literally blocking the face of the head even though it shouldn't right the head should technically be in front of this arm but it isn't right that's basically how GUI works and I can actually show this to you as well by like if I right now like were to stand here or something right the character like isn't seen through the spawn location but the GUI is right because all this is is just a set of images and so now you might be thinking okay how do we make this a little more realistic right the issue with my avatar is that I have a bunch of like stuff and everything but what I could do is I could just make a brand new Avatar right I could just make it this into like a rig for example and what I'm going to to do is I'm going to name this to starter character and you'll see why in a bit okay I'm going to go to the humanoid and I'm going to just um like set display distance uh to none and I'm going to set Health display to always off what these two basically do is it just hides the name right and it also hides the health right so all we get is just the character which is what we want and what I need to do is I need to take this character and I need to put it inside of starter player right if you put a character inside of starter player named starter character exactly like this then it's going to override the player character which will make it look like the started character right there we go like so so I know I know you can't actually you know see the model but it's there right so look at that and so now the big question is right what if we do instead of task. weight you know and you know all of this what if instead of you know doing task. weight and trying to wait for as little as possible what if we make it wait for 0.1 seconds so nothing seems to be wrong right now right however if I were to go move as you can see all of this is just images that are trying to update to my player right now the issue here is that obviously because my player is actually visible like the actual character is visible it doesn't really make for like a goodlooking you know lowf frame rate character so really all we got to do is because we we're actually in control of what character the player has we can just take all of these parts right all of these and just set their transparency equal to one meaning they're going to be invisible right and the face as well we can take the face and set the transparency of the face also equal to one but the issue with doing this though is that well now the parts are invisible right now we don't see the character nor do we see the actual like parts inside of the viewport because even though it's creating them they're invisible so all we got to do is we just need to say new part. transparency is equal to zero so as you may remember new part is the thing that goes inside of the viewport right so the character will be invisible but not the stuff on the viewport and there we go look at that we have a a big cube in the middle of us that's the humanoid root part so let me just uh let me just fix that up real quick yeah so I'm just checking if it's not named humanoid root part so if it's not named humanoid root part well then what we do there we go look at that we literally just have created our own I don't even know if this is like 15 frames or 20 frames or whatever but like how cool does this look and another thing you might have noticed actually is that when I rotate my camera it actually doesn't feel laggy it's only laggy when my character actually moves around but if I try to rotate it's all fine and the reason being is because like I set it equal to the current camera so the moment I set the viewports current camera equal to our camera that's it right it's always just going to follow along with what our camera actually sees right if we want to make everything low frame rate which like I'll show you in a bit right what we basically have to do is just make our own new camera and then just you know copy over some properties of our camera into the new camera and then you know make it update every 0.1 seconds that would work okay but for now let's actually just figure out how can we make this better how can we make this you know lowf frame rate character just look nicer in general well immediately the first two things I noticed is number one he has no face okay that's kind of bad and number two he doesn't seem like he's like the same like um brightness as the other character so let's fix the face first okay the face is inside the head and it's a decal okay so really all we we got to do we need to check if the parts that we're going through have a decal inside of them and if they do well then we need to set the transparency of that decal to zero and so the way we do this is we just say if new parts and then we say find first child of class and then we need to say decal okay so if we find something inside of the part that is a decal well then what we do is we just need to copy this line right like so and then we just need to say dot transparency equal to Zer and if I do it like this then the face should start showing up just like so look at that that is insanely cool now the other thing as well like I said is that like the character that we're making here isn't as bright as our actual character right and this is an easy fix viewport frame lights color just set it to fully white okay and we set this to fully white as well and so what this is going to do is now if I play the game there we go look at that that looks a lot a lot more like realistic to our character than what it did before and yeah I don't know like this doesn't this just look so cool this is like like I said it's like half optical illusion but like half real gameplay right because my character still technically exists right so you know if let's say I there's like some kill break so for example let me let let me actually show you this uh in action right if I right now make a part right and then if I just make this uh a kill brick so I just make a script inside of the part and I just say you know parts or no script. parents. touched right so whenever the part is actually touched we're going to get the other part that touched this part and then we'll just say if other parts. parents uh find first child humanoid right meaning that uh the other part. parents is the player then we're just going to say other parts. parents defin first child humanoid do Health right is equal to zero and so hope play this right now right let's say you know this is like some I don't know very retro game where like you know your character is moving at like a low frame rate and he encounters an obstacle look at that how cool is that and it still works with fre spawning as well so we still have like an invisible character to act like the hitbox but then the actual character that you know we see still functions the way we want it to perfect the only like I guess issue is that because the character is updating every like 0.1 seconds it might not be like too accurate right like like I know like right like he he technically if we you know play that frame by frame he died before we saw him touching it right but like again that's a very small issue and yeah this just looks I don't know so now the question is right how can we make it so that the camera itself is actually low frame rate and so like I said this is fairly easy right we just got to say local new cam like so is equal to instance. new camera so we can create a brand new camera then what we do is we just say new cam right and we set the C frame of this new camera equal to the workspace current camera. cframe so whatever is the camera's current position is going to be the position of our new camera and then we're just going to say viewport do current camera is equal to New Cam and I just realized because we're making the camera and then we're going to clear all children that's just going to delete the camera so I probably should clear all children first and then create the new camera and then create the parts if I do it like this right here's what's going to happen as you can see now that I'm moving the camera it actually does look quite nice right yeah so the effects that this creates are phenomenal genuinely let's let's try this again okay that I don't know it just adds to the charm of the game okay okay maybe maybe we'd want to disable the the new camera when he dies cuz that this does look kind of weird I'll be honest and the last thing I want to try and do right is what if we just try and take every single part right every single part and then um you know set so right now all we're doing is we're just taking the stuff that's inside of our character and then you know putting it inside of the um viewport but what if we do it with the character and also with this part and with the base plate and with the spawn location what if we select all of them and then you set their transparency equal to one like so right and you know both of these have decals and you know a texture as well apparently so I can just set the transparency of both of these equal to one as well and so then instead of doing character get children I can just do workspace right workspace gets descendant so we're going to check if it is a base part and if it's not a humanoid root part we're going to clone the part set the transparency to zero if it's a decal we're setting the transparency to zero and we uh this has a texture apparently right so we probably also should do the same thing thing but except for a decal we should make it for a texture like so and so let's see if I actually play right now what's going to happen cannot clone terrain why is it trying to clone terrain who knows I I guess we got to tell oh yeah not V is a Terrain even though I'm not looking for terrain I'm just I'm looking for a base part but I guess I guess the terrain counts as a base part somehow so it cannot be terrain so we're not going to get that error soon hopefully the colors look really weird if I move actually yeah look when I'm rotating the camera the sun is fine but everything else is laggy that is so interesting something I'm actually wondering right now would it be possible for us to make the character like the only thing with a high frame rate look at that camera yeah no this just looks like a laggy game I'll be I'm not sure what I was expecting but yeah I I don't know I thought this would look like look cooler than it actually does I guess maybe let's um let's just set the um let's just set the viewports uh current camera back to how it was before right like how is that going to look cuz that actually might be just because of the camera what if I take this uh the brick and I try and move it can I do that can I set the part position equal to like um let's see let's say 50 oh that's interesting okay that's cool to see okay so other parts also are like moving properly you know like properly as in like you know according to their frame rate but like yeah that's interesting I guess I liked it when it only like affected the character right cuz I don't know like what we just did here just looks weird right and also again let's change the viewport current camera back to the workspace Uh current camera yeah this looks a lot nicer and everything is still transparent as it was before but I guess the very last thing I want to try to do is could we make a system with if I press a button like e for example right could I switch between my real character and this fake character so let's try Okay so right before we do the Y Loop because if if I try to do it after it's not going to work because the Y Loop basically just like ends the code forever right so I need to make it before so I need to say game. userinput service and then we're going to say input begin connect function and here I can check if the input. key code is equal to a key code of let's say e okay so whenever I press e then what do we want to happen well first of all I probably want the viewport to stop showing up right I probably want you know this fake character of mine to basically toggle its visibility right and the way I can do this is I can say script. parent. enabled is equal to not scrub. parent. enabled so basically it's going to toggle the visibility which means that you know now it's visible if I press e now it's not visible and if I press e again it's back to being visible this is very nice but what we have to do right now obviously is also when it's invisible we can't just have it stay invisible we want to add our original character back in and so this is just another case so where we get the loop right so we're going to toggle the visibility of the viewport then we're going to Loop through the character but then instead of just like you know making a new part cuz we don't want to do that right we want to take the original part okay cuz we're not making a new part we need to take V right so I'm going to delete that line we're going to say v. transparency because that's the part is equal to 1 minus v. transparency right this will toggle the parts transparency which in case you don't know what that means basically like if the part's transparency is one we want it to be zero right so then it's one - 1 is going to make it zero however if the parts transparency is zero and we want to make it 1 then it's going to be 1 - 0 which is one right so this just toggles the transparency and we got to do the same thing with the decal right so if V fine for child decal fine forti decal then transparency is going to be equal to the same thing 1 minus whatever the transparency of the decal currently is and I'm just going to delete this line as well so if I play the game right now let's see what happens look at that now something to keep in mind as well I'm just noticing is that the shadow actually disappears when we switch to our low frame rate character which actually I guess does add to the fact that like oh yeah here we're 3D and here we're 2D you know it kind of does add onto the facture but if you want to you could also just go through you know the character so you could go through all of their parts again this is just up to you you could just uh select all of them and set cast Shadow equal to false right so if we if you do it like this it just kind of makes it a little more smoother to actually transition between them but like I said all all of all of this is your choice right if you want the shadow if you want to make it more 3D then go ahead and so what I'm thinking right now right is if this video gets to 10K likes which I I I normally don't do this right but I'm just like thinking if this video gets to 10K likes I'm going to challenge myself and I'm going to release this as like a test game right and what I mean by this is right now we only see uh our character right so we don't actually see the characters of other players right and the issue here is that like because we can now toggle what if let's say we have a cuz you could you could make the argument like oh yeah you could just go through every single character and then just you know make them visible what's hard about that well the thing is like what if the character then toggles themselves right if the character wants to be a regular character and not you know this like fake you know to the GUI how can my character know that and so yeah 10K likes and I'll release this game as like a basically like fully fledged out playground where you can like you know experiment with like you know the way this works I'm going to you know like add some more cool like stuff you could do with the GUI um and yeah like I said 10K likes so unironically this was insanely fun to make if you want to code exactly like I do cuz you know I'm literally the best coder to ever exist like you cannot name a coder better than me so if you want a code like I do cuz I'm I'm literally the best coder to ever step foot on this planet right I do have a course in the description so you know you can go check that out and yeah so you know as always we're Back to Basics thank you for watching

Channel: ByteBlox

Views: 92,164

Keywords: roblox studio, roblox, roblox scripting tutorial, roblox tutorials, roblox tutorial, roblox studio tutorial, roblox studio challenge, roblox studio tutorial 2023, roblox challenge, roblox doors, how to script in roblox studio, how to use roblox studio, roblox funny moments, roblox funny, roblox studio tutorials, roblox anime, how to script on roblox for beginners, how to make a game, how to script on roblox, roblox studio survival game, i made a roblox game with free models

Id: ji9nL8-gC4Y

Length: 22min 39sec (1359 seconds)

Published: Tue May 21 2024