Создание своих экранов

Каркас любого экрана будет выглядеть вот так:

screen названиеэкрана:
	modal True # когда этот экран выводится, игра останавливается
	frame: # поместит экран во фрейм из папки gui
		padding(20,20) # отступ от краев фрейма
		xalign 0.95 # расположение экрана по горизонтали
		yalign 0.05 # расположение экрана по вертикали
		xsize 400 # размер фрейма по горизонтали
		ysize 250 # размер фрейма по вертикали
		
		vbox: # расположение текста друг под другом, для горизонтали hbox
			xsize 360 # дублируем xsize/ysize со значением -padding*2, чтобы центровка текста была ок
			text "текстэкрана" xalign 0.5 # обычный текст с выравниванием по центру
			text "[названиепеременной]" # чтобы отобразить какую-то переменную
			null height 15 # отступ в пикселях
			textbutton "закрыть" action Hide("названиеэкрана") xalign 0.5 # текстовая кнопка закрыть
			textbutton "показать" action Show("названиеэкрана") xalign 0.5 # текстовая кнопка показать
			textbutton "перейти" action Jump("названиелейбла") xalign 0.5 # текстовая кнопка показать

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

Желательно все экраны располагать в файле screens.rpy, но можно писать их и внутри script.rpy

Чтобы вывести потом свой экран в любое место в игре используйте команду show screen названиеэкрана

Красивые кнопки через imagebutton

Все кастомные красивые кнопки — картинки. Нужны всегда два изображения: обычное состояние кнопки и подсвеченное при наведении для обратной связи. Положить их нужно обязательно в папку gui, можно создать подпапку под кнопки.

<aside> <img src="/icons/asterisk_blue.svg" alt="/icons/asterisk_blue.svg" width="40px" /> Важно тут понимать, что кнопка — только маркер-термин. Вместо кнопки могут быть интерактивные объекты, предметы на локации и т.п. в виде картинок.

</aside>

Для начала нужно создать экран screen, который будет выводить кнопку:

# ПЕРЕД LABEL START
screen test_button:
    imagebutton:
		    # расположение кнопки на экране
        xalign 0.1
        yalign 0.1
        # путь к картинкам кнопки
        idle "gui/buttons/test_idle.png"
        hover "gui/buttons/test_hover.png"
        # тут пишем что должно произойти при клике
        action [Show("названиепанели"), Play("sound", "sounds/click.ogg")]
        # тут пишем что должно произойти при наведении
        hovered Play("sound", "sounds/hover.ogg")
        
# ГДЕ-ТО В LABEL
show screen test_button

Выводим экран при наведении

# ВНУТРИ ЭКРАНА С КНОПКАМИ
textbutton "показать" # можно и в imagebutton
action NullAction() # делает пустую кнопку, на которую нельзя нажать. подходит для онли наведения
hovered Show("hoveredimg1", img="gui/bubble.png")
unhovered Hide("hoveredimg1") xalign 0.5

# ОТДЕЛЬНЫЙ ЭКРАН ДЛЯ ПОЗИЦИИ КАРТИНКИ, ЕСЛИ ИСПОЛЬЗУЕМ КАРТИНКУ
screen hoveredimg1(img):
    add img pos (500, 80) # положение на экране в пикселях

Если после команды идут квадратные скобки, туда можно записать несколько событий.

Свой интерфейс в новелле

gui.rpy — файл со всеми основными настройками интерфейса. Внутри файла в комментариях под # на русском языке подписаны все перменные, поэтому при необходимости вы легко найдете как поменять цвета и проч.

Шрифты

1. Добавляем шрифты в формате .ttf в папку с вашей игрой (НазваниеИгры/game)
2. Открываем gui.rpy и ищем там раздел переменных со шрифтами.
3. Вместо define gui.text_font = “DejaVuSans.ttf” пишем define gui.text_font = “нашшрифт.ttf” и в остальных строках со шрифтами тоже самое. Чуть ниже можно назначить размер шрифта.

Смена окошек интерфейса

Внутри папок с игрой найдите папку gui — там лежат все картинки интерфейса нашей новеллы.

Заменив любую картинку на свою с тем же именем, вы замените этот тип интерфейса в игре.

Поменять цвета интерфейса

В том же файле gui.rpy можно ручками прописать все HEX-коды цветов. Можно еще зайти сюда:

Не нажимайте тут ничего, если вы сами перерисовали интерфейс ручками!

Изменение главного меню

Добавление картинки в меню

Заменяем файл main_menu.png в папке gui на свою картинку. Все, готово! Да, так просто.

Изменение кнопок меню: imagebutton + расположение

Создайте такого же размера как и main_menu файл в графическом редакторе и расположите там кнопки на прозрачном фоне. Необходимы две версии: обычное состояние кнопок menu_idle.png и при наведении курсора menu_hover.png, которые мы расположим в папке gui

Открываем файл screens.rpy и ищем там screen main_menu(): и удаляем там все, что лежит внутри, кроме строки tag menu

screen main_menu():
	tag menu
	****imagemap:
		ground "gui/main_menu.png"
		idle "gui/menu_idle.png"
		hover "gui/menu_hover.png"
		
		# hotspot(x,y левого верхнего угла кнопки, длина,высота кнопки) эту информацию можно взять с помощью инструментов разработчика (ниже)
		
		hotspot(775,124, 366,102) action Start() # кнопка начала игры
    hotspot(348,673, 352,79) action ShowMenu("load") # кнопка загрузки игры
    hotspot(337,792, 368,77) action ShowMenu("preferences") # кнопка настроек
    hotspot(819,249, 280,68) action ShowMenu("gallery") # кнопка галереи
    hotspot(1306,791, 235,84) action Quit(confirm=True) # кнопка выхода
    hotspot(1272,673, 296,90) action ShowMenu("help") # кнопка помощи