Кнопки используются в играх повседневно, и освоить их не состоит труда.
Можно выбрать кнопку, которая предложена самим Construct 2, но у меня она порой не срабатывает в проекте, и она имеет один дизайн. Поэтому я предпочитаю делать кнопки самостоятельно.
В этом уроке я буду рассказывать о том, как сделать анимацию в одно событие и как при нажатии на кнопку вывести на курсоре маленький знак вопроса. Второе действие потом можно изменить на любое.
По сути, это просто кнопка для Construct 2 с картинкой на фоне.
Получиться должно вот так:
Подобные кнопки я задействовала для своего кликера "Маятник".
Создание кнопки
Перед тем, как перейти в игровой движок, я создаю саму кнопку, используя графические редакторы, о которых я уже писала ранее. Чаще всего, я пользуюсь Sai. Так как у меня остались кнопки еще с создания игры, я воспользуюсь ими.
Если вы не желаете рисовать кнопку самостоятельно, можете воспользоваться моим шаблоном. Он в формате .png и имеет прозрачный фон.
После выбора картинки для кнопки, я перехожу в движок и создаю новый проект. Размер холста и игрового окна здесь значения не имеют, поэтому я их не трогаю, и загружаю картинку в проект (ниже - инструкция с помощью гиф и по командам).
Добавление кнопки в проект - путь: нажимаю правой клавишей на холст --> в появившемся меню выбираю Insert new project --> выбираю Sprite --> Insert --> нажимаю на холст, чтобы появился редактор картинок --> загружаю шаблон --> нажимаю на Rectangle select в левой панели редактора, зажимаю левую клавишу мыши и аккуратно выделяю нужную кнопку --> дважды нажимаю на Crop в верхней панели редактора, чтобы выделить только кнопку --> закрываю редактор без сохранения
Меняю прозрачность кнопки - путь: в левом основном меню нахожу Opacity --> назначаю там цифру 50
Добавляю текст для кнопки - путь: нажимаю правую кнопку мыши на холсте --> в появившемся меню выбираю Insert new project --> выбираю Text --> Insert --> нажимаю на холст, чтобы проявить проект --> нажимаю на текст и в появившемся левом меню Properties, в самом низу, меняю настройки кнопки. Напротив Text пишу "Кнопка", а в строках Horizontal alignment, Vertical alignment, Hotspot выбираю значение Center --> ставлю текст поверх кнопки так, чтобы выглядело ровно
Добавление мыши в проект - путь: нажимаю правую кнопку мыши на холсте --> в появившемся меню выбираю Insert new project --> выбираю Mouse --> Insert
Теперь настало время сделать механику. Для этого я перехожу в Event sheet и добавляю события.
(событие) Реагирование на курсор поверх кнопки - путь: в верхних вкладках нахожу Event Sheet и перехожу туда (так же он находится в правом окошке Projects) --> нажимаю на правую кнопку мыши и выбираю Add event --> Mouse --> Next --> Cursor is over object --> выбираю в Object картинку кнопки --> Done
(действие) Реагирование на курсор поверх кнопки - путь: (1) напротив сформированного события нажимаю Add action --> выбираю картинку кнопки --> Set opacity --> Next --> значение должно быть равно 100 --> Done --> (2) нажимаю Add action --> System --> Next --> Wait --> Next --> в Seconds ставлю значение 0.5 (обязательно через точку, иначе не пропустит) --> Done --> (3) нажимаю Add action --> выбираю картинку кнопки --> Set opacity --> Next --> значение должно быть равно 50 --> Done
(событие) Когда курсор нажимает на кнопку, происходит действие - путь: нажимаю на правую кнопку мыши и выбираю Add event --> Mouse --> Next --> On object clicked --> Next --> в Object clicked выбираю текст --> Done
(действие) Когда курсор нажимает на кнопку, происходит действие - путь: напротив сформированного события нажимаю Add action --> Mouse --> Next --> Set cursor style --> Next --> в Cursor style выбираю Help --> Done
В итоге, механика должна выглядеть вот так:
После всех этих действий, я запускаю проект с помощью одного из значков на верхней основной панели. Проект открывается в браузере.
Если есть проблемы с запуском проекта, проверьте, какой вид запуска у вас выбран.
Пишите в комментарии, если делали кнопку вместе со мной :)
Если вам понравилась статья, то вас могут заинтересовать и другие уроки и фишки на моем канале.
