Renpy как изменить разрешение проекта

В 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. Если вы хотите добавить несколько абзацев титров, nn можно использоваться для разделения абзацев.

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

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

define gui.show_name = True

define config.version = "1.0"

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

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

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

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

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

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

gui/main_menu.png

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

gui/game_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’

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

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

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

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

gui/overlay/main_menu.png

Наложение, используемое экраном главного меню.

gui/overlay/game_menu.png

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

gui/overlay/confirm.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 задаёт размер каждой из границ в левом, верхнем, правом и нижнем направлении. Таким образом, если следующее изображение границы используется:

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

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

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

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

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

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

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

Эти примеры изображений немного неказистые, так как нам нужно показать, что как это работает. На практике эта система может дать весьма приятные результаты. Это тот случай, когда отображаемый объект 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, они масштабируются.

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

Пользовательский интерфейс 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

Экран настроек с примененными настройками, описанными в этом разделе.

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

На экранах 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

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

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

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

Ползунки – тип панели, которая используется на экране 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 наиболее очевидным местом использования полосы прокрутки является экран 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 отображает.

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

Экран 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, содержащим изображение панели.

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

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

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

gui/skip.png

Фон индикатора пропуска.

gui/notify.png

Фон экрана notify.

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

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

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

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

define gui.skip_ypos = 15

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

define gui.notify_ypos = 68

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

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

◇ Экран 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 – по правому краю.

◇ Экран 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. Используемые переменные имеют вид:

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» на английском языке.

Итак, на связи Знайка. Урок первый, основы. Зафиксировано.

Сегодня в уроке:

=====

•Что такое Ren’Py?

•Как скачать Ren’Py?

•Интерфейс менеджера.

•Как создать и настроить проект?

•Скрипты, настройки, экраны.

=====

Что такое Ren’Py?

Кратко говоря, ренпай, это инди — разработка разработчика Py’Tom, в которой можно создать свою новеллу, программируя её на питоне (python).

Как скачать Ren’py?

Зайдите в браузер, наберите в поиск «скачать ренпай бесплатно». Первая ссылка — официальный сайт, на котором вы можете скачать любую существующую версию ренпая. Скачиваете заархивированный файл. (рекомендую zip). После распаковывает его, заходите в папку «renpy…(номер версии)»там ищете папку «renpy» в ней должно быть приложение ренпай. Все остальные файлы — кэш ренпая. Не в коем случае не удаляйте их!

Интерфейс программы

Перед вами фото интерфейса, настроенного на английский язык. Если хотите его поменять, а, как мне кажется, вы хотите, нажмите «preferenses» и в колонне «language» поменяйте english на russian, или другой язык. Далее объясняю всё на русском.

В колонне «Проекты» вы можете увидеть два заранее созданных проекта: «Обучение» и «Вопрос». Обучение — проект, встроенный в программу, как обучение всем функциям ренпая. Вопрос — пример новеллы с двумя концовками — хорошей и плохой. У меня среди них ещё один проект, но он мой и создал я его сам. Под списком проектов — кнопка «+ Добавить новый проект», которая, как вы поняли и позволяет добавить проект.

Слева от проектов меню управления этими самыми проектами. Там вы можете изменить скрипты, экраны и настройки. (Редактировать файл: skript.rpy/options.rpy/gui.rpy/screens.rpy) .Об этом позже. В правом нижнем углу вы найдете кнопку «Запустить проект», при помощи которой можно поиграть в новеллу. Остальные элементы меню пока нам не пригодятся.

Как создать и настроить проект?

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

Жмём «продолжить».

Далее вылезает окно «имя проекта».

Я назвал проект «tutorial1»

Жмём «продолжить»

Далее настраиваем разрешение. Так как не все устройства поддерживают 1920×1080, ренпай рекомендует использовать разрешение 1280×720.

«Продолжить».

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

После данные обрабатываются секунд 15-30.

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

Как вы видите, в списке моих проектов помимо прочих появился «tutorial1».

Поздравляю с созданием проекта!)

О настройках, скриптах и экранах.

В колонне «редактировать файл» в главном меню есть перечень файлов. Нажимаем на «все файлы сценария». Далее выбираем текстовый редактор питона. Рекомендую редактор «Editra» (хороший и лёгкий).

Сейчас расскажу про три основных элемента сценария:

Skript.rpy (скрипт)

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

Options.rpy + gui.rpy (настройки)

Сдесь настроено всё, что можно настроить. Если хотите что-то поменять, просто меняйте значение.

Screens.rpy (экраны)

Тут собраны все настройки экранов, например экрана «да/нет», или диалогового окна.

Во всём этом будем разбираться в следующих уроках)

•°•.•°•

Анонс следующего урока:

Простейший пример новеллы, переменные, текст, картинки, меню выбора и концовки.

У меня на сегодня всё! Спасибо за внимание)

1. Главная
2. Гайд по разработке