Basic

August 9 2020

11 comments

Unity Sprites: Full-Rect or Tight?

By Rubén Torres Bonet

August 9, 2020


__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"6c4de":{"name":"Main Accent","parent":-1},"67ed2":{"name":"Accent Dark","parent":"6c4de","lock":{"saturation":1}}},"gradients":[]},"palettes":[{"name":"Default","value":{"colors":{"6c4de":{"val":"var(--tcb-skin-color-0)"},"67ed2":{"val":"rgb(59, 65, 63)","hsl_parent_dependency":{"h":160,"l":-0.05,"s":0.04}}},"gradients":[]},"original":{"colors":{"6c4de":{"val":"rgb(51, 190, 127)","hsl":{"h":152,"s":0.57,"l":0.47}},"67ed2":{"val":"rgb(59, 65, 63)","hsl_parent_dependency":{"h":160,"s":0.04,"l":0.24}}},"gradients":[]}}]}__CONFIG_colors_palette__

Should you choose tight-fit or full-rect for your sprites in Unity?

You know, these graphical elements you use in ALL your games...

After all, you most likely use sprite renderers. Or at least, UI Images.

In this post, you will learn the difference between these two mesh types. And when to use each.

No more guesstimates. Know exactly what you're doing.

What's the Sprite Mesh Type?

Before we start, this is what I'm talking about:

Unity Sprite Mesh Type

Unity Sprite Mesh Type

I know, it's an easy-to-ignore option.  After all, you have way many options in your sprite import settings.

The sprite's mesh type is all about how Unity will render your sprite in your game.

The traditional way of rendering them is in full rect mode. This means, your sprites are rendered as a full quad with transparent regions.

Unity Sprite Full Rect

Unity Sprite: Full-Rect Mesh

However, a more efficient approach is to build a tighter mesh around your sprite.

This means, you won't render your sprite as a rectangle, but as a 2D polygon.

Now, why would you get into the trouble of making a more complex shape?

Let's see why.

Why Unity Full-Rect Sprites Aren't That Great

Okay, first the biggest advantage of rendering full quads...

Drawing a quad as easy as breathing. Both for your CPU and your GPU.

However, here's the biggest drawback...

When drawing full quads, you render a vast surface full of transparent fragments. See the previous image: everything out of the circle is transparent... but also rendered.

The problem?

Rendering a big surface incurs in evil overdraw.

And overdraw is one of the biggest performance killers.

Overdraw is always hunting for innocent games to kill its frame-rate. It's especially dangerous on mobile.

So what's better than rendering a full rectangle?

Well, rendering a polygon that better fits your sprite. In other words, making our shape a little bit tighter 🙂

Are Tight Sprites Superior?

You can set the mesh type as tight in any of your sprites.

In fact, it should be the default value nowadays.

When you do that, Unity will slice your sprites so you minimize the transparent area you render.

Unity Sprite Tight

Unity Sprite: Tight Mesh

You render fewer pixels. Your graphic card thanks you with higher frame rate.

Great deal.

Note: to use tight meshes on UI Images, you need to activate the "Use sprite mesh" option in the UI Image component (credits to yasirkula). This is available since 2018.3.

The (Few) Reasons to Use Full-Rect Sprites

Normally, there are VERY few cases you should use full rects.

But here are a few:

  • Your game performance is vertex-bound and you have many sprites on screen.
  • Your platform barely suffers from overdraw problems.

It pays off to cut the transparent regions off your sprites as much as you can. That includes simplifying them.

What's Next?

Not much.

In future posts, we will continue to explore more sneaky import settings that so many people forget about.

It will be great.

Till then, make sure you're following my Unity performance tips. It'll help you make sure you're on the right track.

~Ruben

  • In newer Unity versions, Image component has a “Use Sprite Mesh” variable when “Image Type” is set to Simple. AFAIK, this lets you use Tight meshes in UI.

  • For devs who are forced to use thight Mesh, unity lets you modify the mesh so you can get the less faces of the sprite as you want, this help me a lot to reduce overdraw and keep stable vertex count at mobile games

    So how to do it?

    Go to PackageManager > Download 2D Animation package > Select your sprite and go into the Sprite Editor window > At top-left of this window you must select Skinning Editor > Then go to Geometry > Here you can make your own mesh to render the sprite in game, modifying the vertex position and faces amount, hope this help other devs with the same problem.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

    Rubén Torres Bonet

    About the author

    Born Game Developer, now ready to help you develop better games. Primary programmer on Star Trek Bridge Crew (Oculus Quest), Diamond Dash. Programmer on Time Stall, Catan Universe, Anne Frank House VR, Jelly Splash, Blackguards Definitive Edition. I also worked in minor XR experiences for HoloLens and Vive for clients such as Audi and Volkswagen.

    You might also like

    The Bright Side of Ray-Traced Global Illumination in Unity
    >