unity2D横版游戏教程5-UI

UI是User Interface的缩写,也就是用户界面。像登录界面的按钮,游戏的得分,暂停的按钮等都是UI

 

之前我门创建一个Cherries变量来计算我们收集樱桃的数量,现在我们创建一个UI来显示我们收集樱桃的数量

我们在Hierarchy界面右键->UI,这些都是UI,比如按钮,滚动条,文字等等

937ec9664c3f43639e122d5282ac775c.png

 我们需要创建一个Canvas(画布),Canvas相当承载UI元素的容器,我们的UI都在Canvas里面

bcc13684ae84451cb3661e21943a0f8d.png

 EventSystem是创建Canvas自动生成的,就是一个情景触发的系统,先不用管他

我们在Canvas下面创建一个一个Text文本组件用来显示文字,右键->UI->Legacy->Text,Legacy里面是老的UI组件,现在已经有新的,功能更强大的组件代替他们,所以他们就移到了Legacy里面,不过也可以使用。

比如Text-TextMeshPro也是文本组件,不过比Text功能更加齐全。不过我们这里用老的Text而不用Text-TextMeshPro,因为新的Text-TextMeshPro不支持中文输入,老的Text支持中文输入而且操作也更简单一点

如果想要让Text-TextMeshPro支持中文输入可以参考这篇文章:unity最新版本的Text(TMP)UI文本怎么显示中文_真的没事鸭的博客-CSDN博客_unity的text不显示中文

2cd23f390d6a4eac8901cbde39d7a079.png

 创建好之后,我们双击Canvas,我们发现Canvas好像脱离了游戏画面,是一个单独呈现的屏幕。没错,UI的元素都会在单独的Canvas界面上编辑,方便我们区分游戏的画面

aa0ef3b1f189478e82fc2e99d927f781.png

 我们调整一下Text的位置,我们在Hierarchy栏点击Text,在右边属性栏有个锚点预设

008674ef6e8f42e9b30489ba455a1aef.png

 我们点击这个方框,按住alt键选择右上角的方框,这样Text组件就自动跑到右上角的位置,并且设置完锚点之后,无论屏幕怎么变,Text始终在屏幕的右上角的位置,注意我们下面的图片是没有按住alt键时的情景,我们按住alt选择白色框框的位置就行。

8c41f2885a544d018329d7bdc7afeb57.png

 我们把Text中文字调整一下,调整成居中对齐,改变一下字体的大小还有颜色,同时把Text的内容改一下,改成”樱桃:0”

f108b9c585c0489fbb5a7b816e0e135b.png

 调整之后是这样的

80b2ea352a104cef986c89f6b100c77f.png

 接下来我们就要让这个UI跟随我们的角色收集的数量发生变化,我们打开playercontroller代码,目前现在只有playercontroller这一个C#代码文件

我们要让Text跟随角色发生变化,那么我们首先要获得Text组件,所以我们声明一下Text变量,但是发现Text报错了。

fef1454581c042838aa6ab9c0351aa53.png

 我们按住alt+回车,发现是因为缺少了对应的命名空间

c125159b16a74b2b85b4914b098a401d.png

 所以我们加上UnityEngine.UI命名空间

 deb7d3e0c78a48c58ad9ccfcf23014b4.png

 这样Text就不会报错了

我们让cherries每次加一就设置一下Text的内容,这样Text就跟随cherries发生变化了

e214f1e6a45b485d8416ba3567f41700.png

 这样就做好了,但是运行之前记得把Text拖给player

f631431c7bd544218843bc6f3129b843.png

 这样每碰到一个樱桃,显示的樱桃数量就会加一

最后贴一下playercontroller的代码

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

public class playercontroller : MonoBehaviour
{
    private Rigidbody2D rb;//获得Rigidbody2D组件
    private Collider2D coll;//获得Collider2D组件
    private Animator anim;//获得动画组件
    public float speed, jumpForce;//公开,设置速度和跳跃力
    public LayerMask ground;//获得地面图层
    public Transform groundCheck;//检测角色是否碰到地面
    private bool isJump, isGround;//判断是否按下空格键,判断是否在地面
    private int jumpCount;//用来设置角色是几段跳
    private int cherries;//计数变量
    public Text cherryText;//樱桃计数的UI组件

    //初始化
    void Start()
    {
        rb = GetComponent<Rigidbody2D>();
        coll = GetComponent<Collider2D>();
        anim = GetComponent<Animator>();
    }

    void Update()
    {
        //如果按下空格键并且在地面上
        if (Input.GetKeyDown(KeyCode.Space) && jumpCount > 0)
        {
            isJump = true;
        }
    }
    private void FixedUpdate()
    {
        isGround = Physics2D.OverlapCircle(groundCheck.position, 0.1f, ground);
        Movement();
        Jump();
        SwitchAnim();
    }

    //基础移动
    void Movement()
    {
        float horizontal = Input.GetAxisRaw("Horizontal");
        rb.velocity = new Vector2(horizontal * speed, rb.velocity.y);//设置x轴的移动
        //设置角色的转向问题
        if (horizontal != 0)
        {
            transform.localScale = new Vector3(horizontal, 1, 1);
            anim.SetBool("run", true);
        }
        else
            anim.SetBool("run", false);
    }

    //跳跃
    void Jump()
    {
        //如果在地面设置二段跳
        if (isGround)
        {
            jumpCount = 2;
        }
        //按下跳跃键且在地面上
        if (isJump && isGround)
        {
            rb.velocity = new Vector2(rb.velocity.x, jumpForce);
            jumpCount--;
            isJump = false;
        }
        //按下跳跃键且不在地面上且jumpCount大于0
        else if (isJump && !isGround && jumpCount > 0)
        {
            rb.velocity = new Vector2(rb.velocity.x, jumpForce);
            jumpCount--;
            isJump = false;
        }
    }

    //切换动画
    void SwitchAnim()
    {
        //如果在下落状态
        if (rb.velocity.y < 0 && !isGround)
        {
            anim.SetBool("fall", true);
            anim.SetBool("jump", false);
        }
        //如果在跳跃状态
        if (!isGround && rb.velocity.y > 0)
        {
            anim.SetBool("jump", true);
        }
        //如果在地面上
        else if (coll.IsTouchingLayers(ground))
        {
            anim.SetBool("fall", false);
        }
    }

    //判断是否碰到物品
    private void OnTriggerEnter2D(Collider2D collision)
    {
        if(collision.tag=="Collection")
        {
            Destroy(collision.gameObject);
            cherries++;
            cherryText.text = "樱桃:" + cherries;
        }
    }
}

 

  • 7
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

真的没事鸭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值