JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.js"></script>
JavaScript
var earthBMD
var scrollEarthBMD
var earth
var shadow
var size = 250 // diameter of circle
var mapW = 1280 // width of texture
var mapH = 512 // height of texture
var planet // group to put everything in
var newW = mapW * (size/mapH)
var newH = size
game = new Phaser.Game(640, 480, Phaser.AUTO, '', {
preload: preload,
create: create,
update: update
});
function preload () {
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");
};
function create() {
planet = game.add.group()
var useScaledEarthBitmap = false // set this true/false
if(useScaledEarthBitmap) {
// create bitmap data to scale map down to
scaledEarthBMD = game.make.bitmapData(newW, newH,'scaledEarthBMD',true)
scaledEarthBMD.draw('texture',0,0,newW, newH)
earth = game.add.tileSprite(0,0,250,250,scaledEarthBMD)
}
else {
// if you want to use the full texture
earth=game.add.tileSprite(0,0,250,250,'texture')
var scale=size/mapH
earth.tileScale = new Phaser.Point(scale, scale)
}
// add our highlight
shadow = game.make.sprite(0,0,'sphere')
// center our sprites
earth.anchor.set(0.5)
shadow.anchor.set(0.5)
// create a mask
g = game.add.graphics(0,0)
g.beginFill(0xFFFFFF,1)
// smooth off the edge by drawing a bit smaller than the sphere which is jagged
g.drawCircle(0,0,size-2)
// rotate our sprite.. no need to rotate the texture
earth.angle=-15;
// put the earth and the mask into the group to make moving them both simpler
planet.add(earth)
planet.add(g)
planet.add(shadow)
planet.mask = g
planet.x = game.width/2
planet.y = game.height/2
// just for debugging
earth.inputEnabled = true;
...