当前位置:   article > 正文

制作Unity的二维时间轴编辑器界面_unity 时间轴扩展编辑器

unity 时间轴扩展编辑器

由于某种原因,阿赵我一直想做一个能显示二维时间轴波形的编辑器,类似于Unity自带的Profiler那样。
我抽空做了一下:
这里写图片描述
为了测试,我随机生成了一些数据,用于波形的显示。
这里写图片描述
可以选择其中的某一帧,然后显示当前的值。
这里写图片描述
有时候波形叠在一起了,需要放大来看
这里写图片描述
于是滑动左边的滑条,可以对波形进行缩放。

下面说说做法:
主要用了Handle.DrawLine的方法。
这个方法一般是用于绘制3d场景内的线条的,输入的是场景的三维坐标。但实际上他也可以用于在界面上绘制线条。
Handles.BeginGUI();
//画各种线
Handles.EndGUI();

可以指定线条的颜色:
Handles.color = Color.blue;

最后,传进去2个点的坐标,绘制一条线条。传进去的坐标,就和OnGUI里面的Rect坐标是一样。
我上面的背景框是用GUI.Box绘制的,所以有固定的Rect。其他的配件都是依据这个Rect的坐标做偏移来做的。
最后,Handles.DrawLine如果超出了我的box,需要裁剪,可以使用 GUI.BeginScrollView和GUI.EndScrollView();来做一个裁剪区。

画线主体的具体的代码是:

Handles.BeginGUI();
GUI.BeginScrollView(boxRect, new Vector2(), boxRect);
Handles.color = Color.blue;
        for (int i = 0; i < timeLine.frames.Count-1;i++ )
        {
            FrameData fd = timeLine.frames[i];
            Vector3 beginPos = new Vector3();
            beginPos.x = boxRect.x + (fd.frameIndex / timeLine.length) * boxRect.width;
            beginPos.y = boxRect.y + boxRect.height - (fd.value / timeLine.maxValue) * boxRect.height / valueChangeValue;

            Vector3 endPos = new Vector3();
            FrameData fd2 = timeLine.frames[i + 1];

            endPos.x = boxRect.x + (fd2.frameIndex / timeLine.length) * boxRect.width;
            endPos.y = boxRect.y + boxRect.height - (fd2.value / timeLine.maxValue) * boxRect.height / valueChangeValue;
            Handles.DrawLine(beginPos, endPos);
        }
        GUI.EndScrollView();
            Handles.EndGUI();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/95468
推荐阅读
相关标签
  

闽ICP备14008679号