Анатолий Адонин 

В Renpy есть функция tooltip, позволяющая настраивать всплывающие подсказки при наведении на кнопки.

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

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

В предыдущем уроке мы открывали дополнительные экраны поверх экрана заданий. А при закрытии журнала в кнопке закрытия необходимо было их закрывать, иначе они продолжали бы висеть на экране.

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

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

При клике на одну из кнопок - число переключается:

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

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

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

Mousearea - это область, при попадании курсора в которую срабатывает событие как если бы была нажата кнопка (button, textbutton, imagebutton). Это по сути невидимая кнопка, на которую не нужно кликать. Её можно использовать для вызова какого-то интерфейса или для мини-игр, где триггер следит за положением курсора на экране.

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

Кнопка imagebutton работает аналогично textbutton, но с небольшими отличиями. Для её корректной работы вместо текста необходимо указать картинку.

В параметре idle указывается название картинки в кавычках, которая будет отображаться по умолчанию. Если при наведении курсора кнопка должна изменяться - указывается параметр hover.

Обратите внимание, если ваши картинки лежат в папке image (game/image), то в кавычках достаточно писать только название картинки. Движок сам найдёт их расположение.

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

imagebutton имеет несколько дополнительных свойств для определённых случаев

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

В Renpy есть три вида кнопок:

textbutton - представляет собой кнопку-текст, на которую можно кликнуть, чтобы произошло определённое событие. Выглядит она как тестовая ссылка на сайте.

imagebutton - выглядит как картинка, при клике на которую можно вызвать событие.

button - совмещает в себе функции обоих кнопок (картинка с текстом).

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

Контейнер grid - позволяет создавать таблицы с определённым количеством столбцов и строк. Пример такого контейнера вы можете увидеть в экранах сохранения и загрузки.

В отличие от vbox и hbox, где размер ячеек растягивается в зависимости от содержимого, grid делит доступное пространство поровну. Каждая ячейка получает одинаковую ширину и высоту, а элементы заполняются последовательно слева направо, затем следующая строка. Если элементов меньше, чем ячеек, оставшиеся позиции остаются пустыми. Если больше - движок выдаст ошибку.

В отличие от строгой сортировки по горизонтали и вертикали с помощью контейнеров vbox и hbox, контейнеры frame и fixed позволяют собирать элементы внутри себя в произвольном порядке. В таком случае для каждого элемента нужно указать свою позицию внутри фрейма.

Контейнер frame представляет собой блок, который рисует фон и рамку под содержимым. В качестве фонового изображения он использует картинку по пути: game/gui/frame.png

То есть, разместив определённые элементы внутри контейнера, это будет выглядеть так: