Руководство по настройке графического интерфейса пользователя (GUI Customization Guide)

Материал из Ren'Py Wiki
Перейти к навигации Перейти к поиску

В Ren'Py есть система графического интерфейса пользователя, которая (мы надеемся) выглядит привлекательно в исходном состоянии, её можно немного настроить и при необходимости полностью заменить. На этой странице объясняется, как выполнить простую и промежуточную настройку GUI.

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

Предполагается, что вы используете новый стиль графического интерфейса пользователя Ren'Py, содержится в файле gui.rpy. Устаревший GUI (который использует файл screens.rpy) следует рассматривать, как расширенную настройку графического интерфейс для целей данного руководства.

Простая настройка GUI (Simple GUI Customization)[править | править код]

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


◇ Изменение размера и цвета[править | править код]

Самое простое, что можно изменить в графическом интерфейсе – изменить его размер и цвет. Ren'Py предложит вам сделать этот выбор при первом создании проекта, но опция «Изменить/Обновить GUI» в Ren'Py Launcher позволит вам изменить свой выбор.

При изменении GUI через Ren'Py Launcher, Ren'Py предложит вам просто изменить панель запуска или обновить файл gui.rpy. Оба варианта перезапишут большинство файлов изображений, а перезапись gui.rpy избавит вас от изменений в этом файле.

В результате вы, вероятно, захотите сделать это перед любой другой настройкой.

Ren'Py запросит выбрать разрешение по умолчанию для вашего проекта, а затем и цветовую схему. После выбора Ren'Py обновит GUI, чтобы он соответствовал вашим выборам.


◇ Options.rpy[править | править код]

В options.rpy есть несколько переменных, используемых GUI:

config.name
Строка, задающая игре удобное для вас название. Используется в качестве заголовка окна, так и во всём GUI, где требуется название игры.
gui.show_name
Чтобы скрыть название и номер версии в главном меню, необходимо установить значение False. Данная переменная нужна, потому что название и версия встроены в изображение главного меню.
config.version
Строка, указывающая версию игры. Отображается для пользователя в разных местах.
gui.about
Дополнительный текст, добавляемый на экран about. Если вы хотите добавить несколько абзацев титров, \n\n можно использоваться для разделения абзацев.

Вот пример определения вышеуказанных переменных с помощью оператора define:

define config.name = _("Традиционная старшая школа")

define gui.show_name = True

define config.version = "1.0"

define gui.about = _("Создано PyTom.\n\nФоны старшей школы созданы Mugenjohncel.")

Для удобства, возможно, имеет смысл определить gui.about, используя строку, заключенную в тройные кавычки, так как в этом случае соблюдается определение конца строки:

define gui.about = _("""\
Создано PyTom.

Фоны старшей школы созданы Mugenjohncel.""")


◇ Фоновые изображения игрового и главного меню[править | править код]

Изображения, используемые графическим интерфейсом пользователя, можно найти в каталоге game/gui, который можно открыть, выбрав в Ren'Py Launcher «Открыть папку: gui». Соответствующие файлы:

gui/main_menu.png
Файл, содержащий изображение, используемое в качестве фона для всех экранов главного меню.
gui/game_menu.png
Файл, содержащий изображение, используемое в качестве фона для всех экранов игрового меню.
Главное меню с заменой только gui/main_menu.png
Экран «О...» может быть частью игрового меню (используя gui/game_menu.png в качестве фона) или главного меню (используя gui/main_menu.png в качестве фона). Одно и то же изображение могут использовать оба меню.



◇ Иконка окна[править | править код]

Иконка окна – значок, отображаемый запущенным приложением (в таких местах, как панель задач Windows и док-станция Macintosh).

Иконку окна можно изменить, заменив gui/window_icon.png.

Обратите внимание, что это изменяет только значок, используемый запущенной игрой. Чтобы изменить значок, используемый файлами Windows.exe и приложениями Macintosh, ознакомитесь с документацией по сборке.

Промежуточная настройка GUI (Intermediate GUI Customization)[править | править код]

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

Многие из этих изменений связаны с редактированием переменных в gui.rpy. Например, чтобы увеличить размер шрифта диалога, найдите данную строку

define gui.text_size = 22

и увеличьте или уменьшите её значение, например так:

define gui.text_size = 20

Обратите внимание, что значения по умолчанию часто отличаются от значений, приведенных в этой документации. Значения по умолчанию могут быть изменены в зависимости от размера и цвета, выбранных для игры, а значения в этом разделе являются примером обширной настройки графического интерфейса пользователя. Лучше искать в gui.rpy информацию об определении и переменной, о которых идёт речь, используя, например, такую формулировку – define gui.text_size.

Некоторые из приведённых ниже настроек частично или полностью влияют на файлы изображений. В результате изменения вступают в силу только при обновлении самих файлов изображений, что можно сделать, выбрав «Изменить/Обновить GUI» в Ren'Py Launcher и сообщив ему о необходимости восстановления файлов изображений. Но учтите, что это приведёт к перезаписи всех файлов изображений, которые вы уже изменили.

Возможно, вы захотите подождать, пока ваша игра будет почти завершена, прежде чем настраивать gui.rpy таким образом. Пока старый gui.rpys будет работать в более новых версиях Ren'Py, более новый gui.rpys может иметь функции и исправления, которых нет в старых версиях. Ранняя настройка GUI может затруднить использование таких улучшений.


◇ Диалог[править | править код]

Есть ряд относительно простых настроек, которые можно выполнить, чтобы изменить способ отображения диалога для игрока. Первое – изменение текстового поля.

gui/textbox.png
Этот файл содержит фон текстового окна, отображаемого как часть экрана say. Хотя это должна быть полная ширина игры, текст отображается только в центральных 60% экрана, с 20% границей с каждой стороны.


Кроме того, существует ряд переменных, которые можно настроить для изменения диалога:

define gui.text_color = "#402000"

Устанавливает цвет текста диалога.

define gui.default_font = "ArchitectsDaughter.ttf"

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

define gui.text_size = 33

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

define gui.name_text_size = 45

Устанавливает размер имён персонажей.

define gui.textbox_height = 278

Высота текстового поля. Должно быть такой же высоты, как высота файла gui/textbox.png.


По умолчанию метка имени персонажа использует цвет акцента. Цвет может быть легко изменён при определении персонажа:

define e = Character("Эйлин", who_color="#104010")
Пример изображения текстового поля.
Диалог настраивается с помощью изображения текстового поля и параметров переменной, указанных выше.



В дополнение к простым настройкам, приведенным выше, есть несколько способов управления тем, как диалог представлен игроку.

Текстовое окно (или окно)
Окно, в котором отображается диалог. В дополнение к изменению gui/textbox.png, следующие переменные управляют отображением текстового поля.
Имя и окно с именем персонажа
Имя персонажа помещается в фрейм, который использует gui/namebox.png в качестве фона. Кроме того, существует ряд переменных, управляющих представлением имени. Окно с именем персонажа отображается только в том случае, если у говорящего персонажа есть имя (пустое имя, например " ", считается).
define gui.name_xpos = 360
define gui.name_ypos = 0
Горизонтальные и вертикальные положения имени и окна с именем персонажа. Обычно это количество пикселей с левой или верхней стороны текстового окна. Установка переменной на 0.5 центрирует имя в текстовом поле (см. ниже). Эти числа также могут быть отрицательными, например, установка gui.name_ypos в -22 приводит к тому, что он помещает его на 22 пикселя выше верхней части текстового окна.
define gui.name_xalign = 0.0
Горизонтальное выравнивание имени персонажа. Может быть 0.0 для выравнивания по левому краю, 0.5 – по центру и 1.0 – по правому краю. Почти всегда 0.0 или 0.5. Используется как для установки окна с именем персонажа относительно gui.name_xpos, так и для выбора стороны окна с именем, которая выровнена с xpos.
define gui.namebox_width = None
define gui.namebox_height = None
define gui.namebox_borders = Borders(5, 5, 5, 5)
define gui.namebox_tile = False
Эти переменные управляют отображением фрейма, содержащего окно с именем персонажа.
Диалог
define gui.dialogue_xpos = 402
define gui.dialogue_ypos = 75
Горизонтальное и вертикальное положение реального диалога. Обычно это количество пикселей с левой или верхней стороны текстового поля. Установка переменной на 0.5 центрирует диалог в текстовом поле (см. ниже).
define gui.dialogue_width = 1116
Задаёт максимальную ширину строки диалога в пикселях. Когда диалог достигнет этой ширины, он будет переноситься Ren'Py по словам.
define gui.dialogue_text_xalign = 0.0
Горизонтальное выравнивание текста диалога. 0.0 выравнивается по левому краю, 0.5 – по центру, а 1.0 – по правому краю.


Примеры
Чтобы центрировать имя персонажа, используйте:
define gui.name_xpos = 0.5
define gui.name_xalign = 0.5
Чтобы центрировать текст диалога, используйте:
define gui.dialogue_xpos = 0.5
define gui.dialogue_text_xalign = 0.5
Наш пример игры использует эти операторы для настройки центрированного окна с именем персонажа:
define gui.namebox_width = 300
define gui.name_ypos = -22
define gui.namebox_borders = Borders(15, 7, 15, 7)
define gui.namebox_tile = True
Пример изображения gui/namebox.png
Пример игры, настроенной с помощью приведенных выше настроек.



◇ Меню выбора[править | править код]

Экран choice используется оператором menu для отображения выбора игроку. Опять же, есть несколько относительно простых настроек, которые можно выполнить на экране выбора. Во первых это два файла изображений:

gui/button/choice_idle_background.png
Это изображение используется в качестве фона кнопок выбора, которые не сфокусированы.
gui/button/choice_hover_background.png
Это изображение используется в качестве фона кнопок выбора, которые сфокусированы.

По умолчанию текст помещается в центральные 75% этих изображений.


Также есть несколько переменных, которые управляют цветом текста в кнопках выбора:

define gui.choice_button_text_idle_color = '#888888'

Цвет, используемый для текста не сфокусированных кнопок выбора.

define gui.choice_text_hover_color = '#0066cc'

Цвет, используемый для текста сфокусированных кнопок выбора.


Их должно быть достаточно для простой настройки, где размер изображений не нужно менять. Для более сложных настроек ознакомьтесь с разделом о кнопках ниже.

Пример изображения gui/button/idle_background.png
Пример экрана выбора, настроенного с использованием изображений и переменных настроек, приведённых выше.
Пример изображения gui/button/choice_hover_background.png



◇ Наложение изображений[править | править код]

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

gui/overlay/main_menu.png
Наложение, используемое экраном главного меню.
gui/overlay/game_menu.png
Наложение, используемое экранами, похожими на игровое меню, включая загрузку, сохранение, настройки, информацию о, справку и т.д. Это наложение выбирается данным экраном и используется даже в главном меню.
gui/overlay/confirm.png
Наложение, используемое на экране подтверждения для затемнения фона.


Вот пара примеров наложенных изображений, и как выглядит игра с добавленными наложенными изображениями.

Пример изображения gui/overlay/main_menu.png
Пример изображения gui/overlay/game_menu.png
Главное меню после смены наложений.
Игровое меню после смены наложений.



◇ Цвета, шрифты и размеры шрифтов[править | править код]

Существует ряд переменных GUI, которые можно использовать для изменения цвета, шрифта и размера текста.

Эти переменные, как правило, должны быть установлены в шестнадцатеричные цветовые коды, которые представляют собой строки вида "#rrggbb" (или "#rrggbbaa" для указания альфа-компонента), аналогично цветовым кодам, используемым веб-браузерами. Например, "#663399" – код для фиолетового оттенка. В интернете есть множество инструментов, позволяющих создавать цветовые коды HTML, такие как этот.


В дополнение к gui.text_color, gui.choice_idle_color и gui.choice_hover_color, описанным выше, существуют следующие переменные:

define gui.accent_color = '#000060'

Цвет акцента используется во многих местах GUI, включая заголовки и метки.

define gui.idle_color = '#606060'

Цвет, используемый для большинства кнопок, когда они не сфокусированы или не выбраны.

define gui.idle_small_color = '#404040'

Цвет, используемый для мелкого текста (например, даты и названия ячейки для сохранения, а также кнопок быстрого меню), когда на него не наведён указатель мыши. Часто этот цвет должен быть немного светлее или темнее, чем idle_color, чтобы компенсировать меньший размер шрифта.

define gui.hover_color = '#3284d6'

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

define gui.selected_color = '#555555'

Цвет, используемый текстом выбранных кнопок. Имеет приоритет над цветами hover и idle.

define gui.insensitive_color = '#8888887f'

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

define gui.interface_text_color = '#404040'

Цвет, используемый статическим текстом в интерфейсе игры, например текстом на экранах help и about.

define gui.muted_color = '#6080d0'
define gui.hover_muted_color = '#8080f0'

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


Помимо gui.text_font, следующие переменные выбирают шрифты, используемые для текста. Шрифты также должны быть размещены в директории игры.
define gui.interface_text_font = "ArchitectsDaughter.ttf"

Шрифт, используемый для текста элементов пользовательского интерфейса, таких как главное и игровое меню, кнопки и т.д.

define gui.glyph_font = "DejaVuSans.ttf"

Шрифт, используемый для определенных глифов, таких как глифы в виде стрелки, используемые индикатором пропуска. DejaVuSans является разумным выбором для этих глифов по умолчанию и автоматически включается в каждую игру, созданную на Ren'Py.


Помимо gui.text_size и gui.name_text_size, следующие переменные управляют размером текста:
define gui.interface_text_size = 36

Размер статического текста в пользовательском интерфейсе игры и размер текста кнопки по умолчанию в интерфейсе игры.

define gui.label_text_size = 45

Размер меток разделов в пользовательском интерфейсе игры.

define gui.notify_text_size = 24

Размер текста уведомления.
define gui.title_text_size = 75
Размер названия игры.
Меню игры после настройки цветов текста, шрифтов и размеров.



◇ Границы[править | править код]

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

Границы задаются отображаемому объекту Frame(). Frame() берёт изображение и делит его на девять частей – четыре угла, четыре стороны и центр. Углы всегда остаются одинакового размера, левая и правая стороны растягиваются вертикально, верхняя и нижняя стороны растягиваются горизонтально, а центр растягивается в обоих направлениях.

Объект Borders задаёт размер каждой из границ в левом, верхнем, правом и нижнем направлении. Таким образом, если следующее изображение границы используется:

Borders.png


вместе со следующими границами:

Borders(40, 40, 40, 40)

один из возможных результатов это:

Borders1.png


Размер фона меняется в такой же степени, что и дочерний элемент.


Объекту Border также может быть задан отступ, в том числе отрицательный, который заставляет дочерний элемент перекрывать границы. Например, эти границы:

Borders(40, 40, 40, 40, -20, -20, -20, -20)

позволяют дочернему элементу перекрывать стороны. Обратите внимание, что из-за этого перекрытия результат меньше, поскольку сами границы теперь занимают меньше места.

Borders2.png



Границы также могут быть выложены плиткой, а не масштабированы. Это осуществляется с помощью переменных и выдаёт следующий результат.

Borders3.png


Эти примеры изображений немного неказистые, так как нам нужно показать, что как это работает. На практике эта система может дать весьма приятные результаты. Это тот случай, когда отображаемый объект Frame используется в фона окна фрейма, содержащего компоненты пользовательского интерфейса.

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

gui/frame.png
Изображение используется в качестве фона фрейма.

И второе, настраивая переменные:
define gui.frame_borders = Borders(15, 15, 15, 15)

Границы, применяемые к фрейму.

define Цветной текст = Borders(60, 60, 60, 60)

Границы, применяемые к фрейму, используемому в экране confirm.

define Цветной текст = True

Если принимает значение True, то стороны и центр экрана confirm будут выложены плиткой. Если принимает значение False, они масштабируются.
Пример изображения gui/frame.png
Экран confirm после применения настроек, описанных выше.



◇ Кнопки[править | править код]

Пользовательский интерфейс Ren'Py включает большое количество кнопок, которые бывают разных размеров и используются для различных целей. Различные типы кнопок:

button
Обычная кнопка. Используется для навигации в пользовательском интерфейсе.
choice_button
Кнопка, используемая для выбора в игровом меню.
quick_button
Кнопка, отображаемая в игре, предназначенная для быстрого доступа к игровому меню.
navigation_button
Кнопка, используемая в главном и игровом меню для навигации между экранами, а также для запуска игры.
page_button
Кнопка, используемая для переключения между страницами на экранах загрузки и сохранения.
slot_button
Кнопки, представляющие собой слоты файлов и содержащие миниатюру, время сохранения и необязательное имя сохранения. Они более подробно описаны ниже.
radio_button
Кнопка, используемая для настройки нескольких вариантов на экране preferences.
check_button
Кнопка, используемая для переключения настроек на экране preferences.
test_button
Кнопка, используемая для проверки воспроизведения звука на экране preferences. Должна быть той же высоты, что и горизонтальный слайдер.
help_button
Кнопка, используемая для выбора того, какую помощь игрок хочет получить.
confirm_button
Кнопка используемая на экране confirm, для выбора кнопки Да или Нет.
nvl_button
Кнопка, используемая в меню выбора NVL-режима.


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

gui/button/idle_background.png
Фоновое изображение, используемое не сфокусированными кнопками.
gui/button/hover_background.png
Фоновое изображение, используемое сфокусированными кнопками.
gui/button/selected_idle_background.png
Фоновое изображение, используемое кнопками, которые выбраны, но не сфокусированы. Этот параметр необязателен и используется вместо idle_background.png, если оно есть.
gui/button/selected_hover_background.png
Фоновое изображение, используемое кнопками, которые выбраны, но не сфокусированы. Этот параметр необязателен и используется вместо hover_background.png, если оно есть.


Для каждого типа кнопки можно задать более конкретные фоны, добавив к нему префикс типа кнопки. Например, gui/button/check_idle_background.png используется в качестве фона кнопок проверки, которые не сфокусированы.

Четыре файла изображения используются в качестве переднего плана на кнопках radio и check, чтобы указать, выбрана опция или нет.

gui/button/check_foreground.png, gui/button/radio_foreground.png
Эти изображения используются, когда кнопка radio или check не выбрана.
gui/button/check_selected_foreground.png, gui/button/radio_selected_foreground.png
Эти изображения используются, когда кнопка radio или check выбрана.


Следующие переменные задают различные свойства кнопок:
define gui.button_width = None
define gui.button_height = 64

Ширина и высота кнопки в пикселях. Если принимает значение None, размер кнопки определяется автоматически на основе размера текста внутри кнопки и границ, указанных ниже.

define gui.button_borders = Borders(10, 10, 10, 10)

Границы, окружающие кнопку слева, сверху, справа, снизу.

define gui.button_tile = True

Если принимает значение True, стороны и центр фона кнопки будут выложены плиткой для увеличения или уменьшения их размера. Если принимает значение False, то масштабируются стороны и центр.

define gui.button_text_font = gui.interface_font
define gui.button_text_size = gui.interface_text_size

Шрифт и размер текста кнопки.

define gui.button_text_idle_color = gui.idle_color
define gui.button_text_hover_color = gui.hover_color
define gui.button_text_selected_color = gui.accent_color
define gui.button_text_insensitive_color = gui.insensitive_color

Цвет текста кнопки в различных состояниях.

define gui.button_text_xalign = 0.0

Горизонтальное выравнивание текста кнопки. 0.0 выравнивается по левому краю, 0.5 – по центру, а 1.0 – по правому краю.

define gui.button_image_extension = ".png"

Расширение для изображений кнопок. Это можно изменить на .webp, чтобы использовать изображения кнопок с расширением .webp вместо .png.


Эти переменные могут иметь префикс с типом кнопки, чтобы настроить свойство для определенного типа кнопки. Например, gui.choice_button_text_idle_color настраивает цвет кнопки выбора в режиме ожидания.


Например, мы настраиваем эти переменные в нашем примере игры.
define gui.navigation_button_width = 290

Увеличивает ширину навигационных кнопок.

define gui.radio_button_borders = Borders(40, 10, 10, 10)
define gui.check_button_borders = Borders(40, 10, 10, 10)

Увеличивает ширину границ кнопки radio и check, оставляя дополнительное место слева для галочки.


Вот пример того, как можно настроить экран игры.

Пример изображения gui/button/idle_background.png
Пример изображения gui/button/hover_background.png
Изображение, которое можно использовать в качестве gui/button/check_foreground.png и gui/button/radio_foreground.png Изображение, которое можно использовать в качестве gui/button/check_selected_foreground.png и gui/button/radio_selected_foreground.png
Экран настроек с примененными настройками, описанными в этом разделе.



◇ Кнопки слотов сохранения[править | править код]

На экранах save и load используются кнопки слотов, которые представляют собой миниатюры и информацию о том, когда файл был сохранён. Следующие переменные весьма полезны, когда речь заходит о настройке размера слотов сохранения.
define gui.slot_button_width = 414
define gui.slot_button_height = 309

Ширина и высота кнопки сохранения слота.

define gui.slot_button_borders = Borders(15, 15, 15, 15)

Границы, применяемые к каждому слоту сохранения.

define config.thumbnail_width = 384
define config.thumbnail_height = 216

Ширина и высота сохраняемых миниатюр. Обратите внимание, что они находятся в пространстве имён config, а не в пространстве имён gui. Они не вступают в силу до тех пор, пока файл не будет сохранён и загружен.

define DarkBlue = 3
define gui.file_slot_rows = 2

Количество столбцов и строк в сетке слотов сохранения.


Есть фоновые изображения, используемые для слотов сохранения.

gui/button/slot_idle_background.png
Изображение используется для фона слотов сохранения, которые не сфокусированы.
gui/button/slot_hover_background.png
Изображение используется для фона слотов сохранения, которые сфокусированы.

Используя их, мы получим:

Пример изображения gui/button/slot_idle_background.png
Пример изображения gui/button/slot/slot_hover_background.png
Экран сохранения после применения настроек, приведенных в этом разделе.



◇ Ползунки[править | править код]

Ползунки – тип панели, которая используется на экране preference, чтобы позволить игроку корректировать настройки с большим количеством значений. По умолчанию GUI использует только горизонтальные ползунки, но игра также может использовать вертикальные ползунки.

Ползунки настраиваются со следующими изображениями:

gui/slider/horizontal_idle_bar.png, gui/slider/horizontal_hover_bar.png, gui/slider/vertical_idle_bar.png, gui/slider/vertical_hover_bar.png
Изображения, используемые для вертикальных и неактивных фонов панели в режиме ожидания и наведения.
gui/slider/horizontal_idle_thumb.png, gui/slider/horizontal_hover_thumb.png, gui/slider/vertical_idle_thumb.png, gui/slider/vertical_hover_thumb.png
Изображения используются для бегунков подвижной части панели.


Также используются следующие переменные:
define gui.slider_size = 64

Высота горизонтальных ползунков и ширина вертикальных ползунков.

define gui.slider_tile = True

Если принимает значение True, фрейм, содержащий панель ползунка, выложен плиткой. Принимает значение False, если он масштабируется.

define gui.slider_borders = Borders(6, 6, 6, 6)
define gui.vslider_borders = Borders(6, 6, 6, 6)

Границы, используемые с Frame, содержащим изображение панели.

Вот пример того, как мы настраиваем горизонтальный ползунок.

Пример изображения gui/slider/horizontal_idle_bar.png
Пример изображения gui/slider/horizontal_hover_bar.png
Пример изображения gui/slider/horizontal_idle_thumb.png Пример изображения gui/slider/horizontal_hover_thumb.png
Экран настроек после применения настроек, приведённых в этом разделе.



◇ Полосы прокрутки[править | править код]

Полосы прокрутки – полосы, которые используются для прокрутки окон просмотра. В GUI наиболее очевидным местом использования полосы прокрутки является экран history, но вертикальные полосы прокрутки можно использовать и на других экранах.

Ползунки настраиваются со следующими изображениями:

gui/scrollbar/horizontal_idle_bar.png, gui/scrollbar/horizontal_hover_bar.png, gui/scrollbar/vertical_idle_bar.png, gui/scrollbar/vertical_hover_bar.png
Изображения, используемые для вертикальных и неактивных фонов панели в режиме ожидания и наведения.
gui/scrollbar/horizontal_idle_thumb.png, gui/scrollbar/horizontal_hover_thumb.png, gui/scrollbar/vertical_idle_thumb.png, gui/scrollbar/vertical_hover_thumb.png
Изображения, используемые для бегунков подвижной части панели.


Также используются следующие переменные:
define gui.scrollbar_size = 24

Высота горизонтальных полос прокрутки и ширина вертикальных полос прокрутки.

define gui.scrollbar_tile = True

Если принимает значение True, фрейм, содержащий панель полосы прокрутки, выложен плиткой. Принимает значение False, если он масштабируется.

define gui.scrollbar_borders = Borders(10, 6, 10, 6)
define gui.vscrollbar_borders = Borders(6, 10, 6, 10)

Границы, используемые с Frame, содержащим изображение панели.

define gui.unscrollable = "hide"

Определяет, что делать, если панель не прокручивается. "hide" скрывает панель, в то время как значение None отображает.


Вот пример того, как мы настраиваем вертикальную полосу прокрутки.

Пример изображения gui/scrollbar/vertical_idle_bar.png Пример изображения gui/scrollbar/vertical_hover_bar.png Пример изображения gui/scrollbar/vertical_idle_thumb.png Пример изображения gui/scrollbar/vertical_hover_thumb.png
Экран history после применения настроек, приведенных в этом разделе.



◇ Панели[править | править код]

Простые старые панели используются для отображения номера игроку. Они не используются в GUI, но могут использоваться на экранах, определяемых разработчиком.

Панель можно настроить, отредактировав следующие изображения:

gui/bar/left.png, gui/bar/bottom.png
Изображения, используемые для заполнения разделов горизонтальных и вертикальных панелей.
gui/bar/right.pbg, gui/bar/top.png
Изображения, используемые для заполнения разделов горизонтальных и вертикальных панелей.


Также есть обычные переменные, управляющие панелями:
define gui.bar_size = 64

Высота горизонтальных панелей и ширина вертикальных панелей.

define gui.bar_tile = False

Если принимает значение True, изображения панелей выложены плиткой. Если значение False, изображения линейно масштабируются.

define gui.bar_borders = Borders(10, 10, 10, 10)
define gui.vbar_borders = Borders(10, 10, 10, 10)

Границы, используемые с Frame, содержащим изображение панели.


Вот пример того, как мы настраиваем горизонтальные панели.

Пример изображения gui/bar/left.png
Экран, который мы определили, чтобы привести пример с панелями.
Пример изображения gui/bar/right.png



◇ Экраны skip и notify[править | править код]

На обоих экранах skip и notify отображаются фреймы с сообщениями в них. Оба используют настраиваемые фоновые изображения фрейма:

gui/skip.png
Фон индикатора пропуска.
gui/notify.png
Фон экрана notify.

Переменные, управляющие ими:
define gui.skip_frame_borders = Borders(24, 8, 75, 8)

Границы рамки, используемой экраном skip.

define gui.notify_frame_borders = Borders(24, 8, 60, 8)

Границы рамки, используемой экраном notify.

define gui.skip_ypos = 15

Вертикальное положение индикатора пропуска в пикселях от верхней части окна.

define gui.notify_ypos = 68

Вертикальное положение уведомляющего сообщения в пикселях от верхней части окна.


Вот пример настройки экранов skip и notify:

Пример изображения gui/skip.png
Экраны skip и notify в действии.
Пример изображения gui/notify.png



◇ Экран history[править | править код]

Есть несколько переменных, которые управляют тем, как отображается экран history:

define config.history_length = 250

Количество блоков диалога, которые Ren'Py сохранит в истории.

define gui.history_height = 210

Высота записи истории в пикселях. Это может быть значение None, чтобы позволить высоте записи истории изменяться в ущерб производительности - возможно, потребуется значительно снизить config.history_length, если значение равно None.

define gui.history_name_xpos = 0.5
define gui.history_text_xpos = 0.5

Горизонтальные положения метки имени и текста диалога. Это может быть количество пикселей с левой стороны записи истории или 0.5 от центра.

define gui.history_name_ypos = 0
define gui.history_text_ypos = 60

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

define gui.history_name_width = 225
define gui.history_text_width = 1110

Ширина метки имени и текста диалога в пикселях.

define gui.history_name_xalign = 0.5
define gui.history_text_xalign = 0.5

Управляет выравниванием текста и стороной текста, которая выровнена с xpos. 0.0 выравнивается по левому краю, 0.5 – по центру, 1.0 – по правому краю.
Экран history настраивается с помощью настроек, приведенных выше.



◇ Экран nvl[править | править код]

На экране nvl отображается диалог в NVL-режиме. Существует несколько способов его настройки. Первый – настроить фоновое изображение в NVL-режиме:

gui/nvl.png
Фоновое изображение, используемое в NVL-режиме. Должно быть того же размера, что и окно игры.


Существует также ряд переменных, которые используются для настройки способа отображения текста в NVL-режиме:
define gui.nvl_borders = Borders(0, 15, 0, 30)

Границы вокруг фона NVL-режима. Поскольку фон не является фреймом, он используется только для дополнения NVL-режима, чтобы предотвратить его прижатие к краям экрана.

define gui.nvl_height = 173

Высота одной записи в NVL-режиме. Установка фиксированной высоты позволяет использовать NVL-режим без разбиения на страниц, показывая фиксированное количество записей одновременно. Установка этого значения на None позволяет элементам иметь переменный размер.

define gui.nvl_spacing = 15

Интервал между записями, когда gui.nvl_height принимает значение None, и интервал между кнопками меню в NVL-режиме.

define gui.nvl_name_xpos = 0.5
define gui.nvl_text_xpos = 0.5
define gui.nvl_thought_xpos = 0.5

Расположение имён персонажей, текста диалога и текста мысли/повествования относительно левой стороны записи. Может быть количество пикселей или 0.5 для представления центра записи.

define gui.nvl_name_xalign = 0.5
define gui.nvl_text_xalign = 0.5
define gui.nvl_thought_xalign = 0.5

Выравнивание текста. Позволяет управлять как выравниванием текста, так и стороной текста, которая помещается в xpos. Это может быть 0.0 для левого, 0.5 для центра и 1.0 для правого.

define gui.nvl_name_ypos = 0
define gui.nvl_text_ypos = 60
define gui.nvl_thought_ypos = 0

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

define gui.nvl_name_width = 740
define gui.nvl_text_width = 740
define gui.nvl_thought_width = 740

Ширина каждого вида текста в пикселях.

define gui.nvl_button_xpos = 0.5
define gui.nvl_button_xalign = 0.5

Положение и выравнивание кнопок меню NVL-режима.


По умолчанию Ren'Py не использует NVL-режим. Он должен вызываться с помощью персонажей NVL-режима и путём определения нескольких переменных в script.rpy:

define e = Character("Эйлин", kind=nvl)
define narrator = nvl_narrator
define menu = nvl_menu


Вот пример экрана NVL, настроенного с помощью приведенных выше настроек.

Пример изображения gui/nvl.png
Пример игры, настроенной с помощью приведенных выше настроек.



◇ Текст[править | править код]

Большинство текстов можно настроить с помощью переменных GUI. Используемые переменные имеют вид:

define gui.kind_text_font
Если присутствует, шрифт, используемый для текста.
define gui.kind_text_size
Если присутствует, размер текста.
define gui.kind_text_color
Если присутствует, цвет текста.

Таким же образом можно задать и другие свойства стиля текста. Например, gui.kind_text_outlines задаёт свойство outlines.


Префикс типа может быть опущен, и в этом случае он настраивает внешний вид текста по умолчанию. Иначе это может быть один из типом кнопок выше или один из:

interface
Для текста по умолчанию во внеигровом интерфейсе.
input
Для текста в виджете ввода текста.
input_prompt
Для части запроса ввода текста.
label
Для декоративных меток.
prompt
Для подтверждения подсказки задайте игроку вопрос.
name
Для имен персонажей.
dialogue
Для диалога.
notify
Для текста уведомления.

Например данный кож:

define gui.dialogue_text_outlines = [ (0, "#00000080", 2, 2) ]

создаёт тень справа и снизу от текста диалога.


◇ Перевод и переменные графического интерфейса пользователя[править | править код]

Пространство имён gui является особенным, так как оно сохраняется после фазы инициализации, но перед запуском любых блоков translate python. Это позволяет изменить любую переменную графического интерфейса пользователя в блоке translate python для размещения второго языка. Например, следующий код изменяет шрифт и размер текста по умолчанию:

translate japanese python:
    gui.text_font = "MTLc3m.ttf"
    gui.text_size = 24

Есть одна проблема, о которой должны знать переводчики, и это то, что в некоторых местах в gui.rpy одной переменной присваивается значение другой. Например, по умолчанию gui.rpy имеет:

define gui.interface_text_font = "DejaVuSans.ttf"

а потом:

define gui.button_text_font = gui.interface_text_font

Поскольку оба эти оператора выполняются до запуска любого блока translate, необходимо изменить обе переменные.

translate japanese python::

    define gui.interface_text_font = "MTLc3m.ttf"
    define gui.button_text_font = "MTLc3m.ttf"

Если второй оператор отсутствует, шрифт DejaVuSans всё равно будет использоваться.

Расширенная настройка (Advanced Customization)[править | править код]

Более расширенная настройка возможна путем настройки файла screens.rpy, вплоть до удаления всего содержимого файла и замены его чем-то своим. Вот несколько мест для начала.


◇ Стили[править | править код]

Стили и свойства стиля управляют отображением отображаемых элементов. Чтобы узнать, какой стиль использует отображаемый объект, наведите на него курсор мыши и зажмите Shift+I. Это вызовет проверку стиля, которая показывает имена стилей. Как только имя стиля известно, можно использовать оператор style для его настройки.

Например, предположим, что мы сошли с ума при написании документации по графическому интерфейсу пользователя и хотим добавить ярко-красный контур к тексту диалога. Мы можем навести курсор на текст и нажать Shift+I, чтобы узнать, что используемый стиль называется say_dialogue. Затем мы можем добавить (в конец screens.rpy, или где-то в options.rpy) оператор style:

style say_dialogue:
    outlines [ (1, "#f00", 0, 0 ) ]

С помощью операторов style можно выполнить огромное количество настроек.


◇ Экран navigation[править | править код]

Следующим уровнем настройки – модификация экранов. Наиболее важная документация по экранам находится в разделах «Экраны и язык экрана (Screens and Screen Language)» и «Экранные действия, значения и функции (Screen Actions, Values, and Functions)».

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

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:

            textbutton _("Начать") action Start()

            textbutton _("Пролог") action Start("prologue")

        else:

            textbutton _("Кодекс") action ShowMenu("codex")

            textbutton _("История") action ShowMenu("history")

            textbutton _("Сохранение") action ShowMenu("save")

        textbutton _("Загрузка") action ShowMenu("load")

        textbutton _("Настройки") action ShowMenu("preferences")

        if _in_replay:

            textbutton _("Завершить воспроизведение") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Главное меню") action MainMenu()

        textbutton _("Об игре") action ShowMenu("about")

        textbutton _("Экстра") action ShowMenu("extras")

        if renpy.variant("pc"):

            textbutton _("Помощь") action ShowMenu("help")

            textbutton _("Выход") action Quit(confirm=not main_menu)

Мы добавляем доступ к экрану prologue из главного меню, экрану codex из меню игры и экрану extras из обоих меню.


◇ Экран меню игры[править | править код]

Кроме того, можно создавать свои экраны меню игры. Эти экраны могут использовать экран game_menu для предоставления заголовка и прокручиваемого окна просмотра. Минимальный экран игрового меню, определённый пользователем:

screen codex():

    tag menu

    use game_menu(_("Codex"), scroll="viewport"):

        style_prefix "codex"

        has vbox:
            spacing 20

        text _("{b}Машиностроение:{/b} Где мы учимся создавать такие вещи, как ракеты и бомбы.")

        text _("{b}Гражданское строительство:{/b} Где мы учимся строить цели.")

Очевидно, что функциональный кодекс должен быть более сложным, чем этот.

Обратите внимание на строку tag menu. Эта строка важна, так как она скрывает другие экраны меню при отображении кодекса. Без неё было бы трудно переключаться на другие экраны меню и обратно.


◇ Экран ctc (Нажать для продолжения)[править | править код]

Экран, который мы обычно ожидаем добавить – экран "нажмите, чтобы продолжить". Это экран, который отображается после завершения отображения текста. Вот простой пример:

screen ctc():

    frame:
        at ctc_appear
        xalign .99
        yalign .99

        text _("(Нажать для продолжения)"):
            size 18

transform ctc_appear:
    alpha 0.0
    pause 5.0
    linear 0.5 alpha 1.0

Этот конкретный экран ctc использует преобразование, чтобы показать кадр через 5 секунд. Это хорошая идея задержать анимацию ctc на несколько секунд, чтобы дать Ren'Py время для прогнозирования и загрузки изображений.


◇ Полная замена GUI[править | править код]

Опытные разработчики могут полностью заменить некоторые или все файлы screens.rpy. При этом часть или всё содержимое файла gui.rpy может стать ненужной. Вероятно, хорошей идеей будет вызвать gui.init() для сброса стилей, но после этого разработчик может делать всё, что захочет. Обычно имеет смысл включить некоторые или все специальные экраны, чтобы игроки могли получить доступ ко всем функциям, которые предоставляет Ren'Py.

Смотрите также (See Also)[править | править код]

Для получения дополнительной информации о графическом интерфейсе пользователя смотри раздел «Расширенный графический интерфейс пользователя».

Несовместимые изменения GUI (Incompatible GUI Changes)[править | править код]

Поскольку GUI изменяется, иногда некоторые переменные меняют имя. Эти изменения вступят в силу только после обновления графического интерфейса пользователя. До тех пор игра будет продолжать использовать старые имена переменных в новом Ren'Py.

6.99.12.3[править | править код]

  • gui.default_font -> gui.text_font
  • gui.name_font -> gui.name_text_font
  • gui.interface_font -> gui.interface_text_font
  • gui.text_xpos -> gui.dialogue_xpos
  • gui.text_ypos -> gui.dialogue_ypos
  • gui.text_width -> gui.dialogue_width
  • gui.text_xalign -> gui.dialogue_text_xalign

Источник[править | править код]

Статья "GUI Customization Guide" на английском языке.


На главную страницу Официальная документация движка Вернуться к началу статьи