У Ren'Py є система графічного інтерфейсу користувача. яка (ми сподіваємося) виглядає привабливо "з коробки" (за замовчуванням), але завжди може бути трохи налаштована, а при необхідності і зовсім повністю замінена. На цій сторінці пояснюється, як зробити настройку GUI простого і середнього рівня.
Для отримання додаткової інформації про більш розширеної налаштування, ознайомтеся, будь ласка, з документацією по стилям (включаючи список властивостей стилю і екранів. Включає екран дії і спеціальні екрани).
Цей розділ передбачає, що ви використовуєте новий стиль GUI Ren'Py (міститься в файлі gui.rpy). Застарілий GUI (який використовують файл screens.rpy) слід розглядати, як розширену настройку графічного інтерфейсу для цілей цього посібника.
Проста настройка GUI (Simple GUI Customization) [ред]
Є кілька простих налаштувань GUI, які мають сенс для всіх проектів, за винятком найпростіших візуальних новел. Загальна риса нижчезазначених налаштувань полягає в тому, що всі вони не потребують редагування gui.rpy.
Зміна розміру і кольору (Change Size and Colors) [ред]
Найпростіші зміни, яке можна зробити в графічному інтерфейсі - це змінити його розмір і колір. Ren'Py запропонує вам зробити це, коли ви створюєте новий проект, але опція «Змінити / Відновити GUI» в панелі запуску дозволить вам завжди змінити свій вибір.
При зміні GUI через панель запуску, Ren'Py підкаже, чи хочете ви просто змінити панель запуску або оновити gui.rpy. Будь-який з цих варіантів буде перезаписувати більшість файлів зображень, а перезапис gui.rpy позбудеться від змін в цьому файлі.
В результаті ви, ймовірно, захочете зробити це до будь-якої іншої настройки.
Ren'Py запропонує дозвіл за замовчуванням для проекту, а також колірну схему. Вибравши їх, він оновить графічний інтерфейс, щоб він відповідав вашим виборів.
Options.rpy [ред]
Існує ряд змінних в options.rpy, використовуваних кодом графічного інтерфейсу користувача (GUI).
config.name Рядок, що задає грі зрозуміле ім'я. Використовується в якості заголовка вікна і в усьому GUI, де потрібно назва гри. gui.show_name Слід встановити значення False, щоб приховати відображення назви і номер версії в головному меню (наприклад якщо назва і версія гри "намальовані" на фоновому зображення головного меню). config.version Рядок, для присвоювання версії гри. Відображається для користувача в різних місцях. gui.about Додатковий текст, який додасться до екрану about. При необхідності можна додати кілька абзаців кредитів, де \ n \ n може використовуватися для розділення абзаців.
Ось приклад визначення вищевказаних операторів:
Для зручності можна буде визначити gui.about, використовуючи рядок укладену в потрійні лапки, так як в цьому випадку дотримується визначення кінця рядка:
Зображення заднього плану (Фон) для гри і головного меню (Game and Main Menu Background Images) [ред]
Зображення, що використовуються графічним інтерфейсом, можна знайти в каталозі game / gui, який можна відкрити, вибравши в Ren'Py launcher «Відкрити папку: gui». Відповідні файли:
gui / main_menu.png Файл, що містить зображення, яке використовується як фон для всіх екранів головного меню. gui / game_menu.png Файл, що містить зображення, яке використовується як фон для всіх екранів ігрового меню.
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (налаштування) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-ff1a84bd.jpg)
Головне меню з заміною тільки gui / main_menu.png.
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (інтерфейсу) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-a0fe11f3.jpg)
Екран о. може бути частиною ігрового меню. (З використанням gui / game_menu.png в якості фону) або головного меню (з використанням gui / main_menu.png в якості фону). Обидва можуть бути встановлені на одне і те ж зображення.
Іконка вікна (Window Icon) [ред]
Іконка вікна - це значок, який відображається (в таких місцях, як панель задач Windows і док-станція Macintosh) за допомогою запущеного додатку.
Іконку вікна можна змінити, замінивши gui / window_icon.png.
Зверніть увагу, що це змінює тільки значок, який використовується в запущеній ігре.Чтоби змінити значок, який використовується файлами Windows.exe і додатками Macintosh, див. Документацію по збірці.
Проміжна настройка GUI (Intermediate GUI Customization) [ред]
Далі ми продемонструємо проміжний рівень настройки GUI. На проміжному рівні можна змінити кольори, шрифти і зображення, які використовуються в грі. Загалом, проміжна настройка зберігає екрани в основному однаковими, з кнопками і смугами (барами) в тих же місцях, хоча, звичайно, можливо змінити настройки екрану для додавання нових функцій.
Багато з цих змін включають редагування змінних в gui.rpy. Наприклад, щоб збільшити розмір шрифту діалогу, знайдіть рядок, в якій мовиться:
і збільште або зменшіть її значення, наприклад так:
Діалог (Dialogue) [ред]
Є цілий ряд відносно простих налаштувань, які можна виконати, щоб змінити те, як діалог відображається для гравця. Перше - це зміна текстового поля.
gui / textbox.png Цей файл містить фон текстового вікна, що відображається як частина екрану say. Хоч він і відображається в повну ширину екрану гри, текст в ньому відображається тільки в його центральній 60% частини, з 20% -ою кордоном з обох сторін.
Крім того, існує ряд змінних, які можна налаштувати для зміни діалогу.
За замовчуванням мітка імені персонажа використовує акцентне колір. Колір може бути легко змінений при визначенні персонажа:
Меню вибору (Choice Menus) [ред]
Екран вибору використовується в операторі меню для відображення вибору гравцеві. Знову ж, є деякі відносно прості настройки, які можна виконати на екрані вибору. Першими є два файли зображень:
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 Images) [ред]
Також є пара перекривають зображень. Вони використовуються, щоб затемнити або освітлити фонове зображення, щоб зробити кнопки та інші компоненти для користувача інтерфейсу більш чіткими. Ці зображення знаходяться в каталозі накладення:
gui / overlay / main_menu.png Перекриття використовується екраном головного меню gui / overlay / game_menu.png Перекриття використовується екранами, схожими на ігрове меню, та завантаження, збереження, налаштування, о. допомога (load, save, preferences, about, help) і т.д. Це перекриття вибирається на екрані, про який йде мова, і використовується навіть в головному меню. gui / overlay / confirm.png Перекриття використовується на екрані підтвердження, щоб затемнити фон.
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (налаштування) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-cd5f56c9.png)
Приклад зображення gui / overlay / main_menu.png.
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (customization) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-4e0ab502.png)
Приклад зображення gui / overlay / game_menu.png.
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (користувача) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-a06e57c0.jpg)
Головне меню після зміни перекриття.
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (customization) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-bfc9f50e.jpg)
Меню гри після зміни перекриття.
Кольори, шрифти та розміри шрифтів (Colors, Fonts, and Font Sizes) [ред]
Існує ряд змінних GUI, які можна використовувати для зміни кольору, шрифту і розміру тексту. Ці змінні звичайно повинні бути встановлені в шістнадцяткові колірні коди, які представляють собою рядки форми «#rrggbb» (або «#rrggbbaa» для вказівки альфа-компонента), подібно до колірних кодах, використовуваним веб-браузерами. Наприклад, «# 663399» - це код для відтінку фіолетового. В Інтернеті є багато інструментів, які дозволяють створювати колірні коди HTML, такі як цей.
На додаток до gui.text_color, gui.choice_idle_color і gui.choice_hover_color, описаним вище, існують такі змінні:
define gui.accent_color = '# 000060' Акцентний колір використовується в багатьох місцях графічного інтерфейсу, включаючи назви та мітки. define gui.idle_color = '# 606060' Колір, який використовується для більшості кнопок, коли вона не сфокусована або не вибрана. define gui.idle_small_color = '# 404040' Колір, який використовується для невеликого тексту (наприклад, дата і назва слота для збереження і кнопки швидкого меню), коли він не зависає. Цей колір часто повинен бути трохи світліше або темніше, ніж idle_color, щоб компенсувати менший розмір шрифту. define gui.hover_color = '# 3284d6' Колір, який використовується сфальцьованими елементами в графічному інтерфейсі, включаючи текст кнопок і великі пальці (рухливі області) повзунків і смуг прокрутки. define gui.selected_color = '# 555555' Колір, який використовується текстом обраних кнопок. (Це має пріоритет над квітами наведення і простою). define gui.insensitive_color = '# 8888887f' Колір, який використовується текстом кнопок, які нечутливі до призначеного для користувача введення. (Наприклад, кнопка відкоту при відсутності відкоту). define gui.interface_text_color = '# 404040' Колір, який використовується статичним текстом в ігровому інтерфейсі, наприклад текст в довідковій системі і екранах. define gui.muted_color = '# 6080d0' define gui.hover_muted_color = '# 8080f0' Приглушені кольору, використовувані для розділів барів, смуг прокрутки і повзунків, які не уявляють значення або видиму область. (Вони використовуються тільки при створенні зображень і не вступатимуть в силу до тих пір, поки зображення не будуть відновлені в панелі запуску.)
На додаток до gui.text_font наступні змінні вибирають шрифти, використовувані для тексту. Ці шрифти також слід розміщувати в каталозі ігор.
define gui.interface_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 Розмір назви гри.
Межі (Borders) [ред]
Є цілий ряд компонентів графічного призначеного для користувача інтерфейсу - такі, як кнопки і бари - які використовують масштабовані фони, сконфігуровані з використанням об'єкта Borders (Межі). Перш ніж обговорювати, як налаштувати кнопки і бари, ми спочатку опишемо, як це працює.
Межі відображаються для відображуваного Frame () (Кадра). Кадр приймає зображення, і ділить його на дев'ять частин - чотири кути з чотирьох сторін, і центр. Кути завжди залишаються однакового розміру, ліва і права сторони витягнуті вертикально, верхня і нижня сторони витягнуті горизонтально, а центр розтягнутий в обох напрямках.
Об'єкт Borders задає розмір кожної з меж, в лівій, верхній, правій, нижній напрямку. Таким чином, якщо використовується наступна межа зображення:
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (customization) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-c98ef973.png)
Поряд з такими межами:
Одним з можливих результатів може бути наступний:
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (користувача) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-777db406.png)
Оскільки Child змінює розмір, як і фон.
Об'єкту Border також може бути присвоєні додаткові значення, включаючи негативні, які змушують Child перекривати кордони. Наприклад, ці межі:
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (графічного) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-d0e9da84.png)
Межі також можуть бути "черепичними", а не зі зміненим розміром. Це здійснюється за допомогою змінних і видає наступний результат.
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (customization) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-2239fdfa.png)
Ці приблизні зображення трохи потворні, так як нам потрібно було показати, як це працює. На практиці ця система може дати досить приємні результати. Це той випадок, коли відображається кадр використовується в якості фону вікна кадру, що містить компоненти користувальницького інтерфейсу.
gui / frame.png Зображення використовується в якості фону рамок вікон. define gui.frame_borders = Borders (15, 15, 15, 15) Межі застосовуються до рамки вікон. define gui.confirm_frame_borders = Borders (60, 60, 60, 60) Межі, що застосовуються до рамки, використовуваної на екрані підтвердження define gui.frame_tile = True Якщо значення true, сторони і центр екрану підтвердження чергуються. Якщо false, вони масштабуються.
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (графічного) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-fdf708a4.png)
Приклад зображення gui / frame.png.
![Посібник з налаштування графічного інтерфейсу користувача (gui customization guide) (користувача) Посібник з налаштування графічного інтерфейсу користувача (gui customization guide)](https://images-on-off.com/images/137/rukovodstvoponastroykegraficheskogointer-905a8246.jpg)
Екран підтвердження після застосування налаштувань, зазначених вище.
Кнопки (Buttons) [ред]
Інтерфейс Ren'Py включає в себе велику кількість кнопок, кнопок різних розмірів і використовуваних для різних цілей. Різні типи кнопок:
button Основна кнопка. Використовується для навігації усередині призначеного для користувача інтерфейсу. choice_button Кнопка, яка використовується для вибору в ігровому меню. quick_button Кнопка, яка відображається в грі, яка призначена для швидкого доступу до меню гри. navigation_button Кнопка, яка використовується в головному і ігровому меню для навігації між екранами, і для запуску гри. page_button Кнопка, яка використовується для перемикання між сторінками на екрані завантаження і збереження. slot_button Кнопки, які представляють собою слоти для файлів, і містять ескіз, час збереження і необов'язкове ім'я збереження. Вони описані більш детально нижче. radio_button Кнопка, яка використовується для різноманітних налаштувань на екрані налаштувань. check_button Кнопка, яка використовується для перемикання налаштувань на екрані налаштувань. test_button Кнопка, яка використовується для перевірки відтворення звуку на екрані налаштувань. Вона повинна бути тієї ж висоти, що і горизонтальний слайдер. help_button Кнопка, яка використовується для вибору того, яку допомогу хоче отримати гравець. confirm_button Кнопка використовувана на екрані підтвердження (натисніть кнопку «Так» або «Ні»). 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 використовується в якості фону кнопок перевірки, що не сфокусовані.
Чотири файлу зображення використовуються в якості переднього плану на радіо кнопках і кнопках перевірки, щоб вказати, якщо ця опція чи ні.
gui / button / check_foreground.png, gui / button / radio_foreground.png gui / button / check_selected_foreground.png, gui / button / radio_selected_foreground.png define gui.button_width = None define gui.button_height = 64 link define gui.button_borders = Borders ( 10, 10, 10, 10) link define gui.button_tile = True define gui.button_text_font = gui.interface_font l 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
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)