Интерфейс (gui) - TrueCat17/Ren-Engine GitHub Wiki

Это статья о параметрах, настраиваемых в объекте gui.
Их бОльшая часть относится к диалог-боксу и скрину Истории (прошедших реплик), остальное - отдельные параметры экранов (Загрузка, Настройки...), не являющиеся свойствами стилей из статьи со стилями экранов.

Список gui-параметров для настройки интерфейса игры: диалог-бокса, nvl-режима, окна с историей реплик, кнопок внутри-игрового меню, экранов загрузки, сохранения и настроек и т. д.

Первое, что нужно знать - ни в коем случае не стоит пытаться брать файл gui.rpy от игры на renpy и надеяться, что он будет воспринят хоть как-нибудь адекватно.
Переносите каждый параметр вручную и вдумчиво, чётко понимая, что он делает и как он назван в Ren-Engine.
Почему часть параметров имеет другие имена, будет объяснено в соответствующих разделах ниже.

Установка свойств по умолчанию производится в файле Ren-Engine/rpy/gui.rpy.
Вносить изменения для своей игры рекомендуется в файле resources/mods/common/gui.rpy.

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

align vs anchor

В названиях gui-параметров в renpy существует путаница между align и anchor. См. Введение в ScreenLang (GUI, интерфейс) для объяснений этих свойств.

Чтобы избавиться от этой путаницы, *align-параметры, на самом деле обозначающие anchor-свойства, переименованы в *anchor.

Размеры и позиции

Ren-Engine всегда позволяет игроку менять разрешение окна, из-за чего интерфейс должен быть адаптивным, т. е. адекватно выглядеть и при разрешении 640x360, и при разрешении 1920x1080.

Для этого многие параметры рекомендуется задавать не абсолютными (целыми, int) числами, а частью (float) от ширины или высоты экрана.
Свойства xpos и width (x-координата и ширина) считаются частью ширины окна, а остальные (все остальные, включая text_size и spacing) - частью высоты.
Очевидный пример: *_xpos = 0.5 от ширины окна 1920 будет 960, а от 640 - 320.

Также все подобные значения имеют похожие свойства с суффиксами _min и _max, задающие жёсткие ограничения для любых размеров экрана, и не дающие сделать нужные размеры слишком большими и/или маленькими.
Любое из этих 2 ограничительных свойств может отсутствовать или иметь значение None для своего отключения.
Напоминание: свойство может существовать, даже если вы лично его не создавали (но оно было присвоено в Ren-Engine/rpy/gui.rpy).

Цвета

*_color - цвет текста.
*_outlinecolor - цвет обводки текста (None - отключить обводку).

Цвет задаётся в форматах '#RGB', '#RRGGBB', 0xRRGGBB или даже (0xRR, 0xGG, 0xBB) для 16-ричной записи RGB-каналов и (R, G, B) для десятичной (где R, G, B от 0 до 255).
Но обычно проще всего использовать первый вариант.

Изображения

Под изображениями понимаются свойства *_bg, *_ground, *_hover и *_selected.
Эти свойства должны содержать пути к изображениям, либо результат im-функций.

Также вместо непосредственно значения можно использовать функцию (но не лямбду!), которая будет это значение возвращать.
Это может быть полезно, если ваш интерфейс должен меняться в зависимости от времени суток в игре, или по каким-либо иным соображениям.
Но в этом случае не стоит забывать про ручной вызов db.update_styles(), о котором говорилось в начале статьи.

Обозначения

Interface

dialogue_box,
dialogue_text внутри dialogue_box,
name_box внутри dialogue_box (по умолчанию с yanchor = 1.0, поэтому выше),
name_text внутри name_box,
prev_btn - кнопка для истории реплик,
next_btn - кнопка для перехода к след. реплике,
menu_btn - кнопка для вызова меню паузы.

dialogue_box

Выравнивание диалог-бокса по осям X и Y:

gui.dialogue_box_xalign = 0.5,
gui.dialogue_box_yalign = 0.99.

Размеры:

gui.dialogue_box_width = None - ширина (None - авто-рассчёт на основе других параметров),
gui.dialogue_box_height = 0.2 - высота.

Изображение для диалог-бокса:

gui.dialogue_box_bg = 'images/gui/dialogue/voice.png'.

Префиксы и суффиксы

Для имени и текста диалога:

gui.name_prefix = '',
gui.name_suffix = '',
gui.text_prefix = '',
gui.text_suffix = ''.

Для них же, но в режиме nvl (см. далее):

gui.nvl_name_prefix = '',
gui.nvl_name_suffix = ':',
gui.nvl_text_prefix = '',
gui.nvl_text_suffix = ''.

Для них же, но в окне истории диалога:

gui.history_name_prefix = '',
gui.history_name_suffix = ':',
gui.history_text_prefix = '',
gui.history_text_suffix = ''.

Самые частые примеры использования:

Добавление двоеточия после имени в nvl и/или history;
Добавление ~ и ~ в начале и конце текста для "мыслей" главного персонажа;
Добавление [ и ] в начале и конце реплик "туториала".

Для изменения этих свойств у отдельных персонажей (а не у всех сразу), можно указать нужное свойство при его создании, заменив name на who, а text на what, например:
rn = Character('Ren', nvl_what_suffix = '!')

dialogue_text

Свойства этого блока - это свойства по умолчанию для реплик всех персонажей.
Чтобы изменить их для отдельного персонажа, следует передать ему при создании нужные what_*-параметры.
Пример изменения шрифта:
rn = Character('Ren', what_font = 'Arial')

gui.dialogue_text_font = 'Calibri' - шрифт,
gui.dialogue_text_size = 0.035 - размер шрифта,
gui.dialogue_text_color = '#FF0' - цвет,
gui.dialogue_text_outlinecolor = None - цвет обводки (None - отсутствует),
gui.dialogue_text_align = 'left' - горизонтальное выравнивание текста.

Координаты текста в диалог-боксе:

gui.dialogue_text_xpos = 15,
gui.dialogue_text_ypos = 10.

Размеры текстового поля:

gui.dialogue_text_width = None - ширина (None - auto),
gui.dialogue_text_height = None - высота (None - auto).

name_box

Позиция - относительно диалог-бокса. Т. е. если xpos = ypos = 0, то name_box будет у левого-верхнего угла диалог-бокса.

Координаты:

gui.name_box_xpos = 0.1,
gui.name_box_ypos = 0.

Якорь (точка отсчёта, нулевая (x = 0, y = 0) точка объекта):

gui.name_box_xanchor = 0.0,
gui.name_box_yanchor = 1.0.

Размеры:

gui.name_box_width = 0.2 - ширина (None - auto для каждого конкретного имени),
gui.name_box_height = 0.06 - высота.

Изображение:

gui.name_box_bg = 'images/gui/dialogue/name.png'.

name_text

Свойства этого блока - это свойства по умолчанию для имён всех персонажей.
Чтобы изменить их для отдельного персонажа, следует передать ему при создании нужные who_*-параметры.
Пример изменения шрифта:
rn = Character('Ren', who_font = 'Arial')

Для обратной совместимости параметры без префикса считаются за who_*-параметры.
Т. е. следующие 2 строки делают одно и то же:
rn = Character('Ren', color = '#FFF')
rn = Character('Ren', who_color = '#FFF')

gui.name_text_font = 'Calibri' - шрифт,
gui.name_text_size = 0.04 - размер шрифта,
gui.name_text_color = '#F00' - цвет,
gui.name_text_outlinecolor = None - цвет обводки (None - отсутствует),
gui.name_text_xalign = 0.5 - выравнивание текста в нейм-боксе по оси X.
gui.name_text_yalign = 0.8 - и по оси Y.

Кнопки назад и далее

Все свойства, указанные в этом и следующем абзаце (т. е. начинающиеся с dialogue_) могут быть переданы персонажу при создании вместе с what_*- и who_*-параметрами (см. выше).

gui.dialogue_button_spacing = 5 - отступы слева и справа от этих кнопок,
gui.dialogue_button_yalign = 0.5 - выравнивание кнопок по вертикали относительно диалог-бокса.

Размеры кнопок:

gui.dialogue_button_width = 50,
gui.dialogue_button_height = 50.

Изображения кнопки назад:

gui.dialogue_prev_ground = 'images/gui/dialogue/to_prev.png' - обычное состояние,
gui.dialogue_prev_hover = None - наведена мышь (None - auto).

Изображения кнопки вперёд:

gui.dialogue_next_ground = 'images/gui/dialogue/to_next.png' - обычное состояние,
gui.dialogue_next_hover = None - наведена мышь (None - auto).

Кнопка вызова паузы

Позиция кнопки:

gui.dialogue_menu_button_xpos = 1.0,
gui.dialogue_menu_button_ypos = 0.0.

Якорь/anchor:

gui.dialogue_menu_button_xanchor = 70,
gui.dialogue_menu_button_yanchor = -20.

Размеры:

gui.dialogue_menu_button_width = 50,
gui.dialogue_menu_button_height = 50.

Изображения:

gui.dialogue_menu_button_ground = 'images/gui/dialogue/to_menu.png' - обычное состояние,
gui.dialogue_menu_button_hover = None - наведена мышь (None - auto).

Отключение кнопок

Для отключения кнопок далее/назад и кнопки меню нужно просто установить их ширину или высоту в 0:

gui.dialogue_button_width = 0 - для кнопок далее/назад,
gui.dialogue_menu_button_width = 0 - для кнопки паузы.

Настройка nvl-мода

nvl-mode interface

В режиме nvl текст отображается "стеной", а не по 1 реплике за раз, как в adv.
Вместо отдельно располагающегося имени, здесь оно находится в той же строке, что и текст реплики.
Далее под понятием "запись" будет подразумеваться сочетание имени (если есть) и текста реплики.

Включить nvl-режим: $ set_mode_nvl().
Очистить экран от предыдущих реплик: $ nvl_clear().
Включить обычный (adv) режим: $ set_mode_adv().

gui.nvl_bg = im.rect('0005') - изображение для фона,
gui.nvl_top_indent - отступ текста от верхнего края экрана.
gui.nvl_height = None - высота записи (None - auto),
gui.nvl_spacing = 10 - расстояние между записями (учитывается, если nvl_height = None).

Координаты текстового поля для имени (относительно "контейнера" записи):

gui.nvl_name_xpos = 0.25,
gui.nvl_name_ypos = 0.

Также есть свойства:

gui.nvl_name_width = 150 - ширина текстового поля,
gui.nvl_name_xalign = 1.0 - используется одновременно для xanchor и для text_align.

Аналогичные свойства для текстового поля реплики:

gui.nvl_text_xpos = 0.27,
gui.nvl_text_ypos = 0,
gui.nvl_text_width = 0.6,
gui.nvl_text_xalign = 0.0.

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

gui.nvl_thought_xpos = 0.1,
gui.nvl_thought_ypos = 0,
gui.nvl_thought_width = 0.8,
gui.nvl_thought_xalign = 0.0.

Обычно это применяется для 2 персонажей:

Для рассказчика (narrator, используемый, если не указан другой персонаж),
Для мыслей главного героя (персонаж th - от англ. thoughts, использует символ ~ для обрамления текста).

Кнопки меню выбора (см. ниже choice_button) в nvl-режиме должны располагаться под репликами.
Расположение этих кнопок должно настраиваться этими свойствами:

gui.nvl_button_xpos = 0.5
gui.nvl_button_xanchor = 0.5

Но пока что это не реализовано, и используется самое обычное меню из adv-режима.
Этот момент будет исправлен позже.

История

История чем-то похожа на nvl-режим (см. выше), поэтому многие понятия будут взяты оттуда без повторных объяснений.

Длина истории:
config.history_length = 50

gui.history_fog_alpha = 0.01 - непрозрачность "тумана" позади экрана истории,
gui.history_height = None - высота записи (None - auto),
gui.history_spacing = 5 - расстояние между записями (учитывается, если history_height = None).

Свойства, которые могут переопределяться для отдельного персонажа:

gui.history_name_bg = None - фон для имени (None - не использовать),
gui.history_name_bg_style = None - стиль для изображения фона имени.

Параметры текстового поля для имени:

gui.history_name_xpos = 150,
gui.history_name_ypos = 0,
gui.history_name_width = 150,
gui.history_name_xalign = 1.0.

Для реплик:

gui.history_text_xpos = 170,
gui.history_text_ypos = 0,
gui.history_text_width = 0.5,
gui.history_text_xalign = 0.0.

Для реплик персонажей с пустым именем:

gui.history_thought_xpos = 0.1,
gui.history_thought_ypos = 0,
gui.history_thought_width = 0.6,
gui.history_thought_xalign = 0.0.

Дополнительно:

history.title_text = '' - заголовок,
history_title - стиль для заголовка.
gui.history_bg = im.rect('#181818BB') - фон для окна истории диалогов,
history.xsize = None - ширина этого фона (None - автоматически, исходя из ширины компонентов и отступов),
history.ysize = 0.95 - высота,
history.bg_corner_sizes = 0 - размер "немасштабируемых" краёв (см. corner_sizes в статье про ScreenLang),
history.padding = [15, 10, 15, 10] # left, top, right, bottom - отступы от краёв фона.

Настройка вертикального слайдера для перемотки (None - auto):

history.slider_ground = None - изображение "пустого прогресс-бара" (None - gui.vbar_ground, см. далее),
history.slider_hover = None - "заполненного" (None - gui.vbar_hover),
history.slider_button_style = None - стиль кнопок "вверх"/"вниз",
history.slider_width = 25 - ширина слайдера (в пикселях, целое число).

Быстрое меню

Про быстрое меню есть отдельная статья.

Параметры в gui-объекте:

gui.quick_buttons_bg = im.rect('#0000') - фон для контейнера с кнопками,
gui.quick_buttons_bg_without_window = im.rect('#0000') - тоже самое, но для случая с убранным (window hide) диалог-боксом,
gui.quick_buttons_top_indent = 5 - расстояние между быстрым меню и диалог-боксом.

Внутриигровое меню выбора

gui.choice_buttons_bg = im.rect('#0001') - фон на весь экран позади кнопок.

Слоты сохранения

Save screen

gui.file_slot_cols = 4 - кол-во столбцов в экранах сохранения и загрузки,
gui.file_slot_rows = 3 - кол-во рядов ("строк"),
gui.slot_pages = 10 - кол-во страниц сохранений.
gui.slot_hover = 'images/gui/save_load/hover.png' - изображение для наложения поверх скриншота сохранения,
gui.slot_selected = 'images/gui/save_load/selected.png' - изображение для выделенного слота,
gui.slot_width = None - ширина слота (None - auto),
gui.slot_height = None - высота (None - auto),
gui.slot_image_processing = None - None или функция, принимающая изображение слота и возвращающая его после какой-либо обработки (например, после применения маски для закругления углов).

Фон

Указать общий фон для всех меню:
gui.main_bg = 'images/gui/menu/main/back.png'

Также вместо main_bg можно использовать load_bg, save_bg или prefs_bg для установки фонов непосредственно у скринов загрузки, сохранения и настроек соответственно.

Элементы экрана настроек

gui.prefs_mods_in_page = 8 - кол-во модов на 1 странице в списке модов.
gui.prefs_std_btn_params = (5, 1) - параметры по умолчанию для кнопок в настройках (отношение ширины к высоте и множитель для высоты относительно style.[prefs_]menu_button.ysize), см. статью Экран настроек.

Текст для кнопок около полоски бара:

gui.bar_minus_text = '-'
gui.bar_plus_text = '+'

Текст для кнопок "предыдущее значение" и "следующее значение" (например, в настройках времени между автосохранениями):

gui.back_button_text = '<-'
gui.next_button_text = '->'

checkbox

gui.checkbox_yes = 'images/gui/std/checkbox/yes.png' - состояние да/включено,
gui.checkbox_no = 'images/gui/std/checkbox/no.png' - состояние нет/отключено.

Полоса для слайдера

gui.bar_ground = 'images/gui/std/bar/ground.png' - "пустое" состояние,
gui.bar_hover = 'images/gui/std/bar/hover.png' - "заполненное" состояние.

Полоса для вертикального слайдера

Аналогично предыдущему абзацу - по умолчанию изображения берутся оттуда и поворачиваются на 90 градусов:

gui.vbar_ground = im.rotozoom(gui.bar_ground, 90, 1),
gui.vbar_hover = im.rotozoom(gui.bar_hover , 90, 1).

Не забудьте сделать это (обновить их) при изменении тех путей.
Хотя обычно проще оставить эти пути в стандартных значениях, просто заменив нужные изображения на свои.

Далее ->

Интерфейс (gui) - TrueCat17/Ren-Engine GitHub Wiki

align vs anchor

Размеры и позиции

Цвета

Изображения

Обозначения

dialogue_box

Префиксы и суффиксы

dialogue_text

name_box

name_text

Кнопки назад и далее

Кнопка вызова паузы

Отключение кнопок

Настройка nvl-мода

История

Быстрое меню

Внутриигровое меню выбора

Слоты сохранения

Фон

Элементы экрана настроек

checkbox

Полоса для слайдера

Полоса для вертикального слайдера

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️