Гайд «Кастомное текстовое окно»

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

Пока вы можете ознакомиться с основными возможностями и ограничениями в создании дизайна:

Введение

«Текстовое окно» в визуальной новелле – это:

не одна цельная картинка, а программируемый контейнер, который:

• растягивается по ширине (не критично) и высоте (критично)
• автоматически подстраивается под разное количество текста и разные экраны
• собирается из отдельных графических элементов: 1. фона, 2. рамки, 3. декора на рамке, 4. декора внутри блока
• задаётся кодом вручную (HTML/CSS/JS) с точечной настройкой «до пикселя» каждого элемента, а не просто «вставили PNG и все работает»

Поэтому дизайн должен быть адаптивной конструкцией, а не один раз нарисованной:

Важно: Положение и форму блока имени (скругленным, более квадратным) вы можете регулировать (не обязательно оставлять там, где оно стоит по стандарту): имя может стоять справа, слева или по середине — но всегда в одном месте вне зависимости от того, куда вы поставили спрайт своего персонажа.

Постулат 1

Форма любого блока

Важно понять и запомнить, что окно 1) текста автора, 2) имени, 3) уведомлений, 4) выбора, 5) ввода текста – это все блоки, программируемые кодом. А блоки у нас – это исключительно прямоугольники (угла только 4, никаких сложносоставных фигур, трапеций или параллелограммов). Но углы эти можно сглаживать: как все, так и отдельные и в разной степени.

Постулат 2

Градиент

Ниже представлены все виды градиентов, доступных на элемент «фон блока». Количество цветов – любое (сложные градиенты). Для точности указывайте их HEX коды (пример HEX кода: #4c44e9).

Важно! Градиенты применяются исключительно на фон блока. Это значит, что его нельзя применять к рамке.

Постулат 3

Прозрачность

Вы можете указать прозрачность любого окна. Технически – прозрачность – это тот же «градиент», поэтому можно выбирать его различные вариации (вертикальный, горизонтальный, диагональный, радиальный)

Постулат 4

Виды рамки

Рамка блока – это программируемый элемент, а не картинка. Она не может быть градиентной, но вы свободны в выборе ее толщины и цвета на каждой стороне блока. Также при желании можно добавить рамке контур (двойная рамка). Он будет находиться с внешней стороны рамки, а его толщина будет едина для всех сторон.

Важно! На выборах рамка может быть только одинарной (без контура) и не слишком толстой.

Постулат 5

Растягиваемость блока

В одном окне может быть как одно слово, так и тридцать и сорок – поэтому он очень сильно растягивается вверх и вниз. Именно из-за этого существует ограничение, которое гласит: ваши декоративные элементы не должны 1) растягиваться на миллионы километров 2) сужаться до размера молекулы 3) наезжать друг на друга при сужении блока, создавая визуальный беспорядок.

Поэтому! Когда вы придумываете дизайн, делайте его не на болванку с большим количеством текста, а на блок шириной в одну строчку, как на примере выше! Можете открыть любую историю на сайте и сделать скриншот такого блока, если вам сложно его представить.

Итак, вот макет расширения блока, где
ФО – это фиксированная область, которая не растягивается
РО – это растягиваемая область, которая растягивается

Красное и зеленое – это про вертикальное растягивание; синее и голубое – про горизонтальное!

Соответственно: растягиваемую область стараются оставлять пустой.

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

• наверху и внизу до начала текста\конца – фиксированная область – именно на ней расположена вся сложная, богатая деталями графика: имитация обгоревшего листа, фактура дерева и т.д.;
• и есть растягиваемая область, которая практически всегда либо полностью однотонная, либо содержит такой минимальный, незаметный паттерн, что при растяжении он не деформируется (важно учитывать высокое качество файла).

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

Постулат 6

Декор на рамке

Вы можете свободно размещать декор на рамке в фиксируемой области: по верху или по низу – как полностью на всю область (для длинных элементов), так и только по углам или по центру (для коротких и средних декоративных деталей). Пример – в карусели.

Все PNG-элементы должны быть отдельными и в хорошем качестве: один цельный элемент – одна картинка.

Например, если вы хотите четыре уголка, это должны быть четыре отдельных файла, каждый со своим правильным расположением.

Старайтесь обрезать изображения до последнего пикселя с каждой стороны.

1 of 2

Важно: при дизайне окна имени фиксируемая область инвертируется и становится не сверху и снизу, а справа и слева соответственно!

Важно: На картинке приведены границы экрана. Не составляйте дизайн, когда декоративные элементы слишком выступают за рамку!

Небольшая сноска!

Если блок текста автора растягивается вверх-вниз, а блок имени – вправо-влево, то блок уведомлений растягивается абсолютно во все стороны: и вверх, и вниз, и вправо, и влево в зависимости от количества текста в нем!

Поэтому при составления дизайна вы должны учитывать это. Если вы хотите крупные уведомления фиксированного размера – создайте дизайн, поместите в него конкретный текст и вставляйте готовую картинку в нужные места с помощью команды \наложение(имя картинки) и \убратьналожение(имя картинки)

Постулат 7

Декор внутри блока

Вы также можете размещать декор внутри блока: полностью заменять фон (выбираете: изображение растягивается с блоком или обрезается по актуальной высоте) и\или расставлять элементы по области. Пример – в карусели.

Прозрачность картинки вы настраиваете заранее. Следите, чтобы их расположение не мешало чтению текста.

Все PNG элементы должны быть отдельными и в хорошем качестве. Старайтесь обрезать изображения до последнего пикселя с каждой стороны.

1 of 2

О цене:

Функция кастомизации диалоговых окон — платная. Актуальные цены можно будет узнать на сайте по готовности инструмента

Чек-лист возможностей

Подведем итоги по пунктам:

1) Основной блок, фон (окна текста автора, имени, выбора, ввода и уведомления) – однотонный, градиентный или настройка прозрачности

2) Рамка (не картинка, программируемый элемент: тонкая, толстая, двойная, нет)

3) PNG-элемент на рамку (уголки, середина, верхняя и нижняя граница, растягивающийся элемент по бокам)

4) PNG-элемент в блок (фон картинкой (обрезка \ растяжение); поверх фона, фиксированное положение на области)

Если вы стали обладателем слота, то вам нужно прислать нам в сообщение сообщества картинку собранного дизайна полностью (чтобы мы видели желаемый результат) и все PNG-элементы, его составляющие, отдльными файлами (чтобы смогли его повторить)

Спасибо за внимание!