Hotspot (970, 141, 270, 85) action Start()
Темой урока будет создание главного меню, где мы познакомимся с hotspot и графическими картами
Графическая карта, что это такое.
Граф карта – это изображения на экране, нажимая на которое мы переходим по ссылке(тоже самое что меню выбора, только в выборе текст, а здесь графика будет)
Существует 2 способа (о которых я знаю), как можно сделать карту ссылок.
1) Через imagebutton. Т.е. мы берем фон и на фоне каждую кнопку мы отдельно выставляем ее координаты.
Плюсы:
Простота. Подбираешь координаты местоположения только кнопке. Очень удобно делать им кнопки инвентаря, и всего подобного
Область действия сама кнопка(а не рядом и вокруг)
Минусы:
Не везде ее можно удачно использовать. 3ачастую она оч. сильно выделяется из общей картинки
2) Через hotspot. Для него потребуется использовать 2 картинки. Картина фон, и картина со всеми кнопками при наведении.
Плюсы:
Огромный плюс. Что бы сделать кучу кнопок и увидеть, как в конце будет все выглядеть, в фотошоппе нужно просто создать новый слой и в нем сможете точно прорисовать кнопки, а потом когда закончите убрать слой фона и сохранить все кнопки ссылки 1 картинкой.
Он универсальный, т.е. везде можно использовать. Тактическая карта,названия локаций при наведении….везде
Минус:
Хороший такой, но плюсы перекрывают этот минус. Вам потребуется определить 4 координаты только для 1 кнопки…
Как пример
imagemap:
Hotspot (970, 140, 270, 85)
Что значат эти цифры.
1) Первые 2 цифрыэто координаты фона где будет кнопка. Точней верхний левый угол кнопки
970 –на какой ширине будет кнопка (координаты х)
140 –на какой высоте будет кнопка( координаты у)
2) Последние 2 цифры это размеры самой кнопки(т.е. забудьте пока фон мы пишем про саму кнопку)
270это длина верхней и нижней части кнопки.
85это высота кнопки по бокам
И как это в фотошоппе выглядит. Для показа пикселей вам необходимо зайти в Окна> Линейка
Картинка 1280 на 720
1 и 2 цифра
3 цифра. Стрелками показано, в какую сторону будет расти кнопка
4 цифра
В итоге мы получим координату кнопки старт.
imagemap:
Hotspot (970, 140, 270, 85)
Теперь давайте сделаем главное меню проекта test. Вам потребуется зайти в файл screens.rpy
И найти там строкуscreen main_menu:она на 355 строке в ней после : все удаляем до строки screen game_menu(title, scroll=None):
Теперь добавьте 2 изображения в папку gui
Имя файлаimagemap_main_menu_unlocked_hover.pngразрешение 1280 на 720
И
Имя файлаimagemap_main_menu_unlocked_idle.pngразрешение 1280 на 720( впринципе, все кроме кнопок можно заделать прозрачным, и игра ничего не скажет и все нормально будет идти, но мне лень поэтому просто обвел кнопки)
Далее прописываем в screen main_menu:следующее и оно примет следующий вид
screen main_menu:
Tag menu
imagemap:
ground 'gui/imagemap_main_menu_unlocked_idle.png'
hover 'gui/imagemap_main_menu_unlocked_hover.png'
hotspot (970, 141, 270, 85) action Start()
hotspot (970, 230, 270, 85) action ShowMenu('load')
hotspot (970, 320, 270, 85) action ShowMenu('preferences')
hotspot (970, 412, 270, 85) action Start('extras')
hotspot (970, 500, 270, 85) action Quit(confirm=False)
А вот вам и шпаргалка
Теперь давайте разберем, что тут записано:
imagemap: -мы создаем ссылку графической карты, после которого мы прописываем в ней ссылки
ground'gui/imagemap_main_menu_unlocked_idle.png' –мы выбираем картинку фон
hover 'gui/imagemap_main_menu_unlocked_hover.png' –мы выбираем картинку с (слой выделенный координатами при наведении) кнопками (где можно все кроме кнопок сделать прозрачным)
Далее слова в одинарных кавычках, вы их не переводите, это метки и программа ссылается на них.
hotspot (970, 141, 270, 85) action Start()- кнопка старт игры
hotspot (970, 230, 270, 85) action ShowMenu('load') –кнопка загрузка
hotspot(970, 320, 270, 85) action ShowMenu('preferences') – кнопка настройки
hotspot (970, 412, 270, 85) action Start('extras')– кнопка экстра (Скоро буду показывать в уроках как создать музыкальную комнату, галерею, видео галерею, и на всякий случай энциклопедию)
hotspot(970, 500, 270, 85) action Quit(confirm=False)– кнопка выход
Сохраняем все, запускаем и смотрим что получилось
Вы заметили, как скучносмотрится наше главное меню?
Почем у бы не добавить комментарии при наведении на кнопку?(и еще рандов прописать что бы менялись фразы, но это в другой раз)
Для этого нам потребуется вставить в игру картинки фразы, я не заморачивался, и просто вставил текст. И добавил их в папку gui
Имя файла tooltip_main_menu_start.pngразрешение 532 на 58
Имя файла tooltip_main_menu_quit. Pngразрешение 532 на 58
Имя файла tooltip_main_menu_load.pngразрешение 532 на 58
Имя файла tooltip_main_menu_extra.pngразрешение 532 на 58
Имя файла tooltip_main_menu_config.pngразрешение 532 на 58
И теперь что бы оно высвечивалось, нам нужно в самом конце файла screen.rpy
Дописать следующее
# ██▓▒░ ПОДСКАЗКА ░▒▓████████████████████████████████████████████
#Блок объявляет Подсказку
screen gui_tooltip: