• Лекция - Галерея


    Сегодня рассмотрим очень обширную тему - создание галереи.

    Сперва заготовим картинки. В папке images создадим папку posters и туда поместим все картинки. Это будут сами постеры (разрешение у них должно быть таким же, как и разрешение всей новеллы, например 1280x720). Постеров сделаем столько, сколько у вас будет концовок. К каждому постеру еще необходимо превью (точно такая же картинка, но с меньшим разрешением, пусть у нас будет 300x169). Размер превью вы выбираете сами, главное, чтобы красиво смотрелось. Еще понадобится маленькая картинка, такого же разрешения как и превью, для закрытых постеров. И для красивого наведения еще добавим рамку. Это прозрачная картинка (пустая внутри), размер такой же как и у превью.

    Еще нам понадобится концовка. Ранее мы разобрали как создать концовку с постером poster1 и постоянной переменной ending1. По аналогии сделайте необходимое количество концовок (по одной концовке на каждый постер).

    Чтобы открыть галерею, нужно сделать для этого кнопку в главном меню. Если вы меняли оформление меню, то допишите надпись “Галерея” в изображении с меню в папке gui и поменяйте экран главного меню в файле screens.rpy. Если вы не меняли оформление игры, то просто в файле screens.rpy добавьте кнопку с галереей в блок screen navigation():

    textbutton _("Галерея") action ShowMenu("gallery")
    Скриншот файла screens.rpy

    Но пока еще ничего не будет работать. Далее идем туда, где объявляются все переменные, до начала сценария игры (если вы не делили скрипт на несколько файлов, то работаем в файле script.rpy) до label start. Нам надо написать код на питоне. Создадим переменную g для галереи. Она хранит все данные галереи (кнопки, постеры и тд). Укажем картинку для закрытых постеров (допустим, она называется lock.png) в g.locked_button. Далее создадим кнопку под каждый постер в g.button. Укажем условия в g.condition, при которых постеры будут открыты, и картинку в g.image для отображения открытого постера в g.image.

    Если постера 4, то и кнопки создадим 4. Это выглядит так:

    init python:
        g = Gallery()
        g.locked_button = "images/posters/lock.png"
    
        g.button("ending1")
        g.condition("persistent.ending1")
        g.image("poster1")
    
        g.button("ending2")
        g.condition("persistent.ending2")
        g.image("poster2")
    
        g.button("ending3")
        g.condition("persistent.ending3")
        g.image("poster3")
    
        g.button("ending4")
        g.condition("persistent.ending4")
        g.image("poster4")

    Далее добавим в файле screens.rpy экран для галереи. В любом месте пишем screen gallery(). Добавим тег меню, чтобы галерея была только одна в игре, и картинку с фоном (game_menu.png). Добавим сетку с постерами (grid). Так как постера 4, то сетку сделаем 2 на 2 и выровняем все постеры на одинаковом расстоянии (xfill и yfill).

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

    screen gallery():
        tag menu
        add "gui/game_menu.png"
    
        grid 2 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")
    
        textbutton "Назад" text_color "#aaaaaa" text_hover_color "#ffffff" action Return() xalign 0.5 yalign 0.95
    
    

    Обратите внимание, что вся сетка должна быть заполнена. Если сетка 2 на 2 (то есть на 4 элемента), а постеров 3, то один в одной ячейке следует прописать null.

    Пример:

    screen gallery():
        tag menu
        add "gui/game_menu.png"
    
        grid 2 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")
            null
    
        textbutton "Назад" text_color "#aaaaaa" text_hover_color "#ffffff" action Return() xalign 0.5 yalign 0.95
    
    







    Для комментирования войдите на сайт или зарегистрируйтесь

  • Практика - Галерея


    Создайте самостоятельно галерею

    Опираясь на текст лекции, создайте галерею в своей новелле.
    ! Для этого вам понадобится несколько концовок - как их создать, написано в 9 теме.

    В качестве превью и постеров можете использовать предоставленные картинки.








    Для комментирования войдите на сайт или зарегистрируйтесь

© 2023 NoveLearn. All rights reserved by FIVE RACCOONS.