Изображение с горячими точками (ImageMap)
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

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



Ren'Py 27.09.14 7378 Sota квест, эплджек, мини-игры, туториал, ren'py, imagemap, ренпай, миниигра 5.0/4

Комментарии (10):
0
1 poladis   (03.10.14 14:05)
1190
Пробовал повторить твой урок, столкнулся с парой моментов :
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. Еще вопрос для дальнейшего развития как добавить к коду всплывающую подсказку тоесть навел мышку на "дверь" вылезла надпись "войти в дом"

Спасибо.

0
2 Sota   (04.10.14 13:11)
132
1. Спасибо, что заметил ошибку в синтаксисе.
2. Так?
3. Уточни в ЛС, где подсказка должна выводиться.

0
3 Elebriska   (08.07.15 15:39)
9675
Пробовала по данному методу сделать,не работает подсветка при наведении на нужную область (действие при нажатии осуществляется). Облазила форумы, всё у всех работает smile_31 Может,это я тупнячок?
Помогите,пожалуйста funny

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")

0
4 Sota   (17.07.15 18:34)
132
Подсветка не работает в случае, если координаты указаны неверно. Перепроверьте их ещё раз, если не поможет, напишете в ЛС.

0
6 MaoHitori   (04.10.15 16:23)
14252
У меня тоже была такая проблема. Скачай другую версию, на новых не работает (лично у меня). renpy-6.18.3
Удачи

0
5 Sena   (16.08.15 14:55)
10780
говорит что не видит kis37...

$ 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 #...любой ваш код
smile_13 angry

0
7 kosmosnash   (12.03.16 21:26)
27562
http://anivisual.net/_sf/4/31407634.png
Может нубский вопрос, но такие менюхи вверху экрана делаются таким же способом, или есть отдельный механизм?

0
8 fellangel0900   (09.10.16 01:17)
44206
В меню разработчика вообще все по-другому. Не выходит ничего сделать. Думаю, что это из- за версии, она у меня 6.9.3с. Есть ли подобная статья для этой версии? Или, может, хотяб просто мну объясните smile_25

0
10 RedTea   (17.10.16 10:06)
43256
Помоему ничего не этом плане давненько не менялось.
Если по памяти, на английской расскладке shift+D в меню выбираем image location picker, там уже выбираем из списка файл с которым хотим работать работать в добрый путь.

0
9 RedTea   (17.10.16 01:31)
43256
Попробовал повторить код, все получается, но изображение меняется только в пределах указанной области.

Никто не подскажет возможно можно выводить текстовую информацию над мышкой или в текстовом блоке при наведении?

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