杀戮尖塔中有两种卡
单一目标卡牌和非单一目标卡牌
使用卡牌方法：
- 如果按住鼠标左键拖动防御卡并将其释放到屏幕中的某个位置，该卡就会被打出
- 另一种方法是鼠标左键单击防御卡，不按下左键，将其拖到屏幕中间，再次单击鼠标左键，打出卡牌
取消使用卡牌方法 - 单击鼠标右键
- 或者将卡牌往屏幕下方拖拽
创建CardUI节点
卡牌用控制节点来显示，用2D区域来处理卡牌放置区域逻辑
创建新场景
![![[Pasted image 20241126221654.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMmUxN2EyMjllZmViNDAwM2E1YzM0YmQ0NWJmMzI5OGIucG5n)
创建用户界面根节点
![![[Pasted image 20241126221734.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNmQ0M2IzYjI5MjhjNGM4M2I2ODJiMGI3MTYwNTY5M2YucG5n)
更名为CardUI
![![[Pasted image 20241126221837.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNWRmMWI4NTJiOWQwNDk0YWI1OTA2Y2E0MWQ5Y2UyOTcucG5n)
colorRect颜色控件
添加子节点
colorrect
![![[Pasted image 20241126221859.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNDhhY2QxMjRmYzUxNDE0OGI4NjI0OGI4NGE1YjYyMDIucG5n)
是临时使用的颜色，可以在视觉上区分不同的状态，便于调试
再添加label
![![[Pasted image 20241126222100.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvOTMyOTQ1NGJhNzEzNGFhY2JhOTRjNzc2NjM4M2JlZDcucG5n)
调节CardUI的大小
改变layout的transform的size为25的30，比较符合卡牌的大小
![![[Pasted image 20241126222621.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYmNmMmZhNWQ1ZTBmNDczZDhmNzY2ZmRjMWNiNTkzNzYucG5n)
确保颜色会继承这个大小
选中color节点，选择整个矩形
![![[Pasted image 20241126222700.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZDczMjQyYzBmMDgwNDA5NTk5MjgwNTEyMTRkZGRiZTEucG5n)
![![[Pasted image 20241126222738.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZGQwZTMzZTVhNzhjNGQyNWE3NmNjMDI5Nzg5MWYzN2IucG5n)
可以将颜色变为一个绿色
Label文本控件
选中label节点，输入State
![![[Pasted image 20241126222842.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYzMyODNiZjljM2RmNGFmZDhiZWIxYzAwNzRlMDk0NDcucG5n)
选择水平竖直居中
![![[Pasted image 20241126222928.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYzJjZDhhZDQ4YTA0NGRkNmI4MmVlNWZiYWJjYjRkZWIucG5n)
确保label从父节点继承尺寸
选择整个矩形
![![[Pasted image 20241126223019.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNTRlNWM0YTJhNDY1NGI1Yzk5ZjdhYzAxOTQ5ZjhlNzgucG5n)
创建一个新主题
在根文件夹新建资源
![![[Pasted image 20241126223208.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNzU0ZDBjODllNWEzNDYxZGI0ODljZTZhNGIxNmI2MmIucG5n)
![![[Pasted image 20241126223246.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZTg3NThkMzNkZTVmNDQ2Mzg3YjhjMjM3OGI5NmE4YzAucG5n)
![![[Pasted image 20241126223311.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNmM3OTVmNGZlNThiNDI1NGJmODIzNDIzM2IzOTA1NzAucG5n)
选中新创建的主题
![![[Pasted image 20241126223431.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvN2IwNWVkNWRiNDQ1NDYyMmE2NmM4MzE1YzQ5NTAzZmIucG5n)
将art文件夹里的字体文件拖到右侧的默认字体的位置
![![[Pasted image 20241126223524.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZWIxNTNkNmY3OTBjNDBjZWI0Mzg4OGVkOTIzNDljMGIucG5n)
设置默认字体大小为6
![![[Pasted image 20241126223634.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYTM4ZjA5MDBlZjM3NDY2YjhiMGIyMmY4MGVhZWZmNTkucG5n)
为cardUI配置主题
选择CardUI节点，在右侧找到Theme
![![[Pasted image 20241126223725.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMjNmZjQyY2UwMGI1NDI2OGFmYTJhMjExOTJhZjY4NmMucG5n)
选择快速加载
![![[Pasted image 20241126223819.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZGVmZTgyYTNlMTNkNDljNDg2MzQwMTRiYTBhMDc5MGIucG5n)
字体已经变为目标像素字体
![![[Pasted image 20241126223837.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMzY5ZGY0OTY1YzU0NDI0NTk0NjQ5MzNlNzJkMDdlNjQucG5n)
保存场景
保存到scenes的CardUI里
![![[Pasted image 20241126224049.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZmY0OTgwZmMyNTM4NGMyNmI5MWExNjdmMDRkMzYxZmEucG5n)
添加区域
添加区域以便能够检测是否在Cardrop区域上方
选择CardUI，创建Area2D子节点
![![[Pasted image 20241126224215.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNzE3ODIyODY1YjRhNGQ5M2FjYWFkM2I3MWY0ODQ3OTgucG5n)
启用第一个检测属性，为了检测是否在卡牌放置区域上方，CardUI会处理这个问题
所以关闭可监控功能
![![[Pasted image 20241126224523.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMDY4MzkxOTkzNGRlNGQ5M2JiNzc5M2JiOGRlYTU3OTEucG5n)
设置图层和遮罩
将图层放在第一层
可以将第一层重命名为卡牌目标选择器
![![[Pasted image 20241126224715.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZDE1MmZlZDdmNjIzNGE0ODgxZDkyYjE0OWQ4ZDk1MDQucG5n)
不想与其他的卡牌目标选择器产生冲突
所以将遮罩放在第二层上，将其命名为卡牌放置区域
![![[Pasted image 20241126224907.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYzExMjAzMTRmNjU0NGQ5ZmFhOTY4YTI3NjlhNDI4NGMucG5n)
添加碰撞形状
添加碰撞形状
![![[Pasted image 20241126225009.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZjhjNmJiMjBiMjBmNDAyNDk1YTUxM2JmNDc0ZmYxY2IucG5n)
在右侧添加矩形
![![[Pasted image 20241126225058.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZjZhNDYzNGViODljNGE5MWJhYTZiNzkzMTY1Njc5ZTYucG5n)
使用W改变位置，Q拉伸形状，保证碰撞形状完全覆盖卡片
![![[Pasted image 20241126225154.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYjNmODA3NzNkNTgzNGJjZmJkZDc2NmQwMzg4YzJhYTYucG5n)
ctrl+s保存场景
添加carddroparea
添加2D区域
打开Battle场景
添加区域子节点
![![[Pasted image 20241126225752.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvY2MzNTAwZDRjNThhNGNmOWIxYzg5NTc1OTUwNDdhNGYucG5n)
碰撞层设置为2，因为这是一个carddrop区域
遮罩层设置为1，因为它的目标是卡牌目标选择器层
![![[Pasted image 20241126230023.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNTY0MDMyZWU0ZjM3NDhhN2JhZmU4YWJhOWIwYTY0MjAucG5n)
添加碰撞形状
创建子节点，添加矩形
![![[Pasted image 20241126230136.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMTQ1YWE5MTgzNGM5NGI5YjgwYzM2Y2RmYTM1NjlmOWQucG5n)
使其覆盖游戏屏幕的部分，将大小变为256和100
![![[Pasted image 20241126230341.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvODVmMTkyOGNjN2EwNDA1Mzg3NjM4NzE5MjAyNDhlMmUucG5n)
改变位置，输入128和50
![![[Pasted image 20241126230453.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMTMyYWY4MmY0YWQzNDgwZGFmM2E5ZTI2NDg2MWEzMGUucG5n)
![![[Pasted image 20241126230514.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNjI4OTIyNDhjN2EyNDA2Zjg2YjRkNTMyYzM2ZTBlYzIucG5n)
ctrl+s保存场景
创建BattleUI
添加画布
选中Battle根节点
![![[Pasted image 20241126230709.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNjIyMmM0ZTkxNDdlNDRiNmE2NDQ1YWRiOWVkYThiMWIucG5n)
确保层数是1，以便将其渲染在游戏的上面
![![[Pasted image 20241126230855.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYjIyMDc3NGM4ZDgzNDJmMGE4OTRmMjA5ODMwMjY1YWYucG5n)
添加HboxContainer横向排列容器
![![[Pasted image 20241126231105.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMTI3NzliZTY0YzExNDRkMmEwYTYyYTc1MWM3OWYwMWUucG5n)
需要添加几张卡牌
选择实例化子场景
![![[Pasted image 20241126231353.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYzhiOGEwY2JiZDcwNDdmNmFlN2I5M2JmMzFmOTYzYTMucG5n)
添加cardUI
![![[Pasted image 20241126231430.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvODllMGI2YmYwODJhNDYyODkyZTk2M2UzODdlNDVlOGUucG5n)
复制3个CardUI
![![[Pasted image 20241126231511.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZmU4NmM1ODljMTJiNDBkMjkyZTBjMzgxODZjOWM5MWEucG5n)
此时无法看清文本和颜色
![![[Pasted image 20241126231605.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMmJjZjRkYzM4YWIzNGVjNDg5MzUzYzBjYjBjMTlhMzIucG5n)
因为hbox容器正在处理子节点的大小
需要转到CardUI场景设置CardUI节点，此时已经设置大小了，但是不足以用来使用容器
设置节点边界尺寸为25和30
![![[Pasted image 20241126231902.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvODFlZjY5MmZkOGU3NDJlM2IwOTBlZmU2M2E3ZTBiZDQucG5n)
保存场景
![![[Pasted image 20241126231957.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNDkxMDIxZDRiN2YxNDE0YzgwNzhjNTA2ZGEwZGEwOTAucG5n)
更改Hand节点的锚点预设为底部居中
![![[Pasted image 20241127223356.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNjAyYzMwOGNjMzFiNDIzNWEwOWFjYmZhMTc5ZDZkMTEucG5n)
![![[Pasted image 20241127223415.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZWU3ZTZjODQwZTQ0NDg3N2I3ZTJiNzc1OWFmYWQ5MjUucG5n)
在layout的transform改变大小为150和30
![![[Pasted image 20241127223530.png]]](/image/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvYzE0ODFhMDU2NjE1NGIxYjgzYjVkOGE5MWI2MzBmZWYucG5n)