Help: Sphere Rotation
http://www.html5gamedevs.com/topic/18119-sphere-rotation/
by chongdashu
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.js"></script>
JavaScript
/**
* Credits: Images:
- texture: http://pics-about.space/nasa-world-map-texture?p=1
- sphere: http://www.devbattles.com/en/sand/post-1881-Rotation_of_planets_in_space_on_HTML5_JavaScript
- HTML5GameDevs.com Forum members: chg, weratius.
*/
preload = function () {
game.load.crossOrigin = 'anonymous';
game.load.image("texture", "http://i.imgur.com/G4xEZx3.jpg");
game.load.image("sphere", "http://i.imgur.com/cyz54kw.png");
game.load.image("button", "http://i.imgur.com/oS5Q1Jx.png");
this.game.world.setBounds(-game.world.width / 2, -game.world.height / 2,
game.world.width, game.world.height);
};
create = function () {
var ball = game.add.sprite(0, 0);
var texture1 = game.make.sprite(0, 0, "texture");
var texture2 = game.make.sprite(0, 0, "texture");
var mask = game.add.graphics(0, 0);
mask.beginFill(0xFFFFFF);
mask.drawCircle(0, 0, 250);
ball.mask = mask;
this.rotation = Phaser.Math.degToRad(-15);
texture1.anchor.set(0.5, 0.5);
texture2.anchor.set(0.5, 0.5);
ball.addChild(texture1);
ball.addChild(texture2);
texture1.rotation = this.rotation;
texture2.rotation = this.rotation;
texture1.x += texture1.width / 2 * Math.cos(this.rotation);
texture2.x -= texture1.width / 2 * Math.cos(this.rotation);
texture1.y += texture1.width / 2 * Math.sin(this.rotation);
texture2.y -= texture1.width / 2 * Math.sin(this.rotation);
this.texture1 = texture1;
this.texture2 = texture2;
this.speed = 1;
var sphere = game.add.sprite(0, 0, "sphere");
sphere.anchor.set(0.5, 0.5);
// debug
this.textMask = game.add.text(-300, 102, "Toggle Mask", {
fill: "white",
font: "10pt Arial"
});
this.buttonMask = game.add.button(-200, 100, 'button',
function () {
ball.mask = ball.mask ? null : mask;
});
this.textShadow = game.add.text(-300, 132, "Toggle Shadow", {
fill: "white",
font: "10pt...