Форум Anivisual закрыт. Вы не можете создавать новые темы или писать ответы. Форум будет работать в режиме архива.
Пользователи · Поиск по форуму · · · Регистрация

  • Страница 1 из 1
  • 1
Форум о визуальных новеллах » Для разработчиков » Ren'Py » [ПЕРЕВОД] Наглядное объяснение Imagemaps (Перевод темы "Imagemaps explained by a dummy")
[ПЕРЕВОД] Наглядное объяснение Imagemaps

progxaker

#1
Здесь часть кода, который уже ГОТОВ на Lemma Soft, но, как нуб в Ren'Py, этот материал я ВСЕГДА буду использовать, чтобы понять, как с этим работать.

Я надеюсь поделиться тем, что узнал и собрал на пути. Это поможет другим новым людям разобраться.
Этот материал, возможно, не самый эффективный путь понять это, но он сработал на мне, поэтому и на вас тоже.

Imagemaps(карты изображения)
Карты изображения занимают больше места, чем кнопки-изображения, но лёгкий путь сделать что-то, что будет работать, даже, если вы новичок.

Что вам нужно, чтобы сделать это:
● вам понадобиться ТРИ фиксированных изображения JPG или PNG ОДНОЙ и того же предмета, чтобы сделать карту изображения(как и всё в трёх раздельных изображениях, вам не понадобиться новое изображение для другой кнопки, если делаете карту изображения);
● вам нужно получить координаты ваших hotspot'ов(горячих точек);
● вам понадобиться код из материала, чтобы всё работало.

Первое, я дам пример и объяснение изображениям, которые вам понадобятся для карты изображения.
Потом объясню, что такое "горячие точки" и как их найти.
Последнее, что дам - это код, который Я буду использовать для меню в примере.

Ниже я использовал спрайты и фоны из игры, которая мне не принадлежит, как пример.

Пример карты изображения меню:
Это "основа" изображения. Если горячая точка не будет прикреплена ни одной из трёх изображений, тогда они будут выглядеть следующим образом. Выцветание или затемнение любой "кнопки" или области, которой вы выберите. Другие будут знать, когда они перестанут работать. Как кнопка "читать историю" ниже. Если она не работает, то будет тёмной.


Это изображение "наведения". Если вы работает с "горячей точкой" в части изображения, тогда, если навести мышь, она будет выглядеть так. Если вы хотите, чтобы ваша кнопка или область изменяла цвета, фигуру, что-нибудь, когда кто-то наводит мышь - это изображение то, что должно случиться. Я хочу, чтобы мои кнопки меняли цвет, поэтому делаем кнопку старта - зелёной, а другие - розовым узором.


Это изображение "ожидания". Если вы работает с "горячей точкой" и ваш курсор находится за рабочей зоной, тогда изображение будет выглядеть так. Ожидание происходит тогда, когда на экране ничего не "трогают" или перепутал с персонажем. Когда мой экран слева, я хочу, чтобы кнопки были простыми и белыми.


Теперь, когда у вас есть ТРИ отдельных изображения, нам нужно найти наши "Горячие точки".
Автор на Lemma Soft: jane_runs_fast
Тема на Lemma Soft: тут
Перевёл: progxaker

Продолжение следует...
Сообщение отредактировал progxaker - Среда, 02/Окт/2019, 22:33
"Ничто не может оставаться таким же вечно. И вещи, приносящие радость и счастье, тоже. Ничто не остается неизменным." - Фурукава Нагиса, CLANNAD

progxaker

#2
Горячие точки
Горячие точки - это прямоугольники или квадраты(я знаю, что можно сделать и другие фигуры, только не знаю как) позиции, которые вы используете для создания области для вашей "кликабельной" картинки.

Координаты, которые у меня работают:
"X-координата", "Y-координата", "Высота" и "Значение" в этой последовательности.

Поиск X и Y
X- и Y-координаты, которые вы хотите превратить в горячую точку, находяться в верхнем левом углу.

Допустим, "кнопка" "Читать историю" в моём меню - это то, для чего я хочу получить X- и Y-координаты. В данный момент, мне нужен ВЕРХНИЙ ЛЕВЫЙ УГОЛ "кнопки" "Читать историю". В любом другом месте ваша точка будет двигаться.

Вы можете использовать любую программу для работы с изображениями для того, чтобы найти X- и Y-координаты, но самый надёжный способ - использовать "клавиши разработчика", которые уже есть в Ren'Py.

Я покажу, как можно найти X и Y в вашей игре.

Первое, что вам нужно, это иметь изображения("основы", "ожидания" и "наведения") в папке с игрой, называемой "images"

Теперь открываем Ren'Py и ЗАПУСКАЕМ ВАШ ПРОЕКТ (где содержаться ваше меню с изображениями).
Когда вы окажетесь на главном экране вашей игры, нажмите "SHIFT" и "D" на клавиатуре, чтобы открыть Developers Menu(Меню разработчиков).


Теперь вы находитесь в Меню разработчиков. Оно должно выглядеть, как на изображении ниже.

Теперь нажмём на текстовую ссылку с надписью "Image Location Picker"("Сборщик положений изображения")


Должно появиться новое окно с ТОННОЙ названий изображений.

БЕЗ ПАНИКИ

Это выглядит очень запутанно. Особенно, если у вас уже есть много изображений в вашей игре. Просто пролистайте, пока не найдете одно из трех изображений меню. Нажмите на него, и это изображение появится.
При перемещении курсора по изображению, цифры в левом нижнем углу экрана будут меняться. Эти цифры ваши координаты.
Наведите курсор на верхний левый угол области, которую вы хотите превратить в горячую точку. Ваши точные X- и Y-координаты будут показаны в левом нижнем углу экрана Ren'Py(выделено желтым цветом на изображении ниже).

Если вы хотите высоту и значение данной области
(Поместив курсор в верхний левый угол области, которую вы хотите выбрать)
Удерживая левую кнопку мыши, перетащите курсор в правый угол области, в которой вы хотите сделать горячую точку. Должна появиться голубая рамка. Когда ваш синий прямоугольник окажется там, где он должен быть, отпустите кнопку мыши. Ваши координаты должны быть в левом нижнем углу экрана Ren'Py - все готово для использования.


Теперь у вас есть X- и Y-координаты(Вы увидите, где их разместить в коде ниже).
Автор на Lemma Soft: jane_runs_fast
Тема на Lemma Soft: тут
Перевёл: progxaker

Продолжение следует...
Сообщение отредактировал progxaker - Среда, 02/Окт/2019, 22:35

progxaker

#3
Ниже код, который я использую. Я заменил материал в экране навигации на свою карту изображение.
Код
## Экран навигации ###########################################################
##
## Этот экран содержит главное и игровое меню и обеспечивает навигацию
## к другим меню и старту игры

####Хэштеги "###" делают всё, что после них, не используемым...####

screen navigation():
###Первое, 'экран' (насколько мне известно) для меню... У них есть набор команд и действий, специфичных для них (которые не будут работать с "меткой") Вы должны
###загуглить 'renpy screen commands'("Ren'Py экранные команды") если хотите узнать больше.

    
# Различные кнопки.
    imagemap:

#Все должно быть выделено определенным образом, иначе вы получите ошибку при запуске игры#
        
        idle "group_idle.png"
        hover "group_hover.png"
        ground "group_ground.png"
        
#^^^Здесь вы добавляете имена ваших файлов изображений.  Мои файлы изображений называются group_idle.png, group_hover.png и group_ground.png... Если нужно, можете сменить на свои.
###Убедитесь, что имя вашего изображения находится в скобках ("") и что вы добавляете .png или .jpg после имени изображения.
####Для этого экрана меню, ваши изображения должны быть в папке с игрой с надписью "images", чтобы их можно было найти.
####Если у вас есть дополнительная папка внутри папки с изображениями, вам нужно будет добавить имя этой папки в ваше изображение, чтобы оно было найдено.
####Например; если моё изображение находится в папке с именем "mainmenu" Я написал бы "mainmenu/group_idle.png" if my image were in a folder labeled "mainmenu"  I would  put "mainmenu/group_idle.png" в скобках.

       
        hotspot (647,556,542,129) action ShowMenu('start')
        #hotspot (647,556,542,129) action Show('charchoicea')
        hotspot (656,375,140,143) action ShowMenu('load')
        hotspot (845,376,140,143) action ShowMenu('gallery')
        hotspot (1002,367,176,150) action Show('mail_main')
    
        #hotspot (1199,35,1248,88) action Quit('quit')
        
        
##############################################################
#############################################################




Это может быть супер неряшливо, но все здесь работает и довольно просто собрать вместе. Google был находкой - все, что мне не удалось найти самостоятельно, я ищу в Lemma Soft или набираю "renpy бла-бла-бла" в Google...
Автор на Lemma Soft: jane_runs_fast
Тема на Lemma Soft: тут
Перевёл: progxaker

Конец.
Сообщение отредактировал progxaker - Среда, 02/Окт/2019, 22:35

Lisper

#4
Не совсем понятная фишка в виде слова "я" с большой буквы, но статья действительно годная и весьма полезная.
Особенно тем, кто не знает вражеского английского.
Добавлю что координаты изображения можно очень удобно узнать в самом обычном Paint-е.

progxaker

#5
Цитата Lisper ()
Не совсем понятная фишка в виде слова "я" с большой буквы, но статья действительно годная и весьма полезная.

Это Я уже от себя, привычка. Сейчас поправлю.
"Ничто не может оставаться таким же вечно. И вещи, приносящие радость и счастье, тоже. Ничто не остается неизменным." - Фурукава Нагиса, CLANNAD
Форум о визуальных новеллах » Для разработчиков » Ren'Py » [ПЕРЕВОД] Наглядное объяснение Imagemaps (Перевод темы "Imagemaps explained by a dummy")
  • Страница 1 из 1
  • 1
Поиск: