Быстрая анимация, чтобы следовать за курсором

Question

Я пытаюсь понять, как создать плавный курсор, следуя анимации с cocos2d js

Вот некоторый код:

var listener = cc.EventListener.create({
            event: cc.EventListener.MOUSE,
            onMouseMove: function (event) {
                var str = "MousePosition X: " + event.getLocationX() + "  Y:" + event.getLocationY();

                var actionBy = cc.MoveTo.create(2, cc.p(event.getLocationX(), $scope.bar._position.y));
                $scope.bar.stopAllActions();
                $scope.bar.runAction(
                    cc.sequence(
                        //cc.rotateTo(2, 0),
                        actionBy
                    )
                );


                // do something...
            }});

Проблема здесь в том, что она застряла, потому что событие часто запускается, и "$scope.bar.stopAllActions();" останавливает анимацию.

Если я уберу "$scope.bar.stopAllActions();" анимация сводит с ума, "бар" летит над экраном.

Я просто не буду следовать за курсором мыши, как собака следует за человеком

Answer 1

Проблема в том, что если вы удалите stopAllActions(); Вы пытаетесь выполнить действие на объекте, который уже получил действие того же времени. И в любом случае вы слишком часто запускаете анимацию на объекте, я редко видел эту работу, как ожидалось.

Я бы попробовал запустить действие напрямую, а не помещать его в cc.Sequence Во-первых, но если это не сработает, у вас есть два варианта, оба полагаются на ручной труд:

а. Просто поместите планку в положение мыши, когда она движется:$scope.bar.x = event.getLocationX();

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

В вашем постоянном разделе:

var EASING_CONSTANT = 0.9;

В обработчике событий:

$scope.bar.x += ($scope.bar.x - event.getLocationX()) * EASING_CONSTANT;

Чем ниже ваш EASING_CONSTANT чем медленнее полоса будет догонять мышь (используйте только значения от 0 до 1).

Теперь, если вы попробуете использовать это, вы поймете, что панель никогда не догоняет вашу мышь, поэтому вам придется поместить этот код в функцию обновления (в вашем основном игровом слое update метод, например), поэтому он запускает каждый кадр.

НО! Тогда у вас не будет доступа к event объект, так что вам придется в конечном итоге что-то вроде этого:

В обработчике событий:

$scope.bar.targetX = event.getLocationX();

В методе обновления:

$scope.bar.x += ($scope.bar.x - $scope.bar.targetX) * EASING_CONSTANT;

Есть много функций замедления, которые вы можете использовать, я просто привел вам самый простой пример.

Например, обратите внимание, что у вас также есть event.getDeltaX() метод, который вернет вам разницу в положении между последним вызовом события и текущим (насколько мышь переместилась с момента последнего вызова события). С этим вы можете сделать что-то вроде:

В вашем постоянном разделе:

var EASING_CONSTANT = 0.9;
var WOBBLING_CONSTANT = 10;

В обработчике событий:

$scope.bar.targetX = event.getLocationX();
$scope.bar.mouseDeltaX = event.getDeltaX();

В методе обновления:

$scope.bar.x += ($scope.bar.x - $scope.bar.targetX) * EASING_CONSTANT + Math.cos($scope.bar.mouseDeltaX) * WOBBLING_CONSTANT;

Просто проявите творческий подход и начните возиться с формулой, пока не найдете поведение, которое "чувствует себя правильно". Но сначала обязательно начните с простого!

PS: Полагаю, вы хотите, чтобы ваш "стержень" двигался только по оси X, так что... вы делаете клон арканоида?:D