В детстве я обожала игры от компании Alawar. До сих пор их игры вызывают у меня ностальгию, особенно по красивым картинкам. И там же я увидела когда-то сумку, при нажатии на которую появлялась карта.
Я реализовала механизм с сумкой и картой в своей игре "Прогулка", и сегодня я расскажу, как это можно сделать на Construct 2.
Для этого урока нужна картинка сумки в двух положениях (открытая, закрытая) и сама, собственно, карта. У меня есть шаблон из моей игры, поэтому, если вы не будете рисовать все это самостоятельно с помощью графических редакторов, предлагаю воспользоваться моим шаблоном.
Подготовка графики
Первым делом настраиваю размер холста и видимость экрана при игре. Так как моя карта размером 640 на 480, я ставлю именно эти размеры.
Изменение размера холста и игрового экрана: нажимаю на холст --> в левом основном меню напротив Layout Size пишу 640, 480 (обязательно через запятую, или нажимаю на плюс перед надписью и ввожу данные в ячейки) --> ниже, напротив Project Properties, нажимаю View --> в открывшемся меню напротив Window Size пишу 640, 480
Теперь загружаю карту в проект.
(загрузка спрайта) Добавление карты: нажимаю правой клавишей мыши на холст --> Insert new object --> Sprite --> Insert --> нажимаю на холст, чтобы открылся редактор изображений --> загружаю с помощью иконки папки вверху редактора шаблон --> беру инструмент Rectangle select в левой панели редактора вверху и выделяю карту, а затем дважды нажимаю на Crop в верхней панели редактора
(точка) Добавление карты: --> нажимаю на Set origin and image point в левой панели редактора внизу и ставлю нули в верхние ячейки с цифрами --> закрываю редактор без сохранения --> в левом основном меню проекта напротив Position прописываю нули 0, 0, чтобы спрайт встал на место
Хорошим решением будет сделать разделение карты и сумки по слоям. Сумка относится к интерфейсу, на котором обычно располагается кнопка для меню, а еще кнопка подсказки и подобные вещи. Карта же является отдельным объектом, и на ней сверху можно размещать точки для перехода в разные места, если она интерактивная.
Поэтому я закрываю на "замочек" слой и создаю новый, на котором будет располагаться сумка.
На гиф ниже я показываю, как реагирует карта при закрытом слое и при открытом. Теперь карта на нижнем слое, и я буду работать со вторым.
Теперь можно размещать сумку, не боясь задеть фон и случайно сместить его. Загружаю сумку в проект.
(добавление спрайта) Загрузка сумки: нажимаю правой клавишей мыши на холст --> Insert new object --> Sprite --> Insert --> нажимаю на холст, чтобы открылся редактор изображений --> загружаю с помощью иконки папки вверху редактора шаблон --> беру инструмент Rectangle select в левой панели редактора вверху и выделяю закрытую сумку, а затем дважды нажимаю на Crop в верхней панели редактора
(второй кадр) Загрузка сумки: --> теперь в правом отдельном окошке Animation frames добавляю новый кадр, нажимаю правую кнопку мыши --> Add frame --> в новый кадр загружаю шаблон и также обрезаю его по краям открытой сумки --> нажимаю на Set origin and image point в левой панели редактора внизу и в ячейках с цифрами прописываю 26 и 22 для всех кадров
После добавления сумки и второго фрейма следует поставить скорость анимации на ноль, чтобы при запуске сумка автоматически не висела открытой. И тут же добавляю вторую анимацию и поправляю место нажатия для каждой кнопки.
(скорость) Скорость анимации и вторая анимация: внутри редактора сумки нажимаю на Default в отдельном окошке под названием Animations --> в левом основном меню проекта напротив Speed ставлю 0
(вторая анимация) Скорость анимации и вторая анимация: в редакторе изображений нажимаю на Set collision polygon внизу на левой панели и подтягиваю красные точки на каждом кадре, чтобы организовать квадрат/прямоугольник* --> нажимаю правой клавишей мыши в отдельном окошке Animations --> Add animations --> во вторую анимацию загружаю один кадр с открытой сумкой, на нем тоже подтягиваю красные точки и выставляю Set origin and image point на 26 и 22 --> закрываю редактор без сохранения
Заметка*: полотно должно полностью закрывать спрайт, так как оно обозначает количество места, которое активно при игре. Если какая-то часть полотна не будет занимать картинку, то при игре на нажатии на это место ничего не будет происходить
Теперь и карта, и сумка находятся на месте. Осталось только добавить мышку и можно переходить к механике.
Добавление мыши: нажимаю правой клавишей мыши на холст --> Insert new object --> Mouse --> Insert
Механика
В самом начале следует обозначить, что карта должна быть невидимой, как бы "сложенной" внутри сумки. Это прописывается с помощью System.
(событие) Невидимость слоя: перехожу в верхних вкладках проекта в Event sheet --> нажимаю на пустом месте правой кнопкой мыши --> Add event --> System --> Next --> On start of layout (листаю вниз) --> Done
(действие) Невидимость слоя: напротив события нажимаю Add action --> System --> Next --> Set layer visible --> в Layer ставлю на русском раскладке кавычку, и мне высвечиваются названия слоев*. Выбираю тот, на котором располагается карта - "Layer 0" --> в Visibility ставлю Invisible --> Done
Заметка*: когда нужно прописать слой, я не ставлю его цифру, а пишу название в кавычках полностью. В маленьких проектах это не критично, а вот в больших, где слои порой передвигаются, это спасает от правок.
Если сейчас запустить проект, то карта не будет видна на уровне, она "внутри сумки". После этого я делаю небольшую анимацию, чтобы, когда я навожу курсором на сумку, она открывалась, а когда увожу курсор, закрывалась.
(событие 1) Если курсор поверх закрытой сумки, то она открывается: нажимаю на пустом месте правой кнопкой мыши --> Add event --> Mouse --> Next --> Cursor is over object --> Next --> в Object выбираю сумку Done
(событие 2) Если курсор поверх закрытой сумки, то она открывается: нажимаю на пустом месте правой кнопкой мыши --> Add event --> сумка --> Next --> Compare frame --> Next --> в Comparison выставляю = Equal to, а в Number ставлю 0 --> Done --> перетаскиваю это событие к первому событию так, чтобы они состыковались, как на гиф внизу, а нижнюю пустую ячейку удаляю
(действие) Если курсор поверх закрытой сумки, то она открывается: нажимаю Add action напротив события --> выбираю спрайт с сумкой --> Next --> Set frame --> Next --> напротив Frame number пишу 1 --> Done
Если курсор не поверх сумки, то она закрыта: копирую событие действие, которое я сделала последним --> нажимаю на первое событие правой кнопкой мыши и выбираю Invert --> во втором событии меняю 0 на 1 --> в действии меняю 1 кадр обратно на 0
Напоминаю, что под кадром 0 скрывается закрытая сумка, а под 1 кадром открытая. И когда я вижу эти цифры в механике, то я воспринимаю их не как цифры, а как положение сумки. Так легче работать.
Механика должна выглядеть так:
При воспроизведении проекта открытие и закрытие сумки будет выглядеть так:
Теперь осталось лишь прописать само появление и исчезновение карты.
Проявление карты будет происходить за счет скрывания/показа слоя, а не самого объекта, так как поверх карты могут находиться и другие элементы, скрывать которые будет затруднительно. Лучше сразу скрыть весь слой.
(событие 1) Открытие карты при нажимании на сумку: нажимаю на пустом месте правой кнопкой мыши --> Add event --> Mouse --> Next --> On object clicked --> Next --> в Object clicked выбираю сумку --> Done
(событие 2) Открытие карты при нажимании на сумку: нажимаю на пустом месте правой кнопкой мыши --> Add event --> сумка --> Next --> Is playing --> напротив Animation ставлю кавычку и выбираю "Default" --> Done --> подтягиваю второе событие к первому, нижнюю пустую ячейку убираю
(действие 1) Открытие карты при нажимании на сумку: нажимаю Add action напротив события --> System --> Next --> Set layer visible --> Next --> напротив Layer прописываю "Layer 0", напротив Visibility ставлю Visible --> Done
(действие 2) Открытие карты при нажимании на сумку: нажимаю Add action напротив события --> System --> Next --> Wait* --> Next --> напротив Seconds пишу 0.3 --> Done
Заметка*: если не прописывать второе действие, то карта работать не будет, так как анимация сразу перескачет на 2, обнулив весь результат. В таймере можно поставить любое значение, но я поставила 0.3, как оптимальное.
(действие 3) Открытие карты при нажимании на сумку: нажимаю Add action напротив события --> сумка --> Next --> Set animation --> Next --> напротив Animation пишу "Animation2" --> Done
Скрытие карты прописывается так же, просто меняются местами анимации и видимость слоя.
Копирую события и действия. Во втором событии меняю Default на Animation2. В первом действии меняю видимость слоя на Invisible, а в третьем действии вместо Animation2 прописываю Default.
Весь код должен выглядеть вот так:
Проверка проекта
А теперь я запускаю проект и проверяю, как работает сумка и карта.
Все работает!
Пишите в комментарии, как у вас проигрался этот механизм. У меня на канале есть еще подобные уроки, например, о том, как сделать гибкую систему жизней для босса.
