Make a game Backpack interface

This time we made a UI interface for switching gears, first on the effect diagram

A little scary, hey, let's talk about making ideas game background

Create a new empty object named SF Scene Elements, which contains a main camera, an empty object background, a particle system.
Add the sprite renderer component in background to add the selected background.

It is worth noting that I started to download the picture resources, how can not be hung on the sprite, and later know to change the image of the texture type to a sprite line

Adjust the particle system to make it look cool, click Play to see the effect
introduction of Skeleton soldiers

Naturally, the first thing to think about is to put our skeletons in the right place relative to the main camera. But through the teacher's guidance, I found a better way: with the camera overlay rendering effect.
The simple principle is that when a game scene contains multiple cameras, the rendering order is determined based on the size of the camera component depth. Then we can use a camera to render the background, and then use another camera to render the skeleton (excluding the Sky box), you can achieve the effect.
Create a new camera for hero camera, put it in a very remote place (anyway, it's not associated with the rest of the game objects), set the clear flags to depth only so it doesn't render the sky box.

Since this camera is very remote and only renders skeletons, other game objects do not enter its perspective, so culing mask can be set to everything.
Then add the skeleton as a sub-object of the camera, adjust the position, and animate the skeleton.

As pictured, the skeleton is rendered behind the canvas, and as our behind-the-scenes hero, it renders like this (it will move, I will not record the video ...)

Here is my understanding of how to render a game with different cameras: This can be the game in the corresponding module independent, later can be used to continue to use, there is good continuity. Secondly, the function is independent, so that the design of the game is easy about UI

You can see that the game contains two UI interface, one is the equipment bar, one is the backpack bar, the first new canvas, add a sub-object Panel,panel contains the two UI interface, Bag,equipment should also be the same panel
bag,equipment

There are nine compartments in bag, there are three equipment, which can be implemented through the Grid Layout group component, so I set the grid to the button, setting the relevant parameters, such as equipment's hand (grid Layout Group has already set the position, only need to adjust the text position and picture on the line)
UI Camera

It also uses the principle of multi-camera rendering, creating a camera in the same class as the scene canvas, setting the action layer as the UI


You can see the contents of the UI camera in the lower right corner of the window.
Set it all up so we can reach the beginning of the picture.

You think it's over, no no No. Since it is a UI interface for switching gears, it would be deceiving the masses if the equipment could not be switched. In combination with the relevant case analysis, my idea is:
There is a single case pattern formed in the class Mouse records the currently selected equipment
A equip class mounts to each gear button to define the rig bar click Trigger Event
A Mybag class mounts to each Backpack button to define the Backpack bar Click Trigger Event
A equipment class records the equipment currently selected by the mouse. Mouse

Get the current mouse-selected gear

using unityengine; using System.Collections; using Game_manager; Namespace Game_manager {public class EquipmentManager:System.Object {private static Equipmentmanager
        _instance;

        private static equipment _equipment; public static Equipmentmanager getinstance () {if (_instance = = null) {_i
            Nstance = new Equipmentmanager ();
        } return _instance;
                public void setequipment (equipment _equipment) {if (_equipment = = null) {
            _equipment = _equipment;
        }} public Equipment Getequipment () {return _equipment;  }}} public class Mouse:monobehaviour {//Use the For Initialization void Start () {}// Update is called once per frame void Update () {}} 

Create an empty object manager Mount equipment

I attach it to an Image object (simple version ...), so that it always follows the mouse movement, but if no equipment is selected, the object color is set to transparent, if the equipment is selected, then set to opaque. There are three types of equipment, distinguished by int: 1: Shield 2: Weapon 3: War boots

Using Unityengine;
Using System.Collections;
Using Unityengine.ui;

Using Game_manager;
    public class Equipment:monobehaviour {private Equipmentmanager gsm;
    Private Image equipment_image;
    private int equipment_type = 0;
    Public Color None;

    Public Color Notnone;
        void Awake () {GSM = Equipmentmanager.getinstance (); Gsm.
        Setequipment (this);
    Equipment_image = getcomponent<image> ();
    } public int Getequipmenttype () {return equipment_type;
    } public void Setequipmenttype (int equipment_type) {equipment_type = Equipment_type;
    Public Image GetImage () {return equipment_image; } void Update () {if (Equipment_type = = 0)//Nothing {equipment_image.color = None; /Transparent Color} else {equipment_image.color = Notnone;//opaque, visible} transform . Position = new Vector3 (input.mouseposition.x-425,input.mouseposition.y-165, 0); }
}

Equip

There is an int type of information to record the type of equipment, so that the person to add a corresponding type of equipment errors will not be put up, so as to avoid the character of the sword when the Black dragon shoes. Take away the equipment premise is the mouse is not currently selected equipment, wearing equipment premise is the mouse to choose the same type of equipment with the corresponding equipment. About taking the equipment, the skeleton will take off the equipment and wear the equipment. The implementation of the skeleton is also very simple, that is, to disable or reactivate the related components, so you need a Gameobject object, hang the corresponding object components on the line

Using Unityengine;
Using System.Collections;
Using Unityengine.ui;

Using Game_manager;
    public class Equip:monobehaviour {private Equipmentmanager gsm;
    Private Image equip_image;
    public int equipment_type;
    Public Sprite Idelsprite;

    public Gameobject equipment;
        void Awake () {GSM = Equipmentmanager.getinstance ();
    Equip_image = getcomponent<image> (); The public void On_equip_button ()//button is pressed by the trigger event {int equipmenttype = GSM. Getequipment ().
        Getequipmenttype ();
            if (equip_image.sprite! = Idelsprite && Equipmenttype = = 0)//equipment bar with weapons, crawl, at this time requires no weapons selected so mousetype to 0 { Gsm. Getequipment ().
            GetImage (). Sprite = Equip_image.sprite;
            Equip_image.sprite = Idelsprite; Gsm. Getequipment ().
            Setequipmenttype (Equipment_type); if (equipment! = NULL) equipment.
        SetActive (FALSE); } else {if (Equipmenttype = = Equipment_type&& Equip_image.sprite = = idelsprite)//placed on the equipment bar, this time requires that the position in the equipment bar is free, otherwise the original weapon will disappear {Equip_image . Sprite = gsm. Getequipment ().
                GetImage (). Sprite; Gsm. Getequipment ().
                Setequipmenttype (0); if (equipment! = NULL) equipment.
            SetActive (TRUE); }
        }
    }

}

such as the Shield rig bar.

The BIP01 l here is the skeleton's Shield object. At the same time remember to give on click Register the corresponding event mybag

Since Mybag will always place different kinds of equipment, it will also contain an int type of element_type record of the current equipment type, when the items placed in the backpack, equipment class will be the type of the corresponding equipment to the backpack, in the same vein, The backpack will pass the equipment type to the equipment class when the equipment is removed.

Using Unityengine;
Using System.Collections;
Using Unityengine.ui;

Using Game_manager;
    public class Mybag:monobehaviour {private Equipmentmanager gsm;
    Private Image bag_image;
    public int equipment_type = 0;

    Public Sprite Idelsprite;
        void Awake () {GSM = Equipmentmanager.getinstance ();
    Bag_image = getcomponent<image> (); } public void On_equip_button () {int equipmenttype = GSM. Getequipment ().
        Getequipmenttype (); if (bag_image.sprite! = Idelsprite && Equipmenttype = = 0)//The place is equipped to take away {gsm. Getequipment ().
            GetImage (). Sprite = Bag_image.sprite;
            Bag_image.sprite = Idelsprite; Gsm. Getequipment ().
            Setequipmenttype (Equipment_type);
        Equipment_type = 0; } else {if (Bag_image.sprite = = idelsprite) {Bag_image.sprite = Gsm. Getequipment ().
                GetImage (). Sprite; Equipment_type = EquipmenTtype; Gsm. Getequipment ().
            Setequipmenttype (0); }
        }
    }
}

Therefore, the value of equipment and equipment in the backpack can only be modified through pre-processing or late-stage and equipment classes Tiltwindow

This class can make the UI interface follow the movement of the mouse to change direction, so that the interface has a dynamic sense, the case of class copied ...

Using Unityengine;

public class Tiltwindow:monobehaviour
{public
    Vector2 range = new Vector2 (5f, 3f);

    Transform Mtrans;
    Quaternion Mstart;
    Vector2 Mrot = Vector2.zero;

    void Start ()
    {
        Mtrans = transform;
        Mstart = mtrans.localrotation;
    }

    void Update ()
    {
        Vector3 pos = input.mouseposition;

        float Halfwidth = screen.width * 0.5f;
        float halfheight = screen.height * 0.5f;
        float x = Mathf.clamp ((pos.x-halfwidth)/Halfwidth, -1f, 1f);
        Float y = mathf.clamp ((pos.y-halfheight)/Halfheight, -1f, 1f);
        Mrot = Vector2.lerp (Mrot, New Vector2 (x, y), time.deltatime * 5f);

        mtrans.localrotation = Mstart * Quaternion.euler (-MROT.Y * range.y, Mrot.x * range.x, 0f);
    }
}

Effect Show

Take the shield into the backpack (you can only put it in a free backpack, or you won't put it in), Skeleton Soldier: "Hey, my shield?"

Put a new shield on the skeleton, skeleton soldier: "Oh, here it is."

Take down the shield and the sword, skeleton Soldier: "My God, I hit a ghost."

Put on a new shield (the sword bar will not react and refuse to put in) skeleton Soldier: "I don't look like Captain America."

Shoes, this goods do not have shoes, I do not demonstrate, while the UI box is also facing the position of the mouse move, anyway screenshot can not see (believe me AH) Summary

This experiment deepened my understanding of the use of cameras (multilayer rendering). For the UI design is very simple, no matter good art skills can create a good UI interface, a lot of UI object functions I am not very familiar with, are always trying to finally figure out, for computer experiments, do not be afraid to try, to explore boldly, unity has a lot of interesting things, It is the official manual that can not be finished, but also need more in-depth exploration. This experiment I refer to more cases, have a lot of their own understanding, welcome to put forward their views, I am good to correct.