Region Reflection Request

● ARCHIVED · READ-ONLY
Started by Skurge 34 posts Page 1 of 2 View original ↗
  1. Skurge
    #1 Source
    Hi everyone, things are looking pretty good visually speaking with my project thanks to alot of plugins created here on the forums.

    I've been searching for a plugin that can allow events reflections be projected underneath or above the player depending on the region tiles they are on or adjacent to.

    My reason for requiring this is to enhance the enviroment my game is set in, there are tons of building windows and water puddles that could certainly grant wonderful visuals when traversing through. It isn't game mechanics essential speaking- but would be fantastic to have on board.

    I had tried to use this plugin before but unfortunately it only seems to support water tiles allocated via terrain tags- which unfortunately are already in use with Kha's lighting and special effects plugin.
    https://forums.rpgmakerweb.com/index.php?threads/ph-sprite-reflection.51400/
  2. chrrsy
    #2 Source
    Unfortunately, I'm not sure how to do this automatically.
    However, you can make a custom sprite sheet for an event that follows the player as they move.
    If it's too laggy, I recommend using Moghunter's event detector plugin. You can also use a pathfinding plugin and Yanfly's region restrictions plugin to keep the event inside the water.
  3. mogwai
    #3 Source
    I've learned how to attach a sprite on the shadow layer. I need to play around with these blend_modes because the reflection appears on the grass.
    Screen Shot 2017-04-29 at 2.55.56 AM.png Screen Shot 2017-04-29 at 2.56.04 AM.png
    javascript/needs editing
    PHP:
    (function(alias){
   Spriteset_Map.prototype.createTilemap = function() {
       alias.apply(this, arguments);
       $gameMap._tileLayer = this._tilemap;
   };
})(Spriteset_Map.prototype.createTilemap);

(function(alias){
   Sprite_Character.prototype.initMembers = function() {
       alias.apply(this, arguments);
       this._southReflect = null;
   };
})(Sprite_Character.prototype.initMembers);

(function(alias){
   Sprite_Character.prototype.updateCharacterFrame = function() {
       alias.apply(this, arguments);
       if(this._southReflect === null){
           this._southReflect = new Sprite();
           this._southReflect.anchor.x = 0.5;
           this._southReflect.anchor.y = 1;
           $gameMap._tileLayer.addChild(this._southReflect);
       }
   };
})(Sprite_Character.prototype.updateCharacterFrame);

(function(alias){
   Sprite_Character.prototype.updateHalfBodySprites = function() {
       alias.apply(this, arguments);
       if(this._southReflect !== null){
           var cx = this._character._x;
           var cy = this._character._y;
           var rx = this._character._realX;
           var ry = this._character._realY;
           var region = $gameMap.regionId(cx, cy + 1);
           this._southReflect.bitmap = this.bitmap;
           this._southReflect.visible = region === 8;
           this._southReflect.scale.x =  1;
           this._southReflect.scale.y = -1;
           this._southReflect.x = rx * 48 + 24;
           this._southReflect.y = ry * 48 + 48;
           this._southReflect.z = 1;
           this._southReflect.blendMode = Graphics.BLEND_SCREEN;
           this._southReflect.setBlendColor([0,28,55,127]);
           this._southReflect.setColorTone(this.getColorTone());
       }
   };
})(Sprite_Character.prototype.updateHalfBodySprites);

(function(alias){
   Sprite_Character.prototype.updateCharacterFrame = function() {
       alias.apply(this, arguments);
       if(this._southReflect !== null){
           var pw = this.patternWidth();
           var ph = this.patternHeight();
           var sx = (this.characterBlockX() + this.characterPatternX()) * pw;
           var sy = (this.characterBlockY() + this.characterPatternY()) * ph;
           this._southReflect.setFrame(sx, sy, pw, ph);
       }
   };
})(Sprite_Character.prototype.updateCharacterFrame);

Game_CharacterBase.prototype.regionId = function() {
    return $gameMap.regionId(this._x, this._y);
};

    When I made a mirror in a WIP Comipo game, I cheated and made the sprite a Z layer of -1, and hid it behind tiles.
  4. Skurge
    #4 Source
    Aeonex said:
    Unfortunately, I'm not sure how to do this automatically.
    However, you can make a custom sprite sheet for an event that follows the player as they move.
    If it's too laggy, I recommend using Moghunter's event detector plugin. You can also use a pathfinding plugin and Yanfly's region restrictions plugin to keep the event inside the water.
    Sadly that would seem like too much effort having to create alternate angles of characters with the mass amount of sheets, it's an interesting method but perhaps way to complicated to work through.

    mogwai said:
    I've learned how to attach a sprite on the shadow layer. I need to play around with these blend_modes because the reflection appears on the grass.
    View attachment 63180 View attachment 63179
    javascript/needs editing
    PHP:
    (function(alias){
   Spriteset_Map.prototype.createTilemap = function() {
       alias.apply(this, arguments);
       $gameMap._tileLayer = this._tilemap;
   };
})(Spriteset_Map.prototype.createTilemap);

(function(alias){
   Sprite_Character.prototype.initMembers = function() {
       alias.apply(this, arguments);
       this._southReflect = null;
   };
})(Sprite_Character.prototype.initMembers);

(function(alias){
   Sprite_Character.prototype.updateCharacterFrame = function() {
       alias.apply(this, arguments);
       if(this._southReflect === null){
           this._southReflect = new Sprite();
           this._southReflect.anchor.x = 0.5;
           this._southReflect.anchor.y = 1;
           $gameMap._tileLayer.addChild(this._southReflect);
       }
   };
})(Sprite_Character.prototype.updateCharacterFrame);

(function(alias){
   Sprite_Character.prototype.updateHalfBodySprites = function() {
       alias.apply(this, arguments);
       if(this._southReflect !== null){
           var cx = this._character._x;
           var cy = this._character._y;
           var rx = this._character._realX;
           var ry = this._character._realY;
           var region = $gameMap.regionId(cx, cy + 1);
           this._southReflect.bitmap = this.bitmap;
           this._southReflect.visible = region === 8;
           this._southReflect.scale.x =  1;
           this._southReflect.scale.y = -1;
           this._southReflect.x = rx * 48 + 24;
           this._southReflect.y = ry * 48 + 48;
           this._southReflect.z = 1;
           this._southReflect.blendMode = Graphics.BLEND_SCREEN;
           this._southReflect.setBlendColor([0,28,55,127]);
           this._southReflect.setColorTone(this.getColorTone());
       }
   };
})(Sprite_Character.prototype.updateHalfBodySprites);

(function(alias){
   Sprite_Character.prototype.updateCharacterFrame = function() {
       alias.apply(this, arguments);
       if(this._southReflect !== null){
           var pw = this.patternWidth();
           var ph = this.patternHeight();
           var sx = (this.characterBlockX() + this.characterPatternX()) * pw;
           var sy = (this.characterBlockY() + this.characterPatternY()) * ph;
           this._southReflect.setFrame(sx, sy, pw, ph);
       }
   };
})(Sprite_Character.prototype.updateCharacterFrame);

Game_CharacterBase.prototype.regionId = function() {
    return $gameMap.regionId(this._x, this._y);
};

    When I made a mirror in a WIP Comipo game, I cheated and made the sprite a Z layer of -1, and hid it behind tiles.

    This looks highly promising, the blend modes or slight overlapping over water/grass does not bother me too much though.
    I would love to give this a shot and see how it runs.

    How can I assign this to a region tile of my choosing? For example one for floor reflections and another for say wall reflections?
  5. SoSick.
    #5 Source
    was just googling reflection plugins , cause i got the same problem as you haha. How's it coming along ? Your right, little details like reflections can make a ty map a good map :p and just adds realism
  6. mogwai
    #6 Source
    If you want to cheat on PIXI color dodge rules, and just have the reflections show up on the bottom layer and paint over them with translucent PNG tiles, this might work.
    reflect-o.gif

    mirror-o.gif

    Spoiler
    Screen%20Shot%202017-04-29%20at%2010.25.28%20PM.png

    This plugin still needs some work.

    PHP:
    /*:
 *
 * @plugindesc Events/Characters reflections by region
 * @author Jake Jilg "mogwai"
 *
 * version 0.1
 */
(function(alias){
   Spriteset_Map.prototype.createTilemap = function() {
       alias.apply(this, arguments);
       $gameMap._tileLayer = this._tilemap;
   };
})(Spriteset_Map.prototype.createTilemap);

(function(alias){
   Sprite_Character.prototype.initMembers = function() {
       alias.apply(this, arguments);
       this._southReflect = null;
       this._mirrorReflect = null;
   };
})(Sprite_Character.prototype.initMembers);

(function(alias){
   Sprite_Character.prototype.updateCharacterFrame = function() {
       alias.apply(this, arguments);
       if(this._southReflect === null){
           this._southReflect = new Sprite();
           this._southReflect.anchor.x = 0.5;
           this._southReflect.anchor.y = 1;

           $gameMap._tileLayer.addChild(this._southReflect);
       }
       if(this._mirrorReflect === null){
           this._mirrorReflect = new Sprite();
           this._mirrorReflect.anchor.x =  1;
           this._mirrorReflect.anchor.y =  0;
          
           $gameMap._tileLayer.addChild(this._mirrorReflect);
       }
   };
})(Sprite_Character.prototype.updateCharacterFrame);

(function(alias){
   Sprite_Character.prototype.updateHalfBodySprites = function() {
       alias.apply(this, arguments);
      
       var cx = this._character._x;
       var cy = this._character._y;
       var rx = this._character._realX;
       var ry = this._character._realY;
      
       var r = function(x,y){
           return $gameMap.regionId(cx + x, cy + y);
       };
       var region = [];
      
       for(var x = -3; x < 3; x++){
           for(var y = -3; y < 3; y++){
               region.push(r(x,y));
           }
       }
      
       var onRegion8 = region.indexOf(8) !== -1;
       var onRegion9 = region.indexOf(9) !== -1;
      
       if(this._southReflect !== null){
           this._southReflect.bitmap = this.bitmap;
           this._southReflect.visible = onRegion8;
           this._southReflect.scale.x =  1;
           this._southReflect.scale.y = -1;
           this._southReflect.x = rx * 48 + 24;
           this._southReflect.y = ry * 48 + 48;
           this._southReflect.z = -1;
       }
       if(this._mirrorReflect !== null){
           this._mirrorReflect.bitmap = this.bitmap;
           this._mirrorReflect.visible = onRegion9;
           this._mirrorReflect.scale.x = -1;
           this._mirrorReflect.scale.y =  1;
           this._mirrorReflect.x = rx * 48;
           if(!onRegion9){
               this._mirrorReflect.y = (ry * 48);
               this._mirrorReflect.my = (ry * 48);
           }else{
               this._mirrorReflect.my = this._mirrorReflect.my || this._mirrorReflect.y;
               this._mirrorReflect.y = this._mirrorReflect.my - (ry * 48) - 48;
           }
           this._mirrorReflect.z = -1;
       }
   };
})(Sprite_Character.prototype.updateHalfBodySprites);

(function(alias){
   Sprite_Character.prototype.updateCharacterFrame = function() {
       alias.apply(this, arguments);
       var pw = this.patternWidth();
       var ph = this.patternHeight();
      
       var bx = this.characterBlockX();
       var by = this.characterBlockY();
      
       var sx = (bx + this.characterPatternX()) * pw;
       var sy = (by + this.characterPatternY()) * ph;
      
       if(this._southReflect !== null){
           this._southReflect.setFrame(sx, sy, pw, ph);
       }
      
       var smx = (bx + [2,1,0][this.characterPatternX()]) * pw;;
       var smy = (by + [3,2,1,0][this.characterPatternY()]) * pw;;
      
       if(this._mirrorReflect !== null){
           this._mirrorReflect.setFrame(smx, smy, pw, ph);
       }
   };
})(Sprite_Character.prototype.updateCharacterFrame);
  7. Skurge
    #7 Source
    I can't seem to get it to work on a fresh map with the exact method in place and code but nothing seems to be running.
    Would you happen to have the actual saved file js. handy for me to use? I've copied over the code into a new js. file with the Notepad++ Program you refered me to use previously but I want to make sure if i'm making an error here.

    The work you've made here looks very good-something I very much would enjoy having in my project- the particulars about having to cheat the translucent tiles is a smart way to do accurate reflections-this would work amazingly with my building window reflections and water tiles however the standard floor puddles which are standalone overlapping transparent graphics are not so much required in that field :)
  8. mogwai
    #8 Source
    The mirror sprite position needs work. The floor reflection should be good to go.

    The regions are on transparent map spaces because the reflection sprites are on the bottom layer. Like I said, it's kind of a cheat.
    Screen%20Shot%202017-04-30%20at%2012.11.49%20AM.png
  9. Skurge
    #9 Source
    Huh wierd. I booted up the program again and the below player reflections on transparent tiles work (region 8)- but the reflections above player do not (region 9)

    Here's a little screen cap I devised for you to look at aswell, I should note that paralax seems to work along with it which a fantastic variable out of the way to worry about.
  10. mogwai
    #10 Source
    I've got to work on region 9.

    I only tested one spot, but if I came in at the wrong angle to that spot the Y pos was all out of whack.
  11. Skurge
    #11 Source
    If anything i'm saying confuses you let me know during your work :)

    I made a little mockup image to showcase what beauties this plugin could do!
  12. mogwai
    #12 Source
    I've added a region 10 so that the vertical mirrors know where their base is so-to-speak.

    (^ music from Youtube...)

    I hope this works. It's my first complete version.

    EDIT: Version 0.2
    EDIT2: Version 0.3

    EDIT3: Version 0.2b
    The gl scissors regions cropping in version 0.3 seems clean enough, but step in the wrong place and everything starts flashing, so Reflections2.js is the downgrade version 0.2b. It's back to below tile, but it has the scrolling fix from version 0.3 and is much cleaner for now.

    I think I need to learn to make a terrain tag for below the -1 z of the reflections.
  13. Skurge
    #13 Source
    It works sort of, kind of don't understand why its doing this though, I have added the regions to emulate what changes you have made.
  14. mogwai
    #14 Source
    Do you have a custom animations plugin?
  15. Skurge
    #15 Source
    I don't have any plugins that allow custom animations/frames etc. I ran a test with all plugins turned off except the reflections and the northern reflections are still glitching. Unsure what is causing that, do you think it has something to do with sprites being taller than 48 pixels like the standard RTP ones use?
  16. mogwai
    #16 Source
    This uses the same dimensions as the main sprite.
    Can you attach one of your sprites? I want to look at its form.
    Screen Shot 2017-04-30 at 3.50.19 AM.png

    I was able to reproduce this problem.

    I seem to have messed up the character block, thinking it used 0,1,2,3.
    It seem to use numbers based on dimensions. BRB. I've got to work on it.
    ______________________________________________________________________
    EDIT2:
    I've fixed it. I literally only had to change one letter. :kaoswt2: I accidentally used pw for ph, (pattern width) which wasn't noticeable when the pw and ph are both 48.

    Nice catch.

    I've edited version 0.2 into the post above, where I attached the first version.

    EDIT3: Also, you may need to move your region 10, down one space, because it only acts as the mirror base. It doesn't actually reflect anything.
  17. Skurge
    #17 Source
    I have some positive news, the reflections work fine and seem to cooexist with other plugins such as khas special effects etc. However the reflections don't seem to want to work on certain maps and i'm not sure why its being selective for that reason. Also noticed that NPCs set to random movements seem to refuse to move at all. I'll be having screenshots soon!

    Edit: NPCs refuse to walk within the 10 region.
    Reflections also seem to glitch and completely misplace themselves if the map is larger than normal 17x13.
  18. mogwai
    #18 Source
    It's got a 3 tile radius zone for the sprite to become visible.
    PHP:
    for(var x = -3; x < 3; x++){
   for(var y = -3; y < 3; y++){
       region.push(r(x,y));
       if(r(x,y) === 10 && Math.abs((cy+y)-ry) < Math.abs(region10y-ry))
           region10y = cy + y;
   }
}
    If the reflections are disappearing too early, you can increase the 3 to half of the map something.
    PHP:
    var r = Math.round((Graphics.width / 2) / 48);
for(var x = 0-r; x < r; x++){
   for(var y = 0-r; y < r; y++){
       region.push(r(x,y));
       if(r(x,y) === 10 && Math.abs((cy+y)-ry) < Math.abs(region10y-ry))
           region10y = cy + y;
   }
}

    I've been working on a better version, but it's not ready.
    Screen%20Shot%202017-04-30%20at%208.01.57%20AM.png
    I've been trying to get the reflections into the tile map, so they don't rely on all transparent tile to show. I'm having trouble with it.
  19. Skurge
    #19 Source
    Oh I see what you mean, I think I should wait for your next version to avoid making my bug tests complicate things.
  20. SoSick.
    #20 Source
    from the image mate, looks like your getting there, you wouldn't think it would be so hard to make a reflection plugin work with regions lol