JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/photonstorm/phaser/releases/download/v2.3.0/phaser.min.js"></script>
<div id="gameDiv"></div>
JavaScript
var mainstate = {
preload: function() {
game.time.advancedTiming = true;
},
create: function() {
this.cursor = this.input.keyboard.createCursorKeys();
this.input.keyboard.addKeyCapture([Phaser.Keyboard.UP, Phaser.Keyboard.DOWN,
Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT]);
// CHANGE ORDER HERE TO CHANGE RENDERING ORDER!
this.layers = {
backgroundLayer: this.add.group(),
behindTheShipLayer: this.add.group(),
playerLayer: this.add.group(),
somethingInFronOfAPlayerButBehindInterface: this.add.group(),
interfaceLayer: this.add.group()
};
// FOR EXAMPLE PUT PLAYER LAYER AFTER BACKGROUND AND BEHIND EVERYTHING ELSE
// UNCOMMENT THIS TO SEE THE EFFECT.
/*this.layers = {
backgroundLayer: this.add.group(),
playerLayer: this.add.group(),
behindTheShipLayer: this.add.group(),
somethingInFronOfAPlayerButBehindInterface: this.add.group(),
interfaceLayer: this.add.group()
};*/
this.bmd0 = this.add.bitmapData(50, 50);
this.bmd0.ctx.beginPath();
this.bmd0.ctx.rect(0, 0, 50, 50);
this.bmd0.ctx.fillStyle = '#B365D4';
this.bmd0.ctx.fill();
this.playerShip = this.game.add.sprite(50, 50, this.bmd0, 0, this.layers.playerLayer);
this.physics.arcade.enable(this.playerShip);
this.bmd1 = this.add.bitmapData(100, 80);
this.bmd1.ctx.beginPath();
this.bmd1.ctx.rect(0, 0, 100, 80);
this.bmd1.ctx.fillStyle = '#F56E8B';
this.bmd1.ctx.fill();
this.behindShip = this.game.add.sprite(75, 75, this.bmd1, 0, this.layers.behindTheShipLayer);
this.planetsBehindTheShip = this.game.add.group();
this.planetsBehindTheShip.createMultiple(5, this.bmd1);
...