Мы начинаем подходить к сложной теме - машине состояний и смене анимаций персонажа. Ну а пока давайте просто сделаем так чтобы моль поворачивалась впаво-влево в зависимости от того в какое направление идёт:

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

add() {

},
update() {
this.move(joystick.direction.scale(200))
if (joystick.direction.x)
this.flipX = joystick.direction.x < 0
},
}
}

Для этого в контроллере персонажа в апдейте добавим две строчки
if (joystick.direction.x)
this.flipX = joystick.direction.x < 0
сначала разберём вторую. В ней мы просто поворачиваем персонажа в зависимости от направления джойстика. flipX - свойство, которое добавляет компонент sprite это булевое (да - нет) значение, которое просто отвечает за поворот спрайта. Подробнее kaboomjs.com/#SpriteComp . joystick.direction.x - у вас мог возникнуть вопрос откуда взялся "х" у вектора хотя мы уже не раз смотрели в документацию kaboomjs.com/#Vec2 по вектору и знаем что у него есть значения "х" и "у", которые можно получить напрямую. Ну а дальше простая математическая проверка х < 0 , которая может вернуть true или false, должна быть понятна. Если мы напишем только вторую строчку без проверки if, то у нас персонаж будет поворачиваться впрво каждый раз когда мы отпускаем джойстик, а нам надо чтобы он изменял поворот только когда джойстик двигается. Поэтому мы проверяем двигается ли джойстик т.е. не равен ли он нулю if (joystick.direction.x != 0) , Но вы могли заметить, что в коде выше нет проверки с нулём, там просто if (joystick.direction.x) , это просто такое сокращение в js и на самом деле можно написать и так и так и всё будет работать. И ещё небольшой момент - после условия if нет фигурных скобок {} это тоже сокращение, если после условия if идёт всего одна строчка, то фигурные скобки можно не писать. Без сокращений это выглядело бы так:

if (joystick.direction.x != 0) {
this.flipX = joystick.direction.x < 0
}