Pixi Filter Controller - fancy screen effects by pixi

Discussion in 'JS Plugin Releases (RMMV)' started by cji3bp62000, Jan 24, 2018.

  1. KaYsEr

    KaYsEr Koruldia Veteran

    Messages:
    211
    Likes Received:
    445
    Location:
    London
    First Language:
    French
    Primarily Uses:
    RMMV
    I think this is written in the manual, a different kind of ID.


    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:


    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.
     
    #61
    RocketKnight likes this.
  2. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    175
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    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.
     
    Last edited: Feb 26, 2018
    #62
    KaYsEr and Isabella Ava like this.
  3. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    i cant get the glow effect to appear in combat with any method
     
    #63
  4. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    175
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    >>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.
     
    #64
  5. Isabella Ava

    Isabella Ava Veteran Veteran

    Messages:
    636
    Likes Received:
    752
    First Language:
    English
    hi @cji3bp62000 i tried the displacement filter but it seem the filter only run once on screen. How to make it keep repeating?
     
    #65
  6. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    175
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    >> @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 )
     
    #66
  7. Isabella Ava

    Isabella Ava Veteran Veteran

    Messages:
    636
    Likes Received:
    752
    First Language:
    English
    @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?)
     
    #67
  8. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    175
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    >> @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:
    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:
    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)
     
    #68
    Isabella Ava likes this.
  9. Isabella Ava

    Isabella Ava Veteran Veteran

    Messages:
    636
    Likes Received:
    752
    First Language:
    English
    #69
  10. KaYsEr

    KaYsEr Koruldia Veteran

    Messages:
    211
    Likes Received:
    445
    Location:
    London
    First Language:
    French
    Primarily Uses:
    RMMV
    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:
    [​IMG] + [​IMG]
    And then, in the game with those 2 pictures you can have the dust staying into the light boundaries:
    [​IMG]
    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:
     
    #70
    RocketKnight and cji3bp62000 like this.
  11. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    175
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    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:
    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!)
     
    #71
    RocketKnight and KaYsEr like this.
  12. Isabella Ava

    Isabella Ava Veteran Veteran

    Messages:
    636
    Likes Received:
    752
    First Language:
    English
    hi @cji3bp62000
    actually i want to ask something more about displacement filter,
    you said:
    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?)
     
    #72
  13. DanielleLittle25

    DanielleLittle25 Warper Member

    Messages:
    1
    Likes Received:
    1
    Location:
    Canada, Toronto, Ontario
    First Language:
    English
    Primarily Uses:
    RMXP
    Did you solve this problem already? My friend understands a bit more here. I think he will help you if it still actual.
     
    #73
    cji3bp62000 likes this.
  14. KaYsEr

    KaYsEr Koruldia Veteran

    Messages:
    211
    Likes Received:
    445
    Location:
    London
    First Language:
    French
    Primarily Uses:
    RMMV
    @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!
     
    #74
  15. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    175
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    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!


    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.



    >> Isabella Ava, KaYsEr
    Thank you always giving me feed-backs, I will do my best to make the plugin better!
     
    #75
    Isabella Ava and KaYsEr like this.
  16. cji3bp62000

    cji3bp62000 Tsukimi Veteran

    Messages:
    66
    Likes Received:
    175
    First Language:
    Japanese
    Primarily Uses:
    RMMV
    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
     
    #76
    KaYsEr likes this.
  17. Espilonarge

    Espilonarge Veteran Veteran

    Messages:
    116
    Likes Received:
    49
    Location:
    Australia
    First Language:
    English
    I just noticed that there's no setting to only have the filter affect the "parallax" layer. Any chances of adding that?
     
    #77
  18. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    Did you ever fix the problem with the glow filter not working in battle?
     
    #78
  19. Ally

    Ally Linked Rooms Games Founder - Fleshforward Member

    Messages:
    334
    Likes Received:
    153
    Location:
    Italy
    First Language:
    Italy
    Primarily Uses:
    RM2k
    @cji3bp62000 thanks for this plugin..
    Its possibile to have this color effect screen? (Like back to the 90’)
     
    #79
    RocketKnight likes this.
  20. Espilonarge

    Espilonarge Veteran Veteran

    Messages:
    116
    Likes Received:
    49
    Location:
    Australia
    First Language:
    English
    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).
     
    #80
    Ally and RocketKnight like this.

Share This Page