A GUI that spins (No, not viewport)

Help and Feedback Scripting Support
,
1

Introduction

Alright, I spent a little bit looking for Spinning GUI. Now let me elaborate, what I mean is does anyone have any knowledge on a GUI that would spin like a logo, or icon on a menu in ROBLOX? Maybe I’ve been searching for it with improper keywords. But I’d really like to know.

Example

This it what I mean by spinning logo

Quick disclaimer / edit due to the suggestions / comments.

By GUI I mean a full GUI like within a menu that would be at the corner, not covering the whole screen.
(So multiple GUIs that fit in / make a whole menu)

Large edit

My thoughts on the matter after reading your replies is that we don’t have a proper/definite way to go about this issue. Though I know sprite sheets on a part would be a “Possible” solution. I will not be selecting a solution due to the complexness of this GUI problem.

3 Likes
2

couldn’t you just tween the orientation? (or it may be rotation for guis)

1 Like
3

I would use a ViewPort Frames frame on a part. You can only rotate the gui on 1 axis, but a viewport frame can capture all angles of the part/model.

3 Likes
4

Eh, I’m not much of a coder, but I’d like to see if this is even possible in ROBLOX so I can attempt it in order to make a more detailed menu / intermission screen for my game(s) Sadly I cannot find a topic on DevForum talking about multiple GUIs in a menu with viewport, and a spinning icon/logo that would be spinning constantly on it’s x axis.

1 Like
5

Yeah I’ve never worked with viewport frames before, but I would do something like this.

  1. place all of the objects you want to spin, in a folder in the workspace, and spread them out throughout the workspace (probably in a place where player’s can’t see them, maybe below the map).

2.Insert a script inside each of them (or one script for all) that rotates this objects.

  1. Make a “Shop” Frame where all the spinning UI will go, and insert a UI Grid Layout inside it.

  2. Following code in a local script:

local folder = game.Workspace:WaitForChild() --define folder with parts here
local frame = game.Players.LocalPlayer.PlayerGui:WaitForChild() --define shop frame here

for i, spinningobject in pairs(folder:GetChildren()
        if spinningobject:IsA("BasePart") then --If you want the spinning object to be just one part
                local frame =  Instance.new("ViewportFrame")
                local viewportCamera = Instance.new("Camera")
                viewportFrame.CurrentCamera = viewportCamera
                viewportCamera.Parent = viewportFrame
                viewportCamera.CFrame = CFrame.new(Vector3.new(0, 0, 12) + spinningobject.Position)
                
        elseif spinningobject:IsA("Model") then --if you want the spinning part to be a model
                local frame =  Instance.new("ViewportFrame")
                local viewportCamera = Instance.new("Camera")
                viewportFrame.CurrentCamera = viewportCamera
                viewportCamera.Parent = viewportFrame
                local part = spinningpart:FindFirstChildWhichIsA("BasePart")
                viewportCamera.CFrame = CFrame.new(Vector3.new(0, 0, 12) + part.Position)
        end

end
6

This isn’t great but it does avoid the usage of viewport frames. It’s just tweening the frame to go smaller then bigger infinitely. It does somewhat give the illusion of a spinning UI though.

Here’s a code example. Ensure the AnchorPoint is 0.5, 0.5.

local tweenService = game:GetService('TweenService')

local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, math.huge, true) -- create a TweenInfo that repeates infinitely and reverses the tween.

tweenService:Create(script.Parent, tweenInfo, {Size = UDim2.new(0,0,0,100)}):Play()

This changing colours may give the illusion of it being “double sided”.

Here’s a really bad code example, does get the point across though.

local tweenInfo2 = TweenInfo.new(.5, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut)

for i = 1, math.huge do
    local tween = tweenService:Create(script.Parent, tweenInfo2, {Size = UDim2.new(0,0,0,100)})
    tween:Play()
    tween.Completed:Wait()
    script.Parent.BackgroundColor3 = Color3.new(0,1,0)
    local tween = tweenService:Create(script.Parent, tweenInfo2, {Size = UDim2.new(0,100,0,100)})
    tween:Play()
    tween.Completed:Wait()
    local tween = tweenService:Create(script.Parent, tweenInfo2, {Size = UDim2.new(0,0,0,100)})
    tween:Play()
    tween.Completed:Wait()
    script.Parent.BackgroundColor3 = Color3.new(1,0,0)
    local tween = tweenService:Create(script.Parent, tweenInfo2, {Size = UDim2.new(0,100,0,100)})
    tween:Play()
    tween.Completed:Wait()
end
2 Likes
7

The only way I can think is if you make a three dimensional perspective (verticies not viewport) then treat the verticies as a collection to then be rasterized within the viewport. I really can’t think of any other ways to do this but from a mathmatical perspective we create a rotational matrix and manipulate the verticies positions then render it with whats called a rasterizer

8

This is pretty close, but it would look pretty weird with a circular Gui.

1 Like
9

Depends. If you’re using UICorners it will look weird, however if you use an image label it should give the desired effect, or something close. Options are pretty scarce here haha. I think you should go with a viewport frame personally.

10

This is acceptable. The reason why this looks weird, though, is because there is no perspective: when frozen at a 3/4 rotation for example, it still looks like a rectangle instead of a trapezoid.
The GIF that OP linked does have actual 3D perspective on it: when not viewed completely straight on, the bottommost corner the B is a little lower or higher than the other

2 Likes
11

Yeah lol, Viewport would be definitely be the best option. You don’t see stuff like this commonly on roblox lol.

1 Like