游戏蛮牛学习群(纯技术交流,不闲聊):159852603
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2309

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 5283|回复: 304

[zhang273162308] Unity实用小工具—动态绘制2D曲线

  [复制链接]  [移动端链接]
排名
139
昨日变化

113

主题

549

帖子

6623

积分

Rank: 9Rank: 9Rank: 9

UID
3579
好友
103
蛮牛币
4174
威望
0
注册时间
2013-9-10
在线时间
1400 小时
最后登录
2018-9-14

专栏作家社区QQ达人活力之星游戏蛮牛QQ群会员蛮牛哥

发表于 2018-3-1 17:24:16 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
本帖最后由 zhang273162308 于 2018-3-1 17:26 编辑

一、前言

   好久没有发帖了,最近确实变懒了,不知道有没有人想我,哈哈哈,有好技术还是第一时间写出来分享分享

之前用Line Render实现过这个动态曲线的绘制,Line Render绘制动态曲线使用这个实在太不方便了,一直寻思怎么在一张图片上通过控制图片的像素值实现曲线的动态绘制。参考了Unity的官网教程实现了这个,效果图如图所示:

QQ截图20180301170610.png

这样实现的效果比LineRender 要好,并且不怎么消耗计算和渲染

二、实现

1、代码创建一个背景贴图,并将这个贴图给UGUI的RawImage控件

[C#] 纯文本查看 复制代码
        //创建背景贴图
        widthPixels = (int)(Screen.width * width);
        heightPixels = (int)(Screen.height * height);
        bgTexture = new Texture2D(widthPixels, heightPixels);

        bgImage.texture = bgTexture;
        bgImage.SetNativeSize();

2、计算曲线数据列表对应贴图中的像素索引

[C#] 纯文本查看 复制代码
 int i;
        int j;

        if (Mathf.Abs(to.x - from.x) > Mathf.Abs(to.y - from.y))
        {
            // Horizontal line.
            i = 0;
            j = 1;
        }
        else
        {
            // Vertical line.
            i = 1;
            j = 0;
        }

        int x = (int)from[i];
        int delta = (int)Mathf.Sign(to[i] - from[i]);
        while (x != (int)to[i])
        {
            int y = (int)Mathf.Round(from[j] + (x - from[i]) * (to[j] - from[j]) / (to[i] - from[i]));

            int index;
            if (i == 0)
                index = y * widthPixels + x;
            else
                index = x * widthPixels + y;

            index = Mathf.Clamp(index, 0, pixelsDrawLine.Length - 1);
            pixelsDrawLine[index] = color;

            x += delta;
        }

3、在Update里实时更新贴图的像素值

[C#] 纯文本查看 复制代码
        Array.Copy(pixelsBg, pixelsDrawLine, pixelsBg.Length);

        // 基准线
        DrawLine(new Vector2(0f, heightPixels * 0.5f), new Vector2(widthPixels, heightPixels * 0.5f), zeroColor);

        for (int i = 0; i < listPoints.Count-1; i++)
        {
            Vector2 from = listPoints[i];
            Vector2 to = listPoints[i + 1];
            DrawLine(from, to, colorLine1);
        }

        bgTexture.SetPixels32(pixelsDrawLine);
        bgTexture.Apply();

三、总结

1、比使用Line Render要节省计算和渲染

2、真正实现了二维的曲线绘制,Line Render始终是3维的

3、曲线坐标的X和Y的值不能超过贴图的宽度和高度,否则不能绘制

4、完整工程下载地址

游客,如果您要查看本帖隐藏内容请回复


点评

感谢分享  发表于 2018-3-14 17:45

回复

使用道具 举报

8常驻蛮牛
6311/10000
排名
33
昨日变化

1

主题

529

帖子

6311

积分

Rank: 8Rank: 8

UID
30356
好友
0
蛮牛币
8534
威望
0
注册时间
2014-6-19
在线时间
2953 小时
最后登录
2018-9-19
发表于 2018-3-1 18:32:07 | 显示全部楼层
厉害啊66666666666666

回复 支持 反对

使用道具 举报

5熟悉之中
642/1000
排名
3882
昨日变化
19

1

主题

46

帖子

642

积分

Rank: 5Rank: 5

UID
213756
好友
3
蛮牛币
1524
威望
0
注册时间
2017-3-22
在线时间
243 小时
最后登录
2018-9-18
发表于 2018-3-1 19:01:42 | 显示全部楼层
感谢大佬分享

回复

使用道具 举报

0

主题

10

帖子

12

积分

Rank: 1

UID
64096
好友
0
蛮牛币
1
威望
0
注册时间
2014-12-28
在线时间
2 小时
最后登录
2018-3-2
发表于 2018-3-2 02:33:40 | 显示全部楼层

回复

使用道具 举报

5熟悉之中
636/1000
排名
3474
昨日变化
17

5

主题

39

帖子

636

积分

Rank: 5Rank: 5

UID
238287
好友
0
蛮牛币
2581
威望
0
注册时间
2017-8-18
在线时间
192 小时
最后登录
2018-9-19
发表于 2018-3-2 07:57:34 | 显示全部楼层
感谢楼主分享······································

回复 支持 反对

使用道具 举报

5熟悉之中
636/1000
排名
3474
昨日变化
17

5

主题

39

帖子

636

积分

Rank: 5Rank: 5

UID
238287
好友
0
蛮牛币
2581
威望
0
注册时间
2017-8-18
在线时间
192 小时
最后登录
2018-9-19
发表于 2018-3-2 07:59:23 | 显示全部楼层
感谢楼主分享······································

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1030/1500
排名
2590
昨日变化
9

0

主题

244

帖子

1030

积分

Rank: 6Rank: 6Rank: 6

UID
83972
好友
2
蛮牛币
359
威望
0
注册时间
2015-3-24
在线时间
270 小时
最后登录
2018-9-18
发表于 2018-3-2 08:27:24 | 显示全部楼层
111111111111111111111111111111111111111111
[发帖际遇]: bigtree 发帖时在路边捡到 1 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

5熟悉之中
756/1000
排名
2762
昨日变化
5

0

主题

60

帖子

756

积分

Rank: 5Rank: 5

UID
231194
好友
0
蛮牛币
2519
威望
0
注册时间
2017-7-10
在线时间
194 小时
最后登录
2018-9-19
发表于 2018-3-2 08:31:42 | 显示全部楼层
感谢分享

回复

使用道具 举报

7日久生情
1568/5000
排名
2472
昨日变化
7

54

主题

381

帖子

1568

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
119735
好友
1
蛮牛币
18025
威望
0
注册时间
2015-8-26
在线时间
601 小时
最后登录
2018-9-17
发表于 2018-3-2 08:37:27 | 显示全部楼层
好想看一看

回复

使用道具 举报

4四处流浪
307/500
排名
6626
昨日变化
4

3

主题

25

帖子

307

积分

Rank: 4

UID
165062
好友
1
蛮牛币
454
威望
0
注册时间
2016-8-31
在线时间
93 小时
最后登录
2018-3-14
发表于 2018-3-2 08:41:56 | 显示全部楼层
厉害啊666666666666
[发帖际遇]: 凉拌面 发帖时在路边捡到 2 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

5熟悉之中
908/1000
排名
3266
昨日变化
15

0

主题

328

帖子

908

积分

Rank: 5Rank: 5

UID
158859
好友
0
蛮牛币
949
威望
0
注册时间
2016-7-26
在线时间
160 小时
最后登录
2018-9-18
发表于 2018-3-2 08:42:56 | 显示全部楼层
发帖艰辛,且阅且珍惜

回复 支持 反对

使用道具 举报

7日久生情
2415/5000
排名
238
昨日变化
1

0

主题

75

帖子

2415

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
9580
好友
1
蛮牛币
6360
威望
0
注册时间
2013-12-4
在线时间
400 小时
最后登录
2018-9-19
发表于 2018-3-2 08:45:30 | 显示全部楼层
666666,謝謝分享

回复

使用道具 举报

3偶尔光临
262/300
排名
7884
昨日变化
3

0

主题

41

帖子

262

积分

Rank: 3Rank: 3Rank: 3

UID
257706
好友
0
蛮牛币
317
威望
0
注册时间
2017-12-4
在线时间
75 小时
最后登录
2018-7-2
发表于 2018-3-2 08:51:43 | 显示全部楼层
谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢

回复 支持 反对

使用道具 举报

5熟悉之中
568/1000
排名
14496
昨日变化
11

1

主题

245

帖子

568

积分

Rank: 5Rank: 5

UID
167799
好友
1
蛮牛币
451
威望
0
注册时间
2016-9-9
在线时间
270 小时
最后登录
2018-9-18
发表于 2018-3-2 09:12:06 | 显示全部楼层
不错不错不错!!!

回复

使用道具 举报

5熟悉之中
599/1000
排名
3847
昨日变化
14

0

主题

71

帖子

599

积分

Rank: 5Rank: 5

UID
179808
好友
0
蛮牛币
769
威望
0
注册时间
2016-11-1
在线时间
172 小时
最后登录
2018-9-18
发表于 2018-3-2 09:13:54 | 显示全部楼层

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

关闭

站长推荐 上一条 /1 下一条

快速回复 返回顶部 返回列表