godot一种基于TextureRect实现宽高等比缩放效果

哈喽大家好久不见～ 我是阿猫瑞斯！距上期视频更新已经隔了挺久啦，这次换个形式，带来一篇实用技术专栏 —— 教大家用 TextureRect 实现宽高等比适配效果～

之前想做这个功能时，我在网上翻了好多教程，却一直没找到针对性的解决方案，最后只能自己一点点摸索着实现出来。不过先说明下，这个方法应该不是最优解，只是我目前摸索出的可行方案～ 如果屏幕前的你有更简洁、高效的实现思路，欢迎在评论区告诉我，一起交流优化呀！封面左下角的铸币大头如果你们有其他的图片也可以发给我，下一期我会挂在左下角。

我们先去鸡窝抓5个小孩

实现后的效果大概是这样的

结构逻辑也非常简单，就是一个Container包了几个textureRect

然后GridContainer为5列

问题背景

在不确定宽高条件下，我们需要使五个小孩充满宽度，所以我们可以使用TextureRect的ContainerSizing的Horizontal设为填充扩展

但是这会造成一个bug，我们的小孩只被拉长了，并没有变高（苦呀西）

基础实现

那我们可以如何解决这个问题呢？

没错，可以使用Expand Mode：Fit Height来让他的宽高维持等比（有个前置条件，它是跟随图片的比例，所以要1:1的效果首先你的图片要1：1）

正文

但是，你以为这篇文章到这就结束了嘛，nonono，其实才刚刚开始

如果我们没有特定宽高的图片怎么办呢，比如像下面这样

假设有五个随机内容，我们又没有图片应该怎么办呢

实现

我们可以直接设置一个空的ImageTexture用来占位，它默认是1:1

然后我们在它的子元素里设置什么都可以啦，因为TextureRect主要用于缩放，所以子元素设为矩形锚点他就会自己缩放大小了

小记

我试了ReferenceRect，AspectRatioContainer均不行，也有可能是我实现的有问题，ReferenceRect仅用于测试，AspectRatioContainer只会拉伸子元素的图片，并不会在布局层面拉伸