Для начала удалим строчку где мы двигаем моль
player.pos = mousePos() когда будем тестить джойстик она нам будет только мешать. теперь в нашем компоненте joystickComp() в методе add() после создания дочерних объектов подключим события onMousePress onMouseDown и onMouseRelease . Код внутри onMousePress вызывается один раз при нажатии по экрану, onMouseDown вызывается 60 раз в секунду когда мы касаемся экрана и onMouseRelease соответственно когда отпускаем палец и прекращаем нажатие. Подробнее в документации там эти события подряд опсаны https://kaboomjs.com/#onMouseDown . Сачала давайте просто проверим работают ли вообще эти события. Для этого в событии onMouseDown напишем: onMouseDown(() => {
thumb.pos = mousePos().sub(this.pos)
})
Кстати код в события вызывается в стрелочных функциях () => {} это странный синтаксис, к нему надо просто привыкнуть. Далее просто изменяем позицию нашего внутреннего маленького кружочка в зависимости от позиции курсора или нажатия. Но важно отметить, что тут прибавился новый метод, про который мы ранше не слышали .sub(this.pos) - это метод вычитания векторов. Про математические действия с векторами (х, у) можно писать бесконечно это большой раздел тригонометрии, если вкратце, то позиция состоит из координат "х" и "у" и при вычитании векторов мы просто из "х" вычитаем "х" другого вектора и из "у" соответственно "у" другого вектора. Зачем мы вычитаем из позиции мыши позицию основного объекта joystick? Это нужно потому что позиция дочернего объекта thumb определяется относительно родительского объекта joystick. Если мы это не напишем, то наш кружок будет где-то далеко справа внизу экрана, а не в позиции мыши. Можете это сами проверить. Просто запустите игру и понажимайте по экрану.