Unity3d GUI element interface coordinate system summary (with formulas), unity3dgui

Unity3d GUI element interface coordinate system summary (with formulas), unity3dgui

Hello everyone, I am Sun Guangdong. Recently I am playing a game. The UI uses the GUI provided by the system and has encountered many problems. I believe that NGUI or 2DTOOLKIT are commonly used.

Unity has four important coordinate systems.

You can see the following article for details:

 

I want to talk about two things today: GUIText and GUITexture.

1. GUIText

I will not introduce the concept of Anchor. This is an important concept in NGUI, tookit2d, and Cocos2d. For images, we can think of them as the origin of the image itself.

The GUIText object also supports setting the anchpoint, but there are only nine options. Used to set the overall coordinate origin of the displayed Text.

Any object will have a Transform component, and Position is useful in the GUIText object. What does this Position represent?

An important formula:

Position of the overall coordinate origin of the entire Text on the window screen:

Pos (x, y) = (Position. x * Screen. width + PixelOffset. x, Position. y * Screen. height + PixelOffset. y)

This Position represents the basis of the Position of the entire Text's own coordinate origin, Position. x is a multiple of the screen width, Position. y is a multiple of the screen height.

 

Note that the coordinate origin of the screen is (0, 0) in the lower left corner ).

Try these values and observe the changes.

Other attributes are not described here.

 

 

 

2. GUITexture

There is no anchor. The source of the image is (0, 0,) in the lower left corner ,).

 

An important formula:

Position of the overall coordinate origin of the entire GUITexture image on the window screen:

Pos (x, y) = (Position. x * Screen. width + PixelInset. x, Position. y * Screen. height + PixelInset. y)

This Position represents the basis of the Position of the entire Text's own coordinate origin, Position. x is a multiple of the screen width, Position. y is a multiple of the screen height.

 

You can change the two values and observe the phenomenon.

 

Finally, let's make this logic: the following is the effect of a game's end.

The logic of the object is as follows, and GameOver is an empty object.

BG_End is the background image of the game.

The following are three texts: GUIText

And GUITexture "points earned this time.

And a button shape GUITexture Image

To keep the entire logic unchanged, it is the sub-object of the large background image that ends when the previous small UI elements play the game. Let us make the sub-object and parent object both relative to the Transform. Position. x, y values (Note). We may think that the Transform. position. x. y values of the sub-object are 0, 0, respectively ,. Note that the sub-object inherits from the parent object. The sub-object is the same. In this way, PixelInset. x and y of the sub-object are adjusted to the appropriate position.

We record the value of the false button image. For example, we need to use the code to display the real button.

Compile the code below to display this button:

 

VoidOnGUI () // display button //

{

GUI. skin = myGUI;

If (GUI. button (newRect (Screen. width * 0.5f-26.3f, Screen. height * 0.5f + 178.71f-67f, 61f, 67f), "", GUI. skin. getStyle ("ContinueButton ")))

{

Application. LoadLevel ("mainMenu ");

}

}

 

Note that the main content here is"The coordinate system for drawing the GUI is (0, 0) in the upper left corner of the screen."

Button location formula:

(Screen. width * (sub Position. x + parent Position. x) + sub-PixelInset. the original value of x, Screen. height * (sub Position. y + parent Position. y) + sub-PixelInset. the absolute value of y-Sub-PixelInset. h)

In a game, the size is generally the size of the source image provided by the artist.

 

Let's take a good look.

How can I change the color of a button after it is selected on the GUI in unity3d?

You can set GUI SKIN
Project-create-GUI SKIN
Then open the Inspector of the gui skin.
Expand the BUTTON space. The Active attribute is used to set the change settings after the BUTTON is clicked!

[Unity3D] teaches: how to set guibutton's transparency. The system's default button seems to be translucent.

Okay. If there is an alpha channel in the image properties, you can open it at PS.
By default, the black Transparent gray color of the alpha channel is transparent and completely white.
You just need to change the color in the Alfa channel.