Привет, сегодня рассказываю примерный алгоритм того, как реализованы всплывающие подсказки в Ignite . Основным требованием к всплывающей подсказке будет ее масштабируемость в зависимости от того, сколько информации в ней рисуется. Итоговый результат выглядит вот так:

 

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

Теперь в size записан размер всплывающей подсказки. Теперь все готово к тому, чтобы нарисовать обрамление для подсказки. Оно состоит из нескольких ключевых элементов: четырех углов и четырех сторон, которые формируют прямоугольник. Сначала я рисую четыре угла:

Я принимаю две структуры Point: положение левого-верхнего угла и размер всплывающей подсказки. gui – это текстура, с которой рисуется на экран картинка. Первый прямоугольник – положение, куда рисуется уголок, второй – его положение на текстуре gui. Заметьте, что я сдвигаю положение уголков на 5 пикселей от всплывающей подсказки. Я это буду делать и для остальных 4х сторон.

Стороны я храню, как отрезки в несколько десятков пикселей, которые последовательно рисуются несколько раз, если размер всплывающей подсказки больше размера стороны:

Рисуем стороны:

После того, как нарисованы стороны, не забудьте добавить фон. Я использую полупрозрачное изображение, которое отделяет текст подсказки от игрового поля. Это изображение я растягиваю до размера size:

После этого можно начинать добавлять элементы всплывающей подсказки. Также стоит помнить, что если вы не будете создавать новые элементы Rectangle при каждой перерисовке кадра(как это сделал я для скорого примера), а будете использовать заранее созданные константы, то это несколько уменьшит нагрузку на cpu при обработке вашей подсказки.