Fairygui character status Popup

FairyGUI Character status popup

One 、 New packages and components

Two 、 Import material

Click here to download the material

3、 ... and 、 Making the main interface

 The main interface is a simple avatar button 

1、 The new button

2、 Double click in Button Components , Set a zoom for it , Let it zoom when it is pressed , Then drag the sound material in , It works better .

3、 Drag the button into Main Components

4、 Making pop-up windows

（1） First of all, there should be a container assembly with pop-up windows


（2） Set window background （408×436）, take PlayerWindow The size is also set to 408×436.

5、 Make a window frame

（1） New component Windowframe

（2） to Windowframe Add background

 You can make the background directly in the framework , So you can delete the following background picture .

（3） New close button

（4） Make frame drag area

 The window frame also needs a drag and drop area , That is, when players click on this area , The whole window will move according to the player's mouse .

Rename the drawing to dragArea, This is the official name ！！！

Rename the close button , Convenient for later operation .

（5） Add background image , Make it look less monotonous

The window frame is finished ！

6、 go back to PlayerWindow, Drag into the window frame

7、 Set graphic placeholder

 The player is a 3D object , So we should put 3D The object shines on a UI On , Then take this UI Displayed on our window . Then we need to use Texture, Load the content illuminated by the camera . So there needs to be a placeholder , So we drag a graph here .

8、 The new button

After the characters are loaded , It also needs to have a rotation and other dynamics , So you need to add buttons to make the characters twist .

Four 、Unity Preparatory work

1、 First, import. player.unitypackage Resource Pack

2、 take npc Drag into the scene

 We don't want the characters to show , That is, we don't want the characters to have any connection with the game scene interface . So set his position far away , We just want him to make a rendered picture dynamically , This model is not needed .

3、 Create a new camera to render people

Choose Camera Focus

Because only one layer of the game object is rendered , So treat him as UI Layer to render , So you need to add a label .

4、 establish Render Texture

Rename it to PlayerRT

5、 Create a shader

（1） Rename it to PlayerMat

（2） Assign the material to Material

（3） Set its Shader

Later, you only need to load PlayerMat and PlayerRT You can render ！ Come here , All the preparations are almost done , Then just put in FairyGUI Make a package of resources in .

5、 ... and 、 Packaging releases

*****FairyGUI Strange phenomenon of release failure *****

 At this time, you will be prompted that publishing failed , As shown in the figure above . What's the reason ？ This problem has been perplexed for a long time , How did I solve it ？ I created a new project again , When importing qtm01d.swf When it comes to resources , Found the problem . Turned out to be qtm01d.swf In the way . So we can take two approaches ： One 、 Directly remove the click sound effect ; Two 、 Find another click sound resource by yourself , No material given , Toxic , ha-ha . I am lazy , Delete it directly .

Republish again , Problem solved .

6、 ... and 、Unity It shows that

UI Panel Rename it to PlayerView

7、 ... and 、 Coding control

1、 Create two new scripts

The first is the main script that controls the display PlayerView;
The second is the pop-up script PlayerWindow.

2、 Edit script

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;

public class PlayerView : MonoBehaviour
{
    
    private GComponent mainUI;
    private PlayerWindow playerWindow;
    public GameObject player;
    void Start()
    {
    
        mainUI = GetComponent<UIPanel>().ui;
        playerWindow = new PlayerWindow(player);
        mainUI.GetChild("n0").onClick.Add(() => {
     playerWindow.Show(); });
    }

    // Update is called once per frame
    void Update()
    {
    
        
    }
}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;

public class PlayerWindow : Window
{
    
    private GameObject player;
    public PlayerWindow(GameObject player)
    {
    
        this.player = player;
    }
    
    protected override void OnInit()
    {
    
        this.contentPane = UIPackage.CreateObject("PlayerView", "PlayerWindow").asCom;
        GGraph holder = contentPane.GetChild("n2").asGraph;
        RenderTexture renderTexture = Resources.Load<RenderTexture>("FGUI/PlayerView/PlayerRT");
        Material mat = Resources.Load<Material>("FGUI/PlayerView/PlayerMat");
        Image img = new Image();
        img.texture = new NTexture(renderTexture);
        img.material = mat;
        holder.SetNativeObject(img);
    }
}

3、 Running effect

But found , Click on the × There is no response , Explain that there are still some problems .
go back to FairyGUI, Return to the window frame PlayerWindow in , Find out ButtonClose Displayed at the top , Because of our UI The display of has strict requirements on this depth . So we put this × The button of is rendered at the bottom .

4、 Re release , There is no problem after running

5、 Rotate the character left and right

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;

public class PlayerWindow : Window
{
    
    private GameObject player;
    public PlayerWindow(GameObject player)
    {
    
        this.player = player;
    }
    
    protected override void OnInit()
    {
    
        this.contentPane = UIPackage.CreateObject("PlayerView", "PlayerWindow").asCom;
        GGraph holder = contentPane.GetChild("n2").asGraph;
        RenderTexture renderTexture = Resources.Load<RenderTexture>("FGUI/PlayerView/PlayerRT");
        Material mat = Resources.Load<Material>("FGUI/PlayerView/PlayerMat");
        Image img = new Image();
        img.texture = new NTexture(renderTexture);
        img.material = mat;
        holder.SetNativeObject(img);
        this.contentPane.GetChild("n3").onClick.Add(() => {
     RotateLeft(); });
        this.contentPane.GetChild("n4").onClick.Add(() => {
     RotateRight(); });
    }
    
    private void RotateLeft()
    {
    
        player.transform.Rotate(Vector3.up * 30, Space.World);
    }

    private void RotateRight()
    {
    
        player.transform.Rotate(Vector3.up * (-30), Space.World);
    }
}

8、 ... and 、 Final effect