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 scaledEarthBMD
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 scale map down to
scaledEarthBMD = game.make.bitmapData(newW, newH,'scaledEarthBMD')
// create bitmap data to use for copying scroll to sprite earthBMD
scrollEarthBMD = game.make.bitmapData(newW+size, newH, 'scrollEarthBMD')
// draw scaled down map to BMD2
scaledEarthBMD.draw('texture',0,0,newW, newH)
// coyp scaled earth to scrol; bitmap
var rect = {x:0, y:0, width:newW, height:newH}
scrollEarthBMD.copyRect(scaledEarthBMD,rect, 0,0)
rect = {x:0, y:0, width:size, height:size}
//copy extra portion to scroll
scrollEarthBMD.copyRect(scaledEarthBMD,rect, newW,0)
scaledEarthBMD.destroy()
// 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
...