Creating a 9-Slice Image in Code Not Working

Unity Engine
1

Hello,

I posted yesterday about a scroll bar that I couldn’t get working but I boiled it down to the actual 9-slice image that isn’t working. I have edited this post with updated code to simplify reproduction. It looks as though the areas that are supposed to stretch in the 9-slice are actually being removed and the four corners are being stretched. I’m not sure what I’m missing here. In the editor when I create one, it looks identical to the image I create in code. Any help here would be great!

950×668 104 KB

Here is how to reproduce the problem.

  1. Create a new Unity project and scene.
  2. Create an empty game object and in the Start function put the following code.
  3. Here is the image that this code uses. Put these in the ProjectName/Assets/Resouces folder. It should be named scrollBarBackground.png: .

If you need any more details, please let me know. Thanks again.

void Start () {
        Canvas canvas = this.transform.gameObject.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        this.transform.gameObject.AddComponent<GraphicRaycaster>();

        GameObject goImg = new GameObject ("Image");
        goImg.transform.SetParent(this.transform);

        Image image1 = goImg.AddComponent<Image>();
        Texture2D texture1 = Resources.Load("scrollBarBackground") as Texture2D;
        Sprite sprite1 = Sprite.Create(texture1, new Rect(0f, 0f, texture1.width, texture1.height), new Vector2(0.0f, 0.0f), 1f, 0, SpriteMeshType.Tight, new Vector4(5f,5f,5f,5f));
        image1.sprite = sprite1;
        //image1.rectTransform.sizeDelta = new Vector2(texture1.width, texture1.height);
        image1.type = Image.Type.Sliced;
        RectTransform imgRect = goImg.GetComponent<RectTransform>();
        imgRect.pivot = new Vector2 (.5f, .5f);
        imgRect.sizeDelta = new Vector2 (50f, 150f);
        imgRect.localPosition = new Vector2 (0, 0);

}
2

Update: I edited the post above to update it to talk about the image 9-slice problem which is the heart of the scroll bar problem I posted yesterday. Any help would be greatly appreciated!

3

I’m just wondering… Prefabs… no good for this?

4

Thanks for the response. Ideally, no, I’m not using prefabs for anything. I have found it’s simpler and easier to manage assets with version control and my team without them. There must be a way to achieve a 9 slice in code right?

5

@Denin :

I bet you already solved this?

Anyway, you have to create a new sprite, with defined border in it’s creation parameters.

You cannot change borders as it has only getter so creating new sprite is the solution it seems.

First define a border Vector4.

Then create new sprite with this correct border.

Then re-apply this sprite as your Image component’s sprite.

6

Thanks for getting back to me @eses . I haven’t solved this yet unfortunately.

Now, correct me if I’m wrong, but am I not doing just what you said? The only difference is that I’m creating my Vector4 inline with my sprite creation. For the sake of argument I broke out out. These lines look like this:

        Vector4 border = new Vector4 (5f, 5f, 5f, 5f);
        Sprite sprite1 = Sprite.Create(texture1, new Rect(0f, 0f, texture1.width, texture1.height), new Vector2(0.0f, 0.0f), 1f, 0, SpriteMeshType.Tight, border);
        Image image1 = goScrollBar.AddComponent<Image>();

        image1.sprite = sprite1;

Anyway, the problem persists. Any other suggestions? Perhaps I’m misinterpreting what you said?

7

I played around with the parameters and finally figured out what the problem is. The fourth parameter, pixelsPerUnit, was set to 1f. If I set this to 100f, it works as expected. In my project, I have been using a 1 pixelPerUnit settings since it is a 2D game and I am doing everything pixel perfect and that setting works for my setup. I then assumed that I would maintain that setting throughout.

I’m not entirely sure what pixelsPerUnit is, however. I have read several articles and it’s still not making a lot of sense to me. I’m not sure how that setting was responsible for the problem I was having. So, the problem is solved, but if anyone could provide further insight as to what pixelsPerUnit does, especially in relation to this problem, it would be welcome.

Thanks for the help.

8

@Denin

I didn’t read your code so carefully, I guess you can just make the pixels to units 100, it works in similar manner to Canvas Scaler’s Reference PPU - In this case it’s inverse IIRC, smaller the value, bigger the pixels are on screen.

EDIT: So, if you keep it at 1, you are going to have very pixelated effect…