How to remove blur?

[Milennin]

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.

 

[lonewolph]

Not sure, but try forcing Anti-Aliasing off for your graphics card.

 

[KisaiTenshi]

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

 

[Jordyce]

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

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.

 

[Milennin]

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.

 

[lonewolph]

Same problem here. Script not working either.

 

[KisaiTenshi]

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.

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:

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();    }};

 

[lonewolph]

How can it be forced off?

 

[KisaiTenshi]

How can it be forced off?

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.

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.

 

[Milennin]

Yes, that worked. The glorious pixels now show their true beauty. Begone, evil blur!

 

[milk]

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 

 

[White Dragon]

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??

Yes.

also how do i put that second part in index.html ?

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!

 

[milk]

thank you it's working perfectly !

 

[milk]

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 



View attachment 24877

 

[KisaiTenshi]

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 

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.

 

[milk]

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

 

[Jordyce]

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.

 

[fallenlorelei]

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)



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

 

[KisaiTenshi]

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

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.

 

[fallenlorelei]

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.

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.



Rawr

Edit: re-ordered the two plugins and put "noblur.js" at the top. Didn't make a difference in my preview ><