У 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 / main_menu.png.
Екран о. може бути частиною ігрового меню. (З використанням 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 / overlay / main_menu.png.
Приклад зображення gui / overlay / game_menu.png.
Головне меню після зміни перекриття.
Меню гри після зміни перекриття.
Кольори, шрифти та розміри шрифтів (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 задає розмір кожної з меж, в лівій, верхній, правій, нижній напрямку. Таким чином, якщо використовується наступна межа зображення:
Поряд з такими межами:
Одним з можливих результатів може бути наступний:
Оскільки Child змінює розмір, як і фон.
Об'єкту Border також може бути присвоєні додаткові значення, включаючи негативні, які змушують Child перекривати кордони. Наприклад, ці межі:
Межі також можуть бути "черепичними", а не зі зміненим розміром. Це здійснюється за допомогою змінних і видає наступний результат.
Ці приблизні зображення трохи потворні, так як нам потрібно було показати, як це працює. На практиці ця система може дати досить приємні результати. Це той випадок, коли відображається кадр використовується в якості фону вікна кадру, що містить компоненти користувальницького інтерфейсу.
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 / frame.png.
Екран підтвердження після застосування налаштувань, зазначених вище.
Кнопки (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)