Радиальный / круговой прогресс бар

Ниже представленный бар ориентирован для отображения, например, уровня здоровья персонажа. Но, можно переделать и для экрана загрузки, впрочем, это актуально только если у вас тяжелые карты. Круговой прогресс бар сделать в Unity достаточно просто, но возможно кто-то сталкивался с данной проблемой, здесь вы узнаете, как это реализовать. Разумеется, всё будет выполнено с использованием элементов UI и управляющий скрипт. В котором, будет возможность устанавливать максимально возможное значение, дополнительно, другая функция позволит кроме этого, указать еще и текущее значение. Это удобно если, в игре есть сохранение и загрузка данных. Ну и конечно, функция регулировки текущего значения тоже присутствует. Скрипт очень простой и удобный.

Для начала, нужно нарисовать пару картинок, во первых будущий бар:

Радиальный / круговой прогресс бар

И его маска:


Лучше всего их покрасить белым цветом, а уже в редакторе изменить как угодно.

Теперь добавим Canvas, затем элемент изображения, назовем его mask, цепляем компонент Mask, а в качестве источника, указываем нашу картинку маску:


Добавляем еще одну картинку, делаем ее дочерней к mask и назовем circle-bar:


Переключаем в радиальный режим работы, как на скриншоте.

Вешаем на Canvas скрипт CircleBar:

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class CircleBar : MonoBehaviour {

	public Image circleBar;
	private static float maxValue;
	private static float value;
	private static Image bar;

	public static float currentValue
	{
		get {return value;}
	}

	void Awake()
	{
		bar = circleBar;
	}

	public static void SetDefault(float max)
	{
		maxValue = max;
		value = max;
		bar.fillAmount = 1;
	}

	public static void SetSettings(float max, float current)
	{
		maxValue = max;
		value = current;
		bar.fillAmount = current/max;
	}

	public static void AdjustCurrentValue(float adjust)
	{
		value += adjust;
		if(value < 0) value = 0;
		if(value > maxValue) value = maxValue;
		bar.fillAmount = value/maxValue;
	}
}

Осталось в переменной circleBar указать изображение бара circle-bar и готово.

Скачать демо:

Внимание! Посетители, находящиеся в группе Гости, не могут скачивать файлы.

Комментариев 1

Офлайн
AlxDsx 10 февраля 2019
Отлично работает, Спасибо!
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
  • Яндекс.Метрика