Skip to content

Instantly share code, notes, and snippets.

@netcell

netcell/AddPlugin.js

Last active September 15, 2015 09:24
Download ZIP

Revisions

  1. netcell revised this gist Sep 15, 2015. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion CustomPluginTemplate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,6 @@ function FrameRenderPlugin(){
    transform : 'scale(' + plugin.img.scale + ')'\
    }\"></div>"
    }
    this.img = {};
    });
    }

  2. netcell created this gist Sep 15, 2015.
    1 change: 1 addition & 0 deletions AddPlugin.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Phaser.Plugin.Inspector.DetailPlugin.add(Phaser.Plugin.Inspector.DetailPlugin.FrameRenderPlugin);
    69 changes: 69 additions & 0 deletions CustomPluginTemplate.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    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>"
    }
    this.img = {};
    });
    }

    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;
    }
    }
    }
    }