PIXI Glow Filter on Map Sprites

[zaraku]

Hi, I have little JS knowledge but virtually none when it comes to sprites. I've been using Filter Controller for glow filters but I ran into general compatibility issues with the plugin, so I want to make my own. For now, I'll start with the player character, and extend it to followers/events on my own once I know I'm headed towards the right direction.

The goal is to make the player sprite glow (for a set duration, but I'll implement that later):
1) I know how to set up the filter itself, but what sprite class should I put the filter functions in? Would it be Spriteset_Map? Sprite_Character?
2) How do I target the player sprite specifically? I'm used to doing code snippets (something like $gameActors.actor(1).___.setGlowFilter()?) but I can't figure this one out.

Thanks in advance.

 

[Eliaquim]

I'm pretty sure that you have to do it in sprite character.
But if you mean to use it in battle, I don't know for sure, but maybe in Sprite_Battler.

 

[Silva]

1) I'd say Sprite_Character, as that is what represents the player.

2) There's no way to reverse access an actors sprite from their game object as far as I'm aware. What you could do is while you're adding the filter to the Sprite_Character class add a function for reading something from the _character (_character is a property on Sprite_Character that refers to the object it's representing) that will allow you to toggle this. I've only used PIXI filters once and don't remember how they work so you'll need to fill that part in, but as an example:

Game_Player.prototype.setGlow = function(glow) {  //glow is a boolean (true/false)
    this._glow = glow;
};

var _zaraku_Sprite_Character_update = Sprite_Character.prototype.update;
Sprite_Character.prototype.update = function() {
    _zaraku_Sprite_Character_update.call(this);
    this.updateGlow();
};

Sprite_Character.prototype.updateGlow = function() {
    if (this._character._glow) {
        //turn on glow filter
    } else {
        //turn off glow filter
    }
};

Naturally, you could change where you add the setGlow method to Game_Character to make it available for followers, vehicles and events. Depending on how PIXI filters actually work when turning them on and off the updateGlow method may need some adjustments if you only want the "turn on" and "turn off" parts to execute once per change on the player/character object, but hopefully that gives you a good jumping off point.

 

[zaraku]

1) I'd say Sprite_Character, as that is what represents the player.

2) There's no way to reverse access an actors sprite from their game object as far as I'm aware. What you could do is while you're adding the filter to the Sprite_Character class add a function for reading something from the _character (_character is a property on Sprite_Character that refers to the object it's representing) that will allow you to toggle this. I've only used PIXI filters once and don't remember how they work so you'll need to fill that part in, but as an example:

Game_Player.prototype.setGlow = function(glow) {  //glow is a boolean (true/false)
    this._glow = glow;
};

var _zaraku_Sprite_Character_update = Sprite_Character.prototype.update;
Sprite_Character.prototype.update = function() {
    _zaraku_Sprite_Character_update.call(this);
    this.updateGlow();
};

Sprite_Character.prototype.updateGlow = function() {
    if (this._character._glow) {
        //turn on glow filter
    } else {
        //turn off glow filter
    }
};

Naturally, you could change where you add the setGlow method to Game_Character to make it available for followers, vehicles and events. Depending on how PIXI filters actually work when turning them on and off the updateGlow method may need some adjustments if you only want the "turn on" and "turn off" parts to execute once per change on the player/character object, but hopefully that gives you a good jumping off point.

Thanks a lot, this is very much a good starting point. I got your code working with these additions and just calling $gamePlayer.setGlow(true, 0xFFFF00) via console:

var _zaraku_Sprite_Character_initMembers = Sprite_Character.prototype.initMembers;
Sprite_Character.prototype.initMembers = function() {
    _zaraku_Sprite_Character_initMembers.call(this);
    this._filters = this._filters || [];
    this.createGlowFilters();
};
Sprite_Character.prototype.createGlowFilters = function() {
    this._glowFilter = new PIXI.filters.GlowFilter;
    this._glowFilter.innerStrength = 0;
    this._glowFilter.outerStrength = 0;
    this._glowFilter.color = 0xFF;
    this._filters.push(this._glowFilter);
};
Game_Player.prototype.setGlow = function(glow, color) {
    this._glow = glow;
    this._color = color; //e.g. 0xFFFF00
};
var _zaraku_Sprite_Character_update = Sprite_Character.prototype.update;
Sprite_Character.prototype.update = function() {
    _zaraku_Sprite_Character_update.call(this);
    this.updateGlow();
};
Sprite_Character.prototype.updateGlow = function() {
    if (this._character._glow) {
        this._glowFilter.outerStrength = 2;
        this._glowFilter.color = this._character._color;
    } else {
        this._glowFilter.outerStrength = 0;
    }
};

It's a lot more elegant than the clunky solution I made, which involved using Spriteset_Map instead (as it contained all of the sprites on the map). I basically iterated through all of the sprites to find either the player or a specific event in order to set its glow:

// snippet

Game_Interpreter.prototype.setGlowEvent = function(args) {
    var event_id = 0;
    if (args[0] === "this") {
        event_id = this.eventId();
    } else {
        event_id = Number(args[0]);
    }
    var inStr = Number(args[1]);
    var outStr = Number(args[2]);
    var color = Number(args[3]);
    var duration = Number(args[4]);
    for (var i = 0; i < SceneManager._scene._spriteset._characterSprites.length; i++) {
        var char = SceneManager._scene._spriteset._characterSprites[i];
        if (char._character.constructor.name === "Game_Event" && char._character.eventId() == event_id) {
            SceneManager._scene._spriteset.setupGlowFilter(char, inStr, outStr, color, duration);
        };
    };
};

Game_Interpreter.prototype.setGlowPlayer = function(args) {
     var inStr = Number(args[0]);
     var outStr = Number(args[1]);
     var color = Number(args[2]);
     var duration = Number(args[3]);
     for (var i = 0; i < SceneManager._scene._spriteset._characterSprites.length; i++) {
        var char = SceneManager._scene._spriteset._characterSprites[i];
        if (char._character.constructor.name === "Game_Player") {
            SceneManager._scene._spriteset.setupGlowFilter(char, inStr, outStr, color, duration);
        };
    };
};

ZAR_Spriteset_Map_update = Spriteset_Map.prototype.update;
Spriteset_Map.prototype.update = function() {
    ZAR_Spriteset_Map_update.call(this);
    for (var i = 0; i < this._characterSprites.length; i++) {
        var char = this._characterSprites[i];
        this.updateGlowFilter(char);
    };
};

With all of the for-loops going on I doubt it's very efficient at all, so I think I'll work with what you gave me instead.