Unity3D制作注册登录界面,并实现场景跳转

这篇具有很好参考价值的文章主要介绍了Unity3D制作注册登录界面,并实现场景跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果预览图片:
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
效果预览视频:

一、新建项目工程

1、打开Unity3D,新建一个项目,将其命名为“Login”。我这里用的版本是Unity2018.4.2f1,不同版本制作过程中的界面可能稍有不同,但是不影响具体功能的实现。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
2、可以将样例场景SampleScene重命名为Login,最好做到见名知意。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转

二、注册登录界面搭建

1、新建Canvas画布。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
2、首先选中Scene场景中的2D,让其在2D视角下进行编辑。然后修改Canvas中的Canvas Scaler画布分辨率自适应组件,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
3、鼠标点击Canvas,右键选择Create Empty,创建一个空物体,并将其重命名为Login,用来存放所有后面需要用到的子物体。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
4、将Login的Rect Transform组件下面的锚点设置为如下图所示(锚点设置方法:鼠标先点击下图的2,然后按住Alt键不放,最后用鼠标选择你要设置的锚点)。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
5、鼠标点击Login,右键选择UI下面的Image,并将其重命名为Bg(即背景),用它作为整个注册登录界面的背景。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
6、我们可以在网上下载一张图片,当然也可以根据具体项目,选择合适的背景图。这里我将下载的图片重命名为Bg,然后将该图片拖入到Unity中新建的Images文件夹下面,该文件夹用来存放所有的图片,并将该图片的Texture Type修改为Sprite(2D and UI),最后Apply一下,步骤如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
7、鼠标选中Bg,在Image(Script)组件下面引入背景图片,当然也可以对其Color等进行修改,然后设置其锚点,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
8、鼠标选中Login,右键,创建一个Text,该文本的作用是文字说明。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
9、在Text文本输入框中输入文字,我这里以“欢迎进入注册登录界面”为例。需要设置它的锚点,我这儿设置的是顶部居中,大家也可以根据各自需要进行相应设置。然后设置文本框的高Height,本例为300。还可以对其字体大小,对齐方式,字体颜色等进行设置。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
10、鼠标点击Login,右键,创建一个Input Field输入框,将其重命名为UserName。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
11、UserName上的操作。
(1)点击UserName,对它进行一些修改。本例仅修改了它的宽、高。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
(2)点击Placeholder,对它进行一些修改,Text里输入“请输入用户名”,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
(3)点击Text,对它进行一些修改,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
12、鼠标选中UserName,Ctrl+D,复制两份,并将复制的两份分别重命名为Password和ConfirmPassword,即密码和确认密码,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
13、Password上的操作,只需将Password整体往下挪一挪,并修改Placeholder里的Text内容即可,本例Text里的内容为“请输入密码”,其他无需修改,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
14、ConfirmPassword上的操作,只需将ConfirmPassword整体往下挪一挪,并修改Placeholder里的Text内容即可,本例Text里的内容为“请确认密码”,其他无需修改,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
15、鼠标点击Login,右键,创建一个Text文本框,将其重命名为ReminderText,该文本的功能是:当注册登录成功或失败,密码输入正确与否时给出相应文字提示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
16、点击ReminderText,对它进行一些修改,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
17、鼠标点击Login,右键,创建一个Button,并重命名为“注册”。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
18、“注册”上的操作。
(1)点击“注册”,对它进行简要设置,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
(2)点击Text,在文本框中输入“注 册”,并对其字体等作出简单设置,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
19、鼠标选中“注册”,Ctrl+D复制一份,重命名为“登录”,并将其禁用;在它的Text文本框中输入“进入系统”,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
20、鼠标选中Login,右键,创建一个空物体,并重命名为“Toggle Group”。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
21、选中“Toggle Group”,点击“Add Component”添加“Toggle Group(Script)”组件。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
22、鼠标选中Login,右键,创建一个Toggle,并重命名为“Toggle 注册”。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
23、“Toggle 注册”上的操作。
(1)点击“Toggle 注册”,对其进行初步调整,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
(2)点击“Background”,对其进行初步调整,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
(3)点击“Checkmark”,对其进行初步调整,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
(4)点击“Label”,对其进行初步调整,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
(5)选中“Label”,Ctrl+D复制一份,Label (1)无需做任何更改。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
24、选中“Toggle 注册”,Ctrl+D复制一份,重命名为“Toggle 登录”。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
25、“Toggle 登录”上的操作。
(1)点击“Toggle 登录”,由于是复制过来的,所以只需对其位置做出微调即可,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
(2)“Background”、“Checkmark”无需任何修改。
(3)点击“Label”,在其文本框中输入“登 录”,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
(4)点击“Label(1)”,在其文本框中输入“登 录”,并将其禁用,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
26、注册登录界面框架搭建基本完成,效果如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转

三、注册登录代码实现

1、新建一个名为“Scripts”的文件夹,用来存放所有的脚本,在其下面再新建一个名为“LoginClass”的C#脚本,双击打开脚本,编写代码。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
2、全部代码如下

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

public class LoginClass : MonoBehaviour
{
    //进入前变量
    public InputField username, password, confirmPassword;
    public Text reminderText;
    public int errorsNum;
    public Button loginButton;
    public GameObject hallSetUI, loginUI;
    //进入后变量
    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 = "注册成功!";
            }
            else
            {
                reminderText.text = "两次密码输入不一致";
            }
        }
        else
        {
            reminderText.text = "用户已存在";
        }

    }
    private void Recovery()
    {
        loginButton.interactable = true;
    }
    public void Login()
    {
        if (PlayerPrefs.GetString(username.text) != "")
        {
            if (PlayerPrefs.GetString(username.text + "password") == password.text)
            {
                reminderText.text = "登录成功";

                myUsername = username.text;
                hallSetUI.SetActive(true);
                loginUI.SetActive(false);
                SceneManager.LoadScene(1);
            }
            else
            {
                reminderText.text = "密码错误";
                errorsNum++;
                if (errorsNum >= 3)
                {
                    reminderText.text = "连续错误3次,请30秒后再试!";
                    loginButton.interactable = false;
                    Invoke("Recovery", 5);
                    errorsNum = 0;
                }
            }
        }
        else
        {
            reminderText.text = "账号不存在";
        }
    }
}

3、保存代码,回到Unity3D,继续完成接下来的操作。

四、添加相应事件

1、将LoginClass脚本添加进Login中,具体过程如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
2、鼠标选中“注册”,具体过程如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转

3、鼠标选中“登录”,具体过程如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
4、鼠标选中“Toggle 注册”,具体过程如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
注:上图中的Label(1)是“Toggle 注册”下面的Label(1)。
5、鼠标选中“Toggle 登录”,具体过程如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
注:上图中的Label(1)是“Toggle 登录”下面的Label(1)。

五、新建跳转场景

1、在Scenes文件夹下,鼠标右击,创建一个新的场景,重命名为Main,作为注册登录成功后的跳转场景。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
2、随便在Main场景中添加一些物体作为演示。添加完毕后,可以鼠标选中Main Camera,按住Ctrl+Shift+F,或者点击菜单栏的GameObject,然后点击Align With View聚焦场景,也是可以的。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
3、点击File,选择Build Settings,依次将Login,Main场景拖入进来,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转

六、运行效果

(1)首先点击“注册”,输入用户名、密码、确认密码,若前后输入的密码不一致,将会出现报错提示,如下图所示。只有密码正确才会提示注册成功。若用户名已存在,也会出现相应提示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
(2)注册成功后,点击“登录”,用户名和密码默认自动填入,然后点击“进入系统”,即可跳转到对应场景中,如下图所示。
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转
unity制作登录界面,Unity3D,Unity3D,UGUI,注册登录界面制作,场景跳转文章来源地址https://www.toymoban.com/news/detail-777284.html

到了这里,关于Unity3D制作注册登录界面,并实现场景跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Unity3D】如何在uniyt中切换画布实现切换界面的交互操作

    我们在切换不同界面的时候,时常会用到切换场景的操作。 如果在一个场景里就可以去实现切换界面的时候,若再使用切换场景来实现,会占用很大的空间,不妨在一个场景里使用切换画布的方法来实现切换界面的交互操作。  效果如图所示:  在第一个画布中,点击按钮后

    2024年02月12日
    浏览(47)
  • unity3D基础操作之01--unity3d窗口界面介绍

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 1、Scene场景编辑窗口; 2、Game游戏运行窗口; 3、Hierarchy场景物体列表窗口; 4、Project项目资源列表窗口; 5、Inspector属性编辑列表窗口; 6、其他常调节窗口 在屏幕左上方为场景编辑窗口Scene,在场景编

    2024年02月06日
    浏览(80)
  • Unity3D制作天空盒

    1、下载并导入hdr高动态范围图像资源到Project视图中,然后将图片的“Texture Shape”修改为“Cube”。  3、将步骤1的图片拖入“Cubemap(HDR)”的框内。  4、最后将制作好的材质,直接拖入Scene窗口中。           

    2024年02月15日
    浏览(61)
  • 【Unity3D】Unity3D 软件安装 ( 注册账号并下载 Unity Hub | 安装 Unity Hub | 获取个人版授权 | 中文环境设置 | 安装 Unity3D 编辑器 )

    Unity 官方网站 : 英文 : https://unity.com 中文 : https://unity.cn 进入 中文网站 https://unity.cn , 点击右上角的 \\\" 下载 Unity \\\" 按钮 ; 推荐下载 Unity3D 的长期支持版本 ; 点击界面中的 \\\" 下载 Unity Hub \\\" 选项 ; 根据你的系统 , 选择对应的 Unity Hub , 我在 Windows 上开发 , 因此选择 \\\" Windows 下载 \\\"

    2024年01月25日
    浏览(101)
  • Unity3D粒子系统之制作火焰特效

    本文将会介绍如何使用Unity内的粒子系统制作烟雾效果。 如果想了解Unity粒子系统中的基础属性,可以看这篇博客:Unity3D粒子系统之基础属性介绍 先上预览图吧 用自己熟悉的绘画工具画一张类似这样的图片(相似即可,白灰色部分边缘不规则),注意一定要黑底。 将画好的

    2024年02月02日
    浏览(47)
  • Unity3D粒子系统之制作烟雾特效

    本文将会介绍如何使用Unity内的粒子系统制作烟雾效果。 如果想了解Unity粒子系统中的基础属性,可以看这篇博客:Unity3D 粒子系统之基础属性介绍 先附上预览图: 材质贴图 首先我们需要一张烟雾材质用的材质贴图,我是自己画的,可以参考下图自己画一张或者去网上找素材

    2024年02月02日
    浏览(54)
  • 使用Unity3D制作2D游戏的重点做法

    官网上有提供一个 2D游戏的教学范例 ,这个游戏只不过把镜头摆放在横向位置跟随角色移动,游戏内物件运动时固定一个轴不动,使他像横轴式的2D游戏来玩,本质上其实还是个3D游戏,所以如果没有3D建模的话不就没办法做2D游戏了?其实这些并没有定论,就看制作者如何运

    2024年02月11日
    浏览(65)
  • Unity3d 制作一个简单的NPC对话系统

    ​ 最近在自己写一个比较小的项目,虽然自己是一个策划,但是程序方面我觉得也是很有必要学一学的。 ​ 经过了接近一年的学习,也终于是可以独自写一些小的系统了。 ​ 这次自己写了一个比较简单的NPC对话系统,供大家参考。 进入对话区域 开始对话 Inspector面板可调

    2023年04月08日
    浏览(47)
  • Unity3D项目之游戏场景小地图制作

    创建一个场景资源,可在asset store资源商店下载,选择心仪场景。 链接:https://assetstore.unity.com/?locale=zh-CN 添加一个对象GameObject,命名为player,子物体包括:主摄像机,角色,后面步骤会添加一个plane。 添加一个地图摄像机,命名为MapCamera。修改属性projection为OrthoGraphic;Size为

    2024年02月11日
    浏览(79)
  • 用Unity3D制作FPS游戏的学习笔记————人物移动、利用鼠标实现视角转动和人物跳跃(含人物悬空不掉落修复)

    前言: 这是我第一次发布文章,此文章仅供参考,我也是刚学习接触untiy,在制作项目的过程中将有用的写下来记一记,以便自己之后能回头看看,各位大佬轻点喷,若有错误请麻烦积极提谢谢各位。该文章参考自B站UP主蔡先森_rm-rf发布的 【第一人称射击游戏教程2.0【已完结

    2024年04月27日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包