How to remove blur?

Status
Not open for further replies.

Milennin

"With a bang and a boom!"
Veteran
Joined
Feb 7, 2013
Messages
2,501
Reaction score
1,635
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.
 

lonewolph

Veteran
Veteran
Joined
Oct 25, 2015
Messages
211
Reaction score
14
First Language
English
Not sure, but try forcing Anti-Aliasing off for your graphics card.
 

KisaiTenshi

Veteran
Veteran
Joined
Oct 24, 2015
Messages
310
Reaction score
124
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:

Jordyce

Villager
Member
Joined
Jun 10, 2014
Messages
7
Reaction score
2
First Language
English
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.
 
Last edited by a moderator:

Milennin

"With a bang and a boom!"
Veteran
Joined
Feb 7, 2013
Messages
2,501
Reaction score
1,635
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:

lonewolph

Veteran
Veteran
Joined
Oct 25, 2015
Messages
211
Reaction score
14
First Language
English
Same problem here. Script not working either.
 

KisaiTenshi

Veteran
Veteran
Joined
Oct 24, 2015
Messages
310
Reaction score
124
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:

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:

lonewolph

Veteran
Veteran
Joined
Oct 25, 2015
Messages
211
Reaction score
14
First Language
English
How can it be forced off?
 
Last edited by a moderator:

KisaiTenshi

Veteran
Veteran
Joined
Oct 24, 2015
Messages
310
Reaction score
124
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.

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:

Milennin

"With a bang and a boom!"
Veteran
Joined
Feb 7, 2013
Messages
2,501
Reaction score
1,635
First Language
English
Primarily Uses
RMMV
Yes, that worked. The glorious pixels now show their true beauty. Begone, evil blur!
 

milk

Veteran
Veteran
Joined
Oct 18, 2015
Messages
44
Reaction score
45
First Language
english
Primarily Uses
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

Villager
Member
Joined
Oct 27, 2015
Messages
18
Reaction score
5
First Language
German
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

Veteran
Veteran
Joined
Oct 18, 2015
Messages
44
Reaction score
45
First Language
english
Primarily Uses
thank you it's working perfectly !
 

milk

Veteran
Veteran
Joined
Oct 18, 2015
Messages
44
Reaction score
45
First Language
english
Primarily Uses
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
 

KisaiTenshi

Veteran
Veteran
Joined
Oct 24, 2015
Messages
310
Reaction score
124
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

Veteran
Veteran
Joined
Oct 18, 2015
Messages
44
Reaction score
45
First Language
english
Primarily Uses
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

Villager
Member
Joined
Jun 10, 2014
Messages
7
Reaction score
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:

fallenlorelei

Veteran
Veteran
Joined
Jul 8, 2013
Messages
298
Reaction score
346
First Language
English
Primarily Uses
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:

KisaiTenshi

Veteran
Veteran
Joined
Oct 24, 2015
Messages
310
Reaction score
124
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.
 
Last edited by a moderator:

fallenlorelei

Veteran
Veteran
Joined
Jul 8, 2013
Messages
298
Reaction score
346
First Language
English
Primarily Uses
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.

!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:
Status
Not open for further replies.

Users Who Are Viewing This Thread (Users: 0, Guests: 2)

Latest Threads

Latest Profile Posts

Why is there so much month left at the end of money? D=
Hello humans! How goes your day in this journey of living? I hope it is good, for I am human like you, and I am feeling great! Worship the altar.
Sand is basically small rocks

Forum statistics

Threads
105,607
Messages
1,014,960
Members
137,273
Latest member
Parzival
Top