Виртуальный джойстик овальный, вместо раунда

Question

Я отчаянно пытаюсь создать виртуальный джойстик в Javascript с Phaser. Моя проблема в том, что граница джойстика не круглая, она овальная. Я не знаю, почему.

Я приготовил немного FiddleJS, чтобы продемонстрировать мою проблему:

// Initialize Phaser, and creates a 400x490px game 
 
var game = new Phaser.Game(400, 400, Phaser.AUTO, 'game_div'); 
 
var game_state = {}; 
 

 
// Creates a new 'main' state that wil contain the game 
 
game_state.main = function() { }; 
 
game_state.main.prototype = { 
 

 
    preload: function() { 
 
\t \t // Function called first to load all the assets 
 
     //game.load.image('hello', ''); 
 
    }, 
 

 
    create: function() { 
 
    \t //setup of the virutal joystick 
 
     this.joyStick = game.add.sprite(200, 200, 'shadedlightjoystick'); 
 
     this.joyStick.anchor.setTo(0.5,0.5); 
 

 
     joyStickStartPositionX = this.joyStick.width * 1.5; 
 
     joyStickStartPositionY = game.camera.height - this.joyStick.height * 1.2; 
 
     this.joyStick.inputEnabled = true; 
 
     this.joyStick.input.enableDrag(false); 
 
     maxMovingDistanceJoyStick = this.joyStick.width/1.5; 
 
    }, 
 
    
 
    update: function() { 
 
     var joyStickStartPositionX = 200; 
 
     var joyStickStartPositionY = 200; 
 
\t \t // joystick bevariour 
 
     if(game.input.activePointer.isDown) { 
 
      
 
      distanceBetweenJoyStickInput = this.distance(this.joyStick.x, this.joyStick.y, joyStickStartPositionX, joyStickStartPositionY); 
 
      
 
      if(distanceBetweenJoyStickInput > maxMovingDistanceJoyStick){ 
 

 
       var distanceX = game.input.x - joyStickStartPositionX; 
 
       var distanceY = game.input.y - joyStickStartPositionY; 
 

 
       var multiplierY = Math.cos(distanceY/Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2))); 
 
       
 
       if(distanceY > 0) { 
 
        multiplierY = -1 + multiplierY; 
 
       }else{ 
 
       \t multiplierY = 1 - multiplierY; 
 
       } 
 

 

 
       this.joyStick.x = joyStickStartPositionX + maxMovingDistanceJoyStick * Math.sin(distanceX/Math.sqrt(Math.pow(distanceX,2) + Math.pow(distanceY,2))); 
 
       
 
       this.joyStick.y = joyStickStartPositionY - maxMovingDistanceJoyStick * multiplierY; 
 
      } 
 

 
     }else{ 
 
      this.joyStick.x = joyStickStartPositionX; 
 
      this.joyStick.y = joyStickStartPositionY; 
 
     } 
 
    }, 
 
    
 
    distance:function (x1, y1, x2, y2) { 
 

 
     var dx = x1 - x2; 
 
     var dy = y1 - y2; 
 

 
     return Math.sqrt(dx * dx + dy * dy); 
 

 
    }, 
 
}; 
 

 
// Add and start the 'main' state to start the game 
 
game.state.add('main', game_state.main); 
 
game.state.start('main');

#game_div { 
 
     width: 400px; 
 
     margin: auto; 
 
     margin-top: 50px; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.3/phaser.min.js"></script> 
 
<div id="game_div"> </div>

Что я должен изменить, что граница джойстика круглая, а не овальная?

Если вы предпочитаете jsfiddle: https://jsfiddle.net/Lmodkda1/24/

Большое спасибо!

Answer 1

Вы не должны делить расстояния. Вам нужно длину гипотенузы и угол:

var hyp = Math.min(Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)), maxMovingDistanceJoyStick); 
var angle = Math.atan(distanceY/distanceX) 
var mul = distanceX < 0 : -1 ? 1; 

И тогда вам нужно использовать, что с соз и грех:

this.joyStick.x = joyStickStartPositionX + hyp * Math.cos(angle) * mul; 
this.joyStick.y = joyStickStartPositionY + hyp * Math.sin(angle) * mul;