Давайте разберём этот шаблон по порядку. В первой строчке мы просто создаём обычную функцию под названием joystickComp, такие функции есть в любом языке программирования и надеюсь вы все знаете как они работают) Название компонента должно отличаться от названия объекта, но в то же время передавать смысл того что он делает. Поэтому я назвал его просто joystick с припиской Comp. Лучше конечно придумать название из одного слова но я не придумал(
На второй строчке идёт возврат значения return и возвращаем мы объект. В js объекты определяются с помощью фигурных скобок. Теперь посмотрим что внутри этого объекта. Сначала идут свойства объекта id и require. id - это уникальный идентификатор компонента обычно он совпадает с названием функции, нельзя делать два компонента с одинаковым id так что будьте внимательны. require - это другие компоненты, которые требуются для работы этого компонента. Например мы будем изменять позицию джойстика в зависимости от того куда нажмёт пользователь, поэтому нам понадобится компонент с id "pos". И да тут пишется именно id компонента, а не название функции, но у всех стандартных компонентов id и название функции которыми они добавляются совпадают, поэтому их не обязательно запоминать и вы кстати тоже старайтесь чтобы название функции и id ваших компонентов совпадали. Можно ещё добавить любые свои свойства, но эти два обязательные. Далее идут методы add и update . Они работают точно также как init (create) и update в любых других движках. То есть весь код в add() будет вызван один раз при создании главного объекта, в нашем случае в самом начале игры, а код в update() будет вызываться 60 раз в секунду точно так же как и в событии onUpdate , котрый мы создавали в самом начале чтобы двигать игрока.
Так что пока просто создавайте пустой компонент и добавляйте его в объект как показано на скрине. Далее будем писать логику джойстика в этом компоненте.