Кросс-платформенная разработка мобильных игр на Cocos Creator — Урок 3

Урок 3 — прыжок героя

Приветствую и добро пожаловать в третий урок нашего курса. В этом уроке мы займемся разработкой функционала прыжка героя.

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

Функционал прыжка мы запрограммируем в компоненте Hero, который прикреплен к ноде героя.

Открываем файл Hero.js. Начнем с того, что опишем отслеживание события, по которому нужно начать прыжок. Нам потребуется установить обработчик для событий нажатия пробела и тапа. Подобную инициализацию параметров самого компонента лучше выполнять в методе start. Заведем в методе start 2 флага, которые будут отражать текущий статус компонента:

       this.isJumping = false;
       this.jumpKeyPressed = true;

Теперь опишем отслеживаем событий и установку коллбеков. Такую общую инициализацию поместим в метод onLoad:

       cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, event => {
           switch(event.keyCode) {
               case cc.macro.KEY.space:
                   this.jumpKeyPressed = true;
                   break;
           }
       }, this);
       cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, event => {
           switch(event.keyCode) {
               case cc.macro.KEY.space:
                   this.jumpKeyPressed = false;
                   this.isJumping = false;
                   break;
           }
       }, this);
       this.node.parent.on(cc.Node.EventType.TOUCH_START, () => {
           this.jumpKeyPressed = true;
       }, this);
       this.node.parent.on(cc.Node.EventType.TOUCH_END, () => {
           this.jumpKeyPressed = false;
           this.isJumping = false;
       }, this);
   },

Мы устанавливаем флаг jumpKeyPressed в true, пока клавиша зажата или палец касается экрана. По нашим правилам, чем дольше мы держим тап или клавишу, тем выше будет прыжок. Поэтому обнуляем флаг jumpKeyPressed только по факту отпускания клавиши и тапа.
Кроме того мы завели флаг isJumping. Устанавливать его значение в true мы будем его в другом методе. А вот менять на false необходимо сразу по факту отпускания тапа. В таком случае мы считаем, что герой точно не в состоянии прыжка в данный момент.

Итак флаги есть, состояния меняются. А в каком методе эти состояния нужно проверять?
Как вы помните из прошлого урока, метод update в компоненте вызывается для каждого нового кадра. Поэтому мы поместим в update следующий код:

   update(dt) {
       if (this.jumpKeyPressed) {
           this.jump();
       }

Если нажата клавиша (что обозначается флагом, установленным в onLoad), то выполняем метод jump. Реализуем в этом методе псевдокод:

if hero touches ground
remember hero's start position
set jump is not finished
set jump is started
set hero's Y speed
else if hero is jumping and jump is not finished
if jump distance is maximum
finish jump
else
keep hero's Y speed

Как видно из псевдокода, нам потребуется завести еще несколько свойств класса. Добавим в start инициализацию:

       this.touching = false;
       this.startJumpY = this.node.y;

флаг touching будет обозначать, касается ли нода hero в данный момент поверхности платформы.
startJumpY будет хранить координату Y ноды в момент старта прыжка
А также добавим в объект properties то, что мы хотим настраивать из редактора:

   properties: {
       jumpSpeed: cc.v2({x: 0, y: 300}),
       maxJumpDistance: 300,
}

Эти свойства мы сможем изменять визуально в самом редакторе в разделе свойств компонента Hero.
maxJumpDistance показывает максимальную высоту прыжка по оси Y.
а jumpSpeed — скорость прыжка — это объект — вектор, который мы будем устанавливать в виде значения свойству скорости компонента rigidbody.

Так как мы будем изменять свойства другого компонента этой ноды, то нам нужно получить нужный компонент. Сделать это можно с помощью метода getComponent.
В методе start добавим код:

       this.body = this.getComponent(cc.RigidBody);

Теперь в свойство body мы получим объект cc.RigidBody, то есть тот компонент, который отвечает за физическое тело. И изменяя свойства this.body мы сможем в частности регулировать скорость и благодаря этому реализовать прыжок.

И теперь приступим к реализации метода на основе нашего псевдокода:

   jump() {
       if (this.touching) {
           this.startJumpY = this.node.y;
           this.jumpFinished = false;
           this.isJumping = true;
           this.body.linearVelocity = this.jumpSpeed;
       } else if (this.isJumping && !this.jumpFinished) {
           const jumpDistance = this.node.y - this.startJumpY;

           if (jumpDistance < this.maxJumpDistance) {
               this.body.linearVelocity = this.jumpSpeed;
           } else {
               this.jumpFinished = true;
           }
       }
   },

Осталось обработать флаг touching, который у нас зависит от того, находится ли герой на платформе. Как вы помните в прошлом уроке мы реализовали 2 коллбек метода, которые вызываются движок в момент коллизии физических тел. В них и добавим установку данного флага:

   onBeginContact(contact, selfCollider, otherCollider) {
       this.touching = true;
   },

   onEndContact() {
       this.touching = false;
   },
},

Теперь проверим, что у нас получилось!

Проверим короткий прыжок, нажав клавишу и сразу отпустив. Проверим и длинный прыжок, зажав клавишу на некоторое время.
Как видим, все работает корректно.

Итак, на этом уроке мы реализовали прыжок героя благодаря доработке скрипта Hero.js. В следующем уроке мы займемся движение платформ и автоматической генерацией новых платформ.

Leave a reply:

Your email address will not be published.

Site Footer