Векторная графика: линии и круги

Пакет vector открывается пятью функциями быстрого рисования: FillCircle заливает круг, StrokeCircle обводит окружность, StrokeLine проводит линию заданной ширины, FillRect и StrokeRect заливают и обводят прямоугольники. Общая схема аргументов одинаковая: холст, координаты в float32, цвет и последний флаг antialias — сглаживание краёв. Включённый флаг даёт мягкие края ценой дополнительных вычислений, выключенный рисует резко и дешевле: для статичного UI сглаживание включают, для сотен объектов на кадр — выключают. Координаты — пиксели холста, и круг задаётся центром плюс радиусом, а не прямоугольником: геометрия круга живёт прямо в аргументах. Массовость — главный аргумент в пользу готовых функций: сетка из сотни линий или облако частиц из кругов собираются циклом без единой картинки, и правка цвета — одна константа в коде, а не перерисовка ассета.

Имена честно отражают историю пакета: DrawFilledCircle из старых статей с версии 2.9 помечена устаревшей и стала алиасом FillCircle — в новом коде используйте актуальные имена, чтобы не тащить предупреждения и не путать читателя. Цвет — обычный color.Color из image/color, и прозрачность через альфу работает так же, как у спрайтов: полупрозрачный прямоугольник поверх экрана — это FillRect с альфой, а не отдельная картинка затемнения. Именно так собирается оверлей паузы из урока про сцены: затемнение плюс надпись — и никакой картинки не понадобилось.

Когда готовых фигур мало, включается vector.Path — собираемая фигура. Метод MoveTo ставит перо в точку, LineTo тянет сегмент до следующей, Arc рисует дугу по центру, радиусу, стартовому и конечному углу, Close замыкает контур. Готовый путь отдаётся в FillPath — заливку — или StrokePath — обводку — вместе с опциями: StrokeOptions задаёт ширину линии Width и стили концов и стыков, DrawPathOptions — сглаживание AntiAlias и цвет через ColorScale. Путь — просто список инструкций: его можно строить заново каждый кадр, а можно собрать один раз и переиспользовать, и от этого выбора зависит производительность следующего раздела. Кроме линий у пера есть кривые: QuadTo тянет квадратичную кривую через одну контрольную точку, CubicTo — кубическую через две, и на них строятся плавные траектории и органические контуры; в играх курса хватает линий и дуг, но знать про кривые стоит уже потому, что они объясняют, почему дуги в Path сегментированы.

Круг из готовой функции и круг из Path — разные вещи по цене: FillCircle внутри строит путь с дугой на две сотни сегментов, но делает это в оптимизированном виде с переиспользованием вершин. Свой Path нужен там, где фигура нестандартна: дуга перезарядки по углу, ломаная трассы, многоугольник препятствия. Для прямых и прямоугольников Path избыточен — готовые функции короче, быстрее и читаются в одну строку. Ещё один плюс собранного пути — переносимость: один и тот же Path можно обвести на любом холсте — на экране, на offscreen-изображении для предрендера или на карте, куда смотрит камера, — геометрия не знает, куда её рисуют, и это делает пути удобными заготовками для слоёв интерфейса.

Примитивы дёшевы только на первый взгляд: каждый вызов FillCircle внутри собирает путь из дуги на десятки сегментов, триангулирует его и отдаёт видеокарте. Десяток кругов на HUD — незаметно, тысяча частиц-кругов в каждом кадре — уже ощутимо, и тут начинается экономика. Фигуры, которые не меняются между кадрами, обязаны кэшироваться: vector.Path собирается один раз и хранится в поле структуры, а Draw рисует готовый путь вызовом FillPath или StrokePath — геометрия не пересчитывается, платится только вывод. Если фигура всё-таки поменялась, Reset() чистит путь, и он собирается заново — редкое событие, а не каждый тик.

Второй рычаг — сглаживание: флаг antialias и AntiAlias в опциях включают дополнительную работу на каждый пиксель края, и на сотнях объектов разница в кадрах видна без замеров. Правило: сглаживание — крупному UI и фигурам на переднем плане, без сглаживания — массовым объектам и отладочным слоям. Полную карту таких цен и способы замера соберёт урок про производительность: примитивы стоят там в одном ряду с DrawImage и текстом, и кэш путей — первый пункт их оптимизации. Практический ориентир такой: HUD и отладочные слои живут без кэша спокойно, а всё, что рисуется циклом по десяткам объектов, обязано либо кэшировать пути, либо переходить на готовые функции, либо уходить в предрендер — один раз нарисованная в offscreen-картинку сетка дешевле векторной в разы.

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

Такая геометрия ложится прямо поверх AABB-коллизий: там мир проверялся прямоугольниками, здесь к ним добавляются круги — снаряды, зоны взрыва, радиусы подбора. Практика прототипа физики: тела рисуются FillCircle по тем же координатам, по которым проверяются пересечения, поэтому логика и картинка не разъезжаются, а любая ошибка в движении видна на первом же кадре. Круговой хитбокс ещё и удобнее для геймплея: он не имеет углов, игрок прощает ему промахи на волосок, и вращение спрайта не ломает форму проверки — повёрнутый прямоугольник потребовал бы отдельной математики, круг от поворота не меняется. По этой формуле стоит устроить быструю проверку широким кругом перед точной: сначала грубый фильтр по расстоянию центров, потом детальная проверка — это тот же принцип грубого и точного прохода, на котором стоят все коллизии в играх.

В мини-аркаде, к которой курс идёт, примитивы займут место по силе: рамка HUD и полоса здоровья — StrokeRect и FillRect из этого урока, кулдаун способности — дуга Arc, отладочные коллизии при доводке — StrokeCircle вокруг каждого хитбокса, включаемые одной константой. Отладочный слой из примитивов — приём профессиональных студий: спрайты могут врать про границы тела, круги и прямоугольники вокруг тел — никогда, и расхождение физики с картинкой ловится мгновенно, до воспроизведения бага игроком. Тот же слой помогает настройке: радиус подбора, длина луча, зона взрыва — всё это числа в коде, но включённый слой превращает их в видимые окружности, и балансировка из гадания становится настройкой по линейке.

Каркас итогового проекта выигрывает и от того, что примитивы не добавляют ассетов: игре не нужны файлы, чтобы выглядеть собранной на ранних этапах. Стиль из чистой геометрии — честный минимум: рамка, круг, линия, текст из урока про шрифты. Этот минимум показывает механику в чистом виде, пока художественные ассеты дозревают в очереди на замену, и в прототипной фазе выглядит аккуратнее случайных заглушек.