Страница 1 из 2

Радиальный progress bar

СообщениеДобавлено: 11 авг 2013, 14:50
Kayler
Привет всем, кто нибудь вкурсе как можно сделать радиальный бар на гуи? пробовал много вариантов ни один не сработал... если нельзя то подскажите как привязать плашку к разным разрешениям экрана? собстно гуи же не меняется от разрешения и кроме того привязывается к сторонам экрана, вобщем чтоб не изобретать вилосипед

Re: Радиальный progress bar

СообщениеДобавлено: 11 авг 2013, 15:00
trololoid
В ассетсторе есть Circle прогресс бар, деньгу стоит правда

Re: Радиальный progress bar

СообщениеДобавлено: 11 авг 2013, 15:16
Kayler
там так же есть вот такая штука
http://redmine.madpixelmachine.com/proj ... ing_Gauges
но я понятия не имею привязывается ли оно к разрешению и сторонам экрана как и Circle, такие дела

хотелось бы услышать про привязку или гуи

Re: Радиальный progress bar

СообщениеДобавлено: 11 авг 2013, 15:32
seaman
там так же есть вот такая штука

Это сделано на NGUI

Re: Радиальный progress bar

СообщениеДобавлено: 11 авг 2013, 16:43
Neyl
Делал для своего проекта простенький круговой прогресс бар на GL. Без текстур, заливается выбранным цветом. Во вложении пример использования.

Re: Радиальный progress bar

СообщениеДобавлено: 12 авг 2013, 09:53
jetyb
В GUI есть свойство matrix, отвечающее за матрицу преобразования координат. Меняя ее перед отрисовкой, можно рисовать текстуру стрелки под углом:
Синтаксис:
Используется csharp
Matrix4x4 mat= GUI.matrix;
GUIUtility.RotateAroundPivot(angle, center);
GUI.DrawTexture(...);
GUI.matrix = mat;
 

Сурово конечно [curved_hands], но высокоуровнее ГУЙ и не умеет.

Re: Радиальный progress bar

СообщениеДобавлено: 12 авг 2013, 10:15
Diab10
jetyb писал(а):В GUI есть свойство matrix, отвечающее за матрицу преобразования координат. Меняя ее перед отрисовкой, можно рисовать текстуру стрелки под углом:
Синтаксис:
Используется csharp
Matrix4x4 mat= GUI.matrix;
GUIUtility.RotateAroundPivot(angle, center);
GUI.DrawTexture(...);
GUI.matrix = mat;
 

Сурово конечно [curved_hands], но высокоуровнее ГУЙ и не умеет.



Речь не о повороте стрелки, а о заполнении круглой полоски

Re: Радиальный progress bar

СообщениеДобавлено: 12 авг 2013, 10:59
Receptor
Берем изображение с градиентной заливкой, что бы по тону уходил от максимально темного, к максимально светлому, берем шейдер Transparent Cut Off и управляем параметром Cutoff. Полуим соответсвующий результат

Изображение
Изображение

Re: Радиальный progress bar

СообщениеДобавлено: 12 авг 2013, 12:21
Paul Siberdt
Не ипите мозги себе и другим :)

Создайте кольцо полигональное с нужной детализацией, по длине кольца замапите текстуркой двуцветной, которая клэмпится и с одной стороны цвета полного прогресса, а с другой - пустого. Теперь крутите ювишки или оффсет текстуры на свое усмотрение в ту или другую сторону по выбранной вами оси и получите плавное смещение прогрессбара.

Можно не кольцо, а хоть какашку сделать или стебель растения... подобным макаром (смещение ювишек) в Аллодах Онлайн сделан очень красивый узорчатый эффект "квест выполнен".

Re: Радиальный progress bar

СообщениеДобавлено: 14 авг 2013, 12:53
getAlex
Ну вы прям агенты малдеры. Решение может быть намного проще.

Если не нужен прозрачный фон, то берётся 2 элементарные спирали с одинаковым радиусом, после чего совершается обычное вращение по оси одной из них :p В проекции глубину спирали не видимо, поэтому создаётся впечатление круга и бара. \:D/

Re: Радиальный progress bar

СообщениеДобавлено: 14 авг 2013, 13:20
Golandez
Ничего, что спираль будет иметь тучу трисов, чтобы она действительно по краю выглядела кругом, а не шестеренкой?

Re: Радиальный progress bar

СообщениеДобавлено: 14 авг 2013, 14:50
getAlex
Golandez писал(а):Ничего, что спираль будет иметь тучу трисов, чтобы она действительно по краю выглядела кругом, а не шестеренкой?

Но текстура то будет гладкая. А края в альфе. Пара пикселей не сделают нагрузку на рендер.

Re: Радиальный progress bar

СообщениеДобавлено: 14 авг 2013, 18:24
Golandez
Изображение
Как ее сделать лоуполи, чтобы визуально край выглядел ровно, а не шестеренкой? Считаем, что ее развернули и текстура ложится корректно на нужную нам сторону.

Re: Радиальный progress bar

СообщениеДобавлено: 15 авг 2013, 19:09
RestFall
Neyl писал(а):Делал для своего проекта простенький круговой прогресс бар на GL. Без текстур, заливается выбранным цветом. Во вложении пример использования.

спасибо большое! отличная штука!) пытался понять как сделать просто полоску, пока не очень получается? текстурой не хочется) можете подсказать?

я так понимаю надо по колдовать со степквантернион?

Re: Радиальный progress bar

СообщениеДобавлено: 15 авг 2013, 20:34
Neyl
Полоску, всмысле прямой прогресс бар? Ни с чем колдовать не надо, просто нарисовать два прямоугольника - для фона и для полоски.
Синтаксис:
Используется csharp
using UnityEngine;

namespace Crankshaft.XGUI
{
    public class HorisontalProgressBar : BaseElement
    {
        private Rect m_rect;
        private Rect m_barRect;

        public HorisontalProgressBar(Rect rect)
        {
            m_rect = rect;
            m_barRect = m_rect;
            InitMaterials();
        }

        public void Recalculate(Rect rect)
        {
            m_rect = rect;
        }

        public float Progress
        {
            set
            {
                float val = Mathf.Clamp01(value);
                m_barRect.width = m_rect.width * val;
            }
        }

        public void Draw()
        {
            if (Event.current.type == EventType.repaint)
            {
                BeginFilledRects();
                DrawContent();
                EndFilledRects();
            }
        }

        public void DrawContent()
        {
            GL.Color(Color.gray);
            DrawFilledRect(m_rect);//background

            GL.Color(Color.green);
            DrawFilledRect(m_barRect);//bar
        }
    }
}