IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> unity制作一个可以自由滑动收缩的历史记录功能。 -> 正文阅读

[游戏开发]unity制作一个可以自由滑动收缩的历史记录功能。

公司在做一款模拟经营类的卖车游戏,需要一个简单的历史记录功能,放在左上角,记录最近20条的收入/支出记录。超过2秒不动则收起。收起时展示最近的一个消息记录。
用到的组件是ScrollView,使用方法可以参考我写过的一篇博客。ScrollView踩坑记录
要求:
1、像正常的聊天框那样,消息从上向下展示,界面最多展示五条,如果用户当前看的是最底部的消息,那么有新的收入/支出消息的时候,需要将最新一条添加到底部,并将其他消息向上移动一格。如果用户正在查询历史记录,那么正常添加即可。不需要添加到底部。
2、当用户两秒内对历史记录无任何操作时,收起历史记录,并展示最新一条消息,此后如果有最新记录,展示最新的记录。

先实现最简单的功能。
1、正常的添加历史记录。
在这里插入图片描述
先看下最简单的功能,可以正常添加,但是最新一条聊天记录并不会将其他消息顶上去。
如果想顶上去,需要加上几行代码

        Canvas.ForceUpdateCanvases();
        scrollRect.verticalNormalizedPosition = 0f;
        Canvas.ForceUpdateCanvases();

这个代码是强制刷新画布(不刷新会有延迟,出现错误的效果,此处为了简略就不掩饰了),并且将滑动条的垂直变量变成0(即到达底部)。
图2
如上图所示,现在虽然沉底了,但是当用户查询历史记录的时候,此时如果新加入一条记录,就会出现用户正翻着记录,却被沉底的情况,这种情况不符合要求,需要改。
此时可以加个判断,判断verticalNormalizedPosition 的值,注意不能和0对比,滑动后的verticalNormalizedPosition 会有一定的误差,可能是0.0000000几。
我这里觉得这样判断比较麻烦,没有深入研究。使用的是另一种方法。

第二种方法:
更改自身的中心点(pivot)。
当自身pivot点在中心时,自身变大,是向四周扩大,如果在上面,则向下面扩大,如果是在下面,那么则向上面扩大。
那么解决方法就出来了,当历史记录少于五条时,我们让他正常的向下增长。
当历史记录少于五条时,中心点在上方,当中心点大于等于五条时,中心点在上方,此时后续新增的历史记录需要调用SetAsLastSibling()方法,将最新的消息置于底部。
在这里插入图片描述
效果如上图所示。此处有一个注意点,当通过代码更改物体的中心点时,物体会发生抽搐,算是unity的一个BUG把,需要手动的给物的位置赋值。
完整代码:

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

public class HistoryView : MonoBehaviour
{
    /// <summary>
    /// 历史记录
    /// </summary>
    public List<string> historyStringList = new List<string>();

    public Button getButton1;

    public Button costButton1;

    public Button getButton2;

    public Button costButton2;

    /// <summary>
    /// 子类的父物体
    /// </summary>
    public Transform parentTransform;

    /// <summary>
    /// 预制体
    /// </summary>
    public GameObject historyItemPrefab;

    /// <summary>
    /// 滑动框
    /// </summary>
    public ScrollRect scrollRect;
    private void Awake()
    {
        getButton1.onClick.AddListener(() =>
        {
            AddHistory("+100");
        });
        getButton2.onClick.AddListener(() =>
        {
            AddHistory("+200");
        });
        costButton1.onClick.AddListener(() =>
        {
            AddHistory("-100");
        });
        costButton2.onClick.AddListener(() =>
        {
            AddHistory("-200");
        });
    }

    void AddHistory(string historyString)
    {
        historyStringList.Add(historyString);
        if (historyStringList.Count < 5)
        {
            scrollRect.content.pivot = new Vector2(0, 1);
        }
        else if (historyStringList.Count == 5)
        {
            scrollRect.content.pivot = new Vector2(0, 0);
            Canvas.ForceUpdateCanvases();
            scrollRect.verticalNormalizedPosition = 0f;
            Canvas.ForceUpdateCanvases();
        }
        else
        {
            scrollRect.content.pivot = new Vector2(0, 0);
        }
        GameObject go = Instantiate(historyItemPrefab, parentTransform);
        go.transform.SetAsLastSibling();
        var historyItem = go.GetComponent<HistoryItem>();
        historyItem.contentText.text = historyString;

    }
}

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


public class HistoryItem : MonoBehaviour
{
    public Text contentText;
}

隐藏功能:将Content的锚点改为下方,这样我们只需要改动ViewReport的下面大小,Content的坐标就会跟着改动。
在这里插入图片描述
隐藏的时候将scrollRect.verticalNormalizedPosition = 0f;然后根据实际情况调整ViewPort的大小就行,这里就偷个懒不做演示了。
至于显示,可以用一个透明的button贴在最上面,检测玩家是否按下,按下则改变大小,也可以通过Unity ScrollRect提供的onValueChanged去监听,这就看个人习惯了。
ps:onValueChanged在有新物体创建的时候有时会导致value改变,有时不会,是个小bug。
Demo

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2021-12-15 18:37:40  更:2021-12-15 18:37:57 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/27 20:35:55-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码