How to set up UVs for Texture borders

Question

I'm generating a plane that is able to scale without the edges of the texture being affected pixel wise. The plane needs to be able to keep its border proportion but be able to stretch to almost any size. The mesh has 8 vertices and 10 triangles to make the border. Anyway here is what I get. Ignore the numbers on the mesh geometry.

enter image description here

Is it possible to edit the UVs so that I get the Desired result? here's the code:

Mesh mesh = new Mesh();
    var renderer = mesh.AddRenderer();


    //create verticies

    mesh.vertices = new Vector3[] {

        //vertices in order for convienience 
        Manager.GUI.ScreenToWorldPoint(new Vector3(0f,0f,0f)),                            //0
        Manager.GUI.ScreenToWorldPoint(new Vector3(padding,padding,0)),                   //1
        Manager.GUI.ScreenToWorldPoint(new Vector3(width - padding, padding,0f)),         //2
        Manager.GUI.ScreenToWorldPoint(new Vector3(width,0f,0f)),                         //3
        Manager.GUI.ScreenToWorldPoint(new Vector3(width - padding, height - padding,0f)),//4
        Manager.GUI.ScreenToWorldPoint(new Vector3(width,height,0f)),                     //5
        Manager.GUI.ScreenToWorldPoint(new Vector3(padding, height - padding, 0f)),       //6
        Manager.GUI.ScreenToWorldPoint(new Vector3(0f,height,0f)),                        //7
    };



    //create triangles
    mesh.triangles = new int[] {
        7,5,6,
        6,5,4,
        4,5,3,
        2,4,3,
        0,2,3,
        0,1,2,
        0,7,6,
        0,6,1,
        1,6,4,
        1,4,2
};

    //create UV's uvs are in order of creation for convienience
       mesh.uv = new Vector2[] {
           new Vector2(0f,0f),
           new Vector2(padding/width, padding/height),
           new Vector2((width-padding)/width, padding/height),
           new Vector2(1f,0f),
           new Vector2((width - padding)/width,(height-padding)/height),
           new Vector2(1f,1f),
           new Vector2(padding/width,(height-padding)/height),
           new Vector2(0f,1f)





    };



    mesh.calculateNormals();
    mesh.calculateBounds();
    renderer.Texture = mytex;
    return plane;
}

Padding is the defined pixels around the the texture that ignores scaling, while height and width are the dimensions of the shape.

No, it isn't, it's always going to be stretched. You need to have seperate quads for the top, bottom, left, right **and each corner**. — George Duckett, May 14 '13 at 15:54
@George so i need to generate 9 planes? or do i need to modify the geometry so that are 9 quads(or 18 triangles) in it?. on either case will the way I've setup the UV's give me the desired result? also for the tris would the index pattern be something likes this(top to bottom, left to right "," represent next line down) `13 11 10 9, 14 12 8 7, 15 2 4 6, 0 1 3 5` — Fornoreason1000, May 14 '13 at 16:48
There would be 9 quads, so 9 * 2 = 18 triangles total. Since you're changing your geometry you'll need to change your UVs, you'll probably find it easiest to have one texture the 4 straight edges (as they are the same, but rotated) and one for the corner (as all 4 corners are the same, rotated.). — George Duckett, May 14 '13 at 18:22
Do you use pixel shaders to render the triangles? I might have a better answer for you if you do. — Ani, May 14 '13 at 18:24
I'm only using one texture. the UV sequence I just gave you are of the new mesh. I just wanted to know if they were valid or not. anyway thanks — Fornoreason1000, May 14 '13 at 18:58
@ananthonline it's has a pixel shader, but its an in-built one if you want me to edit it. — Fornoreason1000, May 14 '13 at 19:14

score 0 · Accepted Answer · answered May 14 '13 at 21:53

as George said, the mesh I was generating made it impossible to to scale the image without interesting. to fix the the mesh had to be remade into something that works. the code is now

Mesh mesh = new Mesh();
    var renderer = mesh.AddRenderer();
         mesh.vertices = new Vector3[] {

                //vertices in order for convienience  
                Manager.GUI.ScreenToWorldPoint(new Vector3(0f,0f,0f)),                            //0
                Manager.GUI.ScreenToWorldPoint(new Vector3(padding,0f,0f)),                      //1
                Manager.GUI.ScreenToWorldPoint(new Vector3(padding,padding,0)),                   //2
                Manager.GUI.ScreenToWorldPoint(new Vector3(width - padding, 0f,0f)),              //3
                Manager.GUI.ScreenToWorldPoint(new Vector3(width - padding, padding,0f)),         //4
                Manager.GUI.ScreenToWorldPoint(new Vector3(width,0f,0f)),                         //5
                Manager.GUI.ScreenToWorldPoint(new Vector3(width,padding,0f)),                    //6
                Manager.GUI.ScreenToWorldPoint(new Vector3(width , height - padding,0f)),         //7
                Manager.GUI.ScreenToWorldPoint(new Vector3(width - padding, height - padding,0f)),//8
                Manager.GUI.ScreenToWorldPoint(new Vector3(width,height,0f)),                     //9
                Manager.GUI.ScreenToWorldPoint(new Vector3(width - padding,height,0f)),           //10
                Manager.GUI.ScreenToWorldPoint(new Vector3(padding, height, 0f)),                 //11
                Manager.GUI.ScreenToWorldPoint(new Vector3(padding, height - padding, 0f)),       //12
                Manager.GUI.ScreenToWorldPoint(new Vector3(0f,height,0f)),                        //13
                Manager.GUI.ScreenToWorldPoint(new Vector3(0f,height - padding,0f)),              //14
                Manager.GUI.ScreenToWorldPoint(new Vector3(0f,padding,0f)),                       //15
            };



            //create triangles
            mesh.triangles = new int[] {
                15,2,0,
                1,0,2,
                1,2,4,
                1,4,3,
                3,4,6,
                3,6,5,
                4,8,7,
                4,7,6,
                8,10,9,
                8,9,7,
                12,10,8,
                12,11,10,
                14,11,12,
                14,13,11,
                15,14,12,
                15,12,2,
                2,12,8,
                2,8,4

    };

            //create UV's uvs are in order of creation for convienience
               mesh.uv = new Vector2[] {
                   new Vector2(0f,0f),   //0
                   new Vector2(padding / width, 0f), //1
                   new Vector2(padding/width, padding/height), //2
                   new Vector2((width-padding)/width, 0f), //3
                   new Vector2((width-padding)/width, padding/height), //4
                   new Vector2(1f,0f), //5
                   new Vector2(1f,padding / height), //6
                    new Vector2(1f, (height - padding) / height), //7
                   new Vector2((width - padding)/width,(height-padding)/height),//8
                   new Vector2(1f,1f), //9
                    new Vector2((width -padding)/width,1f), //10
                    new Vector2(padding/width,1f), //11
                   new Vector2(padding/width,(height-padding)/height), //12
                   new Vector2(0f,1f), //13
                   new Vector2(0f,(height - padding) / height), //14
                   new Vector2(0f,padding / height) //15





            };



            mesh.RecalculateNormals();
            mesh.RecalculateBounds();

            return plane;

hope it helps other Programmers out there

How to set up UVs for Texture borders

1 Answers1