Unity cria uma página de registro de login simples

1. Crie um componente Canvas

Primeiro, criamos um Canvas e, em seguida, criamos um objeto vazio sob o Canvas, chamado Resgister. Defina o ponto de ancoragem do objeto vazio para expandir a tela inteira.

 2. Criamos um componente Image sob o objeto Vazio Resgister e o renomeamos como bg. Também definimos seu ponto de ancoragem para o estado expandido de tela cheia. Em seguida, importamos nosso material de IU de imagem, modificamos seu tipo para 2D e IU e clicamos em Aplicar. Em seguida, podemos usá-lo no mecanismo Unity.

Em seguida, arrastamos a imagem bg correspondente para a posição correspondente.

 3. Crie o componente InputFiled

 (1). Criamos um componente InputFiled em bg e renomeamos o componente InputFiled criado para userName. Em seguida, clicamos em Placehoder para ajustar seu tamanho e ajustar o estilo do componente correspondente.

 (2) Também precisamos ajustar o tamanho da fonte, estilo e alinhamento do Text dentro, etc.

(3) Clique no componente userNamer e pressione a tecla de atalho Ctrl+D para copiar um lado, renomeamos para senha, precisamos apenas modificar as palavras no Placehoder.

Continuamos a copiar uma cópia e mudamos seu nome para confirmPassword, que é exatamente o mesmo da operação acima, só precisamos modificar as palavras dentro. Alterar para: Confirme a senha...

Finalmente, precisamos ajustar as posições desses três objetos adequadamente.

 Aqui alcançamos esse efeito e, em seguida, arrastamos a imagem correspondente para ele.

(4) Criamos um componente Button em bg e o renomeamos como registerButton. Definimos seu ponto de ancoragem para que fique na posição correspondente e ajustamos seu tamanho. Modifique as palavras dentro e modifique a cor do botão para torná-lo mais óbvio para clicar ou mover.

 Em seguida, damos ctrl+D para copiar uma cópia idêntica, nomeamos como loginButton, ajustamos sua posição e só precisamos modificar as palavras no texto, nenhuma outra operação é necessária.

 Em seguida, criamos um texto para exibir na parte superior, informando que entramos na página de registro. Definimos o ponto de ancoragem deste texto para a tela cheia superior.

 Ajustamos o estilo do texto. Precisamos torná-lo maior porque está no topo. A operação específica é mostrada na figura.

 (5) Vamos criar outro componente de texto, que usamos para receber feedback de registro. Nós o renomeamos como TipsText, modificamos o texto interno, tamanho da fonte, alinhamento, cor que definimos como vermelho.

 

 Após a configuração, nossa interface do usuário é basicamente construída. As renderizações são as seguintes:

Ainda parece e se sente bem. Vamos executá-lo a seguir

 Como pode ser visto na imagem acima, a interface do usuário foi concluída e precisamos escrever o código para obter o efeito correspondente.

código:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System;
using UnityEngine.SceneManagement;

public class RegisterManager : MonoBehaviour
{
    public InputField usernameInput;
    public InputField passwordInput;
    public InputField confirmPasswordInput;
    public Text TipsText;

    public void RegisterInformation()
    {
        if (PlayerPrefs.GetString(usernameInput.text) == "")
        {
            if (passwordInput.text == confirmPasswordInput.text)
            {
                PlayerPrefs.SetString(usernameInput.text, usernameInput.text);
                PlayerPrefs.SetString(usernameInput.text + "password", passwordInput.text);
                //绿色
                TipsText.color = Color.green;
                TipsText.text = "注册成功！";
            }
            else
            {
                //红色
                TipsText.color = Color.red;
                TipsText.text = "两次密码输入不一致";
            }
        }
        else
        {
            //红色
            TipsText.color = Color.red;
            TipsText.text = "用户已存在";
        }

    }
    public void Login()
    {
        if (PlayerPrefs.GetString(usernameInput.text) != "")
        {
            if (PlayerPrefs.GetString(usernameInput.text + "password") == passwordInput.text)
            {
                //绿色
                TipsText.color = Color.green;
                TipsText.text = "登录成功,请稍等...";
                StartCoroutine(success());
            }
            else
            {
                //红色
                TipsText.color = Color.red;
                TipsText.text = "密码错误";
            }
        }
        else
        {
            //红色
            TipsText.color = Color.red;
            TipsText.text = "账号不存在";
        }
    }

    //登入成功
    IEnumerator success()
    {
        //等待2秒
        yield return new WaitForSeconds(2);

        //加载场景
        SceneManager.LoadScene(1);
    }
}

4. Retorne ao mecanismo Unity para montar os componentes correspondentes

(1). O método correspondente à montagem do botão de botão

 

 5. Finalmente, vamos executá-lo para ver o efeito.

página de registro

Esta é uma produção simples da página de registro do Cadastro.Se não houver um método mais avançado, você pode usar o método simples que fiz para tornar todo o projeto mais perfeito. 

---

afinal

As etapas acima são todo o processo de criação de um sistema de página de registro simples e completo. Espero ajudá-lo! ! !

Amigos que já viram, cliquem três vezes com um botão. Seu apoio me deixa mais motivado a criar e compartilhar. Espero que sempre traga surpresas e ganhos.

Três seguidos com um clique!