text
Воскресенье, 11 Марта 2012 11:13

Графические карты в Ren'py.

Автор
Оцените материал
(2 голосов)

В этой статье я расскажу, как сделать на движке Ren'py графические карты. Но, для начала, нужно пояснить, что это вообще такое.

Графическая карта (англ. image map) – это изображение с несколькими активными областями, то есть один рисунок содержит несколько участков. В зависимости от того в какую область картинки кликнет пользователь могут совершаться те или иные действия.

Что такое Ren'py, надеюсь, объяснять не надо. На этом движке у меня есть две готовой игры, одна из которых как раз использует нижеописанный принцип. Это игра про котёнка. Стрелочки перехода там сделаны именно таким способом. При наведении на них появляются подписи, а при клике на нужную стрелку попадаем на другой экран.

Но мы будем рассматривать это на другом примере. КrisM помог справиться мне с графическими картами. Он прислал мне несложную демку-сюрприз, в которой всё доступно объяснил и показал. Этот материал очень помог мне при разработке, и, я надеюсь, что пригодится и читателям.

С чего начать.

Для того, чтобы сделать такую вот кликабельную картинку, нужно в первую очередь создать два изображения. Одно из них будет основным, а второе - как бы изнанкой. Оно будет проявляться только при наведении на него. Там мы можем сделать подписи, подсветку и прочее на ваше усмотрение.

fon1

Здесь в примере использована картинка из "Летучего корабля".

fon2

Второй вариант вы в игре вряд ли, правда, найдете. Он сделан для демонстрации работы этого метода.

Теперь открываем скрипт и первым делом нужно объявить используемые изображения. А именно:

init: # Объявляем первый фон. Второй объявлять не обязательно,
# т.к. напрямую он использоваться не будет.

image fon1 = "fon1.jpg"

Хитрая конструкция.

А вот теперь переходим к самой конструкции. Она снабжена подробными комментариями от КrisM, где что происходит.

label start:

label izba: # Ставлю метку на начало сцены в избе.

# Все эти цифры в конструкции - координаты.
# Координаты хотспотов - невидимых активных зон -
# икс-игрек левой верхней точки прямоугольника,
# затем икс-игрек правой ниженй - всего 4 цифры.
# При наведении мыши на хотспот "просвечивает" второй фон,
# причем только та часть, которая ограничена координатами.
# Так можно сделать предметы, "оживающие" под курсором мыши.
# После координат задаем метку, на которую будем переходить по клику на
хотспот.
# Координаты в пикселях удобнее смотрять прямо в фотошопе.
# Слишком большими хотспоты не делай, неаккуратно получится...

# Сначала получаем результат клика -

 $ result = renpy.imagemap("fon1.jpg", "fon2.jpg", [
(160, 40, 275, 110, "ivan"),
(115, 165, 190, 235, "sapogi"),
(193, 235, 252, 313, "babka"),
(320, 172, 480, 255, "bratya"),
(520, 105, 616, 190, "dver"),
(560, 207, 617, 304, "ded")
])

# Внима
ние - не теряй нужные закрывающие скобки!

babaОт себя добавлю, что для отлавливания координат нужных областей можно использовать также Paint. Понимаю, что если областей много, то занятие вылавливания каждой точки весьма утомительно. Ну, ничего не поделаешь, нужно набраться терпения.

После того, как каждой области задали метку, например, мы кликнули на область, огороженную х1=193, y1=235, x2=252,y2= 313, что соответсвует метке "бабка".


В результате у нас подсвечивается область с подписью "бабка" из изображения fon2.

Метки и реакция.

Для того, чтобы была еще и реакция при наведении, пойдем дальше.  Прямо после того кода пишем этот код:

# Теперь проверяем получившися результат и переходим -

if result == "ivan":
jump ivan
elif result == "sapogi":
jump sapogi
elif result == "babka":
jump babka
elif result == "bratya":
jump bratya
elif result == "dver":
jump dver
elif result == "ded":
jump ded

#Кстати, имя результата и имя метки необязательно одинаковы.

label ivan: scene fon1
"Иван" "А это я! Главный герой!"
jump izba
label sapogi: scene fon1
"Иван" "А зачем мне их надевать? Я лучше на печи полежу!"
jump izba

label babka:
scene fon1
"Бабка" "Перестань тыкать в пожилую женщину! Хулиганьё..."
jump izba   

label bratya:
scene fon1
"Братья" "Настоящие герои этой сказки - мы. Зачем про дураков игры делать?"
jump izba

label dver:
scene fon1
"Дверь" "Ну а я-то тут причем?! Стою, никому не мешаю..."
jump izba

label ded:
scene fon1
"Дед" "(молчит)"
jump izba

Здесь мы для каждого варианта задали свою метку, а потом в зависимости от этого переходим в нужное место и там же совершаем нужное нам действие. В данном случае мы выводим текст на экран. А потом переходим к метке izba, то есть на начало. И можем дальше сколько хочется кликать.

Заключение.

Вот, собственно, и всё. ^_^

Прочитано 8963 раз Последнее изменение Пятница, 01 Июня 2012 22:41
AnnTenna

Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
Авторизуйтесь, чтобы получить возможность оставлять комментарии

Панель входа

Добро пожаловать!

Заходите. Чувствуйте себя как дома.

Мы в контакте

Опрос о статьях на сайте.

Какие статьи вам наиболее интересны?
 

Это из галереи!

  • PS20_battle_7

Все фан-арты бережно хранятся в нашей галерее. Есть много забавных!

А знаете ли вы...

ste2

полузаброшенный сайтkn1kn4kn5Плагины для RPG MakerДневник одной нэкоkn Топ Разработка игр