2
\$\begingroup\$

It seems Unity UI Image supports Image Type 'Tiled', but I'm not sure how to get the tiling to work both vertically and horizontally. Can someone help me understand?

\$\endgroup\$
1
  • 1
    \$\begingroup\$ What have you tried? How does the outcome differ from what you want? \$\endgroup\$
    – DMGregory
    Commented Nov 11, 2021 at 0:14

1 Answer 1

5
\$\begingroup\$

Unity's UI Image components give you many options to manipulate Textures for UI purposes, as long as such Textures are Sprites. If you want to display other Texture Types, you might use the Raw Image component, which, on the other hand, offers fewer options.

Declaring Textures as Sprites

In your Assets folder, select the image(s) you want to use as UI Texture. Then, in the Inspector, set Texture Type to Sprite (2D and UI).

Changing Texture Type

This way, you tell Unity to optimise usage of these resources for UI drawing.

Setting up the Image component

Select the GameObject with an Image component in it (create one if you haven't yet). Then, drag the image you set as Sprite into the Source Image property in the Inspector. Now, new options shall pop out.

Assigning Source Sprite

You can now set the Image Type property to Tiled, but a warning message will show up:

It looks like you want to tile a sprite with no border. It would be more efficient to modify the Sprite properties, clear the Packing tag and set the Wrap mode to Repeat.

Defining a Wrap Mode

We can fix this warning by setting the Wrap Mode property of the image in the Inspector from Clamp to Repeat:

Set Repeat Mode

Click on Apply to save setting changes for the Sprite. Now, image tiling works, and you can tweak the new additional Pixels Per Unit Multiplier setting to get the desired result. The Sprite's Pixels Per Unit (settable in its Import Settings, where you also set the Wrap Mode to Repeat) is multiplied by this value before rendering. You can use it to make tiles bigger (using fewer tiles) or smaller (using more tiles) on a per-Component basis:

Final Preview

Scaling along the X and Y separately

Pixels Per Unit Multiplier applies to the source Sprite as a whole, keeping its aspect ratio as a tile when covering the Image area. If you want to scale width and height by different factors, you can either change the Image scale and size combined or use the Raw Image component:

  • Scaling/resizing: A Sprite whose tiling height is double its width can have an actual height of twice its width, and a Y-scale of 0.5. This solution isn't optimal, as you may incur scaling issues with child GameObjects of your Image if any. Also, non-uniform scaling isn't preferable, if other solutions exist.

Scaling And Resizing

  • Using Raw Image: The Raw Image Component exposes the UV Rect properties, that let you define the horizontal and vertical offsets of the image (X and Y), as well as the normalised UV mapping values for the Texture (W and H):
    • Values between 0 and 1 will draw only a portion of the Texture.
    • Values greater than 1 will result in the Texture being downscaled, hence more tiles along a given axis.
    • Negative values will make the Texture mirrored/flipped.

Using Raw Image Component

\$\endgroup\$
5
  • \$\begingroup\$ actually, how do you tweak the settings for image tiling once it is set to clamp: repeat? \$\endgroup\$
    – ina
    Commented Nov 14, 2021 at 9:57
  • \$\begingroup\$ @ina When you change the Image Type of an Image Component, different additional properties show up. If you set Image Type to Tiled, the only new option available is Pixels Per Unit Multiplier: the Sprite's Pixels Per Unit (settable in its Import Settings, where you also set the Wrap Mode to Repeat) are multiplied by this value before rendering. You can use it to make tiles bigger (using fewer tiles) or smaller (using more tiles) on a per-Component basis. \$\endgroup\$
    – liggiorgio
    Commented Nov 14, 2021 at 14:03
  • \$\begingroup\$ that seems to only allow the tiling to one dimension? what if you want different x and y tiling? \$\endgroup\$
    – ina
    Commented Nov 15, 2021 at 6:59
  • 1
    \$\begingroup\$ I updated my answer to include my previous comment and address your new question. \$\endgroup\$
    – liggiorgio
    Commented Nov 15, 2021 at 13:35
  • \$\begingroup\$ Ahhhh that was it! Use a raw image and not a UI Image... thank you! \$\endgroup\$
    – ina
    Commented Nov 16, 2021 at 2:03

You must log in to answer this question.

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