Расскажу о том как мы свяжем джойстик и персонажа, чтобы персонаж двигался в сторону наклона джойстика. В некоторых движках например Годо и Дефолте используется система сигналов которые посылаются от объекта к объекту, главным преимуществом такой системы является то, что приёмнику сигнала не важно какой именно объект послал сигнал поэтому можно изменять названия объектов и рефакторить код свободно и ничего не сломается. Но есть и второй тип движков типа pico8 и GameMaker. Там объекты связываются напрямую просто в один объект передаётся ссылка на другой и можно свободно считывать любое состояние одного объекта из другого. Такая система упрощает понимание кода для маленьких игр, но усложняет для больших. Т.к. мы делаем маленькую игру, то нам такая связь отлично подходит.
Итак в первую очередь нам надо отслеживать направление внутри самого джойстика, для этого создадим свойство this.direction и присвоим ему нормализованный вектор направления:

onMouseDown(() => {
thumb.pos = mousePos().sub(this.pos)
if (this.pos.dist(mousePos()) < outer.radius) {
outer.outline.color = BLACK
}
else {
thumb.pos = thumb.pos.unit().scale(outer.radius)
outer.outline.color = RED
}

this.direction = thumb.pos.unit()
})

Там добавилась только одна последняя строчка. thumb.pos.unit() - это нормализованный вектор позиции стика относительно центра.
Далее нам нужно передать джойстик игроку. Мы конечно можем передавать только направление, но нам в будущем понадобятся ещё некоторые свойства джойстика, поэтому передадим его сразу целиком в controllerComp вот так изменится игрок:

let player = add([
  controllerComp(joystick),
  sprite("moth"),
  anchor("center"),
  scale(4),
  pos(80, 80),
]);

Мы просто передали в компонент контроллера наш джойстик.
Далее давайте напишем логику движения внутри нашего контроллера:

export default function controllerComp(joystick) {
return {
id: "controllerComp",
require: ["pos"],

add() {

},
update() {
this.move(joystick.direction)
},
}
}

Добавилась две детали: 1) в первой строчке мы принимает joystick в наш компонент, который мы до этого передали.
2) добавили строчку this.move(joystick.direction) в update(). Она означает что мы просто двигаем игрока this в направлении наклона джойстика.
Если мы сейчас запустим игру, то увидим что моль двигается, но ооочень медленно почти незаметно. Поэтому давайте умножим вектор направления джойстика например на 200:
this.move(joystick.direction.scale(200))
Если сейчас запустим игру, то... Игра не запустится из-за ошибки. Будет просто белый экран или бесконечная загрузка, но как понять в чём же проблема. Для этого нам надо открыть консоль нажав на гаечный ключик справа вверху. И прочитать красную ошибку. Суть ошибки в том, что direction не определён и scale не может его прочитать. Чтобы её исправить нам нужно задать стандартное значение для direction. Для этого допишем в joystickComp строчку:

export default function joystickComp() {
return {
id: "joystickComp",
require: ["pos"],
direction: vec2(0),

Мы дописали direction: vec2(0), - это значит что мы определили своё собственное свойство объекту, сразу после того как определили обязательные свойства. я об этом писал выше. Теперь запустим игру и увидим что всё работает. Мы двигаем джойстик и моль двигается с нормальной скоростью. Ура!!
P.S. гифки и скрины скинулись ниже почемуто...