Как создать курсор, перетаскивание объектов с помощью Defold Input от britzl

Привет всем подвальным дефолдерам и не только :smiling_face_with_sunglasses:

В этой теме мы создадим курсор, взаимодействие курсора с игровыми объектами, перетаскивание игровых объектов и удаление их по клику:
cursor

Вы можете как создать новый проект, так и использовать существующий проект.
Добавьте в ваш проект в качестве зависимости Defold Input от britzl: cсылка на github с библиотекой.
Если вы не знаете как добавить библиотечную зависимость, то ознакомьтесь с этим руководством: Как добавить библиотечную зависимость в проект на Defold.

Модуль Cursor

Модуль cursor позволяет обрабатывать клики, наведение и перетаскивание игровых объектов с помощью курсора или касания. Поддерживает как мышь, так и тач-интерфейсы.
Этот модуль обеспечивает взаимодействие между курсором(мышью или пальцем) и игровыми объектами, используя collision object.
Иными словами, ты добавляешь cursor.script к объекту (например, на cursor_go), добавляешь collision object — он становится курсорным контроллером, который:

  • Обнаруживает наведение, нажатие, отпускание и клик по другим объектам.
  • Умеет перетаскивать объекты.
  • Отправляет этим объектам специальные сообщения (cursor.PRESSED, cursor.CLICKED и т.д).
Создание курсора. Перетаскивание(drag) игровых объектов. Удаление игровых объектов по клику на них:

Создадим игровой объект:


Назовём его cursor:

Добавим этому игровому объекту компонент collision object:

Создадим форму для объекта столкновения:

Вы можете изменить диаметр сферы в свойствах компонента. Поставьте значение в пределах 2-5, как пример:

Присвойте наименование объекту столкновения, чтобы в будущем он мог взаимодействовать с другими объектами столкновений(свойство Group):

Добавим компонент cursor.script к игровому объекту cursor.go:


Включите свойство Acquire Input Focus в настройках игрового объекта в панеле свойств компонента скрипта cursor.script, чтобы объект мог принимать ввод с клавиатуры, мыши или других устройств (например, геймпада) при запуске скрипта или во время активного состояния сцены. Это обеспечит обработку событий ввода для данного объекта:

Добавим изображения в проект для спрайта игрового объекта:
image

Cоздадим атлас и включим добавленное изображение:


Cоздадим игровой объект, с которым будем взаимодействовать, добавив collision object, форму столкновения и настроив наименование групп столкновений. Должно получиться примерно тоже самое:

Не забудьте настроить наименование групп столкновений:
image
В нашем случае игровой объект, созданный с компонентом столкновений, будет взаимодействовать с игровым объектом курсора, поэтому в маске столкновений указываем имя, заданное для collision object курсора.

Создадим скриптовый файл controller.script, добавим его в cursor.go:

local cursor = require "in.cursor"


function on_message(self, message_id, message, sender)
	if message_id == cursor.OVER then
		print("Cursor over", message.id, message.group, message.x, message.y)
	elseif message_id == cursor.OUT then
		print("Cursor out", message.id, message.group, message.x, message.y)
	elseif message_id == cursor.PRESSED then
		print("Pressed", message.id, message.group, message.x, message.y)
	elseif message_id == cursor.RELEASED then
		print("Released", message.id, message.group, message.x, message.y)
	elseif message_id == cursor.CLICKED then
		print("Clicked", message.id, message.group, message.x, message.y)
		if message.group == hash("defold") then
			print("clicked at defold", message.id, message.group, message.x, message.y)
			go.delete(message.id)
		end
	elseif message_id == cursor.DRAG_START then
		print("Drag started", message.id, message.group, message.x, message.y)
	elseif message_id == cursor.DRAG_END then
		print("Drag ended", message.id, message.group, message.x, message.y)
	elseif message_id == cursor.DRAG then
		print("Drag", message.id, message.group, message.x, message.y, message.dx, message.dy)
	end
end

Перейдём в коллекцию main.collection(у вас может быть другая коллекция) и настроим иерархию этой коллекции.
Добавим игровой объект controller:
image
Добавим в этот игровой объект cursor.go:


Добавим в коллекцию игровой объект defold.go:

Переместим его на видное место(от центра пересечения оси координат:

Выберите способ взаимодействия с игровым объектом — перемещение.
За оранжевый квадратик перемещайте:

Иерархия игровых объектов в main.collection должна выглядеть примерно так:

Не забудьте изменить стартовую коллекцию в настройках game.project :

Запустите проект — ctrl + B или f5:
cursor

Всем спасибо за внимание!
Если у вас есть замечания, пожелания или вопросы, оставляйте их в этой теме.