Trying to make Arrows move in a frame and only inside the frame

Help and Feedback Scripting Support
, ,
#1

Hi all, I’m trying to make a level bar that looks like The Mad Murderer 2, which looks like this. https://gyazo.com/8101072f079cd6d9ae55f103461749ae
However, I am not sure where to start first, could someone tell me how to do that so I can start, thanks!

2 Likes
#2

So let me get this straight, are you trying to animate the arrows?

#3

Yes, I am trying to make them animated.

#4

Then this topic should be moved to #development-support:scripting-support.

#5

Okay, just did, thought it would go to Art Design because it was GUI related.

#6

The ClipsDescendants property can be used to ensure the arrows are only visible inside of the Frame.

For the arrow animations, you could create a simple script that procedurally moves arrow ImageLabels from below the Frame to above the Frame and so on and so forth. Alternatively you could make use of a spritesheet, which essentially acts as a GIF.

You can find more information on the implementation of spritesheets in the following thread:

1 Like
#7

First, the bar has ClipsDescendants set to true so nothing inside the bar appears outside. Second, the arrows are just image(s) that Tween their positions from the bottom to top and then they are destroyed.

A way of achieving this is to have an image of an arrow, then clone it. The cloned copies then animate towards the top and when they are not visible to our eyes, they are destroyed. However, be aware of the potential lag this can introduce.

Here’s what I replicated:

Code:

local gui = script.Parent --frame for me
local il = gui:WaitForChild("ImageLabel")
local clonedObject
local count = 0

    local function clone()
    	
    	local cloned = il:Clone()
    	local randomPosX = math.random(0, 100) -- 0 to 1 really but this allows for more possibilities
    	local randomPosY = math.random(150, 1000) -- 1.5 to 3  (outside of parent)
    	cloned.Parent = gui --or anything (make sure clips descedants is set to true!)
    	cloned.AnchorPoint = Vector2.new(0.5, 0.5) --position based on the center of the image label
    	cloned.Position = UDim2.new(randomPosX / 100, 0, randomPosY / 100, 0) --random X / Y position (make Y positions all outside of the parent!)
    	return cloned
    	
    end

    while true do
    	
    	local tab = {}
    	local randomTime = math.random(50, 100) --to vary the time it takes to tween each object
    	local randomTargetPos = math.random(25, 100)
    	local number = 25
    	count = count + 1
    	
    	for i = 0, number, 1 do --10 can be any number
    		
    		clonedObject = clone()
    		table.insert(tab, clonedObject)
    		
    	end
    	
    	for i = 1, #tab, 1 do
    	
    		local object = tab[i]
    		object:TweenPosition(UDim2.new(object.Position.X.Scale, 0, -(randomTargetPos / 100), 0), "Out", "Linear", (randomTime / 10), true) --goes to the top, outside of the parent
    	
    	end
    	

    	if count % 5 == 0 then
    	
    		print("Destroy")
    		
    		for i = 1, #tab, 1 do
    			
    			tab[i]:Destroy()
    			
    		end
    	
    	end
    	
    	wait(1)
    	
    end

I hope that this was close to what you are looking for.

1 Like