В этом уроке мы наконец-то приступим к анимациям. Начнём с самой простой анимации, которую только можно представить, и сделаем слайд шоу вместо фона в главном меню.
Заметки:
# Создаём виртуальную картинку
image menu_slideshow:
# Рисуем первую картинку с переходом dissolve
"gui/bg menu1.jpg" with dissolve
# Ждём три секунды
pause 3.0
# Рисуем вторую картинку с переходом fade
"gui/bg menu2.jpg" with fade
# Ждём две с половиной секунды
pause 2.5
# Переходим к началу и снова нарисуем первую картинку
repeat
# А так слайд шоу используется в качестве фона в imagemap
ground "menu_slideshow"
Анимация в РенПай - это очень обширная тема. Поэтому в этом видео мы сделаем сразу несколько интересных вещей.
Мы научим нашу героиню моргать через случайные промежутки времени. Сделаем вращающийся волшебный круг. А также создадим анимацию с изменением размера и прозрачности спрайта.
# Создаём виртуальную картинку
image vasilina blink:
"vasilina normal" # Рисуем обычную картинку с Василиной
# Если есть сколько блоков choice подряд без условий, то РенПай выберет один из них случайным образом
choice:
pause 3 # Делаем паузу на 3 секунды
choice:
pause 5 # Делаем паузу на 5 секунды
choice:
pause 8 # Делаем паузу на 8 секунды
"vasilina closed" # Рисуем Василину с закрытыми глазами
0.25 # Делаем паузу на четверть секунды
repeat # Повторяем этот процесс
# Создаём виртуальную картинку
image circle_rotate:
"circle" # Рисуем картинку с кругом
rotate 0 # Задаём изначальный угол - 0 градусов
# Указываем, что за 15 секунд круг должен повернуться на 360 градусов
linear 15 rotate 360
repeat # Повторяем этот процесс
# Создаём трансформацию
transform zoomin:
# В первой строке задаём изначальные параметры спрайта, к которому мы применим эту трансформацию
# zoom - размер спрайта. 1 - обычный, 2 - в два раза больше, 0.5 - вдвое меньше и т.д.
# alpha - прозрачность. 1 - непрозрачный, 0 - невидимый, 0.5 - полупрозрачный и т.д.
# xpos, ypos - положение по горизонтали и вертикали в пикселах.
# anchor(0.5, 0.5) - на указанных координатах должен находиться центр спрайта.
zoom 0 alpha 0 xpos 640 ypos 360 anchor(0.5, 0.5)
# За 3 секунды изменяем размер и прозрачность спрайта до указанных.
linear 3 zoom 1 alpha 0.7
Одну и ту же метку можно использовать много раз, при этом получая различные результаты! Для этого вам понадобятся параметры меток. С ними вы сможете делать более сложные визуальные новеллы.
# Метка вызывается командой call. После завершения метки игра пойдёт дальше со следующей строки за вызовом.
# В скобках через запятую можно указать параметры, которые мы передаём в метку
call take_fruit(2, "яблока")
# При создании метки в скобках пишем названия переменных, в которые запишутся значения параметров.
label take_fruit(number, fruit):
# Теперь в самой метке мы можем использовать эти переменные
# Выводим сообщение "Вы нашли 2 яблока!"
"Вы нашли [number] [fruit]!"
# Увеличиваем переменную fruits_have на 2
$ fruits_have += number
# Пишем общее количество фруктов у игрока
"Фруктов в вашей сумке: [fruits_have]."
# Мы можем вызывать эту метку любое количество раз с другими параметрами.
# "Вы нашли [5] [груш]!"
call take_fruit(5, "груш")
# "Вы нашли [1] [ананас]!"
call take_fruit(1, "ананас")
# Теперь вызывая метку мы одной командой делаем 3 действия!
# Выводим два сообщения и изменяем значение переменной
В нашей новелле сюжет подходит к одной из концовок? Как его правильно оформить, чтоб игрок увидел постер и при этом РенПай запомнил, какую концовку игрок открыл. Это понадобится нам в следующем уроке, когда мы будем делать галерею.
По пути увидим как делать всплывающие уведомления в углу экрана.
# Всплывающее уведомление
$ renpy.notify("Василий это запомнит.")
# Показать постер можно обычной командой scene. Но не забываем добавить паузу, чтоб постер оставался на экране, пока игрок не щелкнет мышью.
scene my_poster
pause
# Постоянные - это особый вид переменных в РенПай, которые сохраняют своё значение даже после начала новой игры или загрузки сохранения.
# С помощью них мы можем запоминать какие концовки игрок открыл для создания галереи.
# От обычных переменных их отличает слово persistent, затем посте точки мы пишем название постоянной.
$ persistent.my_var = True
# Их можно использовать в условиях или других действиях, как и обычные переменные.
if persistent.my_var > 5:
# Выполнить действие, если значение постоянной больше 5.
Ни одна уважающая себя новелла не обходится без галереи постеров. Это очень комплексная задача, поэтому урок длинный и сложный.
# Создаём концовки, как в прошлом уроке
$ persistent.ending4 = True
# Добавляем кнопку для входа в галерею в гланое меню и на экран навигации.
# Строка в screen navigation():textbutton _("Галерея") action ShowMenu("gallery")
# Метка init python - это код на Пайтон, который автоматически выполняется при старте игры.
init python:
# Создаём специальную переменную, котороая содержит в себе галерею.
g = Gallery()
# Указываем картинку для закрытых постеров.
g.locked_button = "images/posters/lock.jpg"
# Добавляем первую кнопку и задаём ей название.
g.button("ending1")
# Условие, при котором кнопка активируется.
g.condition("persistent.ending1")
# Постер, который отображается при нажатии на кнопку.
g.image("poster1")
# Повторяем эти три действия для всех постеров.
g.button("ending2")
g.condition("persistent.ending2")
g.image("poster2")
# Создаём экран с галереей.
screen gallery():
# Тэг меню указывает, что только один экран с этим тэгом может быть на экране.
tag menu
# Добавляем фоновую картинку.
add "gui/game_menu.png"
# Сетка с постерами 3 на 2 клетки
grid 3 2:
# Равномерно расположить постеры по горизонтали и вертикали.
xfill True
yfill True
# Добавляем кнопки с постерами.
# В скобках - Название кнопки, Картинка превью, расположение по центру клеток сетки, Картинка с рамкой при наведении на кнопку
add g.make_button("ending1", "preview1", xalign=0.5, yalign=0.5, hover_border="images/posters/hover.png")
add g.make_button("ending2", "preview2", xalign=0.5, yalign=0.5, hover_border="images/posters/hover.png")
add g.make_button("ending3", "preview3", xalign=0.5, yalign=0.5, hover_border="images/posters/hover.png")
add g.make_button("ending4", "preview4", xalign=0.5, yalign=0.5, hover_border="images/posters/hover.png")
# Если постеров меньше, чем клеток в сетке, то указываем пустые клетки
null
null
# Добавляем кнопку для возврата в меню.
textbutton "Назад" text_color "#aaaaaa" text_hover_color "#ffffff" action Return() xalign 0.5 yalign 0.95
Часто приходится добавлять в новеллу панельки с информацией или создавать свои окошки. Например, для инвентаря, карты или чего-либо еще.
Всё это делается с помощью экранов РенПай. В этом уроке мы разберёмся в основах создания экранов и сделаем свою панельку.
# Создаём экран с названием info_panel
screen info_panel:
# Эта настройка означает, что пока открыть этот экран, игра приостанавливается
modal True
# Добавляем в экран стандартную рамку
frame:
# Делаем по краям рамки отступы в 10 пикселов
padding(10,10)
# Расположение рамки по горизонтали и вертикали
xalign 0.95
yalign 0.05
# Размер рамки по горизонтали и вертикали
xsize 250
ysize 200
# Добавляем вертикальный контейнер. Все элементы в vbox буду располагаться по вертикали
vbox:
# Указываем размер контейнера по горизонтали
xsize 230
# Добавляем две строчки с текстом
text "Информация" xalign 0.5 # Строчка по центру контейнера
text "Имя: [viname]" # Текст с переменной viname
# Добавляем пустое пространство в 15 пикселов высотой
null height 15
# Добавляем текстовую кнопку, которая прячет окно info_panel
textbutton "ЗАКРЫТЬ" action Hide("info_panel") xalign 0.5
# Другие частые действия для кнопок: Jump - Переход на другую метку, Show - показать экран
# Показать экран во время игры
show screen info_panel
# Спрятать экран во время игры
hide screen info_panel
Взглянем на инструменты разработчика, которые есть в РенПай. Они могут очень облегчить создание новеллы, помогут следить за переменными, искать нужные части в скриптах и даже дополнять скрипт, щёлкая мышкой.
Научимся собирать готовую игру под Windows, MacOS и Linux. Заодно разберёмся с некоторыми нюансами. Как спрятать от игрока скрипты и другие файлы? Как поменять значок игры?
Научимся собирать готовую игру под Android.
Начиная с версии 7.4.5 в РенПай появилась трёхмерная камера. Теперь при выводе картинки кроме координат X и Y можно указывать координату Z, которая определяет на какой глубине расположена картинка.
Кроме этого можно задавать движение камеры в трёх измерениях, а также наклон изображения и камеры по всем трём осям.
# Включить трёхмерную сцену.
show layer master:
perspective True
# Располагаем фон на расстоянии 500 пикселов вглубь кадра.
show window:
zpos -500
# Автоматически растянуть фон на весь экран
zzoom True
# Располагаем спрайт по трём координатам.
show igor blush:
xpos 300 ypos 200 zpos -100
# Перемещаем спрайт на новые координаты.
show igor blush:
# Изначальные координаты спрайта.
xpos 300 ypos 200 zpos -100
# linear 1.0 - движение с одной скоростью в течение 1 секунды
# После этого указываем новые координаты спрайта.
linear 1.0 xpos 0.2 ypos 0.2 zpos -300
# Перемещаем камеру.
show layer master:
perspective True
# Изначальное расположение камеры.
zpos 0
# ease 1.0 - плавное движение в течение 1 секунды
# После этого указываем новые координаты камеры.
ease 1.0 zpos -400 xpos 200
# Перемещаем камеру с поворотом.
show layer master:
perspective True
# Изначальное расположение камеры - прошлые координаты.
# matrixtransform RotateMatrix(0, 0, 0) - изначально камера не повёрнута, то есть угла наклона (0,0,0)
zpos -400 xpos 200 matrixtransform RotateMatrix(0, 0, 0)
# Новые координаты и наклон камеры.
ease 1.0 zpos -600 xpos -100 matrixtransform RotateMatrix(10, 0, 10)