UNITY_2D game instances from zero (3)--Implementation of the Basic menu UI

UNITY3D_2D game instances from zero (3)--Implementation of the Basic menu UI

In addition to the basic picture rendering, manipulating objects and so on, the game also requires a variety of UI menus to assist the player, or to boot, or to make game settings. For example, login menu, picture display, character blood bar and so on.

Game-The UI interface for radiation 4

Why should there be a separate UI authoring system?

UI is any game can not or missing part, and accounted for a very large proportion, he compared to the game objects (especially 3D games), more is the text and pictures, is to make the player more convenient to play. Most of the text and images are not as complex as 3D models, and often need to be displayed at the top of the window (that is, where the camera is closest), so the engine needs to provide a good set of UI solutions.

Before the release of the Unity5.0 version, due to the various problems of the native GUI (although the 4.6 version of the new UI system has been released but the bug is more, imperfect), the Basic UI tool is NGUI, is a very useful UI production plug-in. However, after the 5.0 version, the new Ugui system has been in many aspects due to Ngui, so it is entirely possible to consider the use of Ugui, of course, Ngui is worth a use of the UI plug-in, the current words we choose.

Here is a comparison of the two found from the bull community.

(You can see the pulley +ctrl zoom in, or right-click in the new window to open the picture)

However, the first thing I want to say is that UI production is different from the above two, can be said to be the most stupid way, but also I did the game at the beginning of the way, why say this stupid way? Because I want to make a comparison here, and I want to give you a thought from the basic UI implementation principle.

a stupid but simple one. UI Implementation method: Ray

This example can be tried, but not recommended to use later, to know that we can actually use the original button, but I and everyone should know that this is too ugly, no game will use such a button.

In the Start menu operation of the game, we are simply clicking on the mouse and then clicking on the button to respond and then perform an action. At times when we browse the Web and use the software, the place where your mouse or finger touches will trigger a message event. Before that, the timer of the program constantly refreshes to capture the callback event, and the program needs to determine the location of your mouse to determine if you clicked the button.

So using Ray is actually a similar truth, you emit a ray in this position of the camera, the ray is like a laser forward, once it touches any rigid body (in motion and forces, the shape and size of the constant, and the relative position of the internal points of the object, is an ideal physical collision model), it will be reflected back. Then, you determine if he collides with the object you want it to collide with and deal with it.

Heard here, you must understand that the UI is simply to make all the buttons into a picture in front of the camera, and then in the position of the mouse click forward a ray, judge whether the collision is the button you want, yes, do the processing. Although this approach, very stupid, for the complex UI interface is difficult to achieve, but the principle and method is very simple, you just need to make the picture look good, write a few lines of code can be.

Is the effect of an example I realized:

1. First make all the picture material

2. Import the pictures into the new Maingui folder

3. Drag the pictures to the scene edit window and put them in the position of the design. Here are a few things to note:

① If the picture is not properly displayed, you need to click on the Image--inspector property interface in the file browser--click Texture type--First click on the editor GUI and Legacy gui--and click on the apply--below Then click on the Sprite (2Dand UI)--then click Apply To

If you feel that you can set the maximum size of the picture, click the max size of the window to select 1024 or higher (1024 is enough)

② Because Ray's way is to emit rays, so the object in front will block the object behind, so set the priority Orderinlayer, such as exit confirmation interface should be high priority. On the right side of the entity's property list setting,

Note: Set Z value is not used

Of course, you can change the order of the display by setting the coordinates, the camera direction (usually vertical and x0y face), change the z-value.

4. Because Ray only encounters objects with a rigid body attribute to create a collision message, the Collision box property is set for the picture.

Click on the picture in the scene-click Add component--physics 2d--box colider 2D in the Inspector Bar. This is a collision box, there are round, polygonal, can be in the scope of the collision detection and simulation of the actual collision effect.

5. Coding, the following points are noted:

① Gameobject exitgame=null; // Delegate Exit Game Button because you want to get to the entity that Ray touches, you first define an entity member variable to store the button entities in the scene.

② We can name the entities in the scene and use the exitgame=gameobject. Find (" Exit interface "), and the way to get the entity.

③ This is the code that determines whether to click the button and do the processing, which is written in the update

if (Input.getmousebuttondown (0)) {  //If you clicked the left mouse button                          Rayray=camera.main.screenpointtoray (input.mouseposition) ;//define Ray object                          raycasthithit;//Instantiate hit class object                                                   if (Physics.raycast (ray,outhit))                          {                                   name= hit.collider.gameobject.name;//gets the name of the object by the object hit to                                   Debug.Log (name);                                   Switch (name) {                                   //about, Exit etc Button                                   case "back":  //If hit returns this entity, perform the following operation                                            About.transform.position=newvector3 (0,11,-2);                                            Break;}}}              

④ Because the feature of this click is always there, drag him to an entity that resides in the scene (preferably a primary button, or create a new empty entity named Clickscript. ）

About Ray way to say: You see Ray way first reaction should be the first person shooter game, yes ~fps and other three-dimensional game aiming and shooting is basically this idea, to the direction of the crosshair shot a ray, and then fired bullets along the ray. The use of this method here is not very appropriate, but it is very intuitive. When you first touch unity, especially when you don't know anything, you can do some simple UI in this way.

However, once the UI becomes complex and we want to achieve more, it's a bit of an effort. For example, the General button has a click, press, leave multiple states, different states different effects, you say how to achieve? If the implementation of the more Cool interface movement (such as PPT in the various animation), do you want to write an algorithm to make the space displacement? What if you want the UI to be able to follow a character at a certain scale? How do devices with different resolutions adapt? Moreover, there are many limitations and problems, such as the need for a rigid body, how efficient ray is, the need to set the coordinate priority, and so on, so this is really not a good way.

below, we introduce the new 5.0 after the more popular UI Production Method-- Ugui

The same is the production of this interface, but we change one way, and the effect is better, more convenient. (After that, if the picture appears abnormal, refer to the third section above for the relevant precautions ①)

1. Make the material, import the pictures into the new Maingui folder, click the File--new scence in the menu bar to create a new scence scene.

2. Click the Gameobject tab of the menu bar--ui--image

We can see the list of scene entities on the left (Hierarchy), which we've built, and we've got three new entities.

Canvas: Canvases are the equivalent of a container that renders UI footage of the interface.

Sub-entity under canvas image: Each UI control is made up of an art-designed picture, which is an entity that puts a picture of its own design

EventSystem: Monitor UI-related event entities to support click-to-touch and more.

At this point we can see a white box, the white box is the scope of our game to see.

3. Create the background first

① will implement the created background footage onto the source image property of the image entity's image (Script), when we see that the picture has been placed on the screen (the new canvas may be larger than the global situation, the pulley shrinks the window)

But you will find that the display is not normal, this time click on the button below Setnative Size, and modify the displacement value Posxposy are 0.

② We want our background to always be full of screens instead of changing with the resolution, so we have to do some work, which in the original GUI system is a more troublesome thing, need to write scripts to meet the adaptive. But the Ugui system has solved this problem well, now the new version of the canvas has a property bar called Canvasscaler, click on the UI scale mode select scale with the screen Size. Then fill in the resolution you need the model, is generally 1920*1080, note that if your picture material size is small, you can choose a smaller resolution, as long as the 16:9 can be satisfied.

In addition, some unity system versions may not support Canvasscaler (Unity 5.0 's B9), and you can click Add Component--layout--reference in the Canvas Entity Inspector window. Resolution, and then do the same.

③ Click to start the game, set the resolution in the game window (the previous Unity blog has introduced) to change the window size, found that the picture is always full screen.

④ We found that in the image of the inspector window do have an anchor point setting, so it is convenient to let our image center positioning in some locations. The x, Y coordinates can be placed in any position at the same time.

4. Make button

① We right-click on the physical window of the canvas to create the Ui--button, and then we can see the same interface in the inspector window, we can still drag the button footage to the sourceimage of the image like just now-- Click Setnative Size, if you feel that the size of the picture is not appropriate, you can set the scale of the picture in the scales above.

② We can run a program to see the effect, the button has a click effect, the mouse on the effect above. This function is attributed to the following transition function, currently we see the default is Colortink, that is, the button's click Effect is adjusted by color and alpha transparency (almost write Alphago ~ ~) can be run in the game to modify the color to see the effect.

Transition also has two options,

Spriteswap: According to the producer's own design material to set the click, release the picture effect.

Animation: This is the animated effect of using Unity's animation system to make buttons.

Write a bit more today, about listening to the contents of the event and then slowly update it.

UNITY_2D game instances from zero (3)--Implementation of the Basic menu UI