How to fix blurry sprites / BGs in Ren'Py?

[chibiansem02]

Certainly! I'm very sorry for the lengthy list of characters... I hope this posting doesn't take up too much space.
Below is all of the code that is there so far up until I run into the issue of the sprite's "supposed-to-be-transparent" BG covering up the actual BG image:

Code: Select all

# You can place the script of your game in this file.

# Declare images below this line, using the image statement.
# eg. image eileen happy = "eileen_happy.png"
image Raven Normal = "Raven Sprite - Normal.png"
image Raven Bedroom = "Raven Bedroom.jpg"

# Declare characters used by this game.
define Raven = Character('Raven', color="#666699")
define Jexxi = Character ('Jexxi', color="#CC6633")
define Vexel = Character ('Vexel', color="#339966")
define Fluffy = Character ('Fluffy', color="#FFFF33")
define Cherubim = Character('Cherubim', color="#666666")
define Seraphim = Character ('Seraphim', color="#000000")
define Malpas = Character ('Malpas', color="#000000")
define Omega = Character ('Omega', color="#000000")
define Girl = Character ('Young Girl', color="#CC6633")
define Man = Character ('Young Man', color="#339966")
define Angell = Character ('Female Angel', color="#FF9999")
define Omega = Character ('Omega', color="#FF9999")
define Loki = Character ('Loki', color="#74138C")
define Kit = Character ('Kit', color="#FF6600")
define Womann = Character ('Young Woman', color="#FF6600")
define Clerk = Character ('Store Clerk', color="#FF6600")
define Athel = Character ('Athel', color="#C17753")
define Womannn = Character ('Young Woman', color="#FF4848")
define Lithium = Character ('Lithium', color="#FF4848")
define Alex = Character ('Alex', color="#CC0000")
define Tristan = Character ('Tristan', color="#59955C")
define Lou = Character ('Lou', color="#A3FEBA")
define Mann = Character ('Young Man', color="#B4D1B6")
define Lucien = Character ('Lucien', color="#B4D1B6")
define Melchior = Character ('Melchior', color="#FFCC00")
define Maria = Character ('Maria', color="#993333")

# The game starts here.
label start:
scene Raven Bedroom
play music "Calm BG Music.mp3"

Girl "Where am I...? Why Can't I feel my body? Do I even have a body...?"
Cherubim "Raven, I think your little friend is awake. "
show Raven Normal at left
Raven "I'm glad you're alright. What's your name, miss?"

After the sprite shows up the screen looks like the one that I uploaded here, with checkerboard.

Thank you SO much guys T_T You should be paid to assist people like me!

[Elmiwisa]

First off, you should use the code tag while posting your code to the forum. It should looks like this

Code: Select all

[code]
#your code here

[/code]This ensure that the indentation are preserved, otherwise the forum automatically remove white spaces.
Now that you posted the code, the problem is clear. It is the shared image tag problem.
On these line

Code: Select all

image Raven Normal = "Raven Sprite - Normal.png"
image Raven Bedroom = "Raven Bedroom.jpg"

you defined your sprite to have 2 tags "Raven" and "Normal" and the background to have 2 tags "Raven" and "Bedroom". Basically, when you have spaces in your image name, Ren'Py separate the words and make each of the word a tag for that image. Note that the ordering of the tag is important too: both image here have "Raven" as their tag #1.
Now if 2 image were to share the tag #1, Ren'Py automatically hide one image if you try to display the other. Ren'Py do not distinguish between a background image and a sprite, they are all images as far as the engine is concerned. So normally people make sure the tag #1 for background image is "bg" or "background" while tag #1 for character sprite would be the name of the character. This ensure that: (a) background won't share tag #1 with character sprite since both need to be on screen at the same time; and (b) when you show one background image the previous one is automatically hidden.
Hence change the image declaration to this:

Code: Select all

image Raven Normal = "Raven Sprite - Normal.png"
image bg Raven Bedroom = "Raven Bedroom.jpg"

This make tag #1 for your image to be "bg" instead, which no longer conflict with the other image.

[chibiansem02]

WOW. Thank you so, so much!!

I actually sorted out this same problem earlier on in coding but it was with names, not with sprites / BGs...
I can't believe I didn't make that connection to a spacing problem sooner...


You are my hero, Elmiwisa!!!!!
<3

[Chrizine]

I'm afraid I can't really help, I just want to tell you that I see the difference in the sprites... I had an issue like this some time ago (and other people kept telling me I imagined it, too ) but I solved it by editing the picture in gimp instead of irfanview (which I previously used to mirror the image) - after that the fuzzyness was gone. But since you said you already use gimp I'm not sure what could be your problem... Did you previously save the image in another editing program, maybe?

Good luck!

[chibiansem02]

Yes, it was drawn in SAI and then moved to Gimp to remove the background so that it was transparent.
Do you think this is the problem?

It seems like some people are telling me it's blurry while others aren't, so I guess the difference isn't that big, I may just let it slide... would that be bad? O_o
As long as the two aren't viewed right next to each other >_>;;

[Chrizine]

I think SAI should be able to save properly, but I'm not really an expert on this... I never found out why Irfanview broke my pictures, so I can't say if it's possible that SAI does it, too.
However, I recently saw a post which recommended a tutorial to do transparency in SAI: here - I haven't looked at it, but maybe you can try to do the transparency in SAI with this and see if it fixes the problem? No idea if it will work, but maybe it will even be easier to do everything in SAI so it might turn out to be not completely useless to try

I think it wouldn't be that much of a problem to let it slide, it's not a big difference.

[chibiansem02]

I've actually already used that tutorial, including the info in the artist's comments that it recommends to download SAI 1.1.0 to do transparencies, but I never end up getting the crucial pop up that asks to save it as RGB or ARGB...so they're never transparent in the end.
So it's fairly useless to me xD And the artist says they don't want to take questions or comments.
I think in my case it's simply some sort of window re-sizing issue that maybe I did accidentally like someone else here stated...
When I open the game now it looks much better for some reason o.o"
Weird, weird, weird!

[Elmiwisa]

I think in my case it's simply some sort of window re-sizing issue that maybe I did accidentally like someone else here stated...
When I open the game now it looks much better for some reason o.o"
Weird, weird, weird!

If you use window mode, and you never resize the window, then the images won't be resize either. I do not have the luxury of having different kind of computer screen, so I can't say whether the window will be distorted somehow due to the screen resolution. However, it is very difficult to accidentally resize the window yourself: you need to explicitly enable the option (try it, see if you can resize the window even if you try to). In any case, if you still have doubt, click on Delete Persistent. This delete all persistent data, including the one about window size, so if you somehow accidentally resize it, the window will return to its default size.
Now I just thought of a different possibility: your graphics renderer. When you start the game, press Shift+G, choose a different choice of renderer (there are DirectX, OpenGL and software), then quit and start the game again to make the change effective. See if it is the cause of your problem. OpenGL is default for me, and it always cause me problem (never blurriness problem though, or at least as far as my eyes can tell; but I get a lot of missing pixels problem before), forcing me to change it.

[chibiansem02]

Elmiwisa saves my sorry butt yet again!
After I changed the graphics render it seems MUCH better!

Haha, I'm glad it wasn't my OCD on detail getting the better of me again.


Is it possible to add an option for the player to decide if they want to play in full screen mode or not?
The graphics look great now, but I'm wondering if full screen will distort them?
I'd like for people to be able to choose, but I'm not sure how / if this is even possible.

[Elmiwisa]

Is it possible to add an option for the player to decide if they want to play in full screen mode or not?
The graphics look great now, but I'm wondering if full screen will distort them?
I'd like for people to be able to choose, but I'm not sure how / if this is even possible.

The full screen mode will resize everything, but the aspect ratio will be preserved. If you your screen have a different aspect ratio from the window, then you will just see a black padding on both side. You can test out full screen mode yourself to see if it cause any problems.
The full screen mode are always already there by default. You have to go out of your way if you want to disable full screen mode. You can enable that mode through the Preference screen, or press Alt+Enter or some other key combination depending on the machine.

[chibiansem02]

Thanks, the full screen does have some of the padding / black bars to the right and left but they aren't any problem.
However the images do seem a bit blurred when using full screen, they look perfect in window form.

I'm thinking this is probably normal?
I tested out a few other Ren'Py games that are available for free download and it seems that all images have at least a tiny bit of distortion when played on full screen.
Is this just the normal result of the game being played in a bigger window?
I'm not sure how many people prefer to play in full screen v.s. window and I'd like to have both look clear but maybe this is asking too much, haha

[Chrizine]

Well, since the resolution of your pictures is smaller than the window in fullscreen mode, they have to be scaled to fill it, which causes the distortion.
How bad it is depends a bit on your windowed mode resolution, the bigger that is, the better the fullscreen will probably look.

[chibiansem02]

Sorry, when you say windowed mode resolution, is this a setting I can adjust in Ren'Py to fix the blurry full screen? Or does this have to do with the size/pixels of my sprites / artwork?
If I make the sprites much bigger then there isn't enough room to show the full sprite within the window.
Right now my BG images are about 800 by 650 and sprites are about 400 by 580.
Sorry for being so totally ignorant on this O.O;

[chibiansem02]

Sorry for the double post... I guess what I'm asking is how can I get my windowed mode resolution better. >_<

[Elmiwisa]

Sorry, when you say windowed mode resolution, is this a setting I can adjust in Ren'Py to fix the blurry full screen? Or does this have to do with the size/pixels of my sprites / artwork?
If I make the sprites much bigger then there isn't enough room to show the full sprite within the window.
Right now my BG images are about 800 by 650 and sprites are about 400 by 580.
Sorry for being so totally ignorant on this O.O;

No, this is simple mathematics.
Let's say your window (not counting window title bar and border) is of size 800x600 (that is the horizontal dimension is 800 pixel, vertical dimension is 600 pixel). And you have a screen that is of size 2140x1200. And let's say your sprite is of size 200x400.
When you are in normal window mode (with no resizing), then your sprite will be drawn over an area of 200x400. This means that each pixel in your sprite correspond to exactly 1 pixel on the screen. Thus Ren'Py do not have to do anything special: for each pixel on the screen, it look up the corresponding pixel in your sprite, and simply draw.
So what do Ren'Py do when you are in full screen mode? Ren'Py will try to preserve aspect ratio. That means your whole game screen will be be magnified by 2x on each dimension, which make it of size 1600x1200 (since 1600<2140 this means there have to be black padding on both side). Now, everything in the screen will have to be resized with the same ratio, so your sprite will be drawn over an area of 400x800. Now the number of pixel on the region of the screen where your sprite should be is 4 times more the number of pixel on the sprite. This cause problem. No matter what Ren'Py do, it cannot overcome the fundamental problem of not having enough pixel to draw. It always have to make the best guess on what the rest of the pixel should be, and hence you are pretty much guaranteed to get blurriness if your sprite is even slightly complicated.

There are certain "solution" (note the scare quote):
-Ignore it. Anyone who use full screen mode should expect blurriness anyway, because of the fundamental problem above. This method have the advantage of requiring the least amount of work.
-Make blurriness into an art style. Then nobody will complain.
-Similarly to above, but choose an art style that is not affected by blurriness. One way is to make the whole screen very grainy, which involve very little effort.
-Disable full screen entirely. Problem solved, if blurriness is all you care about. Of course, there will be player who dislike not being able to go full screen. This have the advantage of requiring very little work.
-Make your default window mode and your sprite at highest resolution possible. This means that most people cannot see the whole game screen while in window mode, but the image will be scaled down to fit in full screen mode. The opposite problem happen: there are too many pixel for the screen and thus many of them will be ignored when drawn. Thus the image will end up looking very fuzzy, but hey, that is different from blurriness right?
-Use vector graphics. Vector graphics is the reason why your text do not get blurriness problem when you go full screen. However, Ren'Py do NOT support vector graphics, so you have to find...creative way to get it. Beside, it is practically impossible to convert your sprite to vector graphics, so you will have to draw a new one. Not just that, vector graphics do not have the precision that you normally can draw with.
-Do not let things get scaled, ever. You will, once again, need creative way to get it, since Ren'Py will always scale stuff when the screen size change. And by not letting thing get scaled, you end up with a huge black padding when people try to go full screen. And since people go to full screen mode because people want thing bigger anyway, this also make them dislike it.
-Second guess everyone's screen size. Make one version of each of your sprites and other graphics for each one of them. Make some code to choose the correct version of the sprite to draw for each screen size. This have the problem of involving way too much work. Just look at how many different screen size lying around. Realistically, this is only feasible if you are making game for console, since things are more predictable.