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

news/2024/11/29 7:09:27/

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

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

创建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]]


http://www.ppmy.cn/news/1550843.html

相关文章

Django websocket 进行实时通信（消费者）

Django websocket 进行实时通信（消费者）

1. settings.py 增加 ASGI_APPLICATION "django_template_v1.routing.application"CHANNEL_LAYERS {"default": {# This example apps uses the Redis channel layer implementation channels_redis"BACKEND": "channels_redis.core.Red…
阅读更多...
代码随想录算法训练营第六十天|Day60 图论

代码随想录算法训练营第六十天|Day60 图论

Bellman_ford 队列优化算法（又名SPFA） https://www.programmercarl.com/kamacoder/0094.%E5%9F%8E%E5%B8%82%E9%97%B4%E8%B4%A7%E7%89%A9%E8%BF%90%E8%BE%93I-SPFA.html 本题我们来系统讲解 Bellman_ford 队列优化算法 ，也叫SPFA算法&#xf…
阅读更多...
Zookeeper学习心得

Zookeeper学习心得

本人学zookeeper时按照此文路线学的 Zookeeper学习大纲 - 似懂非懂视为不懂 - 博客园 一、Zookeeper安装 ZooKeeper 入门教程 - Java陈序员 - 博客园 Docker安装Zookeeper教程（超详细）_docker 安装zk-CSDN博客 二、 zookeeper的数据模型 ZooKeepe…
阅读更多...
免费下载 | 2024年中国网络安全产业分析报告

免费下载 | 2024年中国网络安全产业分析报告

《2024年中国网络安全产业分析报告》由中国网络安全产业联盟（CCIA）发布，主要内容包括： 前言：强调网络安全是国家安全的重要组成部分，概述了中国在网络安全治理方面的进展和挑战。 网络安全产业发展形势&am…
阅读更多...
【linux】（21）进程端口排查-fuser

【linux】（21）进程端口排查-fuser

fuser 是一个用于显示进程使用的文件、套接字或端口的 Linux 命令。它可以帮助诊断某个文件、目录、端口或设备被哪个进程占用。 基本语法 fuser [选项] 文件或端口常用选项 选项说明-a显示所有指定文件或端口的进程信息。-k杀死占用指定文件或端口的进程。-i在杀死进程前询问…
阅读更多...
机器学习-决策树（ID3算法及详细计算推导过程）

机器学习-决策树（ID3算法及详细计算推导过程）

决策树是一种基于树结构进行决策的机器学习算法 ，以下是关于它的详细介绍： 1.基本原理 决策树通过一系列的条件判断对样本进行分类或预测数值。它从根节点开始，根据不同的属性值逐步将样本划分到不同的分支，直到到达叶节点&…
阅读更多...
【C++】简单数据类型详解

【C++】简单数据类型详解

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯字符型（char）1.1 ASCII 码表 💯整型（int）2.1 整型的分类2.2 有符号和无符号整型2.3 跨平台差异2.4 整型数据类型…
阅读更多...
Android获取状态栏、导航栏的高度

Android获取状态栏、导航栏的高度

Android获取状态栏的高度： 方法一：通过资源名称获取， getDimensionPixelSize，获取系统中"status_bar_height"的值，方法如下： Java： public static int getStatusBarHeight(Context…
阅读更多...
最新文章

Copyright @ 2022~2023