Поверните объект, чтобы увидеть мышь (Craftyjs)

Я пытался заставить мою сущность игрока поворачиваться к мышке, но я не могу вызвать событие MouseMove для запуска.

Crafty.e("2D, Mouse, Canvas, Color"
   .attr({ w:1000, h:1000, x:0, y:0 })
   .bind('MouseMove', function(e)
   {
         console.log("Mouse Pos:"+ e.x +","+e.y);
        //get hero
         var pos1 = {
           x: e.x,
           y: e.y
         }
         var pos2 = {
           x: player.x,
           y: player.y
         }
         player.rotation = 0;
         player.rotation = -Engine.degree(pos1, pos2);


     })

Когда я заменяю MouseMove щелчком мыши или mousedown или любым другим событием мыши, он поворачивается к мыши, когда это событие происходит. Однако он никогда не вызывает функцию mousemove. Что я делаю неправильно?

1 ответ

Взгляните на CraftyMouseFace, компонент Crafty, созданный сообществом:

Этот компонент выполняет следующие функции:

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

Первая функция звучит как то, что вам нужно.

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

Crafty.init();

Crafty.e("2D, DOM, Color, MouseFace")
    .attr({x: 75, y: 75, w: 60, h: 60})
    .origin("center")
    .color('green')
    .bind("MouseMoved", function(data) {
        this.rotation = data.rad * 180 / Math.PI;
    });
<script src="https://github.com/craftyjs/Crafty/releases/download/0.7.1/crafty-min.js"></script>
<script src="https://cdn.rawgit.com/petarov/CraftyMouseFace/master/src/craftyMFace.js"></script>

Другие вопросы по тегам