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

Комментарии (33):
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
0
1 DeXP
119
 
Спасибо огромное! Крайне полезный материал. На англоязычных ресурсах как-то прошёл мимо меня, теперь вот наверстал упущенное. Спасибо а это!

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

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

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

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

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

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

0
8 Rita16
11302
 
а у мну не выходит ни фига

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

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

0
11 Overlord
19961
 
Можете, пожалуйста, написать, как? happy

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

0
13 Overlord
19961
 
Без проблем)

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

0
15 Overlord
19961
 
Ладно, займусь пока галереей.

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

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

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

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

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

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

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

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

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

1
28 Hiro_Yosikava
36171
 
Как добавить музыку в главное меню? Ну, чтобы она фоном звучала?

0
29 makse3351
40889
 
народ а как отредактировать папку cache

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

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

0
31 faf51faf
57706
 
Большое спасибо за прекрасно изложенный материал! Я долго боролась с этим меню. Спасибо love

0
32 NaokiPSK
73944
 
Спасибо, очень помогло при создании интерфейса.:)

0
33 sergey0804
65123
 
Ребят помогите я пытаюсь сделать Второй метод: Использование «Горячих точек» (ImageMap)
screen main_menu:
imagemap:
ground "mmo.png"
hover "mmh.png"
alpha True

hotspot (165, 206, 360, 85) action Start()
hotspot (762, 219, 360, 77) action ShowMenu("load")
hotspot (157, 314, 395, 94) action ShowMenu("preferences")
hotspot (156, 428, 346, 86) action Help()
hotspot (914, 517, 253, 97) action Quit(confirm=False)

куда этот код вставлять??? Помогите пожалуйста
мой вк https://vk.com/sergey0804

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