码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 【Unity小技巧】图片使用的一些常见问题


    文章目录

    • 前言
    • Button不规则按钮点击空白区域不响应点击事件
      • 1. 设置资源参数
      • 2. 代码设置按钮Image的alphaHitTestMinimumThreshold
      • 3. 解释:
      • 4. 效果
    • Unity Image 原图比例控制
      • 方法一 Preserve Aspect
        • 1. 设置勾选Preserve Aspect(保持长宽比),控制图片渲染保持本身比例,它会根据rectTranform 的width 和 height 计算能保持比例的最大渲染尺寸。
        • 2. 效果
        • 3. 代码控制
      • 方法二 Aspect Ratio Fitter
        • 1. 添加Aspect Ratio Fitter组件
        • 2. height controls width的效果,其他效果可以自行去测试
    • 使图片拉伸不变形
      • 第一步:打开Sprite Editor
      • 第二步:按住图片边缘上的绿色小点,往中间拖
      • 第三步:在image中,将Image Type中的Simple改为Sliced(已切片)。
    • 参考
    • 完结

    前言

    图片无疑在游戏中是非常常用的,但是不注意也会遇到很多问题,这篇文章就是记录我踩的很多图片坑,总结出来,希望对大家有帮助

    Button不规则按钮点击空白区域不响应点击事件

    我们在制作UGUI的时候经常会遇到需要精准点击不规则按钮或有部分透明区域的按钮的情况,但如果是正常创建Button的话,空白区域也会响应点击事件,因为我们的图片基本都是占用的矩形区域,如下:
    在这里插入图片描述
    这时候我们就能通过设置一些参数,来不响应透明区域的点击

    1. 设置资源参数

    开启资源的Read/Write Enabled
    在这里插入图片描述

    2. 代码设置按钮Image的alphaHitTestMinimumThreshold

    获取按钮控件下的Image脚本,设置Image脚本的alphaHitTestMinimumThreshold参数

    public class ButtonTest : MonoBehaviour
    {
        private Image btnImage;
        // Start is called before the first frame update
        void Start()
        {
            btnImage = GetComponent<Image>();
            btnImage.alphaHitTestMinimumThreshold = 0.5f;
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    3. 解释:

    当设置了 alphaHitTestMinimumThreshold 后,它会影响View的点击测试。具体来说,如果一个View的 alpha 值低于这个阈值,那么即使它在屏幕上显示出来,它也不会响应点击事件。这个特性可以用于在一些特定的场景中,提高用户体验,比如当某个View的透明度很低时,可能希望用户不能点击它,这时就可以利用这个属性来实现。

    需要注意的是,这个属性在不同的Android版本中可能会有不同的行为,因此在使用时需要仔细测试和考虑兼容性。

    4. 效果

    在这里插入图片描述

    Unity Image 原图比例控制

    Image图片在使用的时候,我们总希望它保持本身比例,这样美术图片就不会变形了。
    比如一个图片被压缩了
    在这里插入图片描述

    方法一 Preserve Aspect

    1. 设置勾选Preserve Aspect(保持长宽比),控制图片渲染保持本身比例,它会根据rectTranform 的width 和 height 计算能保持比例的最大渲染尺寸。

    在这里插入图片描述

    2. 效果

    在这里插入图片描述
    如图中,图片比例是1:1,rectTranform的width大于height,因此渲染尺寸的height为rectTransform的height。

    渲染高度就无法填充整个width。所以左右有空白。

    这个使用有问题就是,如果子物体以image的左上为锚点。那么位置可能就会有偏差了。

    3. 代码控制

    [SerializeField] private Image ItemSprite; // 物品图像的引用
    
    ItemSprite.preserveAspect = true;
    
    • 1
    • 2
    • 3

    方法二 Aspect Ratio Fitter

    1. 添加Aspect Ratio Fitter组件

    在这里插入图片描述
    这个控制的是recttranform的size。

    width Controls height 就是通过width为基准,用aspectRatio计算height,height自身不能调整

    height controls width 就是通过height为基准,用aspectRatio计算width,width自身不能调整

    Fit InParent是以父物体的size为基准,计算widht和height最大值,和Preserve Aspect计算方式差不多,但是修改了rectTransform的size,而且锚点是随父物体缩放的。图片永远在父物体内部

    Envelope Parent 是以父物体的size为基准,图片会以最小大小,覆盖父物体,可以做背景图片。

    2. height controls width的效果,其他效果可以自行去测试

    在这里插入图片描述

    使图片拉伸不变形

    如果经常做对话框之类的,经常就会遇到这个问题

    【解决前效果】
    在这里插入图片描述

    【解决后效果】
    在这里插入图片描述

    解决方法:

    第一步:打开Sprite Editor

    在这里插入图片描述

    第二步:按住图片边缘上的绿色小点,往中间拖

    在这里插入图片描述
    拖成如下效果,其中中间绿色框围成的区域就是变形的区域。
    在这里插入图片描述

    点击Apply保存。

    第三步:在image中,将Image Type中的Simple改为Sliced(已切片)。

    在这里插入图片描述

    最后调节Width和Height的参数即可

    参考

    【文章】https://blog.csdn.net/qq_18809975/article/details/117161624

    完结

    赠人玫瑰,手有余香!如果文章内容对你有所帮助,请不要吝啬你的点赞评论和关注,以便我第一时间收到反馈,你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法,也欢迎评论私信告诉我哦!

    好了,我是向宇,https://xiangyu.blog.csdn.net

    一位在小公司默默奋斗的开发者,出于兴趣爱好,于是最近才开始自习unity。如果你遇到任何问题,也欢迎你评论私信找我, 虽然有些问题我可能也不一定会,但是我会查阅各方资料,争取给出最好的建议,希望可以帮助更多想学编程的人,共勉~
    在这里插入图片描述

  • 相关阅读:
    React Native调用摄像头画面及拍照和保存图片到相册全流程
    拖动排序与置顶的Java实现
    【洛谷 P5717】【深基3.习8】三角形分类 题解(数学+分支)
    应用在汽车发动机温度检测中的高精度温度传感芯片
    【表情包分享】国庆假期结束了,该上班了,来分享一下你的表情包吧!
    Redis基础知识解答
    诺顿杀毒软件设置日常设置及防火墙配置(图文)
    HDFS学习笔记(三):HDFS 分布式文件系统原理
    华为云云耀云服务器L实例使用教学:快速安装mysql
    GBASE 8A v953报错集锦61--集群扩容过程中有节点 offline 是否会有影响
  • 原文地址:https://blog.csdn.net/qq_36303853/article/details/134474154
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号