How to recreate this awesome loading screen? (Tweens?)

Help and Feedback Scripting Support
#1

If you have played any of the amazing Nosiy Games Games then you know how the loading screen looks.

If not play anyone of these games:

https://www.roblox.com/games/4468711919/Super-Golf

I have been trying to recreate it but always get stumped.

3 things that I have questions of

  1. How do you make the color go up? Is it a tween??
  2. That tween when the logo splits into 2 and goes away. I can’t find it. Does it exist?
  3. Would I get copyrighted for copying the design?
2 Likes
#2

Yes. - TweenService | Roblox Creator Documentation

The logo is probably made out of 2 seperate decals.

Most likely not.

2 Likes
#3

But how would I tween image color?

What type of tween does it use?

cool!

1 Like
#4

Tween ImageColor using tween service, but the picture must be white so all colors are applicable.

GuiObject | Roblox Creator Documentation - TweenPosition is usable.

2 Likes
#5

Let me rephrase.

What easingstyle?

Could you give me a model line of code?

1 Like
#6
  1. The color is a tween. It’s two images, then ClipsDescendants is used to cut off the colored picture.
  2. They probably use an equation and run it with something like RunService.RenderStepped
  3. Unless you copy their logo or steal their code, no.
1 Like
#7

The logo is not an exact copy.

Its a M and G

2 Likes
#8

For the line of code to tween color, would be the following;

local TS = game:GetService("TweenService") -- grabs tween service.

local tweenInfo = TweenInfo.new(
    .5, -- Whatever time you want.
	Enum.EasingStyle.Sine, -- Any easing style.
	Enum.EasingDirection.Out, -- Any easing direction.
	0, -- How many times will it repeat
	false, -- Reverse tween after finish
	0 -- Delay count
)

local TweenColor = TS:Create(instance, tweenInfo, { ImageColor3 = Color3.new(0,0,0) }) -- Any color.
TweenColor:Play()
2 Likes
#9

Also to answer your main prioritized questions.

  1. How would you make the color go up?
    This is done via clip descendants, many of which I have done before.
    The solution to this can be found on this forum.
    How I mask an image on top of another

  2. Logo splitting and disappearing
    You have 2 separate images, You just need to both tween rotation and positioning
    to get that good effect. Just tween them both.

  3. No, you won’t get copyrighted for copying the theme of a UI.
    Although if you we’re to EXACTLY copy it, you can be called out for it and that
    won’t be good for your reputation. Best to be inspired by it, but not to copy everything.

2 Likes
#10

I used the link and looked through the topic but I can’t seem to understand it.

#11

Is there maybe a video tutrial you could provide?

#12

This simple makes the color fade in. Which is not what I want.

I want it to move in

#13

Do you want to create something like this?


Don’t mind the image. It’s the first one I found.

1 Like
#14

Yes but from the bottom. Not how you did it from the top

#15

Take a look at this, although it might not be related, most of these are things you can use in the future.

1 Like
#16
  1. You have to put a UIGradient inside your logo and tween its offset , so it gives that effect.
  2. Its most probably two different Images. You can use Bezier curve and lerping to smoothly make it travel in a curved path and tween its rotation the same time.
  3. As long as you do not copy the UI design you are good to go.
1 Like
#17

So will you help then? Or not?

#18

Thank you this is really helpful for the future!!!

#19

I was sleeping. Here is a model I created. It does as you wish and tweens from bottom to top.

4 Likes