Способы создания Главного меню (MainMenu)
Главное меню

Есть множество способов создания главного меню.
Рассмотрим пару из них.
1. Меню со своим фоном и созданием контейнера с однообразными кнопками. Почти то же, что и стандартное Ren'Py меню.
2. С использованием метода «Горячих точек» (ImageMap). Но добавление точек происходит иначе.

Метод первый: Создание контейнера с кнопками.

Нужно 3 вещи:
1. Фон
2. Пустая кнопка
3. Пустая наведённая кнопка.

Фон устанавливается стандартно, в options.rpy.
Код
mm_root = "back.png"
.

А для создания кнопок нам желательно иметь 2 кнопки: обычную и наведённую (hover)


Заходим в screens.rpy и опускаемся до 174 строки, далее, если необходимо заменяем код.
Код

screen main_menu:
     # Это заменяет другие меню.
     tag menu

     # Фон главного меню.
     window:
     style "mm_root"

     #Непосредственно кнопки
        has vbox
        textbutton _("Новая игра") action Start():
            area(50,10,310,70)
            background "but.png"
            hover_background "but_hover.png"

        textbutton _("Загрузка") action ShowMenu("load"):
            area(50,10,310,70)
            background "but.png"
.           hover_background "but_hover.png"

        textbutton _("Настройки") action ShowMenu("preferences"):
            area(50,10,305,70)
            background "but.png"
            hover_background "but_hover.png"

        textbutton _("Справка") action Help():
            area(50,10,305,70)
            background "but.png"
            hover_background "but_hover.png"

        textbutton _("Выход") action Quit(confirm=False):
            area(50,10,300,70)
            background "but.png"
            hover_background "but_hover.png"

textbutton - создание кнопки с текстом, который будет написан поверх неё..
action - действие, происходящее по клику.
area(50,10,305,70) - точки координат размещения кнопки и текста на ней.
Координаты:
Первая точка (50) - расположение кнопки по координате X.
Вторая точка (10) - расположение кнопки по координате Y.
Третья точка (300) - расположение надписи по координате X.
Четвёртая точка (70) - расположение надписи по координате Y.

background "but.png" - указывание обычной кнопки.
hover_background "but_hover.png" - указывание наведённой кнопки.

P.S. has vbox - создаёт контейнер с кнопками, все кнопки идут подряд сверху вниз. Количество кнопок может варьироваться.



Второй метод: Использование «Горячих точек» (ImageMap)

Как и в обычном ImageMap, нам нужно иметь 2 изображения:
1.Фон
2.С отличающейся областью наведения/выделения.


Код
screen main_menu:
    imagemap:
            ground "mmo.png"  
            hover "mmh.png"
            alpha True

            hotspot (262, 117, 497, 68) action Start()
            hotspot (314, 196, 447, 32) action ShowMenu("load")
            hotspot (314, 238, 445, 32) action ShowMenu("preferences")
            hotspot (298, 278, 463, 32) action Help()
            hotspot (270, 318, 490, 32) action Quit(confirm=False)


P.S.S. Ниже, стандартно на 218 строке, необходимо удалить/исключить из кода следующие строки:
Код
init -2 python:
    style.mm_button.size_group = "mm"


ground "mmo.png" - обычное фоновое изображение.
hover "mmh.png" - изображение с отличающейся областью выделения.
alpha True - разрешает прозрачность (альфа-канал).
hotspot - создание новой «Горячей точки».
(262, 117, 497, 68) - координаты «Горячей точки». Вычисляются иначе, чем в обычном ImageMap.
action - действие, которое происходит, по клику на выделенную область (горячую точку).

Вычисление координат:
1.Закидываем изображения в папку game, можно создавать свои папки, но не выше game.
2.Заходим в Ren'Py .
3. Запускаем свой проект.
4. Нажимаем комбинацию клавиш Shift + D (раскладка должна быть на английском).

5. В Developer Menu жмём по Image Location Picker.
6. Выбираем любое из двух нужных изображений.

7. Выделяем нужную область. С верхнего левого угла, до нижнего правого.

8. И в отличие от обычного ImageMap, здесь нам необходимы все четыре точки с Rectangle

9. В итоге получим что-то, вроде (262, 117, 497, 68). Их и необходимо вписать в координаты точки.
10. Повторяем действия 7, 8, 9 для остальных горячих точек.



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

Код
screen main_menu:
    imagemap:

#Добавляем круг, и заставляем его крутится по часовой стрелки.
        add "mm/poe4.png" at RotoZoom(0, 360, 10, 50, 1, 1, rot_repeat=True, rot_anim_timebase=True,
                opaque=False, xalign=-0.07, yalign=0.18)  

#Добавляем туманы и всякие полосочки, и прописываем им путь движения.
        add "mm/mut11.png" at Move((3.0, 1.0, 1.0, 1.0),
                (-2.0, 1.0, 1.0, 1.0),  
                50.0, repeat=True, bounce=True, subpixel=True )  
        add "mm/mut10.png" at Move((-0.1, 1.0, 1.0, 1.0),
                (3.0, 1.0, 1.0, 1.0), 20.0, repeat=True, subpixel=True )
        add "mm/mut8.png" at Move((-0.1, 1.0, 1.0, 1.0),
                (3.0, 1.0, 1.0, 1.0), 15.0, repeat=True, subpixel=True )
        add "mm/mut9.png" at Move((-0.1, 1.0, 1.0, 1.0),
                (3.0, 1.0, 1.0, 1.0), 20.0, repeat=True, subpixel=True )
        add "mm/mut6.png" at Move((-0.1, 1.0, 1.0, 1.0),
                (2.0, 1.0, 1.0, 1.0), 20.0, repeat=True, subpixel=True )
        add "mm/mut5.png" at Move((2.0, 1.0, 1.0, 1.0),
                (-0.1, 1.0, 1.0, 1.0), 20.0, repeat=True, subpixel=True )
        add "mm/mut4.png" at Move((2.0, 1.0, 1.0, 1.0),
                (-0.1, 1.0, 1.0, 1.0), 12.0, repeat=True, subpixel=True )
        add "mm/mut3.png" at Move((-0.1, 1.0, 1.0, 1.0),
                (1.15, 1.0, 1.0, 1.0), 13.0, repeat=True, subpixel=True )
        add "mm/mut2.png" at Move((-0.1, 1.0, 1.0, 1.0),
                (2.0, 1.0, 1.0, 1.0), 13.0, repeat=True, subpixel=True )
        add "mm/mut1.png" at Move((4.0, 1.0, 1.0, 1.0),
                (-0.1, 1.0, 1.0, 1.0), 30.0, repeat=True, subpixel=True )

        ground "mmo.png"  
        hover "mmh.png"
        alpha True

        hotspot (262, 117, 497, 68) action Start()
        hotspot (314, 196, 447, 32) action ShowMenu("load")
        hotspot (314, 238, 445, 32) action ShowMenu("preferences")
        hotspot (298, 278, 463, 32) action Help()
        hotspot (270, 318, 490, 32) action Quit(confirm=False)




P.S.S.S. При использовании второго метода, после первого запуска проекта, в папке game, создастся папка cache. В ней находятся вырезанные выделенный области. Если у вас не абсолютно прямоугольные области, файл, лежащий в данной папке можно подредактировать, стерев в нём всю область, которая лишняя в горячей точки.
К примеру я стёр области с левой стороны "кнопок", ибо они у меня не идеально-прямоугольные. В итоге получилась не прямоугольная область.

Но если бы я не отредактировал файл, было бы примерно так:



Файлы: меню с кнопками
Файлы: меню с ImageMap

И помните, встречают по одежке, не игнорируйте главное меню. Это практически первое, что видит игрок, и оно является лицом вашей визуальной новеллы. Так что, создайте поистине уникальное и прекрасное главное меню.

©Программист Celestial Novels

Автор материала: Sota
Материал от пользователя сайта.



Ren'Py 28 Сентября 2014 18540 Sota vbox, imagemap, ren'py, туториал, главное меню, контейнер кнопок, main menu, меню 4.9/22

Комментарии (31):
0
1 DeXP   (30 Сентября 2014 23:37)
119
Спасибо огромное! Крайне полезный материал. На англоязычных ресурсах как-то прошёл мимо меня, теперь вот наверстал упущенное. Спасибо а это!

0
2 Ayuni   (02 Октября 2014 11:00)
1161
Крайне нужная вещь, большое спасибо за материал! :3

0
3 RiokoRain   (14 Марта 2015 17:16)
5267
Ооочень полезная статья :3 Спасибо за информацию! Скажите пожалуйста, а SnowBlossom можно добавить по аналогии с той анимацией, которую ввели вы в примере? И какие параметры ему нужно прописывать? Ведь аналогичный код, вставляемый в саму новеллу, не подойдет..

0
4 SashaFran   (17 Марта 2015 15:20)
5075
Вот такой вопрос , как примерно тем же способом стилизовать меню настроек ?

0
5 RiokoRain   (28 Марта 2015 18:51)
5267
Как я понимаю, таким же способом и можно
Просто к кнопкам приписываются другие действия, их можно из screens.rpy взять
Если необходимо, могу расписать всё в подробностях, хотя если вы откроете и посмотрите, то увидите, что там всё прописано по аналогии
Единственное что, я не знаю, что делать с ползунками, сама в данный момент ищу решение этой проблемы

0
6 HK   (07 Июля 2015 12:08)
9233
Неожиданно заметила, что у меня нету файла screens.rpy о.о поэтому создала его, но ничего все равно не выходит... QQ

0
7 PlayerKiller   (08 Июля 2015 08:40)
9604
У вас наверное старая версия RenPy, у меня также было, скачайте новую версию.

0
8 Rita16   (22 Сентября 2015 16:42)
11302
а у мну не выходит ни фига

1
9 ST_PhoeniX   (02 Октября 2015 14:12)
14718
Однако ж я полагаю, если меню настроек и сохр./загр. остаются прежними, то в них нужно что то дописать... Иначе кнопка назад в них тупо не работает )))

0
10 anechka_5   (11 Октября 2015 09:39)
15409
Мне понадобилось много времени, но я сделала кнопку "назад" рабочей) Могу написать, как

0
11 Overlord   (13 Декабря 2015 15:02)
19961
Можете, пожалуйста, написать, как? happy

0
12 anechka_5   (13 Декабря 2015 15:11)
15409
Сегодня не смогу написать, завтра, ок?)

0
13 Overlord   (13 Декабря 2015 15:22)
19961
Без проблем)

0
14 anechka_5   (14 Декабря 2015 16:07)
15409
Сорян, чувак, есть некоторые проблемы с доступом к компьютеру. Либо напишу поздно, либо завтра. cry

0
15 Overlord   (14 Декабря 2015 16:08)
19961
Ладно, займусь пока галереей.

0
16 anechka_5   (14 Декабря 2015 18:06)
15409
Таки доступ к компу у меня появился, теперь могу таки написать, как я справилась с нерабочей кнопкой "назад".
Не знаю, может у вас это просто не сработает, но у меня рабит вроде)
Ладно, перейду к делу. В общем, найдите такую строчку в screen:
textbutton _("Назад") action Return()
Я в ней поменяла действие Return на ShowMenu("main_menu") в итоге выглядит так:
textbutton _("Назад") action ShowMenu("main_menu")
Пока работает) Может у этого и свои недочёты есть, но до большего я додумать не смогла, увы
Спасибо за терпение)

0
17 Overlord   (14 Декабря 2015 19:46)
19961
Спасибо большое! СОгласен, недочеты есть, но вроде как сойдет happy

0
18 AnnaSchwarz   (11 Января 2016 21:36)
22221
Эта статья мне не плохо помогла, но теперь возникли проблемы с быстрым меню под диалоговым окном в самой игре. Я знаю, где находятся ее данные, но никак не могу понять, как эти кнопки убрать вообще или переместить в бок. angry

1
19 Overlord   (13 Января 2016 21:37)
19961
Я НАШЕЛ СПОСОБ ВОЗВРАЩЕНИЯ КНОПКИ "Назад"!!!

screen main_menu:
imagemap:
ground "mmo.png"
hover "mmh.png"
alpha True

hotspot (262, 117, 497, 68) action Start()
hotspot (314, 196, 447, 32) action ShowMenu("load")
hotspot (314, 238, 445, 32) action ShowMenu("preferences")
hotspot (298, 278, 463, 32) action Help()
hotspot (270, 318, 490, 32) action Quit(confirm=False)

Так вот, в этот код следует добавить строчки:
tag menu

Итог:

screen main_menu:

# Это заменяет другие меню.
tag menu

imagemap:
ground "mmo.png"
hover "mmh.png"
alpha True

hotspot (262, 117, 497, 68) action Start()
hotspot (314, 196, 447, 32) action ShowMenu("load")
hotspot (314, 238, 445, 32) action ShowMenu("preferences")
hotspot (298, 278, 463, 32) action Help()
hotspot (270, 318, 490, 32) action Quit(confirm=False)

funny funny funny funny funny happy funny

1
20 Averor   (16 Февраля 2016 19:24)
25390
У меня проблема: поставил для теста эти кнопки, запустил проект, а вокруг кнопок белое пространство образовалось, что делать? -_-

0
21 nimiod   (21 Февраля 2016 11:36)
6210
Значит в картинке пространство залито белым цветом, используй граф. редактор (SAI, например) и убери белые области

0
22 Averor   (23 Февраля 2016 21:58)
25390
Убрал, не помогло, но ореол вокруг кнопок стал прозрачным

0
23 Averor   (26 Февраля 2016 22:11)
25390
Немного разобрался со своей проблемой, у меня весь фон главного меню покрывается пеленой цвета ## The color of a frame containing widgets. Может кто-нибудь помочь с этим?

0
24 titan   (07 Марта 2016 17:33)
27194
P.S.S. Ниже, стандартно на 218 строке, необходимо удалить/исключить из кода следующие строки: ЧТО ЭТО!? ГДЕ ЭТО!? Я не понимаю сейчас голова в зарвется angry "Ниже, стандартно" - это rpy файл???

0
25 titan   (07 Марта 2016 17:53)
27194
Помогите с кодом я всё испробовал все способы которые знаю. На сайте написано что надо что-то заменить но я не знаю что и где!
screen main_menu:
tag menu
imagemap:
ground "mods/Souma Yukihira/menu/Menu_ground.png"
hover "mods/Souma Yukihira/menu/Menu_hover.png"
alpha True

hotspot (250, 250, 400, 437) clicked Return("dv")
hotspot (1500, 500, 1650, 680) clicked Return("us")
label example3:
$ result = _return

if result == "dv":
jump dv10
elif result == "us":
jump us10

return
label dv10:
scene bg Menu_18+ with dissolve2
jump stert_111
label us10:
scene bg Menu_18- with dissolve2
label stert_111:

Это кнопка графическая предупреждает читателя 18+

0
26 titan   (09 Марта 2016 17:23)
27194
Всё отлично! Списался со знакомым всё работает. нужно было добавить до screen main_menu1:
call screen main_menu1.

и modal True ставим после tag menu

(alpha True) надо переместить после hotspot
hotspot (250, 250, 400, 437)
hotspot (1500, 500, 1650, 680)
alpha True

0
27 Bruzer   (28 Марта 2016 19:54)
16173
Видимо, я один настолько тупой, что вообще ничего из урока не понял. Что и куда вводить?...

0
28 Hiro_Yosikava   (18 Августа 2016 14:37)
36171
Как добавить музыку в главное меню? Ну, чтобы она фоном звучала?

0
29 makse3351   (29 Августа 2016 17:24)
40889
народ а как отредактировать папку cache

0
30 arsher   (14 Мая 2017 04:50)
57938
Про первый метод:
Координаты:
Первая точка (50) - расположение кнопки по координате X.
Вторая точка (10) - расположение кнопки по координате Y.
Третья точка (300) - расположение надписи по координате X.
Четвёртая точка (70) - расположение надписи по координате Y.
На самом деле так:
Первая точка (50) - расположение верхней левой вершины кнопки по координате X.
Вторая точка (10) - расположение верхней левой вершины кнопки по координате Y.
Третья точка (300) - число пикселей которые отступаются вправо.
Четвёртая точка (70) - число пикселей которые отступаются вниз.
Т. е. последние две точки это размеры кнопки: 3-я по оси Х, 4-я по оси У.

Может быть в статье и имелось ввиду именно это, но я ни черта не понял.

0
31 faf51faf   (23 Мая 2017 21:12)
57706
Большое спасибо за прекрасно изложенный материал! Я долго боролась с этим меню. Спасибо love

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]