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="game_div"> </div>
<div id="console_messages"> </div>
CSS
#game_div {
width: 400px;
margin: auto;
margin-top: 50px;
}
JavaScript
var game = new Phaser.Game(100, 100, Phaser.AUTO, 'game_div');
var GameState = {
create: function () {
game.plugin = game.plugins.add(Phaser.Plugin.Virtual);
game.plugin.setup();
}
};
game.state.add('GameState', GameState);
game.state.start('GameState');
Phaser.Plugin.Virtual = function (game, parent) {
Phaser.Plugin.call(this, game, parent);
this.game = game;
};
Phaser.Plugin.Virtual.prototype = Object.create(Phaser.Plugin.prototype);
Phaser.Plugin.Virtual.prototype.constructor = Phaser.Plugin.Virtual;
Phaser.Plugin.Virtual.prototype.setup = function (player, buttons) {
this.bitmap = {};
console.log("I created this.bitmap its value is: ");
console.log(this.bitmap);
//here this.bitmap is {}, I pass as the first parameter
this.setTexture(this.bitmap, '#4BAFE3', 30, 30);
//after return setTexture, this.bitmap is {} again but it would be a bitmap
console.log("After call the function this.bitmap value is:");
console.log(this.bitmap);
this.arrow = {};
console.log("I created this.arrow its value is: ");
console.log(this.arrow);
//here this.arrow is {}, I pass as the first parameter too
this.setColor(this.arrow, 10, 20, 0.5, 90);
console.log("After call the function the value for this.arrow is:");
console.log(this.arrow);
//the same problem as before, this.arrow is {} but it would be a button
}
Phaser.Plugin.Virtual.prototype.setTexture = function (item, color, width, height) {
//I create a bitmap in item. item is this.bitmap
console.log("Inside the setTexture this.bitmap is item and its value is: ");
console.log(item);
var item = this.game.add.bitmapData(width, height);
item.ctx.fillStyle = color;
item.ctx.fillRect(0, 0, width, height);
console.log("I assigned a bitmapData to item and its value is:");
console.log(item);
};
Phaser.Plugin.Virtual.prototype.setColor = function (item, x, y, alpha) {
//I create a button in item. item is...