HTML5 prototype: player movement like in TwinSpin game with Phaser
TwinSpin was a fun Flash game I am not even able to find anymore. If you know a working link, please tell me. All I was able to find at the moment is an iOS version.
Basically you have two spinning orbs. Each orb spins around the other orb, one clockwise and one counter-clockwise. Tapping or clicking the screen, the spinning orb stops and the other orb starts spinning.
Have a look:
Click or tap to stop one orb and move another.
It would have been very easy to handle everything with a single sprite with an anchor point in the centre of the fixed orb making it rotate clockwise or counter clockwise but there’s a detail: orbs move along a circular path but do not rotate themselves.
We can solve it with three sprites: one for each orb and one for the arm. We’ll move orbs using trigonometry, and here is the very basic source code:
I don’t think it needs comments but anyway you are free to ask questions. Download the source code.
Basically you have two spinning orbs. Each orb spins around the other orb, one clockwise and one counter-clockwise. Tapping or clicking the screen, the spinning orb stops and the other orb starts spinning.
Have a look:
Click or tap to stop one orb and move another.
It would have been very easy to handle everything with a single sprite with an anchor point in the centre of the fixed orb making it rotate clockwise or counter clockwise but there’s a detail: orbs move along a circular path but do not rotate themselves.
We can solve it with three sprites: one for each orb and one for the arm. We’ll move orbs using trigonometry, and here is the very basic source code:
var game;
var ballDistance = 160;
var rotationSpeed = 4;
window.onload = function() {
game = new Phaser.Game(640, 960, Phaser.AUTO, "");
game.state.add("PlayGame", playGame);
game.state.start("PlayGame");
}
var playGame = function(game){};
playGame.prototype = {
preload: function(){
game.load.image("firstball", "firstball.png");
game.load.image("secondball", "secondball.png");
game.load.image("arm", "arm.png");
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
},
create: function(){
this.arm = game.add.sprite(game.width / 2, game.height / 2, "arm");
this.arm.anchor.set(0, 0.5);
this.balls = [
game.add.sprite(game.width / 2, game.height / 2, "firstball"),
game.add.sprite(game.width / 2, game.height / 2, "secondball")
]
this.balls[0].anchor.set(0.5);
this.balls[1].anchor.set(0.5);
this.rotationAngle = 0;
this.rotatingBall = 1;
game.input.onDown.add(this.changeBall, this);
},
update: function(){
this.rotationAngle = (this.rotationAngle + rotationSpeed * (this.rotatingBall * 2 - 1)) % 360;
this.arm.angle = this.rotationAngle + 90;
this.balls[this.rotatingBall].x = this.balls[1 - this.rotatingBall].x - ballDistance * Math.sin(Phaser.Math.degToRad(this.rotationAngle));
this.balls[this.rotatingBall].y = this.balls[1 - this.rotatingBall].y + ballDistance * Math.cos(Phaser.Math.degToRad(this.rotationAngle));
},
changeBall:function(){
this.arm.position = this.balls[this.rotatingBall].position
this.rotatingBall = 1 - this.rotatingBall;
this.rotationAngle = this.balls[1 - this.rotatingBall].position.angle(this.balls[this.rotatingBall].position, true) - 90;
}
}