No.2 杀戮尖塔Godot复刻2卡牌拖动和状态机1|CardUI|BattleUI

ChoSeitaku

已于 2024-11-28 13:53:13 修改

阅读量1.1k

点赞数 19

分类专栏： Godot卡牌肉鸽文章标签： godot 游戏引擎

于 2024-11-28 13:52:36 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/CoderZzz6310/article/details/144109390

版权

Godot卡牌肉鸽专栏收录该内容

2 篇文章

订阅专栏

杀戮尖塔中有两种卡
单一目标卡牌和非单一目标卡牌
使用卡牌方法：

如果按住鼠标左键拖动防御卡并将其释放到屏幕中的某个位置，该卡就会被打出
另一种方法是鼠标左键单击防御卡，不按下左键，将其拖到屏幕中间，再次单击鼠标左键，打出卡牌
取消使用卡牌方法
单击鼠标右键
或者将卡牌往屏幕下方拖拽

创建CardUI节点

卡牌用控制节点来显示，用2D区域来处理卡牌放置区域逻辑

创建新场景
![[Pasted image 20241126221654.png]]

创建用户界面根节点
![[Pasted image 20241126221734.png]]

更名为CardUI
![[Pasted image 20241126221837.png]]

colorRect颜色控件

添加子节点
colorrect
![[Pasted image 20241126221859.png]]

是临时使用的颜色，可以在视觉上区分不同的状态，便于调试
再添加label
![[Pasted image 20241126222100.png]]

调节CardUI的大小
改变layout的transform的size为25的30，比较符合卡牌的大小
![[Pasted image 20241126222621.png]]

确保颜色会继承这个大小
选中color节点，选择整个矩形
![[Pasted image 20241126222700.png]]

![[Pasted image 20241126222738.png]]

可以将颜色变为一个绿色

Label文本控件

选中label节点，输入State
![[Pasted image 20241126222842.png]]

选择水平竖直居中
![[Pasted image 20241126222928.png]]

确保label从父节点继承尺寸
选择整个矩形
![[Pasted image 20241126223019.png]]

创建一个新主题

在根文件夹新建资源
![[Pasted image 20241126223208.png]]

![[Pasted image 20241126223246.png]]

![[Pasted image 20241126223311.png]]

选中新创建的主题
![[Pasted image 20241126223431.png]]

将art文件夹里的字体文件拖到右侧的默认字体的位置
![[Pasted image 20241126223524.png]]

设置默认字体大小为6
![[Pasted image 20241126223634.png]]

为cardUI配置主题
选择CardUI节点，在右侧找到Theme
![[Pasted image 20241126223725.png]]

选择快速加载
![[Pasted image 20241126223819.png]]

字体已经变为目标像素字体
![[Pasted image 20241126223837.png]]

保存场景

保存到scenes的CardUI里
![[Pasted image 20241126224049.png]]

添加区域

添加区域以便能够检测是否在Cardrop区域上方
选择CardUI，创建Area2D子节点
![[Pasted image 20241126224215.png]]

启用第一个检测属性，为了检测是否在卡牌放置区域上方，CardUI会处理这个问题
所以关闭可监控功能
![[Pasted image 20241126224523.png]]

设置图层和遮罩
将图层放在第一层
可以将第一层重命名为卡牌目标选择器
![[Pasted image 20241126224715.png]]

不想与其他的卡牌目标选择器产生冲突
所以将遮罩放在第二层上，将其命名为卡牌放置区域
![[Pasted image 20241126224907.png]]

添加碰撞形状

添加碰撞形状
![[Pasted image 20241126225009.png]]

在右侧添加矩形
![[Pasted image 20241126225058.png]]

使用W改变位置，Q拉伸形状，保证碰撞形状完全覆盖卡片
![[Pasted image 20241126225154.png]]

ctrl+s保存场景

添加carddroparea

添加2D区域

打开Battle场景
添加区域子节点
![[Pasted image 20241126225752.png]]

碰撞层设置为2，因为这是一个carddrop区域
遮罩层设置为1，因为它的目标是卡牌目标选择器层
![[Pasted image 20241126230023.png]]

添加碰撞形状

创建子节点，添加矩形
![[Pasted image 20241126230136.png]]

使其覆盖游戏屏幕的部分，将大小变为256和100
![[Pasted image 20241126230341.png]]

改变位置，输入128和50
![[Pasted image 20241126230453.png]]

![[Pasted image 20241126230514.png]]

ctrl+s保存场景

创建BattleUI

添加画布

选中Battle根节点
![[Pasted image 20241126230709.png]]

确保层数是1，以便将其渲染在游戏的上面
![[Pasted image 20241126230855.png]]

添加HboxContainer横向排列容器

![[Pasted image 20241126231105.png]]

需要添加几张卡牌
选择实例化子场景
![[Pasted image 20241126231353.png]]

添加cardUI
![[Pasted image 20241126231430.png]]

复制3个CardUI
![[Pasted image 20241126231511.png]]

此时无法看清文本和颜色
![[Pasted image 20241126231605.png]]

因为hbox容器正在处理子节点的大小
需要转到CardUI场景设置CardUI节点，此时已经设置大小了，但是不足以用来使用容器
设置节点边界尺寸为25和30
![[Pasted image 20241126231902.png]]

保存场景
![[Pasted image 20241126231957.png]]

更改Hand节点的锚点预设为底部居中
![[Pasted image 20241127223356.png]]

![[Pasted image 20241127223415.png]]

在layout的transform改变大小为150和30
![[Pasted image 20241127223530.png]]

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。