Гайд «Кастомное текстовое окно»
Введение
«Текстовое окно» в визуальной новелле – это:
не одна цельная картинка, а программируемый контейнер, который:
- растягивается по ширине (не критично) и высоте (критично)
- автоматически подстраивается под разное количество текста и разные экраны
- собирается из отдельных графических элементов: 1. фона, 2. рамки, 3. декора на рамке, 4. декора внутри блока
- задаётся кодом вручную (HTML/CSS/JS) с точечной настройкой «до пикселя» каждого элемента, а не просто «вставили PNG и все работает»
Поэтому дизайн должен быть адаптивной конструкцией, а не один раз нарисованной:
Постулат 1
Форма любого блока
Важно понять и запомнить, что окно 1) текста автора, 2) имени, 3) уведомлений, 4) выбора, 5) ввода текста – это все блоки, программируемые кодом. А блоки у нас – это исключительно прямоугольники (угла только 4, никаких сложносоставных фигур, трапеций или параллелограммов). Но углы эти можно сглаживать: как все, так и отдельные и в разной степени.
При этом, вы можете «изменять» форму блока картинкой, которую поставите на рамку. Сложность одна — чтобы дизайн выглядел целостно и не диформировался при расширении блока.
Постулат 2
Градиент
Ниже представлены все виды градиентов, доступных на элемент «фон блока». Количество цветов – любое (сложные градиенты).
Важно! Градиенты применяются исключительно на фон блока. Это значит, что его нельзя применять к рамке.
Постулат 3
Прозрачность
Вы можете указать прозрачность любого окна. Технически – прозрачность – это тот же «градиент», поэтому можно выбирать его различные вариации (вертикальный, горизонтальный, диагональный, радиальный)
Постулат 4
Виды рамки
Рамка блока – это программируемый элемент, а не картинка. Она не может быть градиентной, но вы свободны в выборе ее толщины и цвета на каждой стороне блока. Также при желании можно добавить рамке контур (двойная рамка). Он будет находиться с внешней стороны рамки, а его толщина будет едина для всех сторон.
Важно! На выборах рамка может быть только одинарной (без контура) и не слишком толстой.
Постулат 5
Растягиваемость блока
В одном окне может быть как одно слово, так и тридцать и сорок – поэтому он очень сильно растягивается вверх и вниз. Именно из-за этого существует ограничение, которое гласит: ваши декоративные элементы не должны 1) растягиваться на миллионы километров 2) сужаться до размера молекулы 3) наезжать друг на друга при сужении блока, создавая визуальный беспорядок.
Поэтому! Когда вы придумываете дизайн, делайте его не на болванку с большим количеством текста, а на блок шириной в одну строчку, как на примере выше. Можете открыть любую историю на сайте и сделать скриншот такого блока, если вам сложно его представить.
Итак, вот макет расширения блока, где
ФО – это фиксированная область, которая не растягивается
РО – это растягиваемая область, которая растягивается
Красное и зеленое – это про вертикальное растягивание; синее и голубое – про горизонтальное!
Соответственно: растягиваемую область стараются оставлять пустой.
Если приблизить любое диалоговое окно в популярных приложениях и присмотреться, вы заметите характерную конструкцию = тот самый стык
ФО-РО-ФО- наверху и внизу до начала текста\конца – фиксированная область – именно на ней расположена вся сложная, богатая деталями графика: имитация обгоревшего листа, фактура дерева и т.д.;
- и есть растягиваемая область, которая практически всегда либо полностью однотонная, либо содержит такой минимальный, незаметный паттерн, что при растяжении он не деформируется.
Эта схема используется повсеместно, потому что она гарантирует: декор остаётся красивым, а интерфейс — стабильным при любом количестве текста.
Постулат 6
Декор на рамке
Вы можете свободно размещать декор на рамке в фиксируемой области: по верху или по низу – как полностью на всю область (для длинных элементов), так и только по углам или по центру (для коротких и средних декоративных деталей). Пример – в карусели.
Разрешение PNG-элемента декора оптимально до 300 пикслей.
Для удобного позиционирования обрезайте изображения до последнего видимого пикселя с каждой стороны.
Важно: при дизайне окна имени фиксируемая область инвертируется и становится не сверху и снизу, а справа и слева соответственно!
Важно: На картинке приведены границы экрана. Не составляйте дизайн, когда декоративные элементы слишком выступают за рамку!
Небольшая сноска!
Если блок текста автора растягивается вверх-вниз, а блок имени – вправо-влево, то блок уведомлений растягивается абсолютно во все стороны: и вверх, и вниз, и вправо, и влево в зависимости от количества текста в нем!
Поэтому при составления дизайна вы должны учитывать это. Если вы хотите крупные уведомления фиксированного размера – создайте дизайн, поместите в него конкретный текст и вставляйте готовую картинку в нужные места с помощью команды \наложение(имя картинки) и \убратьналожение(имя картинки)
Постулат 7
Декор внутри блока
Вы также можете размещать декор внутри блока: полностью заменять фон (выбираете: изображение растягивается с блоком или обрезается по актуальной высоте) и\или расставлять элементы по области. Пример – в карусели.
Прозрачность картинки вы настраиваете заранее. Следите, чтобы их расположение не мешало чтению текста.
Разрешение картинки фона (в png) должно быть до 600 пикслей. Декоративных элементов — до 300.
Для удобного позиционирования обрезайте изображения до последнего видимого пикселя с каждой стороны.
О цене:
Функция кастомизации диалоговых окон — платная. Стоимость: 150 🟣 (база) + 50 🟣 за каждую загруженную использованную картинку, если есть.
Создать кастомный дизайн можно в настройках проекта по кнопке «Создать».
Чек-лист возможностей
Подведем итоги по пунктам:
1) Основной блок, фон (окна текста автора, имени, выбора, ввода и уведомления) – однотонный, градиентный или настройка прозрачности
2) Рамка (не картинка, программируемый элемент: тонкая, толстая, двойная, нет)
3) PNG-элемент на рамку (уголки, середина, верхняя и нижняя граница, растягивающийся элемент по бокам)
4) PNG-элемент в блок (фон картинкой (обрезка \ растяжение); поверх фона, фиксированное положение на области)
Спасибо за внимание!
