How to separate canvas rendering?

[Luminous]

This problem is already Solved.

I try this code on index <style type="text/css"> CANVAS{image-rendering: pixelated;}</style> to remove blur on fullscreen mode
but all the font and image get load like this

[/url] pic upload[/IMG]

The question is how to seperate image rendering so I can avoid another image beside mapping become jagged like that?

 

[Poryg]

I guess I'm either blind or playing on low res, but I don't notice any blur on MV apart from the manually blurred background you have when you open the menu. That one isn't the blur you're talking about now, is it?

Anyway, on one of the images you've shown I cannot really notice anything weird. On the other image I cannot see nohing, because the link just points me to some weird page.

 

[SamJones]

I guess I'm either blind or playing on low res, but I don't notice any blur on MV apart from the manually blurred background you have when you open the menu. That one isn't the blur you're talking about now, is it?

Anyway, on one of the images you've shown I cannot really notice anything weird. On the other image I cannot see nohing, because the link just points me to some weird page.

Look at the text in the image full-size. The dark shadow rendered around the letters doesn't fit correctly. But that seems more an issue with whatever modification the OP did to the base game because when looking at the same screen in an unmodified default game no such issues occur

 

[Luminous]

I guess I'm either blind or playing on low res, but I don't notice any blur on MV apart from the manually blurred background you have when you open the menu. That one isn't the blur you're talking about now, is it?

Anyway, on one of the images you've shown I cannot really notice anything weird. On the other image I cannot see nohing, because the link just points me to some weird page.

here we go I try to zoom the picture. 1st picture is before I put the code for removing blur on map screen. (not menu screen)
the blur on map screen is gone but too bad it's have impact on image load like 2nd picture.
so much broken line and the font looks awful too.

I try to do something like on this threads

https://forums.rpgmakerweb.com/index.php?threads/how-to-remove-blur.47504/

I already try everything to make my face and font image load perfectly but I always failed. I

 

[SamJones]

Well, what did you expect? That's what happens when you scale without proper interpolation. Pixel values are set to the nearest neighbour.

 

[Luminous]

Well, what did you expect? That's what happens when you scale without proper interpolation. Pixel values are set to the nearest neighbour.

How to make image from face or picture folder not affected by this?
Is there a way to remove blur when we launch game at fullscreen and avoid thing like this?

 

[Poryg]

Ah I see.
Let me ask you this: You have a picture 48x48 pixels and want to resize it by 20%. How do you make these 48x48 pixels of size 1.2 pixel?
The answer is, you can't. You can't make 1 pixel bigger or smaller than 1 pixel.
So that concludes your answer. You will never be able to resize a picture without quality loss. The easiest ones to resize are pictures with dimensions of power of 2: 2, 4, 8, 16, 32, 64, 128, 256,... And only by power of 2. But even still you'll experience a loss of quality, because there are some pixels the gpu or program has to hard-code.
So to avoid this you need to change resolution upon entering full screen, not resize the window.
@SamJones Canvas uses bicubic interpolation by default. WebGL uses linear interpolation. Since it can't be changed, I am not entirely sure interpolation is something to worry about.

 

[Luminous]

I am not trying to resize the pixel. I just want to remove the blur when running on fullscreen.
Well that's weird because on a previous engine RM VXACE do that pretty well. I will give you example from previous engine




sure there is a quality loss, but atleast on VXACE there is no pixel being blurred, they all still sharp. That's make you not losing the sense of retro style.
but when I try with MV



It's getting blurred. I able to remove this blurry when launch on fullscreen with <style type="text/css"> CANVAS{image-rendering: pixelated;}</style> code but all the image become like my first post.

Anyone who is mastering javascript code can help me here? Or I should give up with this and continue my project with window screen and use fullscreen toggle via option to let player choose want to play fullscreen but blurred or windowscreen with sharp pixel.

 

[Llareian]

Is it possible that the "blurred" effect you're talking about is really just the difference between the VXAce art style and the MV art style? Because the VXAce default resource style is more of a true pixel art whereas the default MV resources have a "painted" or "airbrushed" style which uses blending and transparency to soften the edges.

I ask because I still don't see anything wrong with the image before you changed it, or the map that you claim is blurred. I could see how you MIGHT call it "blurry" but that's just the softened edges that are inherent to the art style.

Edit: A way to check this would be to replace one of the images that you feel is being blurred with a pixel art image, and see if you have the same issue. (Check with and without the fix you've attempted.) It seems possible that the semitransparent pixels of the MV art style are interfering with the method you've tried and causing the appearance of tearing.

 

[Luminous]

There is a huge difference when you trying launch game at fullscreen with and without this code
<style type="text/css"> CANVAS{image-rendering: pixelated;}</style> on index.html

you can try on your project too if you wanna see it.
I love the way when you change the index file because the game will look more sharp and the map graphic will be very nice. But it cost broken faceset image like my 2nd post.
Some said it cannot be fixed, you must choose between this 2 condition.
1. Start with blurry pixel at fullscreen and get perfect faceset image
2. Change all the image into pixel style (font, faceset, picture, ect) so you can avoid the sharpened or jagged on picture and face

 

[Andar]

I am not trying to resize the pixel. I just want to remove the blur when running on fullscreen.

Yes, you do try to resize - because running fullscreen IS resizing in 99% of all cases.

There is only one time when running fullscreen is possible without resizing, and that is when the game screen size is identical to the monitor fullscreen size.
And since different people have different screen sizes set for their monitor in their windows settings, only those who have the identical screen size (often called resolution even if that is technically wrong) would get that fullscreen without the resize-blurring.
Which is why I said that going fullscreen is resizing in 99% of all cases.

 

[Luminous]

Yes, you do try to resize - because running fullscreen IS resizing in 99% of all cases.

There is only one time when running fullscreen is possible without resizing, and that is when the game screen size is identical to the monitor fullscreen size.
And since different people have different screen sizes set for their monitor in their windows settings, only those who have the identical screen size (often called resolution even if that is technically wrong) would get that fullscreen without the resize-blurring.
Which is why I said that going fullscreen is resizing in 99% of all cases.

I just want the way MV goes fullscreen is like the previous engine, 2000-VXACE
I notice this only happen on MV, on VXAce when you use fullscreen++ script there is no problem on pixel become blurry it's still stay sharp. No matter what resolution of the monitor.
Can this problem solved via plugin?

 

[Andar]

yes and no.

the blur is the result of the formulae used to guess the new pixels on the resize. Just think about it: you have a color switch from black to white, and on resizing the two pixel balck-white needs to become three pixels. That is usually done as black - ? - white.
Now you have a rendering formulae that needs to determine the color of the middle pixel.
Some formulae go the mixing route, the center pixel becomes grey - that is what you see as a blur or aura around the original pixels.
Some formulae go with one side, either resulting in black black white or black white white. That gives distortions, especially in fonts when a letter suddenly gets bolded in some places but remains normal in others.

the only way to prevent that effect is to go only full 100%-multiplies - if you were to double the size, two pixel black-white would become four pixel black-black-white-white, no blurring.

In Ace the effect was less visible for two reasons: first the maximum screen size was a lot lower, so that fullscreen often was nearer to a full multiple (the worst distortions are always near the #50%-middlesteps)
Additionally, Ace only needed to conform to windows methods and had its own library, while the formulae of MV are from browsers that need to work on multiple devices and had been optimized for other things than a game.

so you can try to change the formulae involved to get a better interpolation on zooming, and that could be done by plugin - theoretically.
practically that is a very complex work that will always be of limited results, because you can't change the pixel numbers on the player monitor and would have to fit the formula for dozens of different %-multipliers.
And in the end all possible formulae are a mixup between blurring, distortion and guesswork, never being perfect everywhere.

 

[Luminous]

yes and no.

the blur is the result of the formulae used to guess the new pixels on the resize. Just think about it: you have a color switch from black to white, and on resizing the two pixel balck-white needs to become three pixels. That is usually done as black - ? - white.
Now you have a rendering formulae that needs to determine the color of the middle pixel.
Some formulae go the mixing route, the center pixel becomes grey - that is what you see as a blur or aura around the original pixels.
Some formulae go with one side, either resulting in black black white or black white white. That gives distortions, especially in fonts when a letter suddenly gets bolded in some places but remains normal in others.

the only way to prevent that effect is to go only full 100%-multiplies - if you were to double the size, two pixel black-white would become four pixel black-black-white-white, no blurring.

In Ace the effect was less visible for two reasons: first the maximum screen size was a lot lower, so that fullscreen often was nearer to a full multiple (the worst distortions are always near the #50%-middlesteps)
Additionally, Ace only needed to conform to windows methods and had its own library, while the formulae of MV are from browsers that need to work on multiple devices and had been optimized for other things than a game.

so you can try to change the formulae involved to get a better interpolation on zooming, and that could be done by plugin - theoretically.
practically that is a very complex work that will always be of limited results, because you can't change the pixel numbers on the player monitor and would have to fit the formula for dozens of different %-multipliers.
And in the end all possible formulae are a mixup between blurring, distortion and guesswork, never being perfect everywhere.

Wow that's a very complicated work must be a lot of effort.
So the only way to please all the player is ask how big is their screen and I will change resolution into their monitor resolution.
I think I will avoid that and stay with window mode and let player use full screen toggle option.
And maybe convince them to play with fullscreen then ask them to push the F3 button to play fullscreen with black border if they don't want a quality loss on the pixel graphic.
I think I will do that.
Thank you very much for answering my question.

 

[Andar]

So the only way to please all the player is ask how big is their screen and I will change resolution into their monitor resolution.

That can be automated (you don't need to ask the player to learn the monitor settings), but might cause problems with some of the engines limitations.

The engine cannot handle maps that are smaller than the games screen size. If it tries to do this, the result will be a looping map doubling parts of the smaller maps.
So the minimum map size required is based on the largest screen size you can set with such a change.
If the player tries to change to a larger screen size, you'll have to block that.
Another engine limitation is that it distorts some tiles if the game screen size is not a multiple of the tile size. That is why the default screen size is 816x624 instead of 800x600 - 800x600 can't be divided into 48x48 pixel tiles.

 

[Luminous]

Hi mod, please close this threads. Sorry for necroposting but I already find a plugin to make map scene forced to interpolated pixel. So there is no blur anymore in my project. Thanks.

 

[Shaz]

You should report the first post in your thread and say it's been solved, when you want the mods to close it.

 

[Kes]

[closed]IgnoreMe[/closed]