【游戏技术群】959392658  【游戏出海群】12067810
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2438

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

查看: 7439|回复: 330

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

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

120

主题

558

帖子

6883

积分

Rank: 9Rank: 9Rank: 9

UID
3579
好友
108
蛮牛币
5146
威望
0
注册时间
2013-9-10
在线时间
1476 小时
最后登录
2019-3-20

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

1

主题

631

帖子

7280

积分

Rank: 8Rank: 8

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

回复 支持 反对

使用道具 举报

5熟悉之中
918/1000
排名
2666
昨日变化
6

1

主题

48

帖子

918

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

0

主题

13

帖子

17

积分

Rank: 1

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

回复

使用道具 举报

5熟悉之中
934/1000
排名
2285
昨日变化
10

5

主题

43

帖子

934

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

5熟悉之中
934/1000
排名
2285
昨日变化
10

5

主题

43

帖子

934

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1323/1500
排名
1837
昨日变化
2

0

主题

254

帖子

1323

积分

Rank: 6Rank: 6Rank: 6

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

回复 支持 反对

使用道具 举报

5熟悉之中
876/1000
排名
2501
昨日变化
2

0

主题

66

帖子

876

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

7日久生情
1694/5000
排名
2324
昨日变化
1

59

主题

394

帖子

1694

积分

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

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

回复

使用道具 举报

4四处流浪
323/500
排名
6773
昨日变化

3

主题

26

帖子

323

积分

Rank: 4

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

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1377/1500
排名
1803
昨日变化
6

0

主题

374

帖子

1377

积分

Rank: 6Rank: 6Rank: 6

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

回复 支持 反对

使用道具 举报

7日久生情
2733/5000
排名
192
昨日变化
1

0

主题

76

帖子

2733

积分

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

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

回复

使用道具 举报

3偶尔光临
277/300
排名
8079
昨日变化
4

0

主题

48

帖子

277

积分

Rank: 3Rank: 3Rank: 3

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

回复 支持 反对

使用道具 举报

5熟悉之中
586/1000
排名
15022
昨日变化
2

1

主题

249

帖子

586

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

5熟悉之中
946/1000
排名
2432
昨日变化
11

0

主题

96

帖子

946

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

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

本版积分规则

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