Перед тем как писать логику джойстика давайте сначала нарисуем сам стик джойстика который будет двигаться и круг границы в которой он будет двигаться. Но рисовать мы будем не в основном коде, а уже внутри компонента. Потому что эти элементы являются неотъемлемой частью джойстика. Напишем такой код:

function joystickComp() {
return {
id: "joystickComp",
require: ["pos"],

add() {
let thumb = this.add([
circle(16, {fill: false}),
outline(4),
anchor("center"),
])

let outer = this.add([
circle(72, {fill: false}),
outline(4),
anchor("center"),
])
},
update() {

},
}
}

Как видите тут мы добавляем два объекта-кружка - стик (thumb) и границы движения стика (outer). Не лучшие названия конечно, но у меня не хватает фантазии и знания английского чтобы их лучше назвать, так что пока так. Добавляем мы их не через add() как обычно, а через this.add() . Это значит что мы добавляем объект какбы не на главную сцену, а конкретно внутрь объекта. Это не то же самое что компонент, который добавляет кусочек целого объекта. Отличия в то что this.add() добавляет полноценный объект который сам может иметь собственные компоненты. Но в то же время эти дочерние объекты имеет общие черты с родительским, например у них точка отсчёта позиции в центре родительского объекта, поэтому они будут перемещаться вместе с ним. Есть ещё некоторые общие черты, которые я не помню)
Далее в этих дочерних объектах идут компоненты circle, outline и anchor. Компонент circle мы уже знаем, но здесь он не обычный, там ещё передаётся дополнительнй аргумент в виде {fill: false} об этом подробно написано в документации kaboomjs.com/#CircleCompOpt если вкратце, то это просто убирает заполнение фигуры. outline(4) - это обычная обводка толщиной в 4 пикселя подробнее в документации https://kaboomjs.com/#outline
anchor - это привязка мы её уже добавляли.