Как сделать красивый статус бар?

Автор: | 4 декабря, 2021
Поделиться...

Итак простенькое решение для красивых статус-баров любой формы.

Нам понадобятся… 2 картинки.

На первой картинке будет изображение пустого состояния.
heart_2

На второй картинке состояние полного статуса.
heart_3

Нет, я не ошибся. Вторая картинка перевёрнутая. А первая сделана из второй простым переводом её в чёрно-белое изображение.

В Explorer добавим наши GUI элементы. Выглядеть это будет так:

image

Теперь об элементах:
Gradient-Heart — обычный фрейм для нашего сердца
txt — просто метка, выводит текущий процент
img2_back — фоновое изображение сердца, оно же пустое

  • ZIndex=1
  • ScaleType = Stretch

img1 — полное, перевёрнутое, сердце

  • ZIndex=2 — поверх пустого
  • Rotation = 180 — перевернуть
  • ScaleType = Tile
  • TileSize = {1, 0},{9, 0}
  • Size = {1, 0},{0.1, 0}
  • Position = {0, 0},{0.9, 0}

Выглядеть на экране это будет примерно так:
image
Как вы заметили, img1 прижата к нижней части фрейма. Но при этом растянуто по всей ширине.

Ну… Чисто для наглядности я им обоим установил прозрачность на 50%.

  • ImageTransparence = 0.5

Перейдём к скрипту и тому как же это работает?

me = script.Parent

while true do
	wait(5) -- ждём, прежде чем начать заполнять
	for i = 0,100 do
		local proc=i -- процент заполненного изображения
		
		me.Position=UDim2.new(0,0,1-proc/100,0)	-- положение по Y
		me.Size=UDim2.new(1,0,proc/100,0)		-- размер по Y
		me.TileSize=UDim2.new(1,0,100/proc,0) 	-- скалирование по Y
		
		me.Parent.txt.Text = tostring(i) .. "%"
		wait(0.02)
	end
	wait(5) -- ждём, прежде чем начать опустошать
	for i = 100,0,-1 do
		local proc=i
		
		me.Position=UDim2.new(0,0,1-proc/100,0)
		me.Size=UDim2.new(1,0,proc/100,0)
		me.TileSize=UDim2.new(1,0,100/proc,0)
		
		me.Parent.txt.Text = tostring(i) .. "%"
		wait(0.02)
	end
end

Собственно в скрипте нет ничего сверхъестественного.
Мы просто в цикле меняем процент заполнения и по нему формируем новый UDim2 (по русски размер и позицию) для заполненного изображения. И надпись на метке меняем.

Как то вот так решил задачу для прогресс баров сложной формы и расцветки.

На решение данной задачки у меня ушло… где-то полчаса. И поверьте, я гораздо больше времени потратил на то, чтобы это тут описать. :sunglasses:

Пользуйтесь на здоровье. Но не забывайте об авторском праве. 

Total Page Visits: 279 - Today Page Visits: 1

Поделиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *