Why is this sprite so blurry? :cry:

Discussion and feedback on Construct 2

Post » Sun Apr 24, 2016 4:11 am

I'm working on a small project and when my partner made the map for it, the sprite looked perfect up close, not blurry at all and you could see every little detail but when I put it into construct 2, and even when leaving it at the original size, it is very blurry and ruins the whole thing. I feel like shit now, because it looks so nice and took so much time to make only to find out it is basically unplayable. Here are some pictures:

Original sprite: Image
The picture was taken with Gyazo, but in the program he used itself he zoomed in and this is how it looked.

And now, this is how it looks in game: Image
It isn't even zoomed in as far as he did in the paint program he used yet it's extremely blurry. I would like to further put everything like the character and such into proportion but since it's so blurry I feel like there is no point in using the map because it's basically ruined :cry:

Can anyone tell me how to fix it, or if not, just tell me WHY this happens so we can avoid it in the future or somehow fix it outside of the Construct 2 editor? Please, the map is so well done and we don't want to restart for a 3rd time or want to get rid of it :cry:
B
28
S
11
G
4
Posts: 77
Reputation: 4,321

Post » Sun Apr 24, 2016 4:51 am

@PrimalNews - I can't say for sure what is the problem if I don't ask you with these questions.

1)If I were to guess, I believe the map was made as a whole image not as a sprite sheet or tile. Am I right?
2)Did you make it inside the Construct 2 Editor or did you used an external image editor? If you used an external editor, then what editor was that?
3)Did you by any chance re-sized the image using the Construct 2 image editor?
4)Did you stretch the image in the game editor or layout?
5)What is the original image size of the image?
6)What is the size of the layout and the window?

If you answer those questions then we will know the reason.
The Things you can create is only limited by your imagination. If you don't have the skills then use your motivation as a natural force to exceed all expectations. Chadori RebornXD
B
65
S
21
G
90
Posts: 1,124
Reputation: 59,862

Post » Sun Apr 24, 2016 5:10 am

Also, if you are using "linear" sampling, try using "point" sampling. Point sampling retains hard edges in pixels and should not get blurry like that.
B
81
S
30
G
35
Posts: 340
Reputation: 23,046

Post » Sun Apr 24, 2016 6:30 am

chadorireborn wrote:@PrimalNews - I can't say for sure what is the problem if I don't ask you with these questions.

1)If I were to guess, I believe the map was made as a whole image not as a sprite sheet or tile. Am I right?
2)Did you make it inside the Construct 2 Editor or did you used an external image editor? If you used an external editor, then what editor was that?
3)Did you by any chance re-sized the image using the Construct 2 image editor?
4)Did you stretch the image in the game editor or layout?
5)What is the original image size of the image?
6)What is the size of the layout and the window?

If you answer those questions then we will know the reason.


1. Yes, my friend made them in a program and posted them on imgur, from which I downloaded. It looked fine on imgur tho.
2. External image editor. Not well known, my friend said he used paint.net (It's a program not a website)
3. I didn't resize it. Of course, I tried resizing it later to see if it made a difference but it made it the same or worse.
4. No, I didn't stretch it.
5. Not sure, in Construct 2 it shows as 1360 by 1020 pixels.
6. Size of the layout is the same as the same as the map size stated above, and in game the camera is zoomed in as shown in the picture, which illustrates the window size if you open the full picture on a different tab. (On here the image is too big and cuts off)

Thanks I hope we can fix the problem! :D
B
28
S
11
G
4
Posts: 77
Reputation: 4,321

Post » Sun Apr 24, 2016 7:14 am

@PrimalNews :

1)I see. Well, I believe that the reason here is the export option of the image artist used was a lossy compression format(image that irreversibly reduces the original quality of the image) for example PNG-8. That caused the quality loss. I forgot to ask you this, what was the format the image artist used for export?

2)Good that you didn't use the Construct 2 Image Editor for complicated images since it is not designed that way. I think Paint.Net is good as long as it has the option to export to different known image formats but I recommend Photoshop, Illustrator or other known and high reputation image editors if you already own one.

3)Good you shouldn't re-size it on Construct 2 since it makes it worse.

4)Good since it reduces quality if it is stretched.

5)In question 1 I asked you if your image was a whole image and you said yes. Well, in game making you shouldn't make a background that way. You shouldn't make your game parts as whole images, instead you have to use tiles, sprites(by use of sprite sheets - optional) or 9-patch. Because having a big image in your game is very inefficient and can make a game non-playable:

Please read this:
https://www.scirra.com/blog/112/remembe ... our-memory

6)Since you are making a pixel art. I suggest re-sizing your window size to 640px*360px so that it will be easier in memory use but you can re-size your layout all you want depending how big your map/game is. And yes, set your sampling from "linear" to "point" to prevent blurs and also set pixel rounding to "On".

Solution:
*Export your image to PNG-32 to avoid quality loss. (Blurriness Solution)
*For performance and practical/professional game making. Instead of a whole image background, use sprites, tile background, tile maps and 9-patches for your game.
*Set Sampling from "Linear" to "Point". (Blurriness Solution)
*Set Pixel Rounding to "On". (Blurriness Solution)
*Set Window Size to 640px * 360px.

That should fix everything. I suggest you read the manual too to learn good game making practices:
https://www.scirra.com/manual/1/construct-2
The Things you can create is only limited by your imagination. If you don't have the skills then use your motivation as a natural force to exceed all expectations. Chadori RebornXD
B
65
S
21
G
90
Posts: 1,124
Reputation: 59,862

Post » Sun Apr 24, 2016 2:43 pm

Since the image looks exactly how it should if you didn't want the pixels to show, I would say Drew is correct, and Sampling's set to linear.
And chadorireborn mentioned the pixel rounding, which if pixels are a partial pixel off where they can't be drawn as a whole pixel, the system would use some aliasing to make it look right. which could cause some minor blurring.

from the manual:
Sampling
Choose between linear (smooth) and point (pixellated) sampling when resizing images. Linear is recommended for modern games with hi-res graphics, and point is better suited to retro games with blocky pixel art.
B
239
S
62
G
33
Posts: 903
Reputation: 40,562

Post » Sun Apr 24, 2016 6:41 pm

I don't resize the map though, and pixel rounding and linear only makes my character move veery fidgety while never really achieving anything in terms of the blurriness. I'll tel l the artist to change it to PNG-32 and see if anything changes.

Edit: My artist tried exporting to 'PNG-32', and these were the only options presented to him. Not really sure what the difference between PNG-8 and PNG-32 is and how to export to PNG-32. Any help?

Picture: Image
B
28
S
11
G
4
Posts: 77
Reputation: 4,321

Post » Mon Apr 25, 2016 4:40 am

@PrimalNews - It seems Paint.net has limited export options. Try the exporting it to "PNG" since PNG-8 is the lossy compression, I believe other PNG's are just fine. Use the "PNG" option and see if there is any difference. And set your Sampling to "Point" never mind the Pixel Rounding.
Last edited by chadorireborn on Mon Apr 25, 2016 7:31 am, edited 1 time in total.
The Things you can create is only limited by your imagination. If you don't have the skills then use your motivation as a natural force to exceed all expectations. Chadori RebornXD
B
65
S
21
G
90
Posts: 1,124
Reputation: 59,862

Post » Mon Apr 25, 2016 7:17 am

PrimalNews wrote:I don't resize the map though, and pixel rounding and linear only makes my character move veery fidgety while never really achieving anything in terms of the blurriness. I'll tel l the artist to change it to PNG-32 and see if anything changes.

What Drew and Paradox are saying is that sampling should be set to point, not linear. Pixel rounding isn't necessary if you have sampling set to point and is the likely the cause of movement looking fidgety.

If point sampling doesn't fix it, it could be an issue with your graphics drivers.
Moderator
B
113
S
41
G
20
Posts: 1,586
Reputation: 19,126

Post » Sat Apr 30, 2016 2:29 pm

You should put one of those images in a Capx demonstrating what is happening. That way we can see what you mean. (if it's your graphics drivers, we could tell you we don't see the problem.)

Is the image clear in constructs image editor? If it's clear there, then your formats have nothing to do with it.

I'm fairly sure construct uses all png-24, as that's the one that has transparency alphas. If you don't get an option to output the type, it's probably saving using whats there, if it was a gif, it will use -8, if it has too many colors or transparency then -24.
B
239
S
62
G
33
Posts: 903
Reputation: 40,562

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 9 guests