Способы создания Главного меню (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.09.14 14879 Sota vbox, imagemap, ren'py, туториал, главное меню, контейнер кнопок, main menu, меню 4.9/21

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

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

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

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

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

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

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

0
8 Rita16   (22.09.15 16:42)
11302
а у мну не выходит ни фига

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

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

0
11 Overlord   (13.12.15 15:02)
19961
Можете, пожалуйста, написать, как? happy

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

0
13 Overlord   (13.12.15 15:22)
19961
Без проблем)

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

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

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

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

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

1
19 Overlord   (13.01.16 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.02.16 19:24)
25390
У меня проблема: поставил для теста эти кнопки, запустил проект, а вокруг кнопок белое пространство образовалось, что делать? -_-

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

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

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

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

0
25 titan   (07.03.16 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.03.16 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.03.16 19:54)
16173
Видимо, я один настолько тупой, что вообще ничего из урока не понял. Что и куда вводить?...

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

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

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