当前位置:网站首页>Unity3d makes the registration login interface and realizes the scene jump
Unity3d makes the registration login interface and realizes the scene jump
2022-07-06 12:33:00 【SQ Liu】
Effect preview picture :
Effect preview video :
One 、 New projects
1、 open Unity3D, Create a new project , I'm going to call it “Login”. The version I use here is Unity2018.4.2f1, The interface may be slightly different during the production of different versions , But it does not affect the realization of specific functions .
2、 The sample scene can be SampleScene Rename it to Login, It's best to know what you mean by what you see .
Two 、 The registration login interface is set up
1、 newly build Canvas canvas .
2、 First select Scene In the scene 2D, Let it be in 2D Edit from Perspective . And then modify Canvas Medium Canvas Scaler Canvas resolution adaptive component , As shown in the figure below .
3、 Mouse click Canvas, The right choice Create Empty, Create an empty object , And rename it to Login, It is used to store all the sub objects needed later .
4、 take Login Of Rect Transform The anchor point under the component is set as shown in the following figure ( Anchor point setting method : Click on the following figure first 2, Then press and hold Alt Key not put , Finally, use the mouse to select the anchor you want to set ).
5、 Mouse click Login, The right choice UI Below Image, And rename it to Bg( That's the background ), Use it as the background for the entire login interface .
6、 We can download a picture on the Internet , Of course, it can also be based on specific projects , Select the appropriate background image . Here I will rename the downloaded image as Bg, Then drag the picture to Unity New in Images Under the folder , This folder is used to store all the pictures , And the Texture Type It is amended as follows Sprite(2D and UI), Last Apply once , The steps are as follows .
7、 Mouse selected Bg, stay Image(Script) The background image is introduced under the component , Of course, it can also be Color And so on , Then set its anchor , As shown in the figure below .
8、 Mouse selected Login, Right click , Create a Text, This text is used to explain .
9、 stay Text Enter text in the text input box , Here I am. “ Welcome to the login interface ” For example . You need to set its anchor , I set the top center here , You can also make corresponding settings according to your own needs . Then set the height of the text box Height, For this example 300. You can also adjust the font size , Alignment mode , Font color, etc .
10、 Mouse click Login, Right click , Create a Input Field Input box , Rename it to UserName.
11、UserName The operating .
(1) Click on UserName, Make some changes to it . This example only modifies its width 、 high .
(2) Click on Placeholder, Make some changes to it ,Text Internal input “ Please enter a user name ”, As shown in the figure below .
(3) Click on Text, Make some changes to it , As shown in the figure below .
12、 Mouse selected UserName,Ctrl+D, Two copies of , And rename the two copies as Password and ConfirmPassword, That is, password and confirm password , As shown in the figure below .
13、Password The operating , Just put the Password Move down as a whole , And modify it Placeholder Inside Text Content is enough , This case Text The content of this article is “ Please input a password ”, Nothing else needs to be changed , As shown in the figure below .
14、ConfirmPassword The operating , Just put the ConfirmPassword Move down as a whole , And modify it Placeholder Inside Text Content is enough , This case Text The content of this article is “ Please confirm the password ”, Nothing else needs to be changed , As shown in the figure below .
15、 Mouse click Login, Right click , Create a Text The text box , Rename it to ReminderText, The function of this text is : When the registration login succeeds or fails , If the password is entered correctly, the corresponding text prompt will be given .
16、 Click on ReminderText, Make some changes to it , As shown in the figure below .
17、 Mouse click Login, Right click , Create a Button, And rename to “ register ”.
18、“ register ” The operating .
(1) Click on “ register ”, Set it briefly , As shown in the figure below .
(2) Click on Text, Enter in the text box “ notes book ”, And make simple settings for its font , As shown in the figure below .
19、 Mouse selected “ register ”,Ctrl+D A copy of , Rename it to “ Sign in ”, And disable it ; In its Text Enter in text box “ Entry system ”, As shown in the figure below .
20、 Mouse selected Login, Right click , Create an empty object , And rename to “Toggle Group”.
21、 Choose “Toggle Group”, Click on “Add Component” add to “Toggle Group(Script)” Components .
22、 Mouse selected Login, Right click , Create a Toggle, And rename to “Toggle register ”.
23、“Toggle register ” The operating .
(1) Click on “Toggle register ”, Make a preliminary adjustment , As shown in the figure below .
(2) Click on “Background”, Make a preliminary adjustment , As shown in the figure below .
(3) Click on “Checkmark”, Make a preliminary adjustment , As shown in the figure below .
(4) Click on “Label”, Make a preliminary adjustment , As shown in the figure below .
(5) Choose “Label”,Ctrl+D A copy of ,Label (1) No need to make any changes .
24、 Choose “Toggle register ”,Ctrl+D A copy of , Rename it to “Toggle Sign in ”.
25、“Toggle Sign in ” The operating .
(1) Click on “Toggle Sign in ”, Because it is copied , So just fine tune its position , As shown in the figure below .
(2)“Background”、“Checkmark” No changes needed .
(3) Click on “Label”, Enter “ deng record ”, As shown in the figure below .
(4) Click on “Label(1)”, Enter “ deng record ”, And disable it , As shown in the figure below .
26、 The framework of registration and login interface is basically completed , The effect is shown below .
3、 ... and 、 Register the login code to realize
1、 Create a new one called “Scripts” Folder , Used to store all scripts , Create a new one named “LoginClass” Of C# Script , Double click to open the script , Write code .
2、 All codes are as follows
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System;
using UnityEngine.SceneManagement;
public class LoginClass : MonoBehaviour
{
// Before entering the variable
public InputField username, password, confirmPassword;
public Text reminderText;
public int errorsNum;
public Button loginButton;
public GameObject hallSetUI, loginUI;
// Post entry variable
public static string myUsername;
public void Register()
{
if (PlayerPrefs.GetString(username.text) == "")
{
if (password.text == confirmPassword.text)
{
PlayerPrefs.SetString(username.text, username.text);
PlayerPrefs.SetString(username.text + "password", password.text);
reminderText.text = " Registered successfully !";
}
else
{
reminderText.text = " The two passwords are inconsistent ";
}
}
else
{
reminderText.text = " The user already exists ";
}
}
private void Recovery()
{
loginButton.interactable = true;
}
public void Login()
{
if (PlayerPrefs.GetString(username.text) != "")
{
if (PlayerPrefs.GetString(username.text + "password") == password.text)
{
reminderText.text = " Login successful ";
myUsername = username.text;
hallSetUI.SetActive(true);
loginUI.SetActive(false);
SceneManager.LoadScene(1);
}
else
{
reminderText.text = " Wrong password ";
errorsNum++;
if (errorsNum >= 3)
{
reminderText.text = " Continuous errors 3 Time , please 30 Try again in seconds !";
loginButton.interactable = false;
Invoke("Recovery", 5);
errorsNum = 0;
}
}
}
else
{
reminderText.text = " Account does not exist ";
}
}
}
3、 Save code , go back to Unity3D, Continue to complete the next operation .
Four 、 Add the corresponding event
1、 take LoginClass Add script into Login in , The specific process is shown in the figure below .
2、 Mouse selected “ register ”, The specific process is shown in the figure below .
3、 Mouse selected “ Sign in ”, The specific process is shown in the figure below .
4、 Mouse selected “Toggle register ”, The specific process is shown in the figure below .
notes : In the picture above Label(1) yes “Toggle register ” Below Label(1).
5、 Mouse selected “Toggle Sign in ”, The specific process is shown in the figure below .
notes : In the picture above Label(1) yes “Toggle Sign in ” Below Label(1).
5、 ... and 、 Create a new jump scene
1、 stay Scenes Under the folder , Right mouse click , Create a new scene , Rename it to Main, As a jump scenario after successful registration and login .
2、 At will Main Add some objects to the scene as a demonstration . And when I'm done , You can select Main Camera, Hold down Ctrl+Shift+F, Or click... On the menu bar GameObject, And then click Align With View Focus on the scene , It's OK, too .
3、 Click on File, choice Build Settings, In turn Login,Main The scene is dragged in , As shown in the figure below .
6、 ... and 、 Running effect
(1) First click on “ register ”, enter one user name 、 password 、 Confirm the password , If the passwords entered before and after are inconsistent , An error message will appear , As shown in the figure below . Only when the password is correct will you be prompted that the registration is successful . If the user name already exists , The corresponding prompt will also appear .
(2) After successful registration , Click on “ Sign in ”, The user name and password are automatically filled in by default , And then click “ Entry system ”, You can jump to the corresponding scene , As shown in the figure below .
边栏推荐
- JS Title: input array, exchange the largest with the first element, exchange the smallest with the last element, and output array.
- Working principle of genius telephone watch Z3
- Gateway fails to route according to the service name, and reports an error service unavailable, status=503
- 关于Gateway中使用@Controller的问题
- @The difference between Autowired and @resource
- VIM command line notes
- [899]有序队列
- Compilation principle: preprocessing of source program and design and implementation of lexical analysis program (including code)
- Remember an experience of ECS being blown up by passwords - closing a small black house, changing passwords, and changing ports
- Knowledge summary of request
猜你喜欢
Custom view puzzle getcolor r.color The color obtained by colorprimary is incorrect
Classification, understanding and application of common methods of JS array
Postman 中级使用教程【环境变量、测试脚本、断言、接口文档等】
数据库课程设计:高校教务管理系统(含代码)
程序设计大作业:教务管理系统(C语言)
MySQL时间、时区、自动填充0的问题
Fashion Gen: the general fashion dataset and challenge paper interpretation & dataset introduction
JS Title: input array, exchange the largest with the first element, exchange the smallest with the last element, and output array.
Feature of sklearn_ extraction. text. CountVectorizer / TfidVectorizer
JS變量類型以及常用類型轉換
随机推荐
[offer18] delete the node of the linked list
(3) Introduction to bioinformatics of R language - function, data Frame, simple DNA reading and analysis
单片机蓝牙无线烧录
dosbox第一次使用
基于Redis的分布式锁 以及 超详细的改进思路
[leetcode15] sum of three numbers
JS Title: input array, exchange the largest with the first element, exchange the smallest with the last element, and output array.
Custom view puzzle getcolor r.color The color obtained by colorprimary is incorrect
1081 rational sum (20 points) points add up to total points
VIM command line notes
The dolphin scheduler remotely executes shell scripts through the expect command
idea问题记录
基于Redis的分布式ID生成器
JS變量類型以及常用類型轉換
Intermediate use tutorial of postman [environment variables, test scripts, assertions, interface documents, etc.]
Flink late data processing (3)
燕山大学校园网自动登录问题解决方案
JS variable types and common type conversions
Minio文件下载问题——inputstream:closed
Working principle of genius telephone watch Z3