Bad quality of png after import to Unity

Hi all,

I try to make my first game (for android devices) to build up my skills and I have annoying issue - I created game board in InkScape and export it as png, it has very high resolution and quality (attachment 'RoadBoard'). When I move it to Unity I noticed that quality goes down and now it looks pretty bad (look at attachment 'BadQuality'). Could someone help me with this? I would be grateful!

Generally my goal is to have road with sharp edges in Unity - if you have any tips which could help me achieve my goal in some smarter way than create game board in high resolution just let me know!

Thanks

 

That image is way too big to be used in a game. You should split it in smaller images (like a part of road, a corner, some grass) and then recreate it in Unity.

 

In the PNG's import settings, you'll want to turn off filtering (Filter Mode: None) for images you don't want to be blurred.

But Acid is right, too. This image is crazy unoptimized to use in game as is. It's probably fine for just doing some prototyping and such, but consider breaking it out into smaller pieces and tiling it as needed instead.

 

Some suggestions/tips:

• Textures should be a power of 2 in width and height, e.g. 256x256, or 512x128, etc.
• You don't need the green background to be part of the texture. Just set the camera background to green.
• As @AcidArrow said, break your road up into pieces, and then use them multiple times. A little square of road with a single white dash in the middle would be appropriate here.
• Always check your texture import settings. Unity will compress stuff as it sees fit, in accordance with the guidance you give it (or fail to give it) there.

 

Guys - thanks for such a fast answers and great tips which I'll start use from today! Another questions came up after your answers:
1. Why textures should be a power of 2? Is it connected with some Unity optimisation ?
2. When you talks about import settings you mean this one? (for particular texture):
or maybe there are some global import settings somewhere ?

3. If I break my image into little pieces and I will have for example little square of road - Is there a smart way to duplicate them in Unity to create whole road ? Or I would have to duplicate my gameObject (which contains square of road) number of times and arrange them like a puzzle (which would be really time-consuming)?

 

1. Textures being a power of 2 optimizes them for the graphics hardware itself; it's also required by certain image-compression algorithms included with Unity.

2. Yes, that's the one.

3. It's not so time-consuming. Make your tiles exactly 1 world-space unit high, and then it's just a matter of putting a tile at Y=0, another at Y=1, next at Y=2, etc. You don't have to drag them into position; you can actually type numbers into the Inspector. (There are also editor extensions you can find or make that snap things to a grid when you drag.)

And if even that is too onerous... well, if you have a computer, you can program it to do repetitive tasks for you.

 

@JoeStrout - thanks for your answers
Last question - If I need for example texture with size 150x200 - should I add some empty space around to have power of 2 size ? or what else should I do?

And about road tiles - you were right about copying them is easy but it looks messy in scene view:


My idea was to organize them by put them into empty object - but maybe there is some better way ? Also resizing tile to has 1 unit require to rescaling other objects to keep proportion and it sounds like redundant work or I just miss something here ?

 

There are several possible answers:

• Reconsider your needs; there's no reason you can't model/export that texture as 256x256 instead.
• Keep it 150x200, and let Unity rescale it for you in the texture import settings (not preferred, but maybe good enough).
• Keep it at 150x200, don't let Unity rescale it, and give up some performance and compression options.
• Pad it out, as you said.
• Most likely: discover texture sheets, and make this just one 150x200 section of a much larger (e.g. 1024x1024) multi-sprite sheet.

Nope, that's the best way. Then twist that container object closed, and you don't have to see the mess.

You're missing that this is game development. Getting stuff like this right is 90% of what we do. You also miss that it's only redundant work because you didn't do it that way to begin with, which is to be expected because you're new. With experience, you'll think of stuff like this ahead of time and there won't be any rework.

But anyway, yeah, picking a scale for your game is one of the most important early decisions you have to make. If there is any gridlike nature to it, then usually 1 unit == 1 grid cell is a good choice. If you're using physics, you probably want 1 unit = 1 meter, unless you're modeling very small or very large things. If you're doing a pixel-perfect retro game (like Rocket Plume!), you might even want to pick 1 unit == 1 pixel.

And yep, if you change your mind about this decision at any point, then you have a bit of work to get everything fixed up. Such is life. My advice: quit grousing and get on with it!

 

@JoeStrout - Your answer really spoke to me and brightened me a few things (even a few that I did not ask ) - Thank you very much for that! I'm gonna listen your advice and just go ahead!

 

Remember to scale all vehicles or whatever using the same method of "scaling" sizes etc. A "tiling" tutorial may help for better tiling usage as tiling is awkward if it includes extra's (grass/hedge/tree etc). Thought there would be a tile asset in the store or free somewhere online...

 

Just change this to a bigger number in the import settings

If it's a low number, Unity will reduce the image's quality so that it won't exceed the memory limit

 

Which is precisely the problem here. It's too large (if you check the image it was ~12,000 by ~12,000) and Unity automatically resized it to a smaller number losing significant quality in the process. If you don't care about quality it's one thing but if you do care you should size it manually in an external app like Photoshop or Affinity Photo.