2
我拼命想用Phaser在Javascript中创建一个虚拟游戏杆。 我的问题是,操纵杆的边框不是圆的,它是椭圆形的。我完全不知道为什么。虚拟游戏杆边框椭圆而不是圆形
我准备了一个小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>
我有什么改变了操纵杆的边界呈圆形,椭圆形不?
如果您prefere的jsfiddle:https://jsfiddle.net/Lmodkda1/24/
非常感谢您!
我已经为multiplyerY COS(..),增加这个会让它变得更加椭圆。 – SirSandmann
哎呀,对不起。现在编辑我的答案 – AlexKoren
好的,编辑好像是对的!我会在几个小时内更新小提琴并给你反馈。非常感谢你:) – SirSandmann