Уроки 31-40

Эффекты, галерея, интерфейс

Урок 31: Слайдшоу в меню.

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

Заметки и фрагменты кода

Заметки:

# Создаём виртуальную картинку

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"

Урок 32: Основы анимации.

Анимация в РенПай - это очень обширная тема. Поэтому в этом видео мы сделаем сразу несколько интересных вещей.

Мы научим нашу героиню моргать через случайные промежутки времени. Сделаем вращающийся волшебный круг. А также создадим анимацию с изменением размера и прозрачности спрайта.

Заметки и фрагменты кода. Моргание

# Создаём виртуальную картинку

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

Урок 33: Параметры меток.

Одну и ту же метку можно использовать много раз, при этом получая различные результаты! Для этого вам понадобятся параметры меток. С ними вы сможете делать более сложные визуальные новеллы.

Заметки и фрагменты кода

# Метка вызывается командой 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 действия!

# Выводим два сообщения и изменяем значение переменной

Урок 34: Концовки.

В нашей новелле сюжет подходит к одной из концовок? Как его правильно оформить, чтоб игрок увидел постер и при этом РенПай запомнил, какую концовку игрок открыл. Это понадобится нам в следующем уроке, когда мы будем делать галерею.

По пути увидим как делать всплывающие уведомления в углу экрана. 

Заметки и фрагменты кода

# Всплывающее уведомление

$ renpy.notify("Василий это запомнит.")


# Показать постер можно обычной командой scene. Но не забываем  добавить паузу, чтоб постер оставался на экране, пока игрок не щелкнет мышью.

scene my_poster

pause


# Постоянные - это особый вид переменных в РенПай, которые сохраняют своё значение даже после начала новой игры или загрузки сохранения.

# С помощью них мы можем запоминать какие концовки игрок открыл для создания галереи.

# От обычных переменных их отличает слово persistent, затем посте точки мы пишем название постоянной.

$ persistent.my_var = True


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

if persistent.my_var > 5:

    # Выполнить действие, если значение постоянной больше 5.

Урок 35: Галерея.

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

Заметки и фрагменты кода

# Создаём концовки, как в прошлом уроке

$ 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

Урок 36: Основы экранов.

Часто приходится добавлять в новеллу панельки с информацией или создавать свои окошки. Например, для инвентаря, карты или чего-либо еще.

Всё это делается с помощью экранов РенПай. В этом уроке мы разберёмся в основах создания экранов и сделаем свою панельку.

Заметки и фрагменты кода

# Создаём экран с названием 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

Урок 37: Инструменты разработчика.

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

Урок 38. Сборка готовой игры для ПК.

Научимся собирать готовую игру под Windows, MacOS и Linux. Заодно разберёмся с некоторыми нюансами. Как спрятать от игрока скрипты и другие файлы? Как поменять значок игры?

Урок 39. Сборка готовой игры для Андроид.

Научимся собирать готовую игру под Android.

Скачать JDK от Oracle можно по этой ссылке.

Урок 40. 3D камера.

Начиная с версии 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)