20 Мая 2024, 11:20:36
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

Навигация по форуму







guest3d
Quest3D - Русскоязычное сообщество > Quest3D > Логика > GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
(Прочитано 10005 раз)
  [1]
Печать
dfx | ** | Пользователь | Сообщений: 95 | « 12 Июня 2011, 04:09:46 »
GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		0
Всем привет. Улыбающийся
Появилась необходимость в маштабируемых окнах, отрисованных в стиле "Balloon Tooltip".
Если создать маштабируемое, прямоугольное окно не проблема, то над созданием пусть такого же, но с "хвостиком", приходится поломать голову. Интересует алгоритм позиционирования и рисования этого хвостика.
 
1.Реализация стандартными каналами квеста.
2.Используется отрисовка внешнего контура в 1-2px.
3.Полупрозрачный элемент (простое наложение при отрисовке может не подойти.)

Пишите любые идеи. Смеющийся

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

Alteste | *** | Постоялец | Сообщений: 224 | «Ответ #1 12 Июня 2011, 10:07:47 »
Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		1
Посмотри как делают балуны на jQuery, никаких нанотехнологий там быть не может - картинка хвостика с альфаканалом цепляется под прямоугольное окно, а куда позиционировать - дело вкуса
dfx | ** | Пользователь | Сообщений: 95 | «Ответ #2 12 Июня 2011, 14:59:41 »
Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		2
Это был вопрос-
Цитировать
Интересует алгоритм позиционирования и рисования этого хвостика.
А это ответ-
Цитировать
Посмотри как делают балуны на jQuery, никаких нанотехнологий там быть не может - картинка хвостика с альфаканалом цепляется под прямоугольное окно, а куда позиционировать - дело вкуса
Улыбающийся


Так в этом вкусе и вопрос. Подмигивающий С остальным проблем нет.

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

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

Интересно, кто бы как решил подобную задачу. Может есть метод и быстрее и оригинальнее. Подмигивающий
« Последнее редактирование: 12 Июня 2011, 16:33:39 от dfx »
Alteste | *** | Постоялец | Сообщений: 224 | «Ответ #3 12 Июня 2011, 17:00:54 »
Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		3
Зачем делать разрыв в прямоугольнике? Обычно хвостик накладывают слоем выше на прямоугольник заслонив линию контура, а там его двигай вперед/назад.
dfx | ** | Пользователь | Сообщений: 95 | «Ответ #4 12 Июня 2011, 18:27:30 »
Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		4
Цитировать
3.Полупрозрачный элемент (простое наложение при отрисовке может не подойти.)
Alteste | *** | Постоялец | Сообщений: 224 | «Ответ #5 12 Июня 2011, 18:56:44 »
Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		5
Ну юзай тогда геометрию, шейдеры и вертекс колор анимацию
dfx | ** | Пользователь | Сообщений: 95 | «Ответ #6 12 Июня 2011, 19:08:25 »
Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		6
Цитировать
вертекс колор анимацию
Шокированный А это здесь зачем может понадобиться?
Alteste | *** | Постоялец | Сообщений: 224 | «Ответ #7 12 Июня 2011, 20:31:46 »
Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		7
создаешь форму своего балуна, у хвоста красишь вертексы и в шейдере можно будет менять форму, положение, размер его. Размеры балуна простой трансформацией
dfx | ** | Пользователь | Сообщений: 95 | «Ответ #8 12 Июня 2011, 22:56:06 »
Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		8
Цитировать
создаешь форму своего балуна, у хвоста красишь вертексы и в шейдере можно будет менять форму, положение, размер его. Размеры балуна простой трансформацией

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

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

Пробовал как то делать конструктор окошек на шейдерах(корректировкой УВ-координат) - раоботает очень быстро, пусть и считается каждый кадр. Но точности все же не хватает - чем больше разрешение вьюпорта, тем больше погрешность и качества пиксель-в-пиксель не получается. В итоге лезут артифакты, вроде размытых контуров и лишних пикселей на стыках.
Alteste | *** | Постоялец | Сообщений: 224 | «Ответ #9 13 Июня 2011, 10:55:12 »
Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		9
Поясни плиз суть своего метода "выборки фрагментов из атласа", и как обошелся без альфы
dfx | ** | Пользователь | Сообщений: 95 | «Ответ #10 13 Июня 2011, 20:19:48 »
Re: GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д. | 		10
Цитировать
Поясни плиз суть своего метода "выборки фрагментов из атласа", и как обошелся без альфы

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

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

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

Вобщем, примерно такой, подход..
 
  [1]
Печать
« предыдущая тема следующая тема »
 
Quest3D - Русскоязычное сообщество > Quest3D > Логика > GUI: Реализация "Balloon" - формы для подсказок, контекстных меню и т.д.
Перейти в:  
Powered by SMF 1.1.6 | SMF © 2006, Simple Machines LLC
on theme Guest3d by danila_dem
Страница сгенерирована за 0.026 секунд. Запросов: 19.