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
var newH
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()
// scale the map to the size of the circle
newW = (1280/512)*size
console.log("newW",newW)
newH = size
// create bitmapdata to draw on for our sprite
earthBMD=game.make.bitmapData(size,size,'earthBMD')
// create bitmap data to use for copying scroll to sprite earthBMD
scrollEarthBMD = game.make.bitmapData(newW+size, newH, 'scrollEarthBMD')
scrollEarthBMD.copy('texture',0,0,1280,512,0,0,newW,newH);
scrollEarthBMD.copy('texture',0,0,512,512,newW,0,size,size);
// make a sprite to display the bitmap data
earth = game.add.sprite(0,0,earthBMD)
// 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;
...