Unity3d Game installation package limit reduction of the four-figure, two-part diagram (Ngui)

In this bouquet also afraid alley deep, the game does not play ads do not buy users do not brush the list will die of the era. Each game agent wants CP to provide the smaller the installation package, the better, can 99M absolutely not 100M. But the game developers in a time and again kicked out useless resources, 1.1 points to the game bag buckle small, found that the size or not to reduce, how to do, then only take the art resources surgery.

Let's take a look at the following two images, plucked from the dark Ares. transfer from Http://blog.csdn.net/huutu http://www.thisisgame.com.cn

(PS: From the Unpacking package analysis, the Diablo Ares has used the two-point optimization method described in this article)

Transfer from Http://blog.csdn.net/huutu http://www.thisisgame.com.cn

(PS: Only half of this picture, I put the other half of it myself)

Look carefully and you will find: turn from Http://blog.csdn.net/huutu http://www.thisisgame.com.cn

The first picture is actually as long as the upper left corner is One-fourth, the other three parts can be copied and then reversed to get.

The second picture is actually as long as the left half is available, and the right side can be copied and rotated on the Y axis.

transfer from Http://blog.csdn.net/huutu http://www.thisisgame.com.cn

Can we save a lot of resources by doing so?

The first image size is: 133KB, the figure of One-fourth size is: 32KB.

The second picture size is: 216KB, half the size: 56KB (The pit Dad, when the resolution is not the same when saving)

It's not bad, Yo!

When we use Ngui, for Uisprite, can have a variety of filling methods, simple, tiled, slice, etc., tiled is to let a picture repeated display to fill the screen size set.

This is very close to our goal, so let's try tiled.

It doesn't seem to fit our requirements.

OK, so let's change Ngui's uisprite script.

Open UISprite.cs First we come to the most commonly used to see simple, is how to display the picture on the screen. Then we will follow the simple process to add our own image display method.

First we search for simple in uisprite and find an enumerated type.

Public enum type{simple,sliced,tiled,filled,advanced,                Quarter,                half,}

Type.simple should be defined here, so we can choose simple on the uisprite. Try adding quarter (four-point chart), half (two-point chart). Then return to Unity to view, add success as.

Then follow the sample search to a switch case, is the type of the selected processing function, we add the quarter, half processing function.

protected void Fill (betterlist<vector3> verts, betterlist<vector2> Uvs, betterlist<color32> cols, RECT outer, rect inner) {mouteruv = Outer;minneruv = Inner;switch (type) {case Type.Simple:SimpleFill (Verts, Uvs, cols); Bre Ak;case Type.Sliced:SlicedFill (Verts, Uvs, cols); Break;case Type.Filled:FilledFill (Verts, Uvs, cols); break;case Type.Tiled:TiledFill (Verts, Uvs, cols); Break;case Type.Advanced:AdvancedFill (Verts, Uvs, cols); break;                        Case Type.quarter:                        Quarterfill (Verts, Uvs, cols);                        break;                        Case Type.half:                        Halffill (Verts, Uvs, cols);                        Break;}}

Then we'll take a look at sample processing code that shows how the image is displayed.

<summary>///Regular Sprite fill function is quite simple.///</summary>void Simplefill (betterlist<ve ctor3> Verts, betterlist<vector2> Uvs, betterlist<color32> cols) {Vector4 v = drawingdimensions;  The range, which is the box Rect Uisprite in the editor. Vector4 u = Drawinguvs; Uvs, that is, the position of the selected picture in the set. Color32 C = drawingcolor; Sets the color colortint in the editor. Verts. ADD (New Vector3 (v.x, V.Y)); Verts. ADD (New Vector3 (v.x, V.W)); Verts. ADD (New Vector3 (V.z, V.W)); Verts. ADD (New Vector3 (V.z, v.y)); Uvs. ADD (New Vector2 (u.x, u.y)); Uvs. ADD (New Vector2 (u.x, U.W)); Uvs. ADD (New Vector2 (U.z, U.W)); Uvs. ADD (New Vector2 (U.z, u.y)); cols. ADD (c); cols. ADD (c); cols. ADD (c); cols. ADD (c);}

What does this piece of code do?

The first four vertices are added, and the texture is mapped to the surface of the four vertices formed by UV, just like a table cloth.

Let's take a look at the following two coordinates.

Transfer from Http://blog.csdn.net/huutu http://www.thisisgame.com.cn

Vertex coordinates are numeric based on actual coordinates, and texture coordinates are numerically (0,1).

The box in the vertex coordinate chart is the display range we set for Uisprite, and the box in the texture coordinates is our texture coordinates.

Sample this one way to do is:

The texture coordinates of 1, 2, 3, 4 and vertex coordinates 1, 2, 3, 4, that is, the picture is tiled to the specified range.

So now look at our four-point chart.

Take the upper-left corner of Figure one One-fourth, corresponding to the texture coordinates. Then we'll tile the One-fourth map to the upper-left corner of the left vertex coordinate, then tile to the upper-right corner, lower-right corner, bottom-left corner.

What do we need to do? transfer from Http://blog.csdn.net/huutu http://www.thisisgame.com.cn

What we need to do is to calculate the coordinates of the area in the upper-left corner.

First the original vertex 1 moves up half, then the vertex 3 moves to the left half, then the vertex 4 to move to the origin point.

The specific process is implemented in the code.

    <summary>///four-point figure technique; </summary>//<param name= "verts" ></param>//<param name= "Uvs" ></param>/// <param name= "cols" ></param> protected void Quarterfill (betterlist<vector3> verts, betterlist<        Vector2> Uvs, betterlist<color32> cols) {Vector4 v = drawingdimensions;        Vector4 u = Drawinguvs;        Color32 C = drawingcolor;        Debug.logerror ("Quarterfill drawingdimensions=" + drawingdimensions);        Debug.logerror ("Quarterfill drawinguvs=" + Drawinguvs);        Calculate the width and height;        float width = v.z-v.x;        float height = v.w-v.y;        Debug.Log ("Quarterfill width=" + width + "height=" + height);        Top left corner vertex; Verts.        ADD (New Vector3 (v.x, V.Y+HEIGHT/2)); Verts.        ADD (New Vector3 (v.x, V.W)); Verts.        ADD (New Vector3 (V.Z-WIDTH/2, V.W)); Verts.        ADD (New Vector3 (V.Z-WIDTH/2, V.Y+HEIGHT/2)); Uvs.        ADD (New Vector2 (u.x, u.y)); Uvs. AdD (New Vector2 (u.x, U.W)); Uvs.        ADD (New Vector2 (U.z, U.W)); Uvs.        ADD (New Vector2 (U.z, u.y)); Cols.        ADD (c); Cols.        ADD (c); Cols.        ADD (c); Cols.        ADD (c);        bottom left corner vertex; Verts.        ADD (New Vector3 (v.x, v.y)); Verts.        ADD (New Vector3 (v.x, V.W-HEIGHT/2)); Verts.        ADD (New Vector3 (V.Z-WIDTH/2, V.W-HEIGHT/2)); Verts.        ADD (New Vector3 (V.Z-WIDTH/2, v.y));        Invert coordinates 1 and 2 on the x-axis to Exchange 3 and 4 interchanges; Uvs.        ADD (New Vector2 (u.x, U.W)); Uvs.        ADD (New Vector2 (u.x, u.y)); Uvs.        ADD (New Vector2 (U.z, u.y)); Uvs.        ADD (New Vector2 (U.z, U.W)); Cols.        ADD (c); Cols.        ADD (c); Cols.        ADD (c); Cols.        ADD (c);        bottom right corner vertex; Verts.        ADD (New Vector3 (V.X+WIDTH/2, v.y)); Verts.        ADD (New Vector3 (V.X+WIDTH/2, V.W-HEIGHT/2)); Verts.        ADD (New Vector3 (V.z, V.W-HEIGHT/2)); Verts.        ADD (New Vector3 (V.z, v.y));        Rotate the lower-left UV around the y-axis 1 and 4 to Exchange 2 and 3 interchanges; Uvs.        ADD (New Vector2 (U.z, U.W)); Uvs. ADD (New Vector2 (U.Z, U.Y)); Uvs.        ADD (New Vector2 (u.x, u.y)); Uvs.        ADD (New Vector2 (u.x, U.W)); Cols.        ADD (c); Cols.        ADD (c); Cols.        ADD (c); Cols.        ADD (c);        Top right corner vertex; Verts.        ADD (New Vector3 (V.X+WIDTH/2, V.y + HEIGHT/2)); Verts.        ADD (New Vector3 (V.X+WIDTH/2, V.W)); Verts.        ADD (New Vector3 (V.z, V.W)); Verts.        ADD (New Vector3 (v.z, V.y + HEIGHT/2));        Rotate the upper left corner by the y axis, 1 and 4 to swap 2 and 3 for switching; Uvs.        ADD (New Vector2 (U.z, u.y)); Uvs.        ADD (New Vector2 (U.z, U.W)); Uvs.        ADD (New Vector2 (u.x, U.W)); Uvs.        ADD (New Vector2 (u.x, u.y)); Cols.        ADD (c); Cols.        ADD (c); Cols.        ADD (c); Cols.    ADD (c);    }///<summary>///Two-part graphic technique; </summary>//<param name= "verts" ></param>//<param name= "Uvs" ></param>/// <param name= "cols" ></param> protected void Halffill (betterlist<vector3> verts, betterlist< Vector2> Uvs, betterlist<color32> cols) {VeCtor4 v = drawingdimensions;        Vector4 u = Drawinguvs;        Color32 C = drawingcolor;        Debug.logerror ("Halffill drawingdimensions=" + drawingdimensions);        Debug.logerror ("Halffill drawinguvs=" + Drawinguvs);        Calculate the width and height;        float width = v.z-v.x;        float height = v.w-v.y;        Debug.Log ("Halffill width=" + width + "height=" + height);        Left vertex; Verts.        ADD (New Vector3 (v.x, v.y)); Verts.        ADD (New Vector3 (v.x, V.W)); Verts.        ADD (New Vector3 (V.Z-WIDTH/2, V.W)); Verts.        ADD (New Vector3 (V.Z-WIDTH/2, v.y)); Uvs.        ADD (New Vector2 (u.x, u.y)); Uvs.        ADD (New Vector2 (u.x, U.W)); Uvs.        ADD (New Vector2 (U.z, U.W)); Uvs.        ADD (New Vector2 (U.z, u.y)); Cols.        ADD (c); Cols.        ADD (c); Cols.        ADD (c); Cols.        ADD (c);        Right vertex; Verts.        ADD (New Vector3 (v.x + WIDTH/2, v.y)); Verts.        ADD (New Vector3 (v.x + WIDTH/2, V.W)); Verts.        ADD (New Vector3 (V.z, V.W)); Verts. ADD (New VectOr3 (V.z, v.y));        Rotate the left side by the Y axis, 1 and 4 to swap 2 and 3 for switching; Uvs.        ADD (New Vector2 (U.z, u.y)); Uvs.        ADD (New Vector2 (U.z, U.W)); Uvs.        ADD (New Vector2 (u.x, U.W)); Uvs.        ADD (New Vector2 (u.x, u.y)); Cols.        ADD (c); Cols.        ADD (c); Cols.        ADD (c); Cols.    ADD (c);     }

Finally look at the effecttransfer from Http://blog.csdn.net/huutu http://www.thisisgame.com.cn

Project Download:

Http://pan.baidu.com/s/1i3IN3CT

Unity3d Game installation package limit reduction of the four-figure, two-part diagram (Ngui)