unity UGUI九宫格纹理拉伸的使用

本篇文章我们来学习下在unity new ui即UGUI九宫格纹理拉伸的使用,不论是游戏中的UI,还是应用中的UI,纹理九宫格拉伸都是必不可少的,因为采用这种拉伸方式,可以最大化的节省纹理资源,任意缩放图片还能保持一个不错的效果,因此在手游和app中用的较多。我们先学习下九宫格拉伸的原理先,如下图所示!

1.原理

把纹理用4条线分割成9部分(如上图),通过观察可以发现,5是最规则的形状(矩形),其次是2,6,8,4(矩形,但是和四个角有公共边),最后是四个角1,3,9,7(圆角矩形)

规则的图形在拉伸之后的效果是比较好的,如果是不规则的图形,则会在拉伸之后变形!

根据上图做拉伸制定规则:

(1)保证四个角1,3,9,7不做任何拉伸
(2)与四个角有公共边的四个矩形2,6,8,4做单向拉伸,即保证与四个角的公共边不拉伸,例如2,8只进行横向拉伸,4,6只进行纵向拉伸
(3)中间部分5做双向拉伸,即横向,纵向同事拉伸

下面就讲讲Unity3d中使用ugui中如何使用九宫格:

选中纹理资源,点击下图中红框按钮,打开sprite编辑器:

设置sprite的边界,其中蓝色的为可用图片边界,绿色线则为九宫格的裁剪线,初始时,蓝色和绿色重叠,鼠标放在下图中绿色节点上即可编辑九宫格裁剪线:

设置好图片后,就可以把sprite赋值给ui,看效果去了,并将图片类型选择为sliced,还要记得勾上Fill Center,你可以试试不勾选看看效果:

然后你就能看到的效果:

好吧,绿色线条的作用知道了,现在就看看蓝色线条的作用吧。。

看到了吧,蓝色线条是对图片做裁剪的,当然一张图片上可以有多个裁剪图,每个裁剪图可以有一个九宫格。但是sprite就需要改成multiple咯。

最终,本文想说的其实是我自己遇到的一个坑。希望后来的人能轻松解决:

其实unity3d的九宫格一直都知道怎么用,但是突然我发现我用不了,操作步骤也没错,弄了一下午头都大了。结果我靠搜索技术,在这篇博客上发现了一点儿蛛丝马迹然后解决了问题:

修改下面红色地方的参数,默认是100

各位应该是看到区别了,当canvas或者是图片的每单位多少像素修改后,图片大小显示大小其实是不一样的。如果图片设置为10,canvas设置为100,那就相当于九宫格中非中心的图片区域大小缩放了10倍,而我由于测试过canvas参数,将其改为1,后来见没效果,没有改为100,结果可想而知,我所有九宫格在sliced模式下,只能看到九宫格中心区域。如果不仔细看,边缘区域根本不可见。

至此,我的问题解决了,相信大家也会使用unity3d中UGUI的九宫格了。

好了本篇unity3d教程到此结束,下篇我们再会!

(0)

相关推荐

  • 菜鸟记353-九宫格图片轻松制作,继续推荐WPS的图片应用

    万一您身边的朋友用得着呢? 各位朋友早上好,小菜继续和您分享经验之谈,截止今日小菜已分享400+篇经验之谈,可以文章编号或关键词进行搜索 以下才是今天的正式内容-- 摘要:本文介绍通过WPS图片小程序 ...

  • ppt如何将图片分割成九宫格或十六宫格的效果?

    ppt如何将图片分割成九宫格或十六宫格的效果?

  • 2021年元旦快乐朋友圈九宫格

    咱俩不熟推荐搜索 网名 表情 壁纸 头像 文案 情侣 长按图片保存   点击图片放大 图片高清,建议在 W i f i 下浏览 文丨图 部分源于网络 | 侵删

  • 菜鸟记289-如何将图片裁剪成九宫格图片?

    万一您身边的朋友正好用得着呢? 关键词:ZhuoMiCutPictureX9软件:一个木函:裁剪图片:操作难度*** 郑重声明:本文仅为传递更多信息,小菜没有从所介绍的软件中获得任何利益,本人不承担您 ...

  • E 自然纹理 1水渍画(动物)

    这组自然纹理,是浴盆中的风景,来自浴盆水中的偶然发现.有一段时间,区域自来水管道被挖断,等重新修好正常供水,水渍较多,我发现其中的纹理很好看,再用滴水略加雕琢,形成了这个有动物主题形象的系列.所谓苦中 ...

  • 哪些瑜伽体位可以有效地拉伸脊柱?

    我在前面发的一篇文章中(点这里读此文) 讲了我们练习瑜伽要注意脊柱的延伸,所谓脊柱的延伸就是在不失去脊柱原有的弧度的基础上增加脊柱椎体之间的空间.我们在瑜伽体位法的所有练习中都要有这样的意识.但是有几 ...

  • 【手牵手运动】下肢关节的活动与拉伸

    类风湿关节炎患者进行下肢关节活动与拉伸的练习,可以改善下肢关节的活动范围,减轻下肢肌群的僵硬,提升下肢肌肉的弹性,积极预防下肢的功能障碍,提升下肢关节的功能水平. 本课程指导大家在站立的姿态下进行下肢 ...

  • E 自然纹理 2雨渍画(山水)

    观众可能以为这是水墨山水,其实不是,这是学校塑胶操场,一场大雨后的效果,黑的是胶粒,白的细沙.                                         pingpu

  • 人才盘点“九宫格”结果落地实践

    人才盘点中大家经常见到绩效潜力组成的九宫格,其实在盘点中还有其他要素进行评价,如有绩效.潜力.胜任度/能力.准备度. 绩效:员工的投入产出结果 潜力:员工将来能够做好事情的可能性 胜任度:员工的能力和 ...

  • 赶紧停止吧!还在做毁腿式拉伸吗?

    赶紧停止吧!还在做毁腿式拉伸吗?

  • 完美修长的芭蕾身材解密!芭蕾拉伸,最美最好最优雅的运动!

    [舞蹈中国] Z美女演出前的拉伸和热身 拉伸是芭蕾舞者每天必不可少的环节,这可以让肌肉放松和身体更加修长.芭蕾的专业术语"tendu"的解释为:拉伸,拉长! Tendu 是整条腿的 ...

  • 34张肌肉拉伸图解

    骆驼式这个姿势最适合那些柔韧性较好的人能伸展的肌肉是腹直肌和外斜肌 前屈式这个姿势能很好地伸展你的臀部同时能拉伸内收肌和腿筋 蛙式拉伸内收肌群 侧弓步拉伸内收肌群 蝴蝶式拉伸内收肌群 前臂伸直肌拉伸伸 ...

  • 练好太极拳,须有一个拉伸筋骨的过程!

    古人云:外练筋骨皮,内练一口气.练习太极拳如果按照动作的外形去做,那就和广播操没什么区别了,只是用肌肉来挥挥手踢踢腿而已,所以,能够做到筋骨练习的才是真正的太极拳! 一.筋骨练习,说归说,练归练. 首 ...