【Godot4.3】CanvasShape资源化改造

最新推荐文章于 2024-10-11 17:41:50 发布
最新推荐文章于 2024-10-11 17:41:50 发布
阅读量1k 收藏 14
点赞数 11
分类专栏： 【Godot4.X】自定义节点 Godot4.x 几何与绘图 【Godot4.x】自定义类 文章标签： gdscript godot 绘图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/graypigen1990/article/details/141947817
版权

概述

通过把之前自定义的CanvasShape类变成资源类型，将可以同时用于CanvasItem绘图和创建扩展的Node2D和Polygon2D节点等。

本篇就完成CanvasShape类的资源化改造，并记录改造过程和思路。

CanvasShape资源类型体系

在这里插入图片描述

  • CanvasShape仍然为图形基类，提供共有的属性和方法，只不过改为继承自Resource，成为自定义资源类型
  • CanvasXXX代表具体的图形类，扩展自CanvasShape，因为继承的好处，可以只关注自己的参数设计

CanvasShape（图形基类）

# =============================================
# 名称：CanvasShape
# 类型：Resource
# 描述：资源化后的CanvasItem绘图函数图形基类
# 作者：巽星石
# 创建时间：2024年7月25日15:25:24
# 最后修改时间：2024年9月5日22:26:00
# =============================================
@tool
@icon("res://lib/绘图相关/CanvasShape/icons/CanvasShape.png")
class_name CanvasShape extends Resource
# ============================== 属性 ==============================
@export_category("CanvasShape")
# -------------------- 路径点
# 点集合
@export var points:PackedVector2Array = []:
	set(val):
		points = val
		emit_changed() # 触发资源的changed信号
# 是否闭合轮廓线
@export var close_path:bool = false:
	set(val):
		close_path = val
		emit_changed() # 触发资源的changed信号
# 是否绘制局部坐标系原点         
@export var draw_position:bool = false:
	set(val):
		draw_position = val
		emit_changed() # 触发资源的changed信号
# -------------------- 边线样式
@export_group("border")
## 是否绘制轮廓
@export var draw_border:bool = true:
	set(val):
		draw_border = val
		emit_changed() # 触发资源的changed信号 
## 虚线间隔
@export_range(0.0,100.0,1.0,"suffix:px") var dash = 0.0:
	set(val):
		dash = val
		emit_changed() # 触发资源的changed信号
## 轮廓线宽度
@export_range(0,100,1,"suffix:px") var border_width:int = 1:
	set(val):
		border_width = val
		emit_changed() # 触发资源的changed信号
## 轮廓线颜色
@export var border_color:Color = Color.BLACK:
	set(val):
		border_color = val
		emit_changed() # 触发资源的changed信号

# -------------------- 边线样式
@export_group("fill")
## 是否绘制填充         
@export var draw_fill:bool = true:
	set(val):
		draw_fill = val
		emit_changed() # 触发资源的changed信号
## 填充颜色
@export var fill_color:Color = Color.WHITE:
	set(val):
		fill_color = val
		emit_changed() # 触发资源的changed信号

# -------------------- 偏移
## 相对于坐标原点的偏移位置
@export var offset:Vector2 = Vector2.ZERO:
	set(val):
		offset = val
		emit_changed() # 触发资源的changed信号    
# -------------------- 阴影设置
@export_group("shadow")
## 是否绘制阴影
@export var draw_shadow:bool = false:
	set(val):
		draw_shadow = val
		emit_changed() # 触发资源的changed信号
## 阴影颜色               
@export var shadow_color:Color = Color(Color.BLACK.lightened(0.1),0.6):
	set(val):
		shadow_color = val
		emit_changed() # 触发资源的changed信号
## 阴影偏移      
@export var shadow_offset:Vector2 = Vector2(10,10):
	set(val):
		shadow_offset = val
		emit_changed() # 触发资源的changed信号
# 顶点绘制参数
@export_group("point")
## 是否绘制顶点              
@export var draw_points:bool = false:
	set(val):
		draw_points = val
		emit_changed() # 触发资源的changed信号
## 顶点圆半径
@export var point_r = 3:
	set(val):
		point_r = val
		emit_changed() # 触发资源的changed信号
## 顶点轮廓线宽度
@export var point_border_width:int = 1:
	set(val):
		point_border_width = val
		emit_changed() # 触发资源的changed信号
## 顶点轮廓线颜色
@export var point_border_color:Color = Color.BLACK:
	set(val):
		point_border_color = val
		emit_changed() # 触发资源的changed信号
## 顶点填充颜色
@export var point_fill_color:Color = Color.WHITE:
	set(val):
		point_fill_color = val
		emit_changed() # 触发资源的changed信号     
# 矩形范围绘制参数
@export_group("rect2")
## 是否绘制矩形范围      
@export var draw_rect2:bool = false:
	set(val):
		draw_rect2 = val
		emit_changed() # 触发资源的changed信号
## 矩形轮廓线宽度
@export var rect2_border_width:int = 1:
	set(val):
		rect2_border_width = val
		emit_changed() # 触发资源的changed信号
## 矩形轮廓线颜色        
@export var rect2_border_color:Color = Color.AQUAMARINE:
	set(val):
		rect2_border_color = val
		emit_changed() # 触发资源的changed信号

# ============================== 方法 ==============================
func draw(canvas:CanvasItem) -> void:
	# 对所有点进行位移变换
	var offset_points = Transform2D().translated(offset) * points
	
	
	
	# 1.绘制阴影
	if draw_shadow and offset_points.size()>2: # 至少有3个点
		var shadow_points = Transform2D().translated(shadow_offset) * offset_points
		canvas.draw_colored_polygon(shadow_points,shadow_color) 
	# 2.绘制矩形范围
	if draw_rect2:
		canvas.draw_rect(get_rect(),Color(rect2_border_color,0.5),false,rect2_border_width)
	# 3.绘制填充
	if draw_fill and fill_color and offset_points.size()>2: # 至少有3个点
		canvas.draw_colored_polygon(offset_points,fill_color)
	# 4.绘制轮廓
	if draw_border and border_width!=0 and border_color!=null:
		var close_points = offset_points.duplicate()
		# 闭合
		if close_path:
			close_points.append(close_points[0])
		if dash>0.0:  # 虚线间隔大于0
			for seg in segments(close_points):
				canvas.draw_dashed_line(seg[0],seg[1],border_color,border_width,dash)
			pass
		else:
			canvas.draw_polyline(close_points,border_color,border_width)   # 绘制实现闭合轮廓
	# 5.绘制顶点
	if draw_points:
		for p in points:
			# 绘制圆点
			canvas.draw_circle(p,point_r,point_fill_color)
			# 绘制边线
			canvas.draw_arc(p,point_r,0,TAU,TAU * point_r,point_border_color,point_border_width/2.0,true)
	# 6.绘制位置点
	if draw_position:
		var line_count = 4
		var ang = 360.0/float(line_count)  # 每次旋转角度
		for i in range(line_count):
			var p1 = offset
			var p2 = p1 + pVector2(ang * i,5)
			canvas.draw_line(p1,p2,border_color,border_width)

# 获取图形的矩形
func get_rect() -> Rect2:
	# 对所有点进行位移变换
	var points = Transform2D().translated(offset) * points
	# 拆分出X坐标和Y坐标数组
	var x_arr = []
	var y_arr = []
	for p in points:
		x_arr.append(p.x)
		y_arr.append(p.y)
	# 最小值构成Rect2的offset
	var pos = Vector2(x_arr.min(),y_arr.min())
	
	# 最大值 - pos = Rect2 的 size
	var siz = Vector2(x_arr.max(),y_arr.max()) - pos
	
	print(pos,"   ",siz)
	return Rect2(pos,siz)

# ============================== 子类通用函数 ==============================
# 极坐标点函数 - 通过角度和长度定义一个点
func pVector2(angle:float = 0.0,length:float =0.0) -> Vector2:
	var dir = Vector2.RIGHT.rotated(deg_to_rad(angle))
	return dir * length

# points的点按顺序两两相连的所有线段
func segments(points:PackedVector2Array) -> Array[PackedVector2Array]:
	var arr:Array[PackedVector2Array]
	if points.size() >1:  # 至少有两个点
		for i in range(points.size() -1):
			var seg:PackedVector2Array = [points[i],points[i+1]]
			arr.append(seg)
	return arr

代码改造要点：

  • 属性：单纯的类设计时，属性不能也不需要被设计为导出变量形式，而自定义资源类型，其参数大多数都需要设置为导出变量，用于方便在编辑器检视器面板修改
# 点集合
@export var points:PackedVector2Array = []:
	set(val):
		points = val
		emit_changed() # 触发资源的changed信号
  • emit_changed()是触发资源实例的changed信号，在自定义节点或场景中我们可以连接此信号，用于在资源的属性修改后，进行一定的处理

CanvasRect（矩形）

# =============================================
# 名称：CanvasRect
# 类型：类
# 描述：CanvasItem绘图函数图形类 - 矩形
# 作者：巽星石
# 创建时间：2024年7月27日16:07:23
# 最后修改时间：2024年9月5日23:08:37
# =============================================
@tool
class_name CanvasRect extends CanvasShape
# ============================== 属性 ==============================

# 宽度
@export var width:float = 50:
	set(val):
		width = val
		update_points()
		emit_changed()
# 高度
@export var height:float = 50:
	set(val):
		height = val
		update_points()
		emit_changed()

func _init() -> void:
	close_path = true
	update_points()

# ============================== 方法 ==============================
# 更新点集
func update_points() -> void:
	points.clear()
	var center = Vector2(width,height)/2.0
	var half_width = Vector2(width,0)/2.0
	var half_height = Vector2(0,height)/2.0
	
	# 求点
	points.append(offset - center)
	points.append(offset - half_height + half_width)
	points.append(offset + center)
	points.append(offset - half_width + half_height)
	

func draw(canvas:CanvasItem) -> void:
	# 绘制
	super.draw(canvas)

CanvasRegularPolygon（正多边形）

# =============================================
# 名称：CanvasRegularPolygon
# 类型：类
# 描述：CanvasItem绘图函数图形类 - 正多边形
# 作者：巽星石
# 创建时间：2024年7月25日16:03:41
# 最后修改时间：2024年9月5日23:09:18
# =============================================
@tool
class_name CanvasRegularPolygon extends CanvasShape
# ============================== 属性 ==============================
## 正多边形的外接圆半径
@export var r:float = 30:
	set(val):
		r = val
		update_points()
		emit_changed()
## 正多边形的边数
@export_range(3,1000,1,"suffix:边") var edges:int = 3:
	set(val):
		edges = val
		update_points()
		emit_changed()
## 起始角度（与X轴正方向夹角）
@export_range(-360,360,1,"degrees") var start_angle:= 0.0:
	set(val):
		start_angle = val
		update_points()
		emit_changed()

func _init() -> void:
	close_path = true
	update_points()

# ============================== 方法 ==============================
# 更新点集
func update_points() -> void:
	points.clear()
	# 求点
	var ang = 360.0/float(edges) # 每次旋转角度
	for i in range(edges):
		points.append(pVector2(i * ang + start_angle,r))

func draw(canvas:CanvasItem) -> void:
	# 绘制
	super.draw(canvas)

CanvasLine（线段）

# =============================================
# 名称：CanvasLine
# 类型：类
# 描述：CanvasItem绘图函数图形类 - 线段
# 作者：巽星石
# 创建时间：2024年7月27日16:33:28
# 最后修改时间：2024年9月5日23:10:27
# =============================================
@tool
class_name CanvasLine extends CanvasShape
# ============================== 属性 ==============================

# 起点
@export var p1:=Vector2():
	set(val):
		p1 = val
		update_points()
		emit_changed()

# 起点
@export var p2:=Vector2(100,0):
	set(val):
		p2 = val
		update_points()
		emit_changed()

func _init() -> void:
	border_color = Color.WHITE
	update_points()

# ============================== 方法 ==============================
# 更新点集
func update_points() -> void:
	points.clear()
	# 求点
	points.append(p1)
	points.append(p2)
	

func draw(canvas:CanvasItem) -> void:
	# 绘制
	super.draw(canvas)

测试场景

场景根节点代码如下：

@tool
extends Node2D

# 修改shape属性时，连接CanvasShape资源的changed信号处理函数
# 仅在已经存在赋值时
@export var shape:CanvasShape:
	set(val):
		shape = val
		queue_redraw()	
		_enter_tree()

# 加载场景时，连接CanvasShape资源的changed信号处理函数
# 仅在已经存在赋值时
func _enter_tree() -> void:
	if shape:
		shape.changed.connect(func():
			queue_redraw()	
		)

# 调用CanvasShape的draw()方法，绘制
func _draw() -> void:
	if shape:
		shape.draw(self)

此时便可以在检视器面板选择相应的CanvasShape资源及其子类型了。赋值shape属性后，会在场景根节点按默认参数绘制图形，修改资源的属性时，根节点会动态进行修改。

初期未自定义图标

自定义图标

在InkScape中简单绘制一个大致正方形区域的图标，导出图标到Godot项目中。可以是SVG或PNG格式。

在自定义资源或节点顶部用@icon("图标路径")语法可以设定图标。例如：

@icon("res://lib/绘图相关/CanvasShape/icons/CanvasShape.png")

此时，就可以在检视器面板看到自定义类的图标：

自定义图标后的资源

ShapeNode2D

通过为上面测试场景的根节点设定class_name，就可以创建自定义的Node2D节点。这里我创建了一个专门显示CanvasShape资源的ShapeNode2D节点。

# =============================================
# 名称：ShapeNode2D
# 类型：Node2D
# 描述：专用于显示CanvasShape资源图形的自定义2D节点
# 作者：巽星石
# 创建时间：2024年9月5日20:04:05
# 最后修改时间：2024年9月5日23:03:01
# =============================================
@tool
@icon("res://lib/绘图相关/CanvasShape/icons/CanvasShape.png")
class_name ShapeNode2D extends Node2D

# 修改shape属性时，连接CanvasShape资源的changed信号处理函数
# 仅在已经存在赋值时
@export var shape:CanvasShape:
	set(val):
		shape = val
		queue_redraw()
		_enter_tree()

# 加载场景时，连接CanvasShape资源的changed信号处理函数
# 仅在已经存在赋值时
func _enter_tree() -> void:
	if shape:
		shape.changed.connect(func():
			queue_redraw()	
		)

# 调用CanvasShape的draw()方法，绘制
func _draw() -> void:
	if shape:
		shape.draw(self)

ShapeNode2D实例化测试

  • ShapeNode2D只有一个shape属性，通过设定CanvasShape资源及其子类型，然后设定其属性就可以动态的绘制出一些参数化的2D几何图形。

为shape属性设定CanvasShape资源实例

  • 基于继承的优势：因为ShapeNode2D继承自Node2D，所以它天然的可以使用Node2D类型及其继承链上的所有类型的属性、方法和信号。当然也就包括了Node2D的位移、旋转、缩放等。

ShapePolygon2D

以同样的思路，我们可以设计一个Polygon2D的扩展类型节点。

# =============================================
# 名称：ShapePolygon2D
# 类型：Polygon2D拓展类型
# 描述：专用于显示CanvasShape资源图形的自定义Polygon2D节点
# 作者：巽星石
# 创建时间：2024年9月5日23:59:17
# 最后修改时间：2024年9月6日00:02:23
# =============================================
@tool
class_name ShapePolygon2D extends Polygon2D

# 修改shape属性时，连接CanvasShape资源的changed信号处理函数
# 仅在已经存在赋值时
@export var shape:CanvasShape:
	set(val):
		shape = val
		update_polygon()
		_enter_tree()

# =================================== 虚函数 ===================================	
func _init():
	update_polygon()

# 加载场景时，连接CanvasShape资源的changed信号处理函数
# 仅在已经存在赋值时
func _enter_tree() -> void:
	if shape:
		shape.changed.connect(func():
			update_polygon()
		)
# =================================== 方法 ===================================
# 更新形状
func update_polygon():
	polygon = shape.points

ShapePolygon2D测试

总结

  • 通过将CanvasItem绘制的图形编写为自定义类CanvasShape，完成了第一次简单的进化
  • 而将CanvasShape变成自定义资源类型，则完成了二次进化，它将可以用于Node2D、Control、Polygon2D以及其他自定义节点上，也可以单独用于代码形式的CanvasItem绘图
  • 通过在类、场景节点或自定义节点中设定Array[CanvasShape]的导出变量，我们将可以在检视器面板设定和维护多个CanvasShape的列表。
巽星石
关注
专栏目录
Godot 4.3版本，开源游戏创作引擎
10-11
Godot 4.3版本，开源游戏创作引擎
Godot在github的资源网址，最近版本4.1.2，只是下载速度有点慢
10-10
https://github.com/godotengine/godot/releases/tag/4.1.2-stable
【Godot4.3】基于纯绘图函数自定义的线框图控件
巽的博客
09-02 568
同样是来自2023年7月份的一项实验性工作，基于纯绘图函数扩展的一套线框图控件。初期只实现了三个组件，矩形、占位框和垂直滚动条。本文中的三个控件类已经经过了继承化的修改，使得代码更少。这也是一项很随意的试验性工作，初期并没有采用类的继承，所以参数有很多重复代码，经过改进之后，代码量下降，而且可以很好的进行拓展。你可能会问在Godot这么简单的软件中还需要线框图嘛，直接干不就行了。但其实线框图作为一个设计阶段的工具对整体策划和把握还是有一定作用的。尤其是对UI界面设计。
【Godot4.3】绘图函数的类化封装尝试——CanvasShape
巽的博客
09-01 1087
这是2024年7月份的一项工作，在研究外XML和SVG解析与生成过后，想到可以将自己写的绘图函数库拆分为图形类，于是就有了类。它包含了从填充、轮廓、阴影、虚线、顶点和中心点绘制的全部要素。只需要给定points属性和调用draw()方法就可以在CanvasItem节点上绘制大多数多边形和折线了。是一个可以包含多个或的元素，基于它，可以创建树形的图形元素结构。方便动态管理和输出保存。
【Godot4.3】GraphEdit全解析（1） - 基础介绍
巽的博客
09-22 771
最早系统性的讲述Godot的GraphEdit和GraphNode的教程应该是Hi小胡的了，也有小伙伴已经设计出一些插件或小应用用于辅助自己的项目。或者更直观的你可以去看看B站的Godot的Visual Shader教程。我是学了好几次，学完就忘了用，本篇是基于Godot4.0正式版未出时自己的一篇笔记改造而来，CSDN上其实已经有小伙伴总结了很详细的使用方法，我这篇就算是个水分很大的个人笔记。主要是一圈学下来，发现基于节点和连线的可视化编程还是有一定的可取之处的。
Godot 免费开源2D3D游戏引擎4.3最新版发布
流云凝荷的博客一个
08-15 429
Godot 免费开源2D3D游戏引擎4.3最新版发布带来了新特性。
【Godot4.3】基于状态切换的游戏元素概论
巽的博客
09-22 408
一些游戏元素，其实是拥有多个状态的。比如一个宝箱，有打开和关闭两个状态。那么只需要设定两个状态的图片，就可以了。建筑物、生物、角色等等都可以用类似的结构存储多种状态，并进行切换。状态可以是静帧，也可以是一段循环帧动画。基于SpriteSheets或序列帧的帧动画搞的就是基于图片的状态划分这一套。但是你需要用这样的东西去创建多个状态的动画，再在脚本中进行切换。通过从结构上就设计和管理游戏元素的多状态。我们可以更少的依赖等对游戏元素状态的划分，我们可以更直观和简单的切换元素的状态和外形。
【Godot4.3】基于ShapePoints的Polygon2D扩展
巽的博客
09-02 870
这同样是来自2023年7月份的一项实验性工作，基于最初版本的静态函数库，实现了对Polygon2D节点的扩展，用于创建参数化图形的Polygon2D节点。Polygon2D节点本身只能通过顶点绘制工具，创建很随意的多边形。通过函数库求取对应图形的顶点数据，然后赋值给Polygon2D节点的polygon属性，可以实现特殊几何图形的快速创建。基于函数库所提供的图形，创建了包括矩形、圆、星形等等一些列的参数化图形Polygon2D节点。基于静态函数库对Polygon2D。
【Godot4.3】链条结构图形与生物模拟概论
巽的博客
09-21 1219
本篇讨论的内容是笔者基于B站视频《一种简单的程序化动画技术_哔哩哔哩_bilibili》所演示的内容，简单实现的Godot版本。主要探讨如何设计一种关节链条结构，能够跟随鼠标进行位置运动，并用圆形链条结构模拟软体动物动态爬行的过程和其身体本身。本文到发布为止，并没有完全实现视频中全部的内容，后续可能会在本文基础上扩展和更新。
【Godot4.3】三角形类
巽的博客
09-23 426
在GDSCript中你想要表示一个平面三角形，只需要设定3个点的位置，也就是3个Vector2就行了，或者一个size()==3的。但是想要进一步处理三角形，获得它的一些几何特征，比如：某个内角的角度值，角平分线、垂直平分线、中线、高线，还有对应的内接圆、外接圆圆心与半径等，就会变得比较困难。本篇就讲述如何在Godot4.3中，用类来表示三角形，并获取它的几何特征。本文所述，是三角形几何特性获得的初步，API肯定会大改，只是作为初步试验成功的结果。三角形是一种特殊的多边形，一些几何特性值得深入研究。
【Godot4.3】自定义数列类NumList
巽的博客
09-23 1333
数列是一种特殊数组。之前写过等比、等差数列、斐波那契等数列的求取函数。今天就汇总到一起，并添加其他的一些数列，比如平方数、立方数、三角形数等。这里我首先采用以前比较喜欢的静态函数库的写法，然后在其基础上改进为基于类继承的类型体系。
Godot-v4.1.3-stable-win64.exe.zip
01-24
6. **动画系统**：包括2D骨骼动画和3D骨骼动画，以及可视化编辑器，使得创建复杂的角色动画变得简单。 7. **音频和视频支持**：内置音频播放器和视频解码器，可以处理背景音乐、声效以及视频播放。 8. **网络功能*...
Godot4开发2D游戏，动画状态机-AnimationTree代码
01-24
在文件列表中，"godot-animated-sprite-2-player-2cb178b417698aebb6f08ddc0873648e0ef68998.zip"可能包含了示例项目或工具，用于演示如何将AnimatedSprite转换为AnimationPlayer，这将是一个很好的学习资源。...
godot帧同步-关于“显示与逻辑分离”
最新发布
atregret的博客
10-11 357
帧同步中的“”显示与逻辑分离“的理解
Microsoft Office Professional Plus 2007 Datasheet_CN_Final.doc
10-11
Microsoft Office Professional Plus 2007 Datasheet_CN_Final.doc
ProPlus2007 SuiteComparison.doc
10-11
ProPlus2007 SuiteComparison.doc
Unity动态加载外部3D模型的插件TriLib1.8.7-TriLib2.2.0
10-11
1.8-1.9直接导入，支持2018.4.9 2.0以上版本 当创建一个标准渲染管道项目时，从包中导入“TriLibCore”文件夹。 当创建HDRP项目时，从包中导入“TriLibHDRP”和“TriLibCore”文件夹。 在创建UniversalRP项目时，从包中导入“TriLibUniversalRP”和“TriLibCore”文件夹。 当使用自定义渲染管道时，你应该扩展“MaterialMapper”类。 FBX, OBJ, GLTF2, STL, PLY, 3MF, DAE*和ZIP文件支持跨平台:Windows, Mac, Linux, UWP, Android, WebGL和ioSImport模型从文件系统，web，或任何自定义源trilib可以帮助您添加建模功能，创建关卡/场景编辑器，创建AR/VR可视化
Godot怎么实例化敌人
09-23
要在Godot中实例化敌人，您可以按照以下步骤进行操作： 1. 创建敌人场景：使用Godot的编辑器创建一个新的场景，或者使用现有的场景作为敌人的基础。在场景中添加敌人角色的2D或3D模型，并设置其属性和行为。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

巽星石

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

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

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

打赏作者

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

抵扣说明：

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

余额充值