Название: 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. Один параметр в функции отвечает за то, с какой стороны рисовать хвост, другой за позицию в процентах по этой стороне. В итоге имеем функцию, которй передаем размер по Х и У, сторону для хваоста и его положение, а на выходе получаем текстуру.(При инициализации один раз рендерим конструкцию из фрагментов в текстуру, а дальше ее используем. Если один из параметров меняется, то обновляем тектуру.) Потом просто выводим плоскость с этой текстурой. Можно сделать вид итогового элемента изменяемым - в разных каналах хранить разную информацию об внешнем виде, например, в красном хранить только контур, в зеленом - плашку и т.д. Тогда в шейдере можно будет красить кунтур и плашку отдельно любым цветом. Вобщем, примерно такой, подход.. |