Смешивание анимации (устарело)

Этот учебник использует устаревшие компоненты модели и анимации. Вместо этого обратитесь к учебнику по смешиванию анимаций Anim State Graph.

Нажмите на экран, чтобы сфокусироваться, затем нажмите клавишу 'p', чтобы смешать анимацию удара

Этот учебник демонстрирует основы смешивания анимации.

Объекты в вашей сцене могут быть анимированы; машины или персонажи - хорошие примеры того, что вы можете захотеть анимировать. В целом, когда создается 3D-контент, создаются отдельные анимации, и эти анимации обычно называются циклами (потому что они зациклены). Например, у человеческого персонажа может быть цикл бездействия, цикл ходьбы, цикл бега и так далее. Как разработчик PlayCanvas, вы захотите механизм для воспроизведения этих анимаций на вашем анимированном объекте. Кроме того, вы не хотите, чтобы эти анимации "всплывали", когда одна заменяется другой. Чтобы исправить это, вы должны использовать смешивание анимации, которое реализует плавный переход от одной анимации к другой. Это значительно улучшает визуальную достоверность вашего анимированного объекта.

Давайте рассмотрим, как это достигается с помощью PlayCanvas...

Компонент анимации

Чтобы применить анимацию к модели, вы добавляете компонент анимации к вашей сущности. Ниже приведена конфигурация скиннутого персонажа, отображаемого в редакторе PlayCanvas.

Анимированная сущность

На изображении вы можете увидеть компонент анимации в инспекторе. Назначены 2 анимационных ассета: цикл "бездействия" и цикл "удара". С такой настройкой компонента анимации поведение заключается в том, что воспроизводится первая анимация (цикл бездействия), и поскольку установлена опция зацикливания, она будет продолжать анимироваться до бесконечности. Однако мы хотели бы добиться чего-то более интересного:

Воспроизведение зацикленной анимации бездействия.
Смешать с зацикленной анимацией удара при нажатии клавиши.
Смешать обратно с бездействием при отпускании клавиши.

Таким образом, такая функциональность выходит за рамки возможностей простого компонента анимации. Требуется компонент скрипта для создания этого дополнительного поведения. Вы можете увидеть компонент скрипта на вышеуказанном снимке экрана сущности скиннутого персонажа в редакторе, и он ссылается на файл JS с названием animation_blending.js. Содержимое этого файла:

var AnimationBlending = pc.createScript('animationBlending');

AnimationBlending.states = {
    idle: {
        animation: 'male.json'
    },
    punch: {
        animation: 'male_uppercut_jab.json'
    }
};

// инициализация кода, вызываемого один раз для каждой сущности
AnimationBlending.prototype.initialize = function() {
    this.blendTime = 0.2;

    this.setState('idle');
};

AnimationBlending.prototype.update = function(dt) {
    if (this.app.keyboard.wasPressed(pc.KEY_P)) {
        this.setState('punch');
    }

    if (this.app.keyboard.wasReleased(pc.KEY_P)) {
        this.setState('idle');
    }
};

AnimationBlending.prototype.setState = function (state) {
    var states = AnimationBlending.states;

    this.state = state;
    // Установка текущей анимации, занимающей 0,2 секунды для смешивания от
    // текущего состояния анимации до начала целевой анимации.
    this.entity.animation.play(states[state].animation, this.blendTime);
};

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

Посмотрите полную сцену здесь