Unityが簡単なログイン登録ページを作る

1. Canvasコンポーネントを作成する

まず、Canvas を作成し、次に Canvas の下に Resgister という名前の空のオブジェクトを作成します。空のオブジェクトのアンカーポイントを設定して全画面に拡大します。

2. Resgister 空オブジェクトの下に Image コンポーネントを作成し、名前を bg に変更します。また、アンカーポイントを全画面展開状態に設定します。次に、画像 UI マテリアルをインポートし、そのタイプを 2D および UI に変更して、[適用] をクリックします。そうすれば、Unity エンジンで使用できるようになります。

次に、対応する背景画像を対応する位置にドラッグします。

3.InputFiledコンポーネントを作成する

(1). bg の下に InputFiled コンポーネントを作成し、作成した InputFiled コンポーネントの名前を userName に変更します。次に、Placehoder をクリックしてサイズを調整し、対応するコンポーネントのスタイルを調整します。

(2). 内部の Text のフォントサイズ、スタイル、配置なども調整する必要があります。この Text の変更は入力時の文字のサイズであり、上の Placehoder は、InputFiled コンポーネントによって表示されるフォントスタイルです。

(3) userNamer コンポーネントをクリックし、ショートカットキー Ctrl+D を押して片面をコピーします。名前をパスワードに変更しました。変更する必要があるのは、プレースホルダー内の単語だけです。

引き続きコピーをコピーし、その名前をconfirmPasswordに変更します。これは上記の操作とまったく同じで、内部の単語を変更するだけです。次のように変更します: パスワードを確認してください...

最後に、これら 3 つのオブジェクトの位置を適切に調整する必要があります。

ここでそのような効果に到達したので、対応する画像をその中にドラッグします。

(4). bg の下に Button コンポーネントを作成し、名前を registerButton に変更し、対応する位置にアンカーポイントを設定し、サイズを調整します。中の単語を変更し、ボタンの色を変更して、クリックまたは移動がよりわかりやすくなります。

次に、Ctrl+D を押して同一のコピーをコピーし、loginButton という名前を付けて位置を調整します。テキスト内の単語を変更するだけでよく、他の操作は必要ありません。

次に、登録ページに入ったことを伝える上部に表示するテキストを作成します。このテキストのアンカーポイントを画面全体の上部に設定します。

テキストのスタイルを調整します。一番上にあるので大きくする必要があります。具体的な動作を図に示します。

(5). 登録フィードバックを受け取るために使用する別の Text コンポーネントを作成しましょう。名前を TipsText に変更し、内部のテキスト、フォントサイズ、配置、色を赤に変更しました。

セットアップ後、UI は基本的に構築されます。レンダリングは次のとおりです。

まだ見た目も感触も良いです。次に実行してみましょう

上の図からわかるように、UI が完成したので、対応する効果を実現するコードを記述する必要があります。

コード：

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. Unity エンジンに戻って、対応するコンポーネントをマウントします。

(1).ボタンボタンマウントに対応する方法

5. 最後に、実行して効果を確認してみましょう。

登録ページ

これは簡単な登録ページの作成ですが、これ以上高度な方法がない場合は、プロジェクト全体をより完璧にするために私が作成した簡単な方法を使用できます。

やっと

上記の手順は、シンプルで完全な登録ページシステムを作成するプロセス全体です。ぜひお役に立ちたいと思います! ！！

ご覧になったお友達は、1 つのボタンを 3 回クリックしてください。サポートしていただくと、作成と共有のモチベーションがさらに高まります。常に驚きと利益をもたらすことを願っています。