For some reason, I can't get these tilemaps to come out like they were created in Unity...
The pixel art is imported to Unity from Tiled.
The pixel art in Tiled:
The same pixel art imported to Unity:
Does anyone have any idea how I can fix this?
Thanks in advance!
As requested, the sprite import settings:
Posting my comment as an answer after all.
As I suggested, one way to get rid of blurring is to set the "Filter Mode" of the sprite to "Point (no filter)" instead of "Bilinear" or "Trilinear"
Here you can see the difference between bilinear and point filtering.
If that doesn't help, try messing with the quality settings in the Sprite Import.
Increase the "Max Size" and maybe disable "Compression" or increase the quality of the compression.
Here you can see differences between the different compression qualities, ranging from "Low" over "High" to "None"
You can also try to increase the "Max Size" value for higher quality sprites. It scales the dimensions of your sprite to not exceed the specified value. If your sprite sheet is already smaller than the "Max Value", increasing it will have no effect though.
The next picture shows the differences between Sizes 512, 256, 128 and 64 for a Sprite with dimensions 423 x 467
You can see that sizes above the dimensions won't have any effect, whereas smaller values will scale the sprite down, decreasing its visual quality.
Usually fiddling around with those values should help making your sprites look sharp and not blurred anymore.
EDIT:
As #NikaKasradze pointed out, there are also default quality settings you can try. Go to Edit > Project Settings > Quality
The matrix on top gives you a selection of all current quality levels for the Editor itself as well as all build target platforms. The green tick shows what currently is selected as the default quality. You can also set the "Texture Quality" which defines the overall texture resolution in your project. You can choose between "Full", "Half", "Quarter" and "Eight Res". You should choose "Full Res" for your current default settings.
Considering you already changed the filtering from Bilinear to Point (no filter), the issue may be that Unity compresses your texture by default. This is likely if it is a POT texture (Power of two resolution).
You can override this for individual platforms at the bottom of the texture's import settings. Select RGBA 32 bit if you need the alpha channel (transparency) or RGB 24 bit if you don't, to get your texture uncompressed.
And don't forget hitting that Apply-button! ;)
If this doesn't help, could you post a picture of your import settings?
Also, what data type is your image?
EDIT:
After the import settings screenshot has been added, it seems to me the issue lies in the SpriteMode settings.
As far as I understand, the image used is a Spritesheet in form of a tilemap. Therefore the SpriteMode should be set to Multiple.
You can then click on the Sprite Editor button and cut the sheet into individual sprites using the Slice function (now separate, as of Unity 5.6).
You probably want to use the Grid - By Cell Size method, which is basically how this is handled inside Tiled.
You also want to adjust your Pixels Per Unit setting to match the resolution of your tiles (for pixel-perfect results).
I had some issues with blurry sprites and I was able to fix it by changing the resolution of my sprites in an image editing software. The resolution was 576x352 and I changed it to 512x512 and that fixed it. I think its best for Unity that images are square and have a resolution that is a power of 2 as often as possible (for example 512 = 2 ^ 9).
Make sure you disabled Mip Maps:
http://prntscr.com/eup3hd
After literally hours of tinkering, the only solution I could come to was to open photoshop and export the tilemap at 4000% its original size.
There is still some minor blurring if I zoom in but at least it isn't as bad as I demoed in my question.
I have tried everyone's answers here to no avail, I am left with the conclusion that it must be a Tiled2Unity problem (despite it never doing this before)
I will update this post if I find a solution...
Related
I'm new to Unity and to game development in general.
I would like to make a text-based game.
I'm looking to reproduce the behavior of an instant messenger like messenger or whatapp.
I made the choice to use the Unity UI system for the pre-made components like the rect scroll.
But this choice led me to the following problem:
I have "bubbles" of dialogs, which must be able to grow in width as well as in height with the size of the text. Fig.1
I immediately tried to use VectorGraphics to import .svg with the idea to move runtime the points of my curves of Beziers.
But I did not find how to access these points and edit them runtime.
I then found the "Sprite shapes" but they are not part of the "UI",
so if I went with such a solution, I would have to reimplement
scroll, buttons etc...
I thought of cutting my speech bubble in 7 parts Fig.2 and scaling it according to the text size. But I have the feeling that this is very heavy for not much.
Finally I wonder if a hybrid solution would not be the best, use the
UI for scrolling, get transforms and inject them into Shape sprites
(outside the Canvas).
If it is possible to do 1. and then I would be very grateful for an example.
If not 2. 3. 4. seem feasible, I would like to have your opinion on the most relevant of the 3.
Thanks in advance.
There is a simpler and quite elegant solution to your problem that uses nothing but the sprite itself (or rather the design of the sprite).
Take a look at 9-slicing Sprites from the official unity documentation.
With the Sprite Editor you can create borders around the "core" of your speech bubble. Since these speech bubbles are usually colored in a single color and contain nothing else, the ImageType: Sliced would be the perfect solution for what you have in mind. I've created a small Example Sprite to explain in more detail how to approach this:
The sprite itself is 512 pixels wide and 512 pixels high. Each of the cubes missing from the edges is 8x8 pixels, so the top, bottom, and left borders are 3x8=24 pixels deep. The right side has an extra 16 pixels of space to represent a small "tail" on the bubble (bottom right corner). So, we have 4 borders: top=24, bottom=24, left=24 and right=40 pixels. After importing such a sprite, we just have to set its MeshType to FullRect, click Apply and set the 4 borders using the Sprite Editor (don't forget to Apply them too). The last thing to do is to use the sprite in an Image Component on the Canvas and set the ImageType of this Component to Sliced. Now you can scale/warp the Image as much as you like - the border will always keep its original size without deforming. And since your bubble has a solid "core", the Sliced option will stretch this core unnoticed.
Edit: When scaling the Image you must use its Width and Height instead of the (1,1,1)-based Scale, because the Scale might still distort your Image. Also, here is another screenshot showing the results in different sizes.
This is what the game looks like in the 'game' window in unity, which is what it should look like https://ibb.co/xjst4vw achieved by removing all lighting including ambient lighting.
And this is what it looks once built https://ibb.co/4RcbMv8
Why is there a haze in the border between colors? How do I get it to be pixel perfect?
The aspect ratio of the in editor display is 160x144
I have change the game resolution by going to >edit >project setting >player and changing the height and width to the right size
The camera is also passing to a render texture which is of the right size, with the filter mode set to point.
I cant figure out what is causing this. to my knowledge All lighting is turned off. It looks like some up scaling error or maybe some sort of anti-aliasing effect which has also been turned off everywhere i could find.
Does anyone have an idea about what might be causing this? thanks.
There is postprocessing window in unity where you can specify such things like antyaliasing and so on. I think that this will make your game pixel perfect.
Found the answer to my own question the resolution in the >edit >project setting >player >resolution and presentation need to be as high res as it can be so in my case for a 1920x1080 screen it should 1120,1008 which is 160x144 scaled up by 7.
Then send data from you're main camera to a render texture that is set to the resolution you want (in my case 160x144) and create UI canvas that takes up the whole screen and a raw image as a child. Then put the render texture you created in the texture.
So I created a new project in which I've set my display to be 1440 x 2960. I made a background in PSD with the exact same size, and when I place it in the scene, it appears to be way bigger than the actual camera, which should obviously be the same size. Why is that? I'm quite a newbie and I find this very counter-intuitive.
I think you are mixing up resolution with camera size/field of view.These are Different things things.
And also how big your object is in your scene also depends on : pixels per unit" that uyou set up in your Graphic asset.
I have drawn a pixelart animation 32x32 pixel size, using Piskel online tool. I saved it as a 32x64 so i have both 2 frames in one png file. Then i included it in Unity and when i cut it in sprite editor i get this edge that appears on the next sprite, that shouldnt. See the picture of the robot above the head there is a line. I cutted exactly 32x32 pixels so that line should not be there.
Is there a way to fix this?
I have had the same problem once. If I remind correctly, you have to change the texture setting. Change the filter mode field to Point (no filter).
I may be wrong, but still I'm sure that your problem can be solved by changing it's texture setting.
I am currently making a mobile match-3 like game in unity. I have made all the graphics for the gems(the objects with which you make the matches) in Inkscape at 256x256 and exported them(PNG Files) with 90 dpi(also tried with 360 but nothing changed). My problem is that when I run the game in the editor the graphics seem to be "pixelated" and blurry. In my sprite settings I've set Pixels per Unit to 256, checked Generate Mip Maps, I am using Bilinear Filter Mode and the aniso level is 0. I have also set the max size to 256 and compression to high quality(My Main Camera's size is 10 but I tried to change that and nothing changed as far as the quality of the sprites). What can I do to "perfectly" display my sprites? Do I have to export them in some other way from Inkscape or do I have to change some Unity's settings?
Thank you.
NOTE: My sprites are not "pixel art"!
Edit(Added photos of the purple gem as file and how it is shown in editor):
Because scaling
You're display resolution on the images isn't a 256x256 region where those images are displayed, which means that they must be scaled in some manner in order to display in the desired region. Camera rendering is notoriously bad at scaling. As your images aren't Vector (and Unity doesn't support vector graphic formats anyway), scaling will always result in a loss of detail. Detail like hard edges.
Your options are:
smaller images where you have complete control over how the image is scaled down
bilinear filtering (which is fundamentally blurry)
mipmaps (which are automatically scaled down versions of your image in powers of two)
If the later two aren't giving satisfactory results, your only option is the first.