注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

重新出发的阿赵

阿赵的博客

 
 
 

日志

 
 

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

2017-10-03 12:32:13|  分类: Unity教程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
由于某种原因,阿赵我一直想做一个能显示二维时间轴波形的编辑器,类似于Unity自带的Profiler那样。
趁着国庆假期,我抽空做了一下:
制作Unity的二维时间轴编辑器界面 - 阿赵 - 重新出发的阿赵
 为了测试,我随机生成了一些数据,用于波形的显示。

制作Unity的二维时间轴编辑器界面 - 阿赵 - 重新出发的阿赵
 可以选择其中的某一帧,然后显示当前的值。

制作Unity的二维时间轴编辑器界面 - 阿赵 - 重新出发的阿赵
 有时候波形叠在一起了,需要放大来看

制作Unity的二维时间轴编辑器界面 - 阿赵 - 重新出发的阿赵
 于是滑动左边的滑条,可以对波形进行缩放。

下面说说做法:
主要用了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();
  评论这张
 
阅读(61)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017