【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 updatevoid Start(){btnImage = GetComponent<Image>();btnImage.alphaHitTestMinimumThreshold = 0.5f;}
}

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;

方法二 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。如果你遇到任何问题,也欢迎你评论私信找我, 虽然有些问题我可能也不一定会,但是我会查阅各方资料,争取给出最好的建议,希望可以帮助更多想学编程的人,共勉~
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/190451.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

头歌 MySQL数据库 - 初识MySQL

本章内容是为了完成老师布置的作业&#xff0c;同时也是为了以后考试的时候方便复习。 数据库部分一条一条的写&#xff0c;可鼠标手动粘贴&#xff0c;除特定命令外未分大小写。 第1关&#xff1a;创建数据库 在操作数据库之前&#xff0c;需要连接它&#xff0c;输入命令&a…

基于DOTween插件实现金币飞行到指定位置功能

文章目录 前言一、DOTween是什么&#xff1f;二、使用步骤1.导入DOTween插件在Unity官方插件商店找到DOTween插件导入DOTween插件启用DOTween插件 2.代码逻辑金币飞行代码控制飞行效果代码 3.物体配置1.物体上装配CoinEffect脚本2.在金币预制体上装配FlyControl脚本 三、效果展…

【Java SE】继承

学习完了类之后&#xff0c;我们将继续学习一个Java中的重点内容“继承” 继承 1.1 为什么需要继承 举例&#xff1a; 在Cat类中和Dog类中我们发现有很多一样的地方&#xff0c;这样写太浪费空间和内存了 我们可以把它相同的地方都用一个类来表示&#xff0c;并且使用它1.2 继…

IPSecGRE

IPSec&GRE 手工方式建立IPSec隧道组网实验拓扑配置步骤第一步配置IP地址第二步配置静态路由第三步配置IPSec 抓包测试 GRE Over IPSec功能的配置组网实验拓扑配置命令 配置GRE使用静态路由组网图实验拓扑配置步骤1.配置RouterA2.配置RouterB3.配置RouterC4.验证配置结果 手…

Wordpress页面生成器:Elementor 插件制作网站页面教程(图文完整)

本文来教大家怎么使用Wordpress Elementor页面编辑器插件来自由创建我们的网页内容。很多同学在面对建站的时候,一开始都是热血沸腾信心满满的,等到实际上手的时候就会发现有很多问题都是无法解决的,希望本篇Elementor插件使用指南能够帮助到你。 Wordpress Elementor页面编…

git拉取普通idea Java项目module没有build的问题

在不断完成一个项目的时候&#xff0c;会有不断新加的module&#xff0c;我们用git拉取时会发生没有识别新module的情况。 解决方法是右键项目名称&#xff0c;然后点击Open Module Settings 接下来&#xff0c;点击Module&#xff0c;加号&#xff0c;新建Module的名字就是在g…

LeetCode47-全排列II-剪枝逻辑

参考链接: &#x1f517;:卡尔的代码随想录:全排列II 这里第一层,used只有一个元素为1,代表只取出了1个元素作为排列,第二层used有两个元素为1,代表取出了2个元素作为排列,因为数组有序,所以重复的元素都是挨着的,因此可以使用如下语句去重. 其中visit[i-1]False的话,就是代表…

教程:使用 Keras 优化神经网络

一、介绍 在 我 之前的文章中&#xff0c;我讨论了使用 TensorFlow 实现神经网络。继续有关神经网络库的系列文章&#xff0c;我决定重点介绍 Keras——据说是迄今为止最好的深度学习库。 我 从事深度学习已经有一段时间了&#xff0c;据我所知&#xff0c;处理…

Vue项目

使用vs打开Vue项目 运行&#xff1a; 终端命令&#xff1a; npm run serve初次打开的是App.vue页面 修改服务器端口 vue.config.js const { defineConfig } require(vue/cli-service) module.exports defineConfig({transpileDependencies: true,devServer: { //增…

Pycharm中添加Python库指南

一、介绍 Pycharm是一款为Python开发者提供的集成开发环境&#xff08;IDE&#xff09;&#xff0c;支持执行、调试Python代码&#xff0c;并提供了许多有用的工具和功能&#xff0c;其中之一就是在Pycharm中添加Python库。 添加Python库有许多好处&#xff0c;比如能够增加开…

Spring 设计模式-简洁版

Java 中包括以下设计模式&#xff1a; 其中Spring 用到的设计模式 1.简单工厂-BeanFactory 2.工厂方法FactoryBean 3.单例模式Bean实例 4.适配器模式SpringMVC中的HandlerAdatper 5.装饰器模式BeanWrapper 6.代理模式_AOP底层 7.观察者模式-spring的事件监听 8.策略横式exclud…

2、LeetCode之两数相加

给你两个非空的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照逆序的方式存储的&#xff0c;并且每个节点只能存储一位数字。请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。你可以假设除了数字0之外&#xff0c;这两个数都不会以0开头。 输入&am…