Теперь давайте сделаем анимацию ходьбы walk. Проблема в том что у нас нет готовых событий для движения например onMove или что то похожего как это у нас было с полётом. В голову приходит простое решение просто делать проверку в апдейте if (joystick.direction.x) как мы это делали с flipX в контроллере. Но дело в том что в состояния нельзя входить в апдейте, потому что в него нужно входить лишь один раз, а в апдейте всё происходит 60 раз в секунду, т.е. у вас 60 раз в секунду будет начинаться анимация и это будет выглядеть просто как анимация остановившаяся на первом кадре. По этому на полюбому нужно именно событие, причём такое событие, которое тригеррится один раз как onFallOff или onGround. И что же в таком случае делать? Опять переходить на Юнити? Конечно нет! В kaboom Мы можем сами создавать свои кастомные события! kaboomjs.com/#EventHandler с помощью методов trigger и on
Добавим джойстику триггер событий startMove и endMove:

onMousePress(() => {
        if(mousePos().dist(this.startPos) < 180) {
          this.pos = mousePos()
          this.trigger("startMove")
        }
      })

onMouseRelease(() => {
thumb.pos = vec2(0)
this.direction = vec2(0)
this.pos = this.startPos
outer.outline.color = BLACK
this.trigger("endMove")
})

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

joystick.on("startMove", () => {
this.enterState("walk")
})

this.onStateEnter("walk", () => {
this.play("walk")
})

joystick.on("endMove", () => {
this.enterState("idle")
})