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

扫一扫,访问微社区

开发者专栏

关注:2370

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

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

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

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

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

116

主题

552

帖子

6748

积分

Rank: 9Rank: 9Rank: 9

UID
3579
好友
106
蛮牛币
4668
威望
0
注册时间
2013-9-10
在线时间
1439 小时
最后登录
2018-12-6

专栏作家社区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常驻蛮牛
6716/10000
排名
29
昨日变化

1

主题

558

帖子

6716

积分

Rank: 8Rank: 8

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

回复 支持 反对

使用道具 举报

5熟悉之中
791/1000
排名
3151
昨日变化
2

1

主题

47

帖子

791

积分

Rank: 5Rank: 5

UID
213756
好友
3
蛮牛币
2024
威望
0
注册时间
2017-3-22
在线时间
291 小时
最后登录
2018-12-10
发表于 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熟悉之中
764/1000
排名
2886
昨日变化

5

主题

42

帖子

764

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

5熟悉之中
764/1000
排名
2886
昨日变化

5

主题

42

帖子

764

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1167/1500
排名
2226
昨日变化
1

0

主题

253

帖子

1167

积分

Rank: 6Rank: 6Rank: 6

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

回复 支持 反对

使用道具 举报

5熟悉之中
818/1000
排名
2595
昨日变化
1

0

主题

62

帖子

818

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

7日久生情
1699/5000
排名
2234
昨日变化

59

主题

394

帖子

1699

积分

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

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

回复

使用道具 举报

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

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 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1120/1500
排名
2486
昨日变化
7

0

主题

354

帖子

1120

积分

Rank: 6Rank: 6Rank: 6

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

回复 支持 反对

使用道具 举报

7日久生情
2576/5000
排名
214
昨日变化

0

主题

76

帖子

2576

积分

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

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

回复

使用道具 举报

3偶尔光临
273/300
排名
7918
昨日变化
1

0

主题

47

帖子

273

积分

Rank: 3Rank: 3Rank: 3

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

回复 支持 反对

使用道具 举报

5熟悉之中
583/1000
排名
14619
昨日变化
3

1

主题

249

帖子

583

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

5熟悉之中
775/1000
排名
3016
昨日变化
13

0

主题

85

帖子

775

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

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

本版积分规则

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