【Godot4.2】圆环绘制思路以及函数

已于 2024-04-20 15:55:28 修改
阅读量442 收藏 6
点赞数 6
分类专栏： Godot4.x 几何与绘图 文章标签： godot gdscript CanvasItem 绘图函数 圆环
于 2024-04-20 15:27:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/graypigen1990/article/details/138000806
版权

概述

在Godot的CanvasItem中没有办法直接绘制圆环，利用Geometry2D进行两个圆的布尔运算也无法实现。所以只能另想办法。

这个问题其实想了有一段时间了，脑海中也早就有了解决方案，以及料想到可能存在的问题。昨天因为QQ群群友的提问，于是就直接试验了一下，结果就有了本文。

两种思路

对于在Godot中绘制圆环，我自己想到两种办法。办法1是将圆环理解为若干梯形围绕原点环形阵列：
将圆环理解为梯形的环形阵列

  • 这种思路的好处是，通过求一个小梯形，然后旋转变换，就可以绘制出圆环的形状。
  • 而且这种方式可以很方便的用颜色插值做出渐变色环效果。

另一种思路是将整个圆环做成一个留有一条极小缝隙的多边形：
将圆环理解为留有一条缝的多边形

  • 这种方法获得的圆环一体性强，可以直接作为单个多边形绘制，顶点数目也相较第一种方式少
  • 但缺点是可能是做颜色渐变效果可能会有些不方便

两种方法各有优缺点吧。本文就介绍这两种思路下的圆环点求解和绘制思路。

整体圆环点求取函数

我首先实现了第2种方法的点求取函数，代码如下：

# 圆环点求取函数
func ring(r1:float,r2:float,edges:int = 3,start_angle:=0.0,end_engle:=360.0) -> PackedVector2Array:
	var points:PackedVector2Array   # 圆环的顶点
	var v1 = (Vector2.RIGHT * r1).rotated(deg_to_rad(start_angle))
	var v2 = (Vector2.RIGHT * r2).rotated(deg_to_rad(start_angle))
	var ang = (end_engle - start_angle)/float(edges)  # 单次旋转角度
	var arc1:PackedVector2Array     # 圆弧1
	var arc2:PackedVector2Array     # 圆弧2
	# 通过向量旋转求不同半径的两条圆弧顶点
	for i in range(edges+1):
		arc1.append(v1.rotated(deg_to_rad( ang * i))) 
		arc2.append(v2.rotated(deg_to_rad( ang * i)))
	
	var close_circle = fposmod((end_engle - start_angle),360.0) == 0 # 圆弧闭合形成圆
	
	if close_circle:
		arc1.set(arc1.size()-1,arc1[arc1.size()-1] + Vector2.UP * 0.01)
	# 顺时针添加圆弧1的顶点
	points.append_array(arc1)
	
	arc2.reverse()
	if close_circle:
		arc2.set(arc2.size()-1,arc2[arc2.size()-1] - Vector2.UP * 0.01)
	# 逆时针添加圆弧1的顶点
	points.append_array(arc2)
	return points
  • 这就是利用简单的向量旋转在半径不同的两个外接圆上求多边形顶点的思路。
  • 只不过将内部圆上求得的顶点顺序翻转，从而获得正确的多边形顶点顺序。

测试代码：

extends Node2D


func _draw() -> void:
	draw_set_transform(Vector2(300,400))  # 设定绘图原点
	# 求一个大圆半径100，小圆半径50，细分边数为100的圆环顶点
	var ring = ring(100,50,100)
	# 以绘制多边形形式绘制圆环
	draw_colored_polygon(ring,Color.AQUAMARINE)

绘制效果：
image.png
其他边数下的效果：
在这里插入图片描述

设定起始和终止角度

弧线是圆的一部分，所以上面的函数不仅仅可以求圆环，也可以求圆环的一部分。

你只需要设定好圆弧的起始和终止角度即可。

extends Node2D

func _draw() -> void:
    # 设定绘图原点
	draw_set_transform(Vector2(300,400))  
	# 绘制圆环的一部分
	var ring = ring(100,50,6,45,90)
	# 以绘制多边形形式绘制圆环
	draw_colored_polygon(ring,Color.AQUAMARINE)
  • 45°到90°，6条边完成

绘制效果：

image.png

extends Node2D

func _draw() -> void:
    # 设定绘图原点
	draw_set_transform(Vector2(300,400))  
	# 绘制圆环的一部分
	var ring = ring(100,50,6,45,180)
	# 以绘制多边形形式绘制圆环
	draw_colored_polygon(ring,Color.AQUAMARINE)
  • 45°到180°，6条边完成

绘制效果：

image.png

extends Node2D

func _draw() -> void:
    # 设定绘图原点
	draw_set_transform(Vector2(300,400))  
	# 绘制圆环的一部分
	var ring = ring(100,50,6,45,360)
	# 以绘制多边形形式绘制圆环
	draw_colored_polygon(ring,Color.AQUAMARINE)
  • 45°到360°，6条边完成

绘制效果：
image.png

梯形旋转变换法

点求取函数如下：

# 圆环点求取函数
func ring2(r1:float,r2:float,edges:int = 3,start_angle:=0.0,end_engle:=360.0) -> Array[PackedVector2Array]:
	var ts:Array[PackedVector2Array] # 所有梯形的集合
	var v1 = (Vector2.RIGHT * r1).rotated(deg_to_rad(start_angle))
	var v2 = (Vector2.RIGHT * r2).rotated(deg_to_rad(start_angle))
	var ang = (end_engle - start_angle)/float(edges)  # 单次旋转角度
	print(ang)
	# 第1个梯形
	var t:PackedVector2Array
	t.append(v1)
	t.append(v1.rotated(deg_to_rad(ang)))
	t.append(v2.rotated(deg_to_rad(ang)))
	t.append(v2)
	#t.append(v1)
	
	var rot = Transform2D().rotated(deg_to_rad(ang))   # 旋转变换
	# 通过旋转第一个梯形，获取其他的梯形
	for i in range(edges):
		ts.append(t)
		t = rot * t
	return ts
  • 代码中求取了第一个梯形的所有顶点，然后构造了一个旋转变换，最后通过顺次应用到第一个梯形来获得其他位置的梯形。
  • 函数直接返回包含所有梯形的数组。在绘制时，我们可以遍历取出每个单独梯形的顶点集合，来进行绘制。

测试代码:

extends Node2D


func _draw() -> void:
	draw_set_transform(Vector2(300,400))  # 设定绘图原点
	# 绘制圆环的一部分
	var ring = ring2(100,50,100)
	#print(ring)
	# 以绘制梯形形式绘制圆环
	for i in range(ring.size()):
		draw_colored_polygon(ring[i],Color.AQUAMARINE.lerp(Color.BROWN,i/float(ring.size())))

各种参数下绘制的效果：

在这里插入图片描述

绘制同心环

通过插值一个长度范围，获得不同的半径，我们可以绘制多个同心环。

extends Node2D

var c1:= Color.RED
var c2:= Color.YELLOW_GREEN
var steps:= 30  # 步幅
var edges:= 20  # 边数
var max_r:= 100.0  # 最大半径
var min_r:= 0.0  # 最小半径


func _draw() -> void:
	c1 = Color.AQUAMARINE
	c2 = Color.BROWN
	draw_set_transform(Vector2(300,400))  # 设定绘图原点
	for w in range(0,steps+1):
		c1 = c1.darkened(w/float(steps) * 0.1)
		c2 = c2.darkened(w/float(steps) * 0.1)
		var r2 = lerp(min_r,max_r,w/float(steps))
		var r1 = lerp(min_r,max_r,(w+1)/float(steps))
		
		# 绘制圆环的一部分
		var ring = ring2(r1,r2,edges)
		#print(ring)
		# 以绘制梯形形式绘制圆环
		for i in range(ring.size()):
			draw_colored_polygon(ring[i],c1.lerp(c2,i/float(ring.size())))

各种参数下的效果：

extends Node2D

var c1:= Color.RED
var c2:= Color.YELLOW_GREEN
var steps:= 5  # 步幅
var edges:= 6  # 边数
var max_r:= 100.0  # 最大半径
var min_r:= 0.0  # 最小半径

image.png

extends Node2D

var c1:= Color.RED
var c2:= Color.YELLOW_GREEN
var steps:= 30  # 步幅
var edges:= 6  # 边数
var max_r:= 100.0  # 最大半径
var min_r:= 0.0  # 最小半径

image.png

extends Node2D

var c1:= Color.RED
var c2:= Color.YELLOW_GREEN
var steps:= 5  # 步幅
var edges:= 100  # 边数
var max_r:= 100.0  # 最大半径
var min_r:= 0.0  # 最小半径

image.png

extends Node2D

var c1:= Color.RED
var c2:= Color.YELLOW_GREEN
var steps:= 100  # 步幅
var edges:= 100  # 边数
var max_r:= 100.0  # 最大半径
var min_r:= 0.0  # 最小半径

同时减小c1、c2每次变暗的系数为0.01

image.png

总结

  • 本文介绍和总结了在Godot求2D圆环图形顶点的两种思路和具体的实现办法，并测试了在不同参数设定下的效果。
  • 可以看到，在求取一些特殊图形顶点时，我们必须要避开Godot的不足（比如无法绘制带孔洞的多边形）而另辟蹊径。
  • 我们可以通过构造带有肉眼无法分辨的间隙的多边形，来绘制带有孔洞的图形，即可以骗过Godot正确实现三角化，也可以在视觉上骗过使用者和观看者。
  • 通过将特殊图形分解为小的图形，再通过某些变换来拼凑，也是一种很好的思路。
巽星石
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Godot在github的资源网址，最近版本4.1.2，只是下载速度有点慢
10-10
https://github.com/godotengine/godot/releases/tag/4.1.2-stable
ZoneLoadingSystem:Godot动态区域加载系统
04-01
区域加载系统 这是Godot的动态区域加载系统，它负责为您管理区域管理，在玩家探索世界时加载和卸载区域，并使用后台线程来最大程度地减少性能故障。 这允许拥有巨大的无缝世界而无需加载屏幕。 该系统适用于手工制作的区域，例如FPS，冒险游戏或2D游戏。 它不是基于与玩家距离的分块系统。 工作原理：当玩家进入区域触发器时，该区域会附加到树上（该区域应大于该区域），而当玩家退出触发器时，会分离该区域。 区域会预先加载并预先插入一个区域，因此不会出现加载延迟。 该系统可在2D和3D模式下工作（请参见演示），可用于室内和室外环境。 在3D中，需要精心设计区域，以便玩家看不到卸载的区域（需要曲折或起雾）。 每个区域都位于完全围绕该区域的触发区域内。 当玩家进入触发区域时，相应的区域将被加载，实例化（如果尚未）并附加到世界。 当玩家离开该区域时，该区域将从树中删除，但仍保留在内存中，从而允许在
godot示例代码.rar
10-21
godot 示例代码
Godot-v4.2-beta1-win64.exe.zip
11-08
godot 4.2 windows 版本
Godot官方中文手册-20190117
01-17
godot官方中文手册 20190117下载 Godot是一个开源和免费的2d和3d的游戏引擎。 官网http://www.godotengine.org/ Godot自带编辑器,类似与unity的编辑器。使用自带的GDScript脚本。跨平台运行。
【Godot4.2】CanvasItem绘图函数全解析 - 7.自定义节点TextBoard
巽的博客
04-14 243
之前发布的几篇文章几乎阐述了CanvasItem绘图函数最基础的内容。本篇结合和类，自定义了一个可以自适应宽高显示多行文本，且带有一个样式盒作为背景的文字板节点TextBoard。
【Godot4.2】极坐标点函数与绘图应用
巽的博客
04-14 650
在一个平面上基于一个定点，可以创建一个平面直角坐标系，同时也可以创建一个极坐标系。通过极坐标系，可以将平面上的点用极坐标形式描述出来。本文就记录一下如何在Godot中创建和表示极坐标点，并将其运用于绘图。本文描述了如何创建一个与Godot的屏幕坐标系保持一致的假想的极坐标系，并通过pVector2()函数来表示极坐标点pVector2()返回的实际是等价的直角坐标系中的Vector2，因此我们可以直接将它用于图形顶点的表示和绘制pVector2()本质上还是Vector2，所以可以使用Vector2。
【Godot4.2】菜单栏生成函数库menuDB
巽的博客
02-27 369
关于Godot的手动菜单栏制作，我已经在之前的文章中有所描述。但是对于一些场景，手动制作菜单仍然是一个比较低效的做法。所以我将MenuBar以及基于MenuButton创建菜单栏写成了一个静态函数库。利用此函数库我们可以用函数形式构造PopupMenu和MenuButtonMenuBar以及基于MenuButton创建的菜单栏。：存储定义单个MenuBar所需的数据MenuData：存储定义单个菜单所需的数据：存储单个菜单项所需的数据当然我的本意是基于这个函数库构建更简单的菜单栏自定义控件。
【Godot4.2】控件节点生成与布局函数库Ctl
巽的博客
03-03 1086
本文依旧来自笔者的语雀知识库。基础内容写于2023年8月份。当时写的比较随意，本篇将在其基础上扩充和修改。Godot本身提供了丰富的控件和容器来实现UI布局，但是这个过程往往需要复杂的手动操作和配置，使用代码生成方式时也会需要一大堆代码来创建控件、容器实例，并设置相关的属性。尤其是在编写自定义控件时，不依赖场景文件.tscn，一个.gd文件就是一个自定义控件的全部，所有的节点结构都需要用代码生成。简单的自定义控件：只是扩展自Godot的内置控件或容器类型，或者只涉及一些简单的动态生成。复杂的自定义控件。
Godot4游戏引擎，godot4.1.1稳定版本
08-04
Godot4游戏引擎，godot4.1.1稳定版本，用于游戏开发领域，开发的游戏无需费用，所以版权归属作者本人
【Godot4.2】颜色完全使用手册
巽的博客
03-17 981
本篇简单汇总Godot中的颜色的构造和使用，包括了RGB、RGBA，HSV以及HTML16进制颜色值、颜色常量等形式。颜色的运算以及取反、插值以及用数组或PNG图片存储多个颜色。可以自定义Resource，来存储多个颜色。# 调色板 - 存储多个颜色@tool你可以在检视器面板新建和编辑或者用代码方式创建、编辑并保存。
Godot引擎小白入门指南
gulu230220的博客
05-29 321
哈喽，大家好呀，淼淼有来和大家见面啦，前几期和大家讲了Godot引擎的优势，Godot引擎是一款开源的跨平台游戏引擎，具有易学易用、功能强大、社区活跃等特点，因此备受开发者青睐。2.学习基本概念：学习Godot引擎的基本概念，如节点（Node）、场景（Scene）、信号（Signal）等，理解它们之间的关系和作用。3.学习资源利用：学习如何使用Godot引擎中的资源，如纹理、音频、动画等，为自己的游戏项目添加更丰富的内容。2.实践项目：尝试开发更复杂的游戏项目，挑战自己的技术水平，不断提升游戏开发能力。
godot.bk:how to add map to the game
langko的博客
06-02 171
如图，右键点击【新建tileset 】之后，点击下面的【tileset1】把左边的图片拖过来，再点击右边的tilemap画图。4.如何导入图片，导入图片的是tilemap下的tileset，tilemap是导入之后绘画的，不要搞错了。用preload的方式会导致map和user界面重叠，两个都显示在一起了。2.main.gd：注意main.gd并不定义信号，它只是接收信号而已。1.项目构建如下，map是我们点击start之后才渲染出来的。
godot.bk2
langko的博客
06-02 117
object--mainloop--sceneTree--viewport(游戏运行时场景树加载的第一个节点)--camera2D/camera。4.class_name命名一个类，extends继承，super.func_name()可以调用父类的函数。_phssic_process是处理物理计算的，delta就是1/60秒。这是自定义信号的绑定，如果是内置信号，直接右键点击链接到一个函数即可。_process是处理图像渲染的，delta是不固定的。2.场景内部用get_node，场景外部用信号。
godot.bk
langko的博客
06-02 254
5、不能直接add_child(bullet_instance)，而是应该get_tree().root.add_child(bullet_instance)，不然子弹和sprite其实是一个节点，上下移动都是相对的。2、@onready var player_sprite = $player_sprite：这个拿到的是null，不知道为什么。角色场景用node2d场景，下面挂node2d节点，下面挂sprite节点放图片做player。2.直接解压，50m，无需安装，直接运行。4.sprite脚本。
基于MySQL+Vue.js开发集成实时聊天系统的动态项目管理web端源码+答辩PPT+使用说明.zip
最新发布
06-03
基于MySQL+Vue.js开发集成实时聊天系统的动态项目管理web端软件源码+答辩PPT+使用说明.zip 【优质项目推荐】 1.项目代码功能经验证ok，确保稳定可靠运行。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通，帮助解答。 2.项目主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间，不仅可作为入门进阶，也可直接作为毕设、课程设计、大作业、项目初期立项演示等用途。 4.如果基础还行，或热爱钻研，可基于此项目进行二次开发，DIY其他不同功能。 基于MySQL+Vue.js开发集成实时聊天系统的动态项目管理web端软件源码+答辩PPT+使用说明.zip 部署前端服务 1. 打包前端文件生成 dist 文件夹 ```js // genal-chat-client npm i npm run build ``` 1. 将 dist 下所有文件放到 nginx 下的 html 文件夹中 2. 配置 nginx 的 gzip (提高传输速度)和请求级别（注意只是新增下面的代码，不是替换整个nginx文件） ```js 记得重启一下nginx #### 数据库配置 1. 安装 mysql 2. 设置 mysql 账号密码 3. 创建名为 `chat` 的数据库 4. 配置后端 `app.module.ts` 中的 mysql 账号密码 部署后端服务 1. 安装 pm2 ```js // genal-chat-server npm i pm2 -g ``` 2. 生成 dist 文件 ```js // genal-chat-server npm i npm run build ``` 3. 使用 pm2 运行 ```js // genal-chat-server npm run pm2 ```
Django学习资源3333
06-03
Django学习资源
godot代码绘制line2d
06-07
以下是一个简单的示例，使用 Godot GDScript 代码绘制 Line2D： ``` # 创建 Line2D 节点 var line = Line2D.new() add_child(line) # 定义线段的路径 var points = [ Vector2(0, 0), Vector2(50, 50), Vector2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

巽星石

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值