0
\$\begingroup\$

I am building a top-down 2D game in Unity engine. I have made a house on my own but when I try to render it in Unity, it shows weird effect when camera moves.

See the roof of the house:

rendering issue

I want the roof to look proper and not this weird effect. How can I solve this? Is this an issue in art or renderer?

FYI, I have made this house in MS Paint and saved it as a PNG file.

  • The original image is of size 256x256.
  • PPU is set to 100 (default in Unity).
  • Compression is set to None.
  • Filter mode is Point (no filter).
  • Orthographic camera size is 5.
\$\endgroup\$
6
  • \$\begingroup\$ You may be interested in Pixel Perfect 2D Tiles or Strange warping/shimmering effect with Unity tilemap and Cinemachine. Do those past Q&A threads describe the "weird effect" you're seeing, and do the solutions offered there help? \$\endgroup\$
    – DMGregory
    Commented Dec 25, 2023 at 11:13
  • \$\begingroup\$ @DMGregory, I did change compression and filter mode, no effect. Changing PPU makes the house smaller that I don't want. I checked the orthographic camera size, its set to 5. If I reduce it to 2, I don't see the effect (coz the scene looks zoomed in), but as soon as it becomes above 2, I start seeing that effect. I would like to keep the size 5. \$\endgroup\$
    – kiner_shah
    Commented Dec 26, 2023 at 5:11
  • \$\begingroup\$ What size window or monitor are you playing on? Have you applied any scaling to your tile map or tile sprite objects? \$\endgroup\$
    – DMGregory
    Commented Dec 26, 2023 at 11:17
  • \$\begingroup\$ I am using the default Window size in Unity, didn't change it. About scaling, I didn't apply any scaling. It's not a tile sprite but a normal sprite. \$\endgroup\$
    – kiner_shah
    Commented Dec 26, 2023 at 17:37
  • \$\begingroup\$ Unity doesn't really have a default window size, since it scales with your monitor by default. Did you capture this from the Game view inside the editor? \$\endgroup\$
    – DMGregory
    Commented Dec 26, 2023 at 18:09

1 Answer 1

2
\$\begingroup\$

At an orthographic camera size of 5, you'll show 10 units of the world from the top of the screen to the bottom.

If each unit has 100 texels of texture data (PPU/pixels per unit), then that's 1000 texels you're trying to pack in vertically.

That means you'll only get clean 1:1 pixel rendering if your window or full-screen monitor has a vertical resolution of exactly 1000. If you're viewing this in the Game window in Unity on a 1080p or smaller screen, you're probably trying to cram more sprite texels into the view than you have screen pixels to display them, so some have to get skipped. This leads to the shimmering distortions you see, for the reasons I detail in this answer.

If we want to achieve a similar look while getting pixel perfect display, we need to create the image to match the display resolution it will be shown on.

Let's say you like the current look where the 256-texel-tall house occupies about a quarter of the height of the 1000-texel-tall camera view.

If we assume the game is made to be played at 1080p, then we should make the image about 1080/4 = 270 texels tall. And we should make the PPU 108 so that 10 units of world space exactly matches 1080 pixels of screen space.

Or you could keep your 100 PPU, and zoom the camera out to size 1080/100/2 = 5.4

Alternatively, if you want to target a 720p resolution, a quarter of that would be a 180 texel tall house image. You'd then make your PPU 72 at camera size 5, or keep the 100 PPU and 3.6 camera size.

If you want to support both 1080 and 720p, that's harder, but can be done with certain specific texel sizes and scaling ratios or swapping between alternative sets of assets.

Regardless of which one of these you choose, you'll still see shimmering when previewing the game in a window smaller than the full-screen size you calibrated for. Such is the challenge of pixel perfect visual styles.

If you're willing to sacrifice pixel perfection, you can...

  • Change your sprite filtering to "Bilinear" or "Trilinear" to blend pixels instead of skipping them.

  • Click "enable mipmaps" in the sprite texture's import settings to auto-generate down-scaled versions of the texture to sample when displaying it smaller than its native size.

  • Avoid 1-pixel-wide lines and details in your images, since these will tend to get blurred out when scaling the art.

You can also use custom pixel art scaling shaders that give a nicer result than the GPU's built-in linear sampling, especially if you're scaling up the images by at least 2x. There's not much you can do when scaling down, since you just don't have enough screen pixels to draw all the detail into, and some has to get lost somewhere. For this reason, you usually want to err toward smaller-resolution sprites if you want that crisp pixel art look at a wider range of resolutions, then scale it up for display.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .