Pixi Filter Controller - fancy screen effects by pixi (MZ version released!)

Tsukimi-neko · 2018-01-24T18:23:01+0900

Filter Controller v2.0.9 Tsukimi (cji3bp62000) For anyone who is interested in this plugin but using RPG Maker MZ, there is a MZ version right HERE! last updated: 2018/03/13 minor update: update embedded PIXI.filters to v2.6.0 no any change on functionality. old updates: Spoiler 2018/03/13 Added displacement filter. Spoiler To use Displacement filter, one has to put the displacement image named 'DisplacementMap' under img/pictures/. (If you want to use other names, you can change the default name from plugin's parameter) Also, the image should be power-of-2 (such as 256x256, 512x512). please also take a look at the filter-list, displacement filter's parameter is also in it. 2018/02/10 Fix character id shift bug (when using target: 4xxx) again. if you face this bug, please download the plugin again. 2018/02/09 add motion blur filter, glow filter 2018/02/02 fix specific-character target index shift bug (ex. 4001 effects event#2 which should be #1) 2018/01/30 Spoiler ・add new target Object (target->specified char/pic only) Spoiler: target object filter-target: what will be included in the effect. 0: screen(map+pictures) 1: whole-screen(including message window) 2: map(tiles+characters), 21: map+parallax 3: tiles, 31: tiles+parallax, 32: parallax 4: all characers 4000+id: specific character (id: -1->game Player, 0->this event, 1~->event#id) 5: all pictures 5000+id: specific picture (id: picture id(1~99)) example: createFilter eff#1 twist 3999 ->the twist effect will only effects game player createFilter eff#1 twist 5001 ->the twist effect will only effects picture #1 ・add six new filter Controller（godray-np, adjustment, crt, pixelate, reflection-m, reflection-w） for the details, see the filter-list image(already updated) ・fix godray-filter iOS bug（temporarily. wait for pixi official update） about the bug, see here: https://github.com/pixijs/pixi-filters/pull/140 Introduction PIXI has lots of filters and still adding them in progress, so I create such a plugin to use them in MV. You can create and move these filters with only one plugin command. *** Notice !!! *** this is an webGL depending effect. If your RMMV version is below 1.5.0, "and" your game will release on website(html)/smartphone, this effect may not work. 1.5.0 or upper version allows WebGL rendering for website/smartphone. (OK for desktop application, even with version below 1.5.0) Features - Simple Creating and setting parameters of PIXI.filters. - (require javascript skills) Easy adding your own customized Filter Controller with less than 20 lines of code, most of witch are just copy & paste. Screenshots Demo PIXI provides a good demo of PIXI.filters here. You can preview what filter can you use. (though not all filters are implemented in Filter Controller) How to Use - Open your project, add and turn this script on in plugin manager. *** Create/Move filter by plugin command: Spoiler ignore all the <>. createFilter ( ) create filter. id: id of this controller. choose a name you like! filtertype: please look at the list of filter name. filter-target: what will be included in the effect. 0: screen(map+pictures) 1: whole-screen(including message window) 2: map(tiles+characters), 21: map+parallax 3: tiles, 31: tiles+parallax, 32: parallax 4: all characers 4000+id: specific character (id: -1->game Player, 0->this event, 1~->event#id) 5: all pictures 5000+id: specific picture (id: picture id(1~99)) character: optional parameter. If set, make filter Location depend on character, and will erase filter when leaving current map. ~-1: game Player (inBattle: enemy id) 0: this event (inBattle: current actor) 0~: event ID (inBattle: party member id) screen: screen. (mostly used for restricting filter to current map only) example: createFilter tw#1 twist 0 createFilter GLOW godray 2 screen eraseFilter erase the filter of controller name immediately. setFilter set the filter to the . please take a look at filter parameter list. Take twist as example. assume I created a twist filter named tw#1. twist has 4 parameters: x,y,radius,angle; so write: setFilter tw#1 0 0 96 4 Besides numbers, you can also set: x: Don't change from current parameter value v : value of Game Variable r ~ : Random value between #1 and #2. #1 and #2 can also be variables. example: setFilter tw#1 v1 v2 rv3~50 x x->var#1, y->var#2, radius->rand(var#3, 50), angle->no change moveFilter move filter to within . example: moveFilter tw#1 x x 96 4 60 moveFilterQ push the movement to Queue. will execute next move after the last move is end. example: moveFilterQ tw#1 0 0 96 4 60 moveFilterQ tw#1 x x x x 120 moveFilterQ tw#1 x x 0 0 60 (2nd command: no param changing -> wait 120f between moves) eraseFilterAfterMove erase Filter itself after move and moveQueue are end. setFilt…

● ARCHIVED · READ-ONLY

Started by Tsukimi-neko Jan 24, 2018, 09:23 AM 288 posts Page 4 of 15 View original ↗

KaYsEr

#61 Feb 25, 2018, 06:45 PM Source

lonewolph said:
how do I target an actor with an effect in battle? glow seems to work on the map but not battle unless im doing it wrong
I think this is written in the manual, a different kind of ID.

Arise said:
Maybe I'm asking something completely different, but is it possible to apply a mask to the filters?
Yes it's something different and not possible in that plugin from what I see, even though the "displacement" filter relies on some kind of mask, since you need a "reference sprite" for the displacement, maybe this is why it's so troublesome to implement yet.

You remind me about how amazing a mask system would be in MV, I had one in ACE and it was very powerful to simply use pictures to create very rich effects.

Let's say for example a waterfall, it's one of the most effective way to create one, since you have to simply scroll a water texture sprite on a "reference greyscale" sprite at the right position above the player.

I used that technic to create the fire in this video back when my game was on ACE: [embedded media]

Well, now for this specific effect I'd rather go with this topic's plugin and a displacement filter to create the flames, if it becomes available in the list of filters, but it seems @Isabella Ava also has trouble to add it.
Tsukimi-neko

#62 Feb 26, 2018, 02:42 AM Source

Sorry Guys!
Recently I had no time to reply questions and support my plugins, and this situation may be continue to next month or so on. :kaoswt:
I'm sorry!

>>lonewolph
sorry, I'm not good at battles (both playing and designing), so I can't support good targets...
You can only specify the direct id of characters(or enemy), or to the current character.

>>Arise
I think maybe no, sorry. But you can apply filter to a sprite, and mask the sprite; this may do the thing.

>>Isabella Ava
>>KaYsEr
Well, I just finally added displacement filter into it!
Thank you for waiting. It's a hard work for me to figure out how to achieve it. (or maybe I was just too lazy...:kaoback:)
To use Displacement filter, one has to put the displacement image named 'DisplacementMap' under img/pictures/.
(If you want to use other names, you can change the name from plugin's parameter)

The filter-list image also updated, so you can take a look at what parameter displacement filter has.
I think KaYsEr can make the 'floating flag effect' by this.
Please tell me if there was a bug. Thank you!

>>KaYsEr
Thank you for always answering questions and give me wonderful suggestions. You really helped me a lot.
Also, your work in Ace is amazing ...! It is enterprise game quality.

-----
For notification. I replied in the above post.
lonewolph

#63 Feb 26, 2018, 09:17 PM Source

i cant get the glow effect to appear in combat with any method
Tsukimi-neko

#64 Feb 27, 2018, 12:52 AM Source

>>lonewolph
I knew where the problem is. You can't specify target in battle. (can't use 4xxx in battle)
I will make battler be selectable in future update, please wait for a while.
Isabella Ava

#65 Feb 27, 2018, 04:50 AM Source

hi @cji3bp62000 i tried the displacement filter but it seem the filter only run once on screen. How to make it keep repeating?
Tsukimi-neko

#66 Feb 27, 2018, 04:58 AM Source

>> @Isabella Ava
Well that was weird... I should have dealt with this problem...
Does your displacement map image have a width and height of power-of-2? (such as 256x256, 512x512 )
Isabella Ava

#67 Feb 27, 2018, 01:54 PM Source

cji3bp62000 said:
>> @Isabella Ava
Well that was weird... I should have dealt with this problem...
Does your displacement map image have a width and height of power-of-2? (such as 256x256, 512x512 )
@cji3bp62000 oh, if i resized the map image to power of 2 then it works normally.
Before i tried with 890x715, and it seems the map had just slided once on screen :|
Can you explain the rule that the displacement Map work? (is it just looping horizontal + vertical?)
Tsukimi-neko

#68 Feb 27, 2018, 02:31 PM Source
>> @Isabella Ava
Good to hear it worked again.

Yes, I think it is just looping the map horizontal and vertical, I set a parameter wrapMode of the map sprite to 'repeat', otherwise it will just run once.

This is the special creation of displacement filter:
Spoiler

Code:
Filter_Controller.prototype.createDisplacement = function() { var s = new Sprite(ImageManager.loadPicture(TKMDisplacementMap)); var f = new PIXI.filters.DisplacementFilter(s); SceneManager._scene.addChild(s); return f; };
(custom displacement filter-controllers will also come here, so now you can make your own displacement filter)
and this is the update function:
Spoiler

Code:
var disp = function(filter, cp) { filter.maskSprite.x += cp[0]; filter.maskSprite.y += cp[1]; filter.scale.x = filter.scale.y = cp[2]; filter.maskSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; };
It's not good to set wrapMode every time updated, but I don't know how to set an onload function of pictures.
(the wrapMode has to be set after picture loaded to be working)
Isabella Ava

#69 Feb 27, 2018, 02:50 PM Source

Thanks you @cji3bp62000 for detail explain :)
KaYsEr

#70 Feb 27, 2018, 09:19 PM Source

This is great, can't wait to try the new filter! (Now I work on dungeon stuff (GFX) while waiting for MV 1.6 to be fixed ^__^")

"The displacement image name in the picture folder"? I understand we only have one single choice for that texture then? Maybe in a later version we'd be able to specify a custom name for this image so we can use different textures for different situations. That'd be even better. :) (Well it's still very fine as it is, since an "all purpose image" might do the trick for most situation.)

cji3bp62000 said:
Thank you for always answering questions and give me wonderful suggestions. You really helped me a lot.
Also, your work in Ace is amazing ...! It is enterprise game quality.
(I jumped on MV now, no more tired VX ACE eheh)
Thank you too, you're doing great things! Maybe some day you'll be the one to create the "mask plugin" some developers dream of.
The old RGSS script I have is quite simple to use.

You specify 2 different pictures, one is the mask (a black and white picture fixed on the map) and the other is the scrolling texture, here some simple dust on orange light:
+
And then, in the game with those 2 pictures you can have the dust staying into the light boundaries:

This is super powerful to create great effects with limited cost, like using a heavy animation.

The way “displacement filter” works (using a texture mask) kind of reminded me of that great technic. The “dust in the sun light” example with RTPs here is a very basic example but in reality… Wow, endless possibilities! :kaojoy:
Tsukimi-neko

#71 Feb 28, 2018, 01:55 AM Source
KaYsEr said:
This is great, can't wait to try the new filter! (Now I work on dungeon stuff (GFX) while waiting for MV 1.6 to be fixed ^__^")

"The displacement image name in the picture folder"? I understand we only have one single choice for that texture then? Maybe in a later version we'd be able to specify a custom name for this image so we can use different textures for different situations. That'd be even better. :) (Well it's still very fine as it is, since an "all purpose image" might do the trick for most situation.)

(I jumped on MV now, no more tired VX ACE eheh)
Thank you too, you're doing great things! Maybe some day you'll be the one to create the "mask plugin" some developers dream of.
The old RGSS script I have is quite simple to use.

You specify 2 different pictures, one is the mask (a black and white picture fixed on the map) and the other is the scrolling texture, here some simple dust on orange light:
+
And then, in the game with those 2 pictures you can have the dust staying into the light boundaries:

This is super powerful to create great effects with limited cost, like using a heavy animation.

The way “displacement filter” works (using a texture mask) kind of reminded me of that great technic. The “dust in the sun light” example with RTPs here is a very basic example but in reality… Wow, endless possibilities! :kaojoy:
I'm always suprised by your ideas!
I have never thought of the floating dust could be done by masks.

There is a filter named "SpriteMaskFilter", but also another feature "mask", both are default functions of PIXI.
So the mask effect shouldn't be too hard to make in MV; however I think maybe it is not a good idea to do those in this plugin.

It is very easy to use "mask"; I can immediately give you an example:
Spoiler

Code:
var spriteMask = new Sprite( ImageManager.loadPicture("mask") ); var targetSprite = new Sprite( ImageManager.loadPicture("dust") ); targetSprite.mask = spriteMask;
Maybe you can do this by yourself. (since I have no time to make new plugins:kaoswt2:sorry!)
Isabella Ava

#72 Feb 28, 2018, 08:51 AM Source

hi @cji3bp62000
actually i want to ask something more about displacement filter,
you said:

It's not good to set wrapMode every time updated, but I don't know how to set an onload function of pictures.
(the wrapMode has to be set after picture loaded to be working)
i supposed this will give a little affect on game's performance, right? Instead, can we set Wrap Mode as an parameter of displacement filter?
Also, Is there anyway to change displacement Image mid-game? (i think i can replace image name with game variable :| but is there any better way to do this? like we will input the name as an parameters of Displacement Filter?)
DanielleLittle25

#73 Feb 28, 2018, 09:18 AM Source

Did you solve this problem already? My friend understands a bit more here. I think he will help you if it still actual.
KaYsEr

#74 Feb 28, 2018, 07:38 PM Source

@cji3bp62000 Thank you for the code snippet, indeed I heard that PIXI can handle masks natively and this is great. I'm sure we can do crazy stuff with that, I will take a look asap. Hopefully one day we'll have a convenient plugin for an easier management too. Good job, thanks for eveything!
Tsukimi-neko

#75 Mar 1, 2018, 12:22 AM Source

DanielleLittle25 said:
Did you solve this problem already? My friend understands a bit more here. I think he will help you if it still actual.
Do you mean do something when picture is onload?
I would love to learn how to do it! Maybe your friend can give me some keywords, and I can search by myself.
(in order not to bother your friend too much)

Thank you!

Isabella Ava said:
hi @cji3bp62000
actually i want to ask something more about displacement filter,
i supposed this will give a little affect on game's performance, right? Instead, can we set Wrap Mode as an parameter of displacement filter?
Also, Is there anyway to change displacement Image mid-game? (i think i can replace image name with game variable :| but is there any better way to do this? like we will input the name as an parameters of Displacement Filter?)
I can add an additional command to change the map name by plugin command in future update. (I currently have no time, sorry)
If I figured out (if DanielleLittle25's friend could tell me) how can I set onload listener, I can remove wrap-mode setting from the upload function.

KaYsEr said:
@cji3bp62000 Thank you for the code snippet, indeed I heard that PIXI can handle masks natively and this is great. I'm sure we can do crazy stuff with that, I will take a look asap. Hopefully one day we'll have a convenient plugin for an easier management too. Good job, thanks for eveything!

>> Isabella Ava, KaYsEr
Thank you always giving me feed-backs, I will do my best to make the plugin better!
Tsukimi-neko

#76 Mar 13, 2018, 02:35 AM Source

2018/03/13 minor update:
update embedded PIXI.filters to v2.6.0
no any changes on functionality.

in PIXI.filters v2.6.0, it updates:
・the visual bug on iOS fixed
・support pixi.js v5
・add BevelFilter, ColorMapFilter
・other minor changes

※ColorMapFilter is currently hard to achieve in this plugin, sorry
Espilonarge

#77 Mar 30, 2018, 01:04 AM Source

I just noticed that there's no setting to only have the filter affect the "parallax" layer. Any chances of adding that?
lonewolph

#78 Apr 22, 2018, 03:40 AM Source

Did you ever fix the problem with the glow filter not working in battle?
Ally

#79 Apr 30, 2018, 11:29 PM Source

@cji3bp62000 thanks for this plugin..
Its possibile to have this color effect screen? (Like back to the 90’)
Espilonarge

#80 May 1, 2018, 05:58 AM Source

Ally said:
@cji3bp62000
Its possibile to have this color effect screen? (Like back to the 90’)
Try using the "rgbsplit" filter as that's what neon-retro based videos and games generally use to give the effect (set it with a low value to keep the split effect tight to the sprites/tiles).