How to remove blur?

Discussion in 'RPG Maker MV' started by Milennin, Oct 26, 2015.

  1. Milennin

    Milennin "With a bang and a boom!" Veteran

    Messages:
    2,177
    Likes Received:
    1,234
    Location:
    Fiore
    First Language:
    English
    Primarily Uses:
    RMMV
    Yesterday there was a topic that included this, but it never really got answered. So, here's a thread dedicated to it... how to remove the blur when resizing the game's window? I'd like to keep the pixel look, even in full screen.
     
    #1
  2. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    Not sure, but try forcing Anti-Aliasing off for your graphics card.
     
    #2
  3. KisaiTenshi

    KisaiTenshi Veteran Veteran

    Messages:
    310
    Likes Received:
    120
    This needs to be set somewhere to disable filtering.

    PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;If it still blurs stuff after being set, then it's your video card.

    You can probably add it as a single-line plugin. Or just add it as a script block after pixi.js but before anything else in the index.html
     
    Last edited by a moderator: Oct 26, 2015
    #3
    Milennin likes this.
  4. Jordyce

    Jordyce Villager Member

    Messages:
    7
    Likes Received:
    2
    First Language:
    English
    Would love a solution to this issue, would love to have a game running at 960*540 for PC and mobile for a clean nearest neighbor 1080p upscale. Tried this script and it's not working on my NVIDIA GPU. Turned every optimization in the GPU settings off that I could. Desktop set to no scaling.
     
    Last edited by a moderator: Oct 26, 2015
    #4
  5. Milennin

    Milennin "With a bang and a boom!" Veteran

    Messages:
    2,177
    Likes Received:
    1,234
    Location:
    Fiore
    First Language:
    English
    Primarily Uses:
    RMMV
    edit: Turned off anti-aliasing in my graphics card settings, and it still blurs when resizing the game. This is with the disable filter plugin added to the game.
     
    Last edited by a moderator: Oct 26, 2015
    #5
  6. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    Same problem here. Script not working either.
     
    #6
  7. KisaiTenshi

    KisaiTenshi Veteran Veteran

    Messages:
    310
    Likes Received:
    120
    Alright so I went and took a look into the game engine:

    in rpg.core:

    /** * Whether the smooth scaling is applied. * * @property smooth * @type Boolean */Object.defineProperty(Bitmap.prototype, 'smooth', { get: function() { return this._smooth; }, set: function(value) { if (this._smooth !== value) { this._smooth = value; if (this._smooth) { this._baseTexture.scaleMode = PIXI.scaleModes.LINEAR; } else { this._baseTexture.scaleMode = PIXI.scaleModes.NEAREST; } } }, configurable: true});When a Bitmap is created it's initially set to smooth = false.

    However in rpg_managers.js

    ImageManager.loadAnimation = function(filename, hue) {    return this.loadBitmap('img/animations/', filename, hue, true);};ImageManager.loadBattleback1 = function(filename, hue) {    return this.loadBitmap('img/battlebacks1/', filename, hue, true);};ImageManager.loadBattleback2 = function(filename, hue) {    return this.loadBitmap('img/battlebacks2/', filename, hue, true);};ImageManager.loadEnemy = function(filename, hue) {    return this.loadBitmap('img/enemies/', filename, hue, true);};ImageManager.loadCharacter = function(filename, hue) {    return this.loadBitmap('img/characters/', filename, hue, false);};ImageManager.loadFace = function(filename, hue) {    return this.loadBitmap('img/faces/', filename, hue, true);};ImageManager.loadParallax = function(filename, hue) {    return this.loadBitmap('img/parallaxes/', filename, hue, true);};ImageManager.loadPicture = function(filename, hue) {    return this.loadBitmap('img/pictures/', filename, hue, true);};ImageManager.loadSvActor = function(filename, hue) {    return this.loadBitmap('img/sv_actors/', filename, hue, false);};ImageManager.loadSvEnemy = function(filename, hue) {    return this.loadBitmap('img/sv_enemies/', filename, hue, true);};ImageManager.loadSystem = function(filename, hue) {    return this.loadBitmap('img/system/', filename, hue, false);};ImageManager.loadTileset = function(filename, hue) {    return this.loadBitmap('img/tilesets/', filename, hue, false);};ImageManager.loadTitle1 = function(filename, hue) {    return this.loadBitmap('img/titles1/', filename, hue, true);};ImageManager.loadTitle2 = function(filename, hue) {    return this.loadBitmap('img/titles2/', filename, hue, true);};ImageManager.loadBitmap = function(folder, filename, hue, smooth) { if (filename) { var path = folder + encodeURIComponent(filename) + '.png'; var bitmap = this.loadNormalBitmap(path, hue || 0); bitmap.smooth = smooth; return bitmap; } else { return this.loadEmptyBitmap(); }};So it looks like smooth is being implicitly set for bitmaps for several items. This can be forced off.

    A second thing needs to be done as well if it's being done manually...

    <style type="text/css"> CANVAS{image-rendering: pixelated;}</style>Alternatively image-rendering: crisp-edges; ,may also work, depending on the intended effect.

    This should work as a plugin:

    Code:
    ImageManager.loadBitmap = function(folder, filename, hue, smooth) {    if (filename) {        var path = folder + encodeURIComponent(filename) + '.png';        var bitmap = this.loadNormalBitmap(path, hue || 0);        //console.log("disabling smoothing for "+path);		bitmap.smooth = false;        return bitmap;    } else {        return this.loadEmptyBitmap();    }};
     
    Last edited by a moderator: Oct 27, 2015
    #7
    Helladen, DreamX, Kenen and 1 other person like this.
  8. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    How can it be forced off?
     
    Last edited by a moderator: Oct 27, 2015
    #8
  9. KisaiTenshi

    KisaiTenshi Veteran Veteran

    Messages:
    310
    Likes Received:
    120
    1) Put this in a plugin

    ImageManager.loadBitmap = function(folder, filename, hue, smooth) { if (filename) { var path = folder + encodeURIComponent(filename) + '.png'; var bitmap = this.loadNormalBitmap(path, hue || 0); //console.log("disabling smoothing for "+path); bitmap.smooth = false; return bitmap; } else { return this.loadEmptyBitmap(); }};That will switch to nearest neighbor for all bitmap loads.

    Code:
    ImageManager.loadBitmap = function(folder, filename, hue, smooth) { 
        if (filename) { 
            var path = folder + encodeURIComponent(filename) + '.png'; 
            var bitmap = this.loadNormalBitmap(path, hue || 0); 
            //console.log("disabling smoothing for "+path);   
            bitmap.smooth = false; return bitmap; 
        } else { 
            return this.loadEmptyBitmap(); 
        }
    };
    
    2) Put this in the index.html

    <style type="text/css"> CANVAS{image-rendering: pixelated;}</style>This will affect the screen stretching when you go to full screen or stretch the window.
     
    Last edited by a moderator: Feb 28, 2019
    #9
    Vannovo, Narch, TheTitan99 and 14 others like this.
  10. Milennin

    Milennin "With a bang and a boom!" Veteran

    Messages:
    2,177
    Likes Received:
    1,234
    Location:
    Fiore
    First Language:
    English
    Primarily Uses:
    RMMV
    Yes, that worked. The glorious pixels now show their true beauty. Begone, evil blur!
     
    #10
  11. milk

    milk Veteran Veteran

    Messages:
    44
    Likes Received:
    45
    First Language:
    english
    hi im sorry if this is a stupid question but do I just make a new js file and copy and paste the first bit you have there into it and then open it as a plugin?? or do i add that to an already existing plugin ? also how do i put that second part in index.html ? when i click it it opens google chrome and it says "error failed to load data/actors.json" im not sure how to add things to it 
     
    #11
  12. White Dragon

    White Dragon Villager Member

    Messages:
    10
    Likes Received:
    1
    Location:
    Germany
    First Language:
    German
    Yes.

    Right click the index.html and click "open with" and then choose a text edit program, for example notepad.

    Then add the lines near the end of the file between </body> and </html>.

    That way it worked for me.

    Thanks for the script, KisaiTenshi!
     
    #12
  13. milk

    milk Veteran Veteran

    Messages:
    44
    Likes Received:
    45
    First Language:
    english
    thank you it's working perfectly !
     
    #13
  14. milk

    milk Veteran Veteran

    Messages:
    44
    Likes Received:
    45
    First Language:
    english
    actually i lied its not working lol I initially tried it with one of the default actor graphics and it looked fine at full screen, but when i put my own sprite into the game it looks really weird when i full screen, i'll attach a screen shot of how it looks at normal size (looks fine then) and after i full screen it (gets really wonky) im not sure if this is just something wrong with my sprite or what, its also slightly larger than the default sprites so im not sure if that has anything to do with it 

    Screenshot (261).png

    View attachment 24877
     
    #14
  15. KisaiTenshi

    KisaiTenshi Veteran Veteran

    Messages:
    310
    Likes Received:
    120
    That's what it's supposed to do. If you turn off bilinear (which is what makes it blurry) it uses nearest-neighbor which only looks nice if scaled in even ratios. You could try

    <style type="text/css"> CANVAS{image-rendering: crisp-edges;}</style>instead, just keep in mind this will have a different look if you stretch the window/go full screen.

    Bilinear filtering is what you use when you want to "stretch" a photo or video without it looking pixelated. Nearest neighbor is what you use when you intentionally want to keep it pixelated, but it only looks correct if the image being stretched is stretched in exact ratios, eg 2x, 3x So a 48x48 sprite will look correct at 96x96 if the entire game screen is exactly doubled.
     
    #15
  16. milk

    milk Veteran Veteran

    Messages:
    44
    Likes Received:
    45
    First Language:
    english
    oh I see so it's because my sprite is a strange size....i tried the crisp edges thing and it didnt seem to have any effect i guess my game will just have to be played windowed for maximum crispness, thanks anyways
     
    #16
  17. Jordyce

    Jordyce Villager Member

    Messages:
    7
    Likes Received:
    2
    First Language:
    English
    New script works great, thanks so much Kisai Tenshi! I've uploaded images with my quick, poorly made 960*540 map to show the differences between the bilinear and nearest neighbor upscale.

    Obviously it's not perfect at resolutions inbetween. A compromise needs to be made there - dynamic scaling modes probably - but this a huge first step, especially as 1080p is the most common resolution.

    There's always making the game in 1080p or 4k with higher resolution assets and scaling down, but obviously that'd balloon file size.

    RPGMV Bilinear.png

    RPGMV Upscale Engine.png
     
    Last edited by a moderator: Oct 28, 2015
    #17
    Trishy likes this.
  18. fallenlorelei

    fallenlorelei Veteran Veteran

    Messages:
    295
    Likes Received:
    333
    First Language:
    English
    I don't want to hijack the thread but I thought it was better than making a new topic.

    I have turned off AA for RPGMaker MV in my gpu's Control Panel, and I included KisaiTenshi's javascript as a plugin with the index.html edit. But I still have a very blurry game (but not a blurry actor)

    rpgmakerblurry.PNG

    This map was made with parallax images, a background and a foreground. Because of the blur, the foreground/overlay doesn't align correctly on top of the background D=

    Here is the map in a browser. You can view source to see Kisai's recommended edits.

    Anyone have an idea?

    Edit: Actually, since the thread was marked as answered, maybe I should go ahead and make my own lol
     
    Last edited by a moderator: Oct 31, 2015
    #18
  19. KisaiTenshi

    KisaiTenshi Veteran Veteran

    Messages:
    310
    Likes Received:
    120
    Did you also add the css code? This is what fixes window resize/full screen. Though testing your map shows it doesn't resize anyway. The Canvas is still set to 816x614.

    Basically with the Javascript added as a plugin, that tells RPG Maker MV, and pixi.js to never use bilinear for any assets. 

    If it still looks blurry, something else is causing it.
     
    Last edited by a moderator: Oct 31, 2015
    #19
  20. fallenlorelei

    fallenlorelei Veteran Veteran

    Messages:
    295
    Likes Received:
    333
    First Language:
    English
    Thanks for getting back to me!

    Yeah, both the js and the css code are in there. You can "view source" on my map to see if I added the css correctly? I followed the advice above and put it between </body> and </html>. Also, I named the js "noblur.js" and it's below "foreground.js" in my plugin list. Do I need to either name it or move it up or down the list?

    I checked the original images to see if I possibly saved them with lower quality (not sure how that'd happen though) but they look totally fine.

    !maptutorial01.png

    Rawr

    Edit: re-ordered the two plugins and put "noblur.js" at the top. Didn't make a difference in my preview ><
     
    Last edited by a moderator: Nov 1, 2015
    #20

Share This Page