Сайт Anivisual.net закрыт

Он продолжит функционировать в виде архива. Новые материалы добавлять нельзя.

Изображение с горячими точками (ImageMap)

Изображение с горячими точками (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
18
Декабрь
13
3.9
28004
Добавлять комментарии могут только зарегистрированные пользователи.

Комментарии к записи: 13

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

Спасибо.
avatar
#2 sDextra
132
в 12:11 (04/Окт/2014)
0
1. Спасибо, что заметил ошибку в синтаксисе.
2. Так?
3. Уточни в ЛС, где подсказка должна выводиться.
avatar
#3 Elebriska
9675
в 14:39 (08/Июл/2015)
0
Пробовала по данному методу сделать,не работает подсветка при наведении на нужную область (действие при нажатии осуществляется). Облазила форумы, всё у всех работает 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")
avatar
#4 sDextra
132
в 17:34 (17/Июл/2015)
0
Подсветка не работает в случае, если координаты указаны неверно. Перепроверьте их ещё раз, если не поможет, напишете в ЛС.
avatar
#6 MaoHitori
14252
в 15:23 (04/Окт/2015)
0
У меня тоже была такая проблема. Скачай другую версию, на новых не работает (лично у меня). renpy-6.18.3
Удачи
avatar
#5 Sena
10780
в 13:55 (16/Авг/2015)
0
говорит что не видит 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
avatar
#7 kosmosnash
27562
в 20:26 (12/Мар/2016)
0
http://anivisual.net/_sf/4/31407634.png
Может нубский вопрос, но такие менюхи вверху экрана делаются таким же способом, или есть отдельный механизм?
avatar
#8 fellangel0900
44206
в 00:17 (09/Окт/2016)
0
В меню разработчика вообще все по-другому. Не выходит ничего сделать. Думаю, что это из- за версии, она у меня 6.9.3с. Есть ли подобная статья для этой версии? Или, может, хотяб просто мну объясните smile_25
avatar
#10 RedTea
43256
в 09:06 (17/Окт/2016)
0
Помоему ничего не этом плане давненько не менялось.
Если по памяти, на английской расскладке shift+D в меню выбираем image location picker, там уже выбираем из списка файл с которым хотим работать работать в добрый путь.
avatar
#9 RedTea
43256
в 00:31 (17/Окт/2016)
0
Попробовал повторить код, все получается, но изображение меняется только в пределах указанной области.

Никто не подскажет возможно можно выводить текстовую информацию над мышкой или в текстовом блоке при наведении?
avatar
#11 LaCost
29643
в 11:14 (27/Мар/2017)
0
Главное - вовремя. Не знаю, разобрались вы уже или нет, но всё же... [quote=dmit;16921]Короче, согласно моим предположениям нужно скрывать и показывать quick_menu в зависимости от каких-либо действий пользователя. Вот кусок кода, который производит показ quick_menu когда курсор находиться в нижней части окна (т.е. там где находиться quick_menu в стандартных настройках).
Код
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 (Вопрос\Ответ)" (так и написано). Напишите, возможно откликнутся. smile_55
avatar
#12 Runf
65353
в 04:52 (04/Сен/2017)
0
Архив с изображениями недоступен, урок ценен на половину.
Да еще и с несколькими ошибками в коде. Их надо искать и исправлять - тогда будет работать.
avatar
#13 KabiReactor
81099
в 21:20 (05/Июн/2018)
0
Как правильно включить режим разработчика? Нажимая на эту комбинацию нет никаких изменений.