В этой статье в качестве практики соберем так называемый графический ключ.
В кратце логика тут такая : При нажатии или пересечении курсора с любой из точек, её позиция перебрасывается в массив. В последствии этот массив используем для рисования линии. А когда отпускаем кнопку мышки, получившийся код сравниваем с нужным и удаляем линию.
Начнем с создания точки. У неё по сути задачи всего две : Передавать информацию о себе , и проигрывать анимацию когда заводим курсор.
Создаем 2д сцену. Кидаем туда спрайт точки, арею с шеипом, и плеер.
В аниматоре создаём любую анимацию которая вам по душе. В моем случае это анимация скалирования спрайта:
Добавляем скрипт. В нем подключаем сигнал mouse_entered , и по сигналу включаем анимацию.
Для того чтобы задать номер точки, добавим переменную ID.
Теперь создадим главную сцену, где эти точки будут располагаться.
Создаем новую сцену, и подключаем скрипт.
В коде будем создавать сетку из точек. Опять же, в моем случае это 3х3. В вашем может быть что то иное.
Запускаем цикл на 9 проходов и добавляем в сцену точки.
Каждой точке назначаем ID.
Чтобы увидеть ID номера , чуть допишем код у точки (временно)
В результате, когда будем подносить курсор к точке должны увидеть вот это :
Точки получили свои номера и реагируют на курсор. Поехали дальше.
Рисовать линии мы можем только с зажатой кнопкой мыши, поэтому начнем именно с этого.
Я добавил в инпут клик на левую кнопку мышки и назвал его «mb».
В процесс завел три условия :
Если кнопка нажималась единажды. Тут мы создаем саму линию и передаем некоторые значения.
Если кнопка зажата. Тут мы привязываем последнюю точку линии к курсору.
Если кнопка отжата. Удаляем данные и саму линию.
Из переменных в данный момент нам потребуется:
Позиция первой точки - firstPosition
Массив в который будем записывать все точки - over
Линия- line
Состояние мышки (кнопка зажата)- mouse_pressed
Проверим что получилось
Ну во-первых видно, что линия рисуется с координаты 0.0, а не координаты точки на которую кликнули. По понятных причинам...
Из хороших новостей - линия тянется за курсором и при отпускании кнопки успешно удаляется :)
В коде вы могли заметить, что в одинарном клике мы передаем ДВАЖДЫ одну и туже информацию в массив over (append(firstPoint))
Это сделано для того, чтобы у линии была вторая точка, которую мы таскаем мышкой.
Теперь допишем код в точке. Будем передавать координаты для начала линии при клике.
Для этого просто прокинем в переменную firstPoint соответствующую инфу.
В результате линия начинает рисоваться из центра точки.
Пришло время сделать так, что бы линия рисовалась через новые точки которые мы коснемся курсором.
Для этого просто перебрасываем в массив данные новой точки
И смотрим что получилось
А получилось не очень красиво. Всё потому, что после касания нам нужны ДВЕ новые точки. Не забываем, что нам надо иметь «лишнюю» точку для привязки к курсору.
Исправляем это.
И вроде бы всё стало хорошо
Но, если присмотреться в получающийся массив , то можно увидеть, что теперь прописывается одна лишняя точка.
Выйти из этого положения можно просто удаляя последнюю точку в массиве перед тем как добавляем две новых.
Ну вот теперь лишней информации нет, линия рисуется и удаляется. Пришло время для подключения данных непосредственно кода
(имеется в виду код самого графического ключа) .
В скрипте сцены добавляем три переменные :
firstId - id точки при первом клике
сurcode - массив с ID номерами который мы собираем.
needcode - массив который необходимо собрать для победы.
И при клике добавляем firstId в curcode. Иначе в массиве не будет номера первой точки.
В скрипте точки будем передавать ID номер в firstId и в curcode.
Проверяем.
Ну и всё что осталось - сравнивать при отпускании кнопки мышки два наших массива, сurcode и needcode , и очищать curcode для последующего использования.
На этом всё.
Небольшое дополнение для тех кто хочет знать чуть больше =)
Подписывайтесь на канал, вступайте в группу в ВК, и не забывайте что у нас есть дискорд сервер.
Удачи в изучении годо !
