Roblox Scripting Advanced - How To Create Fancy Intros With Logos In Roblox Studio

in this tutorial i'm going to teach you how to create a fancy logo intro now there's a couple things we're going to need we're going to need some screen gui's buttons uh text labels we need just a couple of things that make our uh our logo intro look pretty pretty fancy so as you can see i am using my base plate uh template to use um to use my logo intro as a test now of course if you need to have your explorer and your properties open now in order to open explorer and properties you need to go

to view and click on explore and properties now make sure these two are turned on and you see them turned on they will be here on your right hand side if not you only need to click these once and they'll show up right here now i need to go back to my home page and i'm gonna go into my works uh ask me my uh explorer and i'm gonna go ahead and get started creating my background and everything that i need so i'm going to click on start gui and i'm going to click screen gui and for the screen gui i'

m just going to uh click here and put a logo screen so i have my screen ui now and the next thing i need is my frame so i'm just gonna go over here and i'm gonna click on frame and there you see that i have frame uh this white uh square that is uh in the upper left corner now if i just drag one of the boxes or one of the squares if you see at the edges i can just drag it and it will fill up my screen now let's just say if i turn off my explorer and my properties there you see the other part to w

here my screen is it's still a little um exposed over here so i can just drag this uh square and just fill it up here now it looks pretty good or i just need to there we go fills up there now i need to do uh the top area now as you can see the top area is not really covered because right here next to this what's new uh what's new box there's another arrow which toggles this visibility of my menu here so if i click this arrow there you see that the bottom is now exposed so i can just basically dr

ag this to the bottom and that should cover all of my areas that i need to be covered now you probably wonder how do i open all my screens back well we just do the steps in reverse so right next to this what's new uh button right here just click this arrow and toggles your menu back now you wonder how do i get my explorer and my properties back you just click on view explorer and they have properties and it brings it all back now i'm going to go back to my ui menu because i need to have that ope

n but before i do that i need to basically right click on frame and rename the frame to background so background's pretty good now if i want to change my background color i can uh just click right here where you see in the properties background color three and i'm just gonna make it a little bit of a dark gray color now the next thing i'm going to add is of course i'm going to add a image label basically this is going to be something for my uh for my logo of course so i'm going to drag it toward

s the upper mid upper uh middle area and i'm going to rename it uh logo so after i name it logo i'm gonna drag it to the background so it's now part of a background object and i'm just going to place it right back into the middle now we're gonna have to do some things uh later on because um we're doing this as a testing base but there's some couple of things that we need to do later on to make sure that our logo is placed in the middle properly and other things are pretty sure uh accurate as wel

l now the next thing i'm going to add is a text button which makes it easier because i showed you earl earlier if you were taking one of my courses i showed you uh the image button and we're going to add text label but that doesn't need to be added so we're just going to add a text button and i'm going to drag this towards the bottom of the middle area and i'm also going to change the uh the background color i'm going to change it to green this screen right here and then what i'm going to do is

i'm going to resize it and it's pretty good now in your properties you're gonna drag uh your this bar down here gonna drag it down to you where you see text now you're gonna need to change your text for your button i'm gonna change the button to uh start change it to a start button and what i'm going to do is next i'm going to change the uh the size of the text 50 maybe even more like 70 and i'm gonna change the color from black to white or text color three and then i'm going to change the font

from sends sources to gotham black then i'm going to change my text button to let's just say uh start button and i'm gonna put both of the start button and the logo inside the background but it seems that i've already added those two inside so if you have your start button which looks to be like this if it's outside of your background frame you just drag it and drop it inside the background frame and that should be good right there now you're probably wondering now how do i get my image to show

up right here well let me show you how to do that let me go to home and then you are going to go to your toolbox now uh you might see where in your toolbox you probably have this page open this is the page to where you can select models images meshes audios and plugins but you want to use your own logo or your picture so you're going to go to where you see these four squares basically this is for inventory so i would say these are file cabinets and you're going to see where it says my models my

images my meshes this is this this is the uh the objects or your models or images that you own in your inventory so i'm going to go to my images the next thing i'm going to do is i'm going to select the image that i want to use and if it doesn't show up here your image like these others do that's okay what you can do is just right click on the image and copy asset uri copy asset uri then with my logo selected i selected my logo now i'm gonna change a couple of things uh the first thing i'm gonna

change is my background transparency and change that from zero to one because i don't want that to show up and then uh i'm going to change uh actually oh man not the background transparency i'm sorry um i'm gonna change the image transparency uh do i wanna change transparency let's let's just test it out um just scroll down all the way down to lazy image and you're going to uh basically select your text and you're going to delete the text that's inside the image and you're going to paste the uh

paste the uri inside so basically it should look like this then you're going to press enter or just click away and there you see that your image shows up now of course if you want to resize your image just click on the image uh the logo basically and just resize it and if you want to get rid of the the white background all you have to do is go to um scroll all the way to the top and just change the background transparency from zero to one that's it now after you have done that we're gonna have

to do just one thing and that is the logo now if you have uh seen my example earlier if you have taken my class my whole logo was black basically and afterwards it changed to white so there's one thing that we need to do and that is we need to change uh basically uh some of the values around when it comes to uh making our logo change from black to what uh to appear to uh this color basically so the way we're gonna do that is a gradient so all we need to do is we need to select the logo and we're

going to click right here this is to add objects in our uh in our objects basically so we're going to click here and i'm going to type ui and what i'm going to select is gradient gradient now i've added a ui gradient here inside my logo now the next thing i want to do is what you see right here if you click on ui gradient uh you see appearance and basically you're going to see color now what i want to do is i don't want for the beginning of this i want to change this color from black from this

color where you see right here all the way to fully black so what you need to do is basically click on this white box or actually click right here and you're gonna see where you can uh basically type any digits right here you can change the digits around click where you see the three dots so let me show you one more time uh let's do this click on the white box just one time and then click on the three dots now it's going to bring you up a timeline to where you can um do certain things that means

that uh let's just say uh you see this time frame this represents zero this represents one so during this time frame we're going to uh basically change it around we're going to do we're going to add some some time stamps to where we want to change colors so right over here you're going to see a triangle you're going to click this triangle and that means that if it turns yellow then that's the triangle that we are editing so we need to change the color from white to black to fully black now retu

rn all the way over here you're going to see uh this triangle and you don't need to make it black just keep it uh basically white but we do need to add another triangle so to add another triangle where you see i have these dotted lines just click here and you will automatically add another um another triangle now i'm going to make this area black as well now as you can see right here my uh my logo is now fully black now i'm also going to change the the time stamp too because i'm going to make it

to where uh this timestamp is going to be very very close let's just say right about uh here now if you don't know where the the time frame is you can basically uh just type it in with these values 0.01666 and that's it now just close it and there you see that we have a fully a fully uh dark logo right here i'm also going to close my toolbox because i don't need that open anyway so like i said how do we change our logo from black to back to to its uh original color so what you need to do is you

need to select the background select background and click on add object icon and select local script now you're going to see print hello world we don't actually need to have print hello world it doesn't really do anything except just gives a message so we just go ahead and just delete that anyway so let me go ahead and also zoom in so you can see uh what i'm typing as well so basically what we're going to type is we're going to type a local variable first we're going to type uh logo screen equa

ls script dot parent dot parent now if you need to pause the video so you can uh basically type out every line that i'm typing out that's also okay so i do encourage you to type um type line by line by pausing the video every time i finish a line so we're gonna go to our next line line number two we're gonna type logo screen e club not equal sorry uh ignore gui inset equals true line number three we're going to type logo screen dot enable equals true then we're going to go down to line number fi

ve we're going to type local background equals logo screen wait for child and background now i know you guys i'm gonna have trouble uh seeing the whole line so here's what i'm going to do this is line number five right here local background equals logo background equals logo screen paper child background you wonder what's a child uh this is a child object inside of a parent object right here so anytime we add a new object inside a original object that would be a child object so my number six i'm

going to type local logo ui equals background wait for child and we're gonna type logo that's line number six line number seven is gonna be local wait for child and we're going to type ui gradient that's line number seven line number nine local start button equals background wait for child and we're going to type start button local clicked equals false that's line number 10 let me zoom out a little bit so you guys can see the rest of the words so we're going to go down to line number 12 and we'

re going to type a start button dot position equals u d i m two two new zero point three seven e one zero next we're going to type ui radiant dot offset equals vector 2 dot new 0 0. that's line number thirteen line number fifteen local between service equals game get service queen service now this uh line and next couple of lines are going to be very very long so i'm going to have to zoom out so you guys can see the rest of the words down typing so local between info fade equals tween info dot n

ew six enom dot dot dot easing direction dot and out this is line number 16. local info cover equals between dot dot easing out that's line number 17. now we'll go down to line number 19 we're gonna type local fade yet offset equals vector 2 0 negative 1. that's line number 19. fade in tween play all right fade in tween dot completed weight weight let's just say um zero point zero one and then start button between 0.37 0 0.572 dot out then wait 0.5 seconds and then we only got a couple more line

s and then we're going to be completed so we're going to type play sorry start button mouse button one click if clicked start then return in start equals to true background position let's just say destroy now this is this is all what we're going to type now make sure that you type it the way i type it because uh if you make any uh spelling mistakes the script is not going to work so make sure you double check your work to make sure it work uh make sure you double check your word to make sure eve

rything is correct so this is all that i need so i'm gonna go back to my uh my scene and let's see if it works now before i see if it works i want to make sure if there's any errors on my part that i need to fix so what i'm going to do is i'm going to click on view and i'll click output and as you can see there's errors right here in my uh in my scene so basically i could just click on clear output so i can clear all the errors that i see just right click and press clear output now i'm going to

click on this play button and it should work okay there's the start button now i'm still waiting for um my black background to appear but unfortunately it didn't appear so even though my uh background didn't work my start worked so i just have to change things around now so let's see what i need to do let's change around maybe the uh the wait time and let's see what that does okay so the wait times still not uh doing anything for my uh for my black background so let's see what i do need to do on

my part because i believe it has to do something with uh the color sequence so i'm going to click on the ui gradient and let's see what i need to do i see that i have offset is enabled cholesterol works let's change around the rotation see what that does change it to a negative 90. and now let's see what that does if i click on the play button okay so basically it shows up but my start button is uh a little off so that's okay we can still uh do some adjustments for the start button so let's jus

t change around where you see the 0.37 let's just change around let's put 0.32 see if that does okay still doesn't uh still isn't low low off though so how about this let's keep on just changing the uh the values around turn this off all right it's almost perfect so i just need to still change around the values i change it around anywhere you see a tween position and i'm changing around a lot i'm just changing around lines 12 and 25 so let's just put 25 here 0.25 here and let's see what that doe

s now you see it's a little more off to the left so just need to keep uh keep at it now 0.27 let's see it should be in the middle now all right that's pretty good so if i click on the start button now you see it looks great there's my character okay that is pretty much it for how to create a fancy uh logo intro so i hope this pretty much helps you out on creating your logo intros for your games so thank you guys for watching be sure to join tech dev academies workshops and camps and also read so

me great articles on their blog page you