Quest3D - Русскоязычное сообщество

Quest3D => Логика => Тема начата: dfx от 12 Июня 2011, 04:09:46



Название: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: dfx от 12 Июня 2011, 04:09:46
Всем привет. :)
Появилась необходимость в маштабируемых окнах, отрисованных в стиле "Balloon Tooltip".
Если создать маштабируемое, прямоугольное окно не проблема, то над созданием пусть такого же, но с "хвостиком", приходится поломать голову. Интересует алгоритм позиционирования и рисования этого хвостика.
 
1.Реализация стандартными каналами квеста.
2.Используется отрисовка внешнего контура в 1-2px.
3.Полупрозрачный элемент (простое наложение при отрисовке может не подойти.)

Пишите любые идеи. ;D

Некоторые задумки есть, но пока все не совсем то.



Название: Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: Alteste от 12 Июня 2011, 10:07:47
Посмотри как делают балуны на jQuery, никаких нанотехнологий там быть не может - картинка хвостика с альфаканалом цепляется под прямоугольное окно, а куда позиционировать - дело вкуса


Название: Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: dfx от 12 Июня 2011, 14:59:41
Это был вопрос-
Цитировать
Интересует алгоритм позиционирования и рисования этого хвостика.
А это ответ-
Цитировать
Посмотри как делают балуны на jQuery, никаких нанотехнологий там быть не может - картинка хвостика с альфаканалом цепляется под прямоугольное окно, а куда позиционировать - дело вкуса
:)


Так в этом вкусе и вопрос. ;) С остальным проблем нет.

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

Пока склоняюсь к использованию выборки необходимых фрагментов из атласа.

Интересно, кто бы как решил подобную задачу. Может есть метод и быстрее и оригинальнее. ;)


Название: Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: Alteste от 12 Июня 2011, 17:00:54
Зачем делать разрыв в прямоугольнике? Обычно хвостик накладывают слоем выше на прямоугольник заслонив линию контура, а там его двигай вперед/назад.


Название: Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: dfx от 12 Июня 2011, 18:27:30
Цитировать
3.Полупрозрачный элемент (простое наложение при отрисовке может не подойти.)


Название: Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: Alteste от 12 Июня 2011, 18:56:44
Ну юзай тогда геометрию, шейдеры и вертекс колор анимацию


Название: Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: dfx от 12 Июня 2011, 19:08:25
Цитировать
вертекс колор анимацию
:o А это здесь зачем может понадобиться?


Название: Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: Alteste от 12 Июня 2011, 20:31:46
создаешь форму своего балуна, у хвоста красишь вертексы и в шейдере можно будет менять форму, положение, размер его. Размеры балуна простой трансформацией


Название: Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: dfx от 12 Июня 2011, 22:56:06
Цитировать
создаешь форму своего балуна, у хвоста красишь вертексы и в шейдере можно будет менять форму, положение, размер его. Размеры балуна простой трансформацией

Это уже интересная идея ;D Но это реализация хороша для 3д - и конец хвоста можно прицепить куда надо и облако маштабировать как хочешь. Контур можно тоже в шейдере рисовать, что бы постоянной толщины был.

У меня 2д. Все углы постоянного радиуса, размеры зависят от размеров текста, который надо вывести. Цвет и т.д. - графика с альфой.
Вроде все получилось с простейшей выборкой фрагментов из атласа и их сборкой.

Пробовал как то делать конструктор окошек на шейдерах(корректировкой УВ-координат) - раоботает очень быстро, пусть и считается каждый кадр. Но точности все же не хватает - чем больше разрешение вьюпорта, тем больше погрешность и качества пиксель-в-пиксель не получается. В итоге лезут артифакты, вроде размытых контуров и лишних пикселей на стыках.


Название: Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: Alteste от 13 Июня 2011, 10:55:12
Поясни плиз суть своего метода "выборки фрагментов из атласа", и как обошелся без альфы


Название: Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Отправлено: dfx от 13 Июня 2011, 20:19:48
Цитировать
Поясни плиз суть своего метода "выборки фрагментов из атласа", и как обошелся без альфы

Альфа используется, так что без альфы не обошелся. Альфа - неотъемлимая часть скина.  :)

Атлас - текстура, в которой хранятся все фрагменты элемента с каналом прозрачности (ARGB). Уголки, бордюры, хвостики для каждой из сторон. Из этого атласа выбирается нужный фрагмент, маштабируется, если надо, и ставится в необходимую позицию. Если обычное окошко собирается из 9 частей, то балун из 10-11.
Один параметр в функции отвечает за то, с какой стороны рисовать хвост, другой за позицию в процентах по этой стороне.
В итоге имеем функцию, которй передаем размер по Х и У, сторону для хваоста и его положение, а на выходе получаем текстуру.(При инициализации один раз рендерим конструкцию из фрагментов в текстуру, а дальше ее используем. Если один из параметров меняется, то обновляем тектуру.)

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

Вобщем, примерно такой, подход..