Construct 3. Проблема с отображением SVG и её решение

Пост о том как я столкнулся с неожиданной проблемой при отображении SVG иконок в своём проекте на Construct 3 и решил её.

Когда большое обновление проекта (добавление пака с 70 иконками) было почти готово, я столкнулся с неожиданной проблемой: по какой-то причине некоторые прямые линии в иконках стали отображаться некорректно (появлялся эффект лесенки).

Construct 3. Проблема с отображением SVG и её решение

Удивительно было то что эта проблема проявлялась не всегда и не на всех прямых линиях.

1. Проблема появлялась только если иконку начинать вращать.
2. Проблема проявлялась только на прямых линиях (потом выяснилось что не только, но в 99% это были прямые линии).
3. На примере иконки с конвертом видно, что лесенка появлялась только на линиях, которые в изначальном положении иконки (до вращения) были вертикальными (а линии, которые изначально были горизонтальными, даже когда принимали аналогичный угол что и проблемные линии, эффект лесенки не получали). На кубке наоборот, проблема проявилась на линии, которая изначально была горизонтальной.

Я искал причину проблемы самостоятельно и консультировался со знакомыми программистами, но найти её мы так и не смогли.

Вердикт знакомых - Construct вот так глючно работает с SVG файлами.

Но я не был согласен с этим, т.к. эта глючность была избирательной не только к разным иконкам, но и к разным линиям на одной иконке.

Я потратил ещё немного времени вращая иконки и обнаружил улику, которая привела меня к решению - маленький участок полукруглой иконки тоже имел пиксельный эффект на самом верху окружности, в том месте где он касался области отображения иконки (в Construct это называется ViewBox).

Я перепроверил все линии, которые имели эффект лесенки на остальных иконках и действительно подтвердилось то что если иконка касается края ViewBox, она начинает в этом месте пикселить (если её вращать).

Решать проблему оказалось удобнее всего в Figma, в которой я и делал сами иконки (кстати, ViewBox в Figma называется Frame). Сами иконки находились во фреймах размером 32х32 пикселя и имели аналогичный размер. Я уменьшил иконки на 2 пикселя и центрировал их по каждой стороне.

Результат можно видеть ниже:

Пример вида иконок во Frame (ViewBox) до и после.

Далее я экспортировал все иконки в SVG формат и перенёс их в Construct и всё заработало как надо, эффект лесенки пропал со всех иконок.

Конечный набор иконок выглядит вот так:

Надеюсь этот пост кому-то поможет улучшить качество отображения SVG в своих проектах.

А если интересно посмотреть на результат, то обновление с иконками отправлено на модерацию Яндекс Игр и скоро будет доступно.

yandex.ru

Редактор Кнопок. Создай кнопку за пару кликов (от Andrey Andrievich) - Яндекс Игры

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