Phaser Inspector Plugin Example

AddPlugin.js

Phaser.Plugin.Inspector.DetailPlugin.add(Phaser.Plugin.Inspector.DetailPlugin.FrameRenderPlugin);

CustomPluginTemplate.js

function FrameRenderPlugin(){
	Phaser.Plugin.Inspector.DetailPlugin.call(this, {
		/** Title */
		header      : 'Frame',
		fields      : {
			/** 
			 * Angular.js template
			 * @type {String}
			 * The `plugin` variable in the scope is pointed
			 * to this instance of the plugin.
			 */
			template : "<div class=\"frame-img\" ng-style=\"{\
				'padding-left'        : 0,\
				background            :'url('+plugin.img.url+')',\
				width                 : plugin.img.width+'px',\
				height                : plugin.img.height+'px',\
				'background-position' : (-plugin.img.x) + 'px ' + (-plugin.img.y) + 'px',\
				transform             : 'scale(' + plugin.img.scale + ')'\
			}\"></div>"
		}
	});
}

Phaser.Plugin.Inspector.DetailPlugin.FrameRenderPlugin = FrameRenderPlugin;
FrameRenderPlugin.prototype = Object.create(Phaser.Plugin.Inspector.DetailPlugin);
FrameRenderPlugin.constructor = FrameRenderPlugin;

/**
 * Reset function is called with the selected DisplayObject is changed
 * @param  obj - The Phaser Display Object
 * @param  wrapObj - A wrapped Display Object to provide some utilities
 */
FrameRenderPlugin.prototype.reset = function reset(obj, wrapObj){
	if (!obj) return;
	this.img = wrapObj.img;
	/** The condition to show or not to show the section of this plugin */
	this.show = !!wrapObj.img.url;
};
/**
 * Update function is called every frame
 * You should ALWAYS CACHED the values instead of 
 * pointing directly at an object
 * @param  obj - The Phaser Display Object
 * @param  wrapObj - A wrapped Display Object to provide some utilities
 */
FrameRenderPlugin.prototype.update = function update(obj, wrapObj){
	var img = this.img = {};
	var texture = this.obj.texture;
	if ( texture && texture.baseTexture) {
		var source = texture.baseTexture.source;
		if (source && source.src) img.url = source.src;
		else if (texture.getBase64) {
			img.url = texture.getBase64();
		}
		if (img.url) {
			var frame  = texture.frame;
			img.width  = frame.width;
			img.height = frame.height;
			img.x      = frame.x;
			img.y      = frame.y;
			img.scale  = 1;
			var detailPanelWidth = $('.frame-img').parent().innerWidth();
			if (frame.width > detailPanelWidth) {
				img.scale = detailPanelWidth/frame.width;
			}
		}
	}
}