Intro UI I made using ViewportFrames

I’ve made an Intro GUI for my games. I plan to use this for all of my games. This is also a reference from a classic game I played as a youngster. What do you think?

20 Likes

Nice! Very Well made, Animations are made perfectly, Probably used a lot of time! the code isn’t that hard, but tedious. As a new and fairly advanced (or so i think) scripter, Let me guess how’d you make this as a refresher.

you made the whole scene on the workspace first to make sure it aligns perfectly. Then using camera manipulation, 2 cameras (1 for viewport), you set it so that the viewport camera will stay locked while the animation is playing. Then you probably used moon animator or either the default Roblox animator for the animations. For the logo, you used tween for the first bar going up, then made a different frame that is covering up the logo from the back (frame zindex higher than the logo) and tweened it so that it would look like it reveals the logo.

Please correct me for doing anything i did wrong. Im planning to do the same intro for Colony.

(Ive been modelling for the past week and have forgotten alot of coding.)

2 Likes

Actually if you used any plugins please do mention so! It would be really helpfull for peeps here! (If you used any other than moon)

This whole thing took about a day to make. The audio was directly taken from the game I was referencing.

The way I set the camera for the ViewportFrame is pretty simple. I just aligned my camera to the right spot, copied the Camera in Workspace and put it in the ViewportFrame. For Animations, I animated the hoverboard in the default Roblox Animator using the Stop Motion method. For the visuals, I actually used UIGradient to make the logo appear in a fading way.

For the technical stuff, coding it was pretty messy. I wanted to make sure the actions sync with the audio. So I made this table where If the Audio reaches that TimePosition, the function inside it will run.

--For reference, Fade is the character riding the Hoverboard
local TimeEvents = {
	[1.62] = {
		Executed = false;
		Function = function()
			KickTrack:Play()
		end
	};
	
	[2.1836417819779] = {
		Executed = false;
		Function = function()
			local Track = TweenService:Create(LineIcon, JumpUpInfo, {AnchorPoint = Vector2.new(0.5,1)})
			Track:Play()
		end
	};
	
	[3.0988361550233] = {
		Executed = false;
		Function = function()
			local Track = TweenService:Create(LogoGradient, JumpUpInfo, {Offset = Vector2.new(1,0)})
			Track:Play()
			TweenService:Create(LineIcon.UIGradient, JumpUpInfo, {Offset = Vector2.new(0,0)}):Play()
		end
	};
	
	[3.8658454100312] = {
		Executed = false;
		Function = function()
			local Track = TweenService:Create(TextGradient, TypeInfo, {Offset = Vector2.new(1,0)})
			Track:Play()
		end
	};
	
	
	[5.2303968950664] = {
		Executed = false;
		Function = function()
			local RunAnim = Instance.new("Animation")
			RunAnim.AnimationId = CopRunAnim
			local RunTrack = WorldModel.Police.Humanoid:LoadAnimation(RunAnim)
			RunTrack:Play()
			TweenService:Create(FollowPart2, TweenInfo.new(6, Enum.EasingStyle.Linear), {CFrame = FollowPart.CFrame * CFrame.new(-100,0,0)}):Play()
			wait(1.6)
			TweenService:Create(vp, TweenInfo.new(0.5, Enum.EasingStyle.Linear), {ImageTransparency = 1}):Play()
			TweenService:Create(script.Parent.TextName, TweenInfo.new(0.5, Enum.EasingStyle.Linear), {TextTransparency = 1}):Play()
			TweenService:Create(Logo, TweenInfo.new(0.5, Enum.EasingStyle.Linear), {ImageTransparency = 1}):Play()
			wait(0.5)
			EndIntro()
		end
	};
}
RunService:BindToRenderStep(FollowPart, Enum.RenderPriority.Last.Value*100, function()
	Fade:SetPrimaryPartCFrame(FollowPart.CFrame)
	
	for Time, Info in pairs(TimeEvents) do
		if Sound.TimePosition >= Time and not Info.Executed then
			Info.Executed = true
			Info.Function()
		end
	end
end)

As for plugins, I don’t think I’ve used any.

1 Like

Nice! Never thought it would this be hard. i got few things correct. but the audiopart tho, confused me. What event did you use? Tick() probably? I have no idea.

This function runs every time the FollowPart updates, I tweened this FollowPart to move to a certain position, so I made it so the character move to the part everytime it updates. At the same time, it’s also checking if the Sounds TimePosition has passed the time in the event table, if so, then the function inside will run once.

1 Like

Dude this is amazing! So clean, simple and short! It just works and looks very effective! Nice job!

1 Like

Thats pretty cool! I know a little bit of RunService but im a complete nub to advanced stuff. ill just bookmark this once I know better. thanks!

2 Likes

Can’t stop replaying it. It’s very well made and it will add that signature touch to your games!

I hope to play one of your games soon hehe.

1 Like

I personally love it! That’s really creative of you! You might just want to change the sizes of the players to give it a better look. As I said, overall everything is perfect! Keep up with the amazing work! :coefficients: :star_struck:

1 Like

Wow :open_mouth:
The animations are smooth and I really the way that a game was loaded.

1 Like