Oops... Are Your Unity Sprites Too Tight?

[Read the original blog post at Unity Sprites: tight-fit or full-rect?]

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.

meme-angryface

TABLE OF CONTENTS

1What's the Sprite Mesh Type?

2Why Unity Full-Rect Sprites Aren't That Great

3Are Tight Sprites Superior?

4The (Few) Reasons to Use Full-Rect Sprites

5What's Next?

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.

meme-decoration-killer

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:

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