ImageMap Одним из основных экранных интерфейсов является
ImageMap.
Он служит для создания на изображении так называемых
горячих точек, и последующего прыжка к выбранной.
Применять его можно где и как угодно. Для создания альтернативы "menu', для выбора направления движения, для создания всяческий мини-игр и во многом другом.
Горячие точки указываются в виде выделения прямоугольной области. Количество
точек на одном
ImageMap может быть от одной, до огромного множества. Необходимо иметь два изображения: 1. Обычное, для фона; 2. С областью наведения, которая как-либо отличается от обычной.
P.S. Можно дважды указать обычное изображение, но тогда не будет видна область, где есть
горячая точка.
Стандартный код: ImageMap с двумя
точками.
Код
label start:
$ result = renpy.imagemap("back_image.png", "hover_image.png", [
(415, 423, 739, 482, "us1"),
(29, 471, 378, 528, "us2"),
], focus="imagemap")
if result == "us1":
jump dei1 #...любой ваш код
elif result == "us2":
jump dei2 #...любой ваш код
"back_image.png" - изображение используемое, когда на область курсор не наведён.
"hover_image.png" - изображение используемое, когда курсор наведён на выделенную область.
(415, 423, 739, 482) - четыре точки координат, для нахождения выделяемой области.
"us1";
"us2" - названия
горячих точек.
if result == "us1" - если результат - точка
us1, то тогда выполняется ниже введённый код
(jump dei1).
elif result == "us1" - но если результат - точка
us2, то тогда выполняется данный код
(jump dei2 ).
Вычисление координат: 1. Закидываем изображения в папку
game, можно создавать свои папки, но не выше
game.
2. Заходим в Ren'Py
3. Запускаем свой проект.
4. Нажимаем комбинацию клавиш
Shift + D (раскладка должна быть на английском).
5. В
Developer Menu жмём по
Image Location Picker.
6. Выбираем любое из двух нужных изображений, лучше то, которое используется при наведении.
7. Выделяем нужную область. С верхнего левого угла, до нижнего правого.
Курсор обязательно должен находиться в правом нижнем углу выделяемой области 8. Нам нужны 4 точки координат, написанные в левом нижнем углу. Первые две с
Rectangle и две с
Mouse pisition. Курсор двигать ни в коем случае нельзя, иначе собьются координаты.
9. В результате получим необходимые координаты, к примеру
(415, 423, 739, 482). Их и вписываем в координаты
горячей точки.
10. Проделываем
7,8,9 для остальных
горячих точек.
Вот пример готового результата:
Теперь, когда мы ознакомились с основами, я покажу как можно создать небольшой квест, используя лишь
ImageMap.
По квесту нужно:
1. Отвлечь Эплджек
2. Зайти в дом.
3. Найти пирог.
Сначала создаём
ImageMap с двумя
горячими точками. Первая - приведёт к отвлечению Эплджек. Вторая - список заданий. По клику на него перейдёт на ещё один
ImageMap - развёрнутый список заданий.
Код
label start:
# Сюжет
# Сюжет
label u_doma:
$ result = renpy.imagemap("lisa/ap/saa1.png", "lisa/ap/saa2.png", [
(609, 456, 679, 555, "otvlech"),
(9, 9, 153, 182, "quest_list"),
], focus="imagemap"
if result == "otvlech":
jump poisk_vhoda
elif result == "quest_list":
jump quest_list1
#Условия - если первая точка - прыжок к отвлечению ЭплДжек, если вторая - прыжок к списку на весь экран
label quest_list1:
$ result = renpy.imagemap("lisa/ap/saa11.png", "lisa/ap/saa11a.png", [
(675, 31, 737, 89, "quest_list_close"),
], focus="imagemap")
if result == "quest_list_close":
jump u_doma
#ImageMap для раскрытого листа заданий. Горячая точка - выход обратно.
ЭплДжек в данном варианте сразу уходит, пред нами появляется новое задание, и возможность войти в дом.
Код
label poisk_vhoda:
#ЭплДжек уходит
$ result = renpy.imagemap("lisa/ap/saa3.png", "lisa/ap/saa4.png", [
(488, 446, 568, 534, "dr"),
(9, 9, 153, 182, "quest_list2"),
], focus="imagemap")
if result == "dver":
jump v_dome
elif result == "quest_list2":
jump quest_list2
#Первое - вход в дом. Второе - раскрытие списка заданий.
label quest_list2:
$ result = renpy.imagemap("lisa/ap/saa22.png", "lisa/ap/saa22a.png", [
(675, 31, 737, 89, "quest_list_close"),
], focus="imagemap")
if result == "quest_list_close":
jump poisk_vhoda
#Закрытие второго списка с заданием и возвращение обратно к порогу.
Теперь всё действо происходит в доме, необходимо проверить все шкафчики для поиска пирога. При наведении -некоторые будут заперты, остальные же будут пустыми.
Код
label v_dome:
$ result = renpy.imagemap("lisa/home/01.png", "lisa/home/02.png", [
(161, 145, 255, 271, "sh1"),
(270, 147, 431, 271, "sh2"),
(120, 387, 198, 464, "sh3"),
(206, 378, 287, 487, "sh4"),
(293, 380, 374, 462, "sh5"),
(380, 379, 463, 485, "sh6"),
(468, 372, 554, 504, "sh7"),
(559, 372, 644, 482, "sh8"),
(655, 374, 725, 459, "sh9"),
(377, 314, 438, 364, "key"),
(11, 11, 149, 178, "quest_list3"),
], focus="imagemap")
if result == "quest_list3":
jump quest_list3
elif result == "sh1":
jump v_dome
elif result == "sh2":
jump v_dome
elif result == "sh2":
jump v_dome
elif result == "sh3":
jump v_dome
elif result == "sh4":
jump v_dome
elif result == "sh5":
jump v_dome
elif result == "sh6":
jump v_dome
elif result == "sh7":
jump v_dome
elif result == "sh8":
jump v_dome
elif result == "sh9":
jump v_dome
elif result == "key":
jump v_dome_key
# sh1, ..., sh9 - девять шкафов, и при клике на любой - обратно прыжок к началу imagemap, таким образом отсутствие нажатия на пустые или запертые шкафчики.
# key - если найти коробку с ключом, тогда прыжок к imagemap'у, где можно отпереть запертую дверь
label quest_list3:
$ result = renpy.imagemap("lisa/home/full1.png", "lisa/home/full2.png", [
(675, 31, 737, 89, "quest_list_close3"),
], focus="imagemap")
if result == "quest_list_close3":
jump v_dome
# Горячая точка- закрытие третьего списка с заданиями и переход обратно к дому.
Последняя стадия, когда ключ у нас, и нам надо подобрать нужную дверцу, остальные так же будут заперты либо пусты.
Код
label v_dome_key:
$ result = renpy.imagemap("lisa/home/03.png", "lisa/home/04.png", [
(161, 145, 255, 271, "sh1"),
(270, 147, 431, 271, "sh2"),
(120, 387, 198, 464, "sh3"),
(206, 378, 287, 487, "sh4"),
(293, 380, 374, 462, "sh5"),
(380, 379, 463, 485, "sh6"),
(468, 372, 554, 504, "sh7"),
(559, 372, 644, 482, "sh8"),
(655, 374, 725, 459, "sh9"),
(11, 11, 149, 178, "quest_list4"),
], focus="imagemap")
if result == "quest_list4":
jump quest_list4
elif result == "sh1":
play sound "sound/locked.wav"
jump v_dome_key
elif result == "sh2":
play sound "sound/unlock.wav"
jump prod_suzheta
elif result == "sh3":
play sound "sound/locked.
jump v_dome_key
elif result == "sh4":
jump v_dome_key
elif result == "sh5":
play sound "sound/locked.wav"
jump v_dome_key
elif result == "sh6":
jump v_dome_key
elif result == "sh7":
jump v_dome_key
elif result == "sh8":
jump v_dome_key
elif result == "sh9":
play sound "sound/locked.wav"
jump v_dome_key
#Если кликать по не тем закрытым шкафчикам, будет воспроизводиться звук, что шкафчик закрыт. Если найду нужную дверцы - звук открытия и прыжок на следующий jump.
label quest_list4:
$ result = renpy.imagemap("lisa/home/full1.png", "lisa/home/full2.png", [
(675, 31, 737, 89, "quest_list_close4"),
], focus="imagemap")
if result == "quest_list_close4":
jump v_dome_key
#Закрытие четвёртого списка.
label prod_suzheta:
"Пирог найден"
Куски кода можно собрать воедино, скопировав всё поочерёдно в свой скрипт.
Материалы, использованные для примеров, взяты из вн:
День цветения Эквестрии.
Изображения и звуки, использованные в квесте можно
скачать.
P.S.S. Распаковать содержимое архива в папку
game.
Подытожим,
ImageMap крайне полезная вещь, если вы хотите как-то разнообразить свою визуальную новеллу.
Придумывайте свои уникальные вариации.
©Программист
Celestial Novels
Комментарии к записи: 13
1.Ошибка синтаксиса в первом куске кода
label start:
....$ result = renpy.imagemap("back_image.png", "hover_image.png", [
....(415, 423, 739, 482, "us1"),
....(29, 471, 378, 528, "us2"); - здесь не должно быть точки с запятой
....], focus="imagemap")
....if result == "us1":
2.Уточни пожалуйста по жирнее в примере что когда вычисляеш координаты точки нужно писать координаты для мышки именно 1 из углов (я пару раз указал середину выделенной области и 2 часа пытался понять почему не работает подсветка ;)
3. Еще вопрос для дальнейшего развития как добавить к коду всплывающую подсказку тоесть навел мышку на "дверь" вылезла надпись "войти в дом"
Спасибо.
2. Так?
3. Уточни в ЛС, где подсказка должна выводиться.
Помогите,пожалуйста
m"В ванную?.. А она где?"
$ result = renpy.imagemap("hall.jpg", "hallwithdoors.jpg", [
(331, 252, 381, 397, "bath"),
(204, 234, 258, 473, "toilet"),
(118, 189, 182, 553,"kladovka"),
], focus="imagemap")
Удачи
$ result = renpy.imagemap("kis37_image.png", "kis39_image.png", [
(518, 414, 399, 489, "kis44"),
(176, 310, 244, 372, "kis42(1)"),
(264, 296, 330, 351, "kis24"),
], focus="imagemap")
if result == "kis44":
_____ jump dei1 #...любой ваш код
elif result == "kis42(1)":
_____ jump dei2 #...любой ваш код
if result == "kis24":
_______ jump dei3 #...любой ваш код
Может нубский вопрос, но такие менюхи вверху экрана делаются таким же способом, или есть отдельный механизм?
Если по памяти, на английской расскладке shift+D в меню выбираем image location picker, там уже выбираем из списка файл с которым хотим работать работать в добрый путь.
Никто не подскажет возможно можно выводить текстовую информацию над мышкой или в текстовом блоке при наведении?
Код
screen say:
....
....
# Использовать быстрое меню.
# use quick_menu
mousearea:
area (0, 0.95, 1.0, 1.0)
hovered Show("quick_menu", transition=dissolve)
unhovered Hide("quick_menu", transition=dissolve)[/quote]
Вот как-то так. Только вероятнее всего вам понадобятся только две команды:
mousearea: и area("КООРДИНАТЫ"). Я таким кодом ещё не пользовалась, но вы попробуйте. Должно сработать, если нет - есть форум с темой "Помощь по Rep'py (Вопрос\Ответ)" (так и написано). Напишите, возможно откликнутся.
Да еще и с несколькими ошибками в коде. Их надо искать и исправлять - тогда будет работать.