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

Изменение изображения в главном меню

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

В корневой папке “game” проекта RenPy есть папка gui. В этой папке находятся изображения с названием “main_menu” и “game_menu” (если вы их не удаляли и не меняли настройки проекта в файле “options.rpy”). Это и есть изображения главного меню и меню игры в целом.

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

Самый простой способ изменения картинок - просто заменить их на свои с таким же разрешением. Но есть еще один момент: по дефолту RenPy выводит название игры поверх фона. Если оно вам мешает, то это можно поправить через файл “options.rpy”.

Находим строчку следующую строчку и меняем True на False.

define gui.show_name = True

Создание своего меню

Для начала рассмотрим изменение первичного дизайна новеллы, который предлагает сам RenPy. В той же папке gui есть еще несколько подпапок. Одна из них называется “overlay”. Эти изображения накладываются поверх фонов.

Если изображения кажутся слишком темными или наоборот слишком светлыми, то их запросто можно отредактировать в редакторе Gimp или в фотошопе (или в любом другом привычном редакторе). Можно поменять прозрачность, добавить изображениям контраста или вовсе заменить их на свои (с учетом разрешения экрана игры).

Далее можно поменять шрифт в меню, а именно: его цвет. Заходим в файл gui.rpy и ищем строчку:

define gui.idle_color

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

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

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

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

Пример фонового изображения

Пример изображения с пунктами меню

Пример выделенных пунктов меню

! У вас должен быть не серый фон, а прозрачный. Скачать картинки из примера можно будет в конце статьи.

Далее все три изображения перемещаем в папку “gui”. Изображение с фоном можно назвать “main_menu”, с кнопками “menu_normal”, с подсвеченными кнопками “menu_hover”. Чтобы настроить отображение своего меню заходим в файл screens.rpy и находим раздел screen main_menu(). В этом блоке можно смело всё удалить, оставив лишь tag menu.

screen main_menu():
    tag menu

Воспользуемся объектом imagemap, у которого можно указать фоновое изображение (ground), изображения с кнопками (idle и hover).

screen main_menu():
    tag menu

    imagemap:
        ground "gui/main_menu.png"
        idle "gui/menu_normal.png"
        hover "gui/menu_hover.png"

Но надо еще указать координаты для каждой кнопки, потому что мы задали по одному изображению и RenPy думает, что у нас есть одна большая кнопка на весь экран: исправить это можно через hotspot, указав ему стартовую координату кнопки, её ширину и высоту.

screen main_menu():
    tag menu

    imagemap:
        ground "gui/main_menu.png"
        idle "gui/menu_normal.png"
        hover "gui/menu_hover.png"

        hotspot(x, y, width, height)

Посмотреть эти координаты можно в графическом редакторе. Когда вы водите мышкой по экрану, то по краю изображения можно найти числа в пикселях или увидеть координаты в отдельном меню (например, в фотошопе стоит зайти в “Окно”>”Навигатор” и выбрать вкладку “Инфо”).

Необходимо определить координаты (это и есть x и y) левого верхнего угла каждой кнопки. Высоту можно определить при помощи разницы координаты Y нижнего левого угла кнопки и ее верхнего левого угла. Ширину аналогично при помощи разницы координаты X правого верхнего угла и левого верхнего угла.

Отлично, мы нашли кнопку на экране. Осталось определить, что эта кнопка будет делать при помощи action. Action бывают следующие: Start - для запуска игры, ShowMenu - для показа какого-то конкретного меню, Quit - выход из игры. Действиям можно передавать параметры: название меню или флаг, который будет указывать на подтверждение выхода из игры.

Вот как это выглядит в коде:

screen main_menu():
    tag menu

    imagemap:
        ground "gui/main_menu.png"
        idle "gui/menu_normal.png"
        hover "gui/menu_hover.png"

        hotspot(30, 150, 240, 60) action Start()
        hotspot(30, 240, 320, 80) action ShowMenu("load")
        hotspot(30, 320, 330, 80) action ShowMenu("preferences")
        hotspot(30, 400, 250, 80) action ShowMenu("about")
        hotspot(30, 610, 220, 60) action Quit(confirm=True)

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

С дальнейшей кастомизацией помогут официальный гайд и многочисленные видео на YouTube.

Скачать изображения из примера со своим меню