【Godot4.2】myPoint类 - 基于旋转和移动的点求取方式

最新推荐文章于 2024-05-23 17:44:34 发布
最新推荐文章于 2024-05-23 17:44:34 发布
阅读量674 收藏 14
点赞数 23
分类专栏： Godot4.x 几何与绘图 文章标签： godot CanvasItem 绘图 gdscript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/graypigen1990/article/details/137744352
版权

概述

记得很久以前（大约17年前）有个用指令绘图的软件（不是LOGO，而是它的一个模仿者，我找半天实在找不到。），基于移动和旋转来绘制折线。每次移动和旋转都是基于当前位置和方向，就像一个人在走路一样。这是一种有别于向量旋转的方式。

所以我就突发奇想，想要自己实现这种独特的绘图方法。

myPoint类

刚开始我想要用编写函数来实现，但发现必须在函数外使用全局变量来记录当前位置和方向。所以直接编写了一个自定义类myPoint。

通过它你可以定义一个起始点，然后通过其旋转函数rot和移动函数move，来获取新的点。

最后通过points属性获取所有顶点，然后使用CanvasItem绘图函数绘制和显示。

# ========================================================
# 名称：myPoint
# 类型：自定义类
# 简介：通过记录当前位置和方向进行旋转和移动，获取多个点，可用于绘制
# 多边形、折线
# 作者：巽星石
# Godot版本：v4.2.1.stable.official [b09f793f5]
# 创建时间：2024年4月6日15:10:13
# 最后修改时间：2024年4月14日13:39:06
# ========================================================

class_name myPoint

var dir = Vector2.RIGHT:         # 当前方向
	set(val):
		dir = val
		
var start_angle:float:           # 起始角度（与X轴夹角），决定初始方向
	set(val):
		start_angle = val
		dir = dir.rotated(deg_to_rad(val)) # 旋转dir

var pos:= Vector2()               # 当前位置
var _start_pos:= Vector2()       # 初始位置(不会随着移动发生变化)
var points:PackedVector2Array    # 点集合

# 获取初始位置
func get_start_pos() -> Vector2:
	return Vector2(_start_pos)     # 返回副本（避免修改）

# 初始化
func _init(x:float = 0.0,y:float = 0.0) -> void:
	pos = Vector2(x,y)          # 构造初始位置
	points.append(pos)          # 添加初始点
	_start_pos = pos            # 记录初始位置

# 旋转
func rot(deg:float) -> void:
	dir = dir.normalized().rotated(deg_to_rad(deg))

# 移动
func move(length:float) -> void:
	var newpos = pos + dir * length  # 计算新点
	points.append(newpos)              # 添加新点
	pos = newpos                      # 更新位置

# 执行路径，每个Vector2的x表示旋转度数，y表示移动距离
func do_path(path:PackedVector2Array) -> void:
	for do in path:
		rot(do.x)  # 旋转
		move(do.y) # 移动

# 以字符串形式执行路径
func do_path_with_str(path:String) -> void:
	var dos = path.split(" ",false)
	for do in dos:
		var ds = do.split(",",false)
		rot(float(ds[0]))  # 旋转
		move(float(ds[1])) # 移动

绘制简单旗帜

func _draw() -> void:
	var p = myPoint.new(400,200)     # 起始位置
	
	p.move(100)    
	p.rot(90)
	p.move(200)
	p.rot(30)
	p.move(200)
	p.rot(120)
	p.move(200)
	p.rot(30)
	p.move(200)
	p.rot(90)
	p.move(100)
	draw_polyline(p.points,Color.AQUAMARINE,2)

上面代码绘制的图形如下:
image.png

  • var p = myPoint.new(400,200)定义了初始位置(400,200)
  • 默认方向是Vector2.RIGHT，所以第一个p.move(100)，是向右移动100像素，也就是(400,200)+(100,0)=(500,100)
  • 第一个p.rot(90)，则是在Vector2.RIGHT基础上顺时针旋转90°，也就变成了Vector2.DOWN。依次类推…

image.png
通过简单修改可以获得另一个图形：

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,200)     # 起始位置
	
	p.rot(-30)
	p.move(100/cos(deg_to_rad(30)))
	p.rot(30)
	p.rot(90)
	p.move(200)
	p.rot(30)
	p.move(200)
	p.rot(120)
	p.move(200)
	p.rot(30)
	p.move(200)
	p.rot(120)
	p.move(100/cos(deg_to_rad(30)))
	draw_polyline(p.points,Color.AQUAMARINE,2)

image.png
可以看到，这种方式绘制图形更考验你在平面空间中行走的想象能力。也需要你灵活的计算各种夹角、以及使用三角函数来计算对边和邻边投影等。

但是它的优点是可以只用旋转和移动两种操作，得到一些需要用向量加减法和向量旋转做半天的图形。

用向量表示旋转和移动操作

实际上，因为只有旋转和移动两种操作，所以完全可以用一个Vector2来存储每次的旋转角度和移动距离。也就是Vector2(angle,length)。

然后用一个PackedVector2Array来记录执行的所有操作。

extends Node2D

# 用于myPoint执行的路径
var path:PackedVector2Array = [
		Vector2(0,100),    # 旋转0度，向前移动100像素
		Vector2(90,200),   # 旋转90度，向前移动200像素
		Vector2(30,200),   # 旋转30度，向前移动200像素
		Vector2(120,200),  # 旋转120度，向前移动200像素
		Vector2(30,200),   # 旋转30度，向前移动200像素
		Vector2(90,100),   # 旋转90度，向前移动100像素
	]

func _draw() -> void:
	var p = myPoint.new(400,200)     # 起始位置
	p.do_path(path)                  # 执行路径
	# 绘制获得的曲线
	draw_polyline(p.points,Color.AQUAMARINE,2)

绘制的效果是一样的。
path数组中的单个Vector2可以看做是一次旋转和移动操作的复合：

  • Vector2(45,100)，表示当前方向顺时针旋转45度，然后向前移动100像素
  • 如果要单单表示移动，只需要将旋转设为0，比如Vector2(0,100)只进行移动
  • 而单单表示旋转也类似，只需要将移动设为0，比如Vector2(45,0)只进行旋转

折线描述字符串

我们可以进一步将PackedVector2Array简化为一个字符串，通过解析字符串来还原操作。

extends Node2D

# 用于myPoint执行的路径
var path = "0,100 90,200 30,200 120,200 30,200 90,100"	

func _draw() -> void:
	var p = myPoint.new(400,200)     # 起始位置
	p.do_path_with_str(path)                  # 执行路径
	# 绘制获得的曲线
	draw_polyline(p.points,Color.AQUAMARINE,2)

这种形式的好处是，极致压缩，但又存储了关键信息，可以用于在文件中存储和还原图形。

其他绘制案例

绘制正多边形

你可以使用循环来执行多次的旋转和移动操作，从而获得一些特殊图形，比如正多边形。

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,200)
	var steps := 3   # 步幅
	
	# 旋转和移动
	for i in range(steps):
		p.rot(360.0/steps)
		p.move(100)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

在这里插入图片描述

  • 图中绿色点为实例化myPoint时定义的起始点。
  • 通过将每次行走的线段绘制成向量，可以看到图形基于起始点行走的方向和过程。

绘制螺旋线

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,200)
	var steps := 20   # 步幅
	
	# 旋转和移动
	for i in range(steps):
		p.rot(180.0/steps)
		p.move(10 + 2.0 * i)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,200)
	var steps := 20   # 步幅
	
	# 旋转和移动
	for i in range(steps):
		p.rot(30)
		p.move(5 * i)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,300)
	var steps := 50   # 步幅
	
	# 旋转和移动
	for i in range(steps):
		p.rot(90)
		p.move(10 * i)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,300)
	var steps := 50   # 步幅
	
	# 旋转和移动
	for i in range(steps):
		p.rot(60)
		p.move(5 * i)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,300)
	var steps := 50   # 步幅
	
	# 旋转和移动
	for i in range(steps):
		p.rot(120)
		p.move(10 * i)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,300)
	var steps := 60   # 步幅
	
	# 旋转和移动
	for i in range(steps):
		p.rot(150)
		p.move(10 * i)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,300)
	var steps := 50   # 步幅
	
	# 旋转和移动
	for i in range(steps):
		p.rot(180)
		p.move(10 * i)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

绘制方波

extends Node2D

func _draw() -> void:
	var p = myPoint.new(10,200)
	var steps := 10   # 重复次数
	var length:= 20.0 # 移动距离
	# 旋转和移动
	for i in range(steps):
		p.move(length)
		p.rot(-90)
		p.move(length)
		p.rot(90)
		p.move(length)
		p.rot(90)
		p.move(length)
		p.rot(-90)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

齿轮

# 暂时有Bug！

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,200)
	var steps := 60  # 重复次数
	var length:= 40.0 # 移动距离
	# 旋转和移动
	for i in range(steps):
		p.move(length)
		p.rot(-90 + 360.0/steps)
		p.move(length)
		p.rot(90 + 360.0/steps)
		p.move(length)
		p.rot(90 + 360.0/steps)
		p.move(length)
		p.rot(-90 + 360.0/steps)
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

三角波

extends Node2D

func _draw() -> void:
	var p = myPoint.new(10,200)
	var steps := 10  # 重复次数
	var length:= 40.0 # 移动距离
	# 旋转和移动
	for i in range(steps):
		p.rot(60)
		p.move(length)
		p.rot(-120)
		p.move(length)
		p.rot(60)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,200)
	var steps := 20  # 重复次数
	var length:= 40.0 # 移动距离
	# 旋转和移动
	for i in range(steps):
		p.rot(60)
		p.move(length)
		p.rot(-120 + 360.0/steps)
		p.move(length)
		p.rot(60)
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

锯齿波

extends Node2D

func _draw() -> void:
	var p = myPoint.new(10,200)
	var steps := 10  # 重复次数
	var length:= 40.0 # 移动距离
	# 旋转和移动
	for i in range(steps):
		p.rot(-45)
		p.move(length/sin(deg_to_rad(45)))
		p.rot(135)
		p.move(length)
		p.rot(-90)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

圆锯

extends Node2D

func _draw() -> void:
	var p = myPoint.new(400,200)
	var steps := 20  # 重复次数
	var length:= 40.0 # 移动距离
	# 旋转和移动
	for i in range(steps):
		p.rot(-45)
		p.move(length/sin(deg_to_rad(45)))
		p.rot(135 + 360.0/steps)
		p.move(length)
		p.rot(-90)
	
	myCanvas.draw_vectors(self,p.points)          # 绘制向量
	myCanvas.draw_point(self,p.get_start_pos())   # 绘制起始点

image.png

总结

  • myPoint类基本上是开辟了另一种几何图形点求取方式，可以很好的作为简单向量旋转和加减法求点形式的补充
  • 通过简单的旋转和移动函数可以绘制很多特殊几何图形，而且也可以通过进一步编写函数来参数化的快速获取图形。
巽星石
关注
  • 23
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Godot-v4.2-beta1-win64.exe.zip
11-08
godot 4.2 windows 版本
【Godot4.2】像素直线画法及点求取函数
巽的博客
03-24 710
基于CanvasItem提供的绘图函数进行线段绘制只需要直接调用draw_line函数就可以了。但是对于可以保存的图片，却需要依靠Image类，而Image类没有直接提供基于像素的绘图函数。只能依靠set_pixel或set_pixelv进行逐个像素的填色。所以问题就变成了获取线段上两点之间所有经过的点的位置的问题。搞定绘制线段后，就可以基于多个点连线绘制多边形，也就可以绘制出其他常见的几何图形。基于Image搞自己的绘图函数，其目的不言而喻，就是为了实现像素画绘制工具，以及实现。
【Godot4.2】基础知识 - Godot中的2D向量
巽的博客
03-21 1026
在Godot中，乃至一切游戏编程中，你应该都躲不开向量。这是每一个初学者都应该知道和掌握的内容，否则你将很难理解和实现某些其实原理非常简单的东西。我也是好几次想尝试完全总结这一部分内容了，这次就趁着要写公众号文章和星球剪报，尝试一次性总下。让新手们不再和我当初初学时那样迷茫。本篇汇总了我两年时间里写过的一些关于向量的东西。说明：本文写于2022年11月26日，基于的Godot版本是3.5，与目前Godot4.2在某些语法和API上可能会有差异，后续会基于4.2进行改写和拓展。
【Godot4.2】注释习惯 -- 拒绝屎山，提高代码可读性
巽的博客
03-23 1300
我个人于2020年9月左右开始接触Godot，在2021年8月汉化一个关于GDScript脚本注释习惯的视频时，学习到了一些有用的代码注释规则，于是逐渐将一些注释习惯引入自己的代码书写中。这些注释习惯一直延续至今，并逐渐形成我自己的一种风格。本篇就来介绍一下我自己的注释习惯，以及谈谈这样做的好处。当然你并不需要完全和我一致，每个人都有自己的习惯。如果你觉得还有哪些好的提高代码可读性的好方法，可以留言或讨论。希望本篇内容对学习Godot的小伙伴们有用。
【Godot4.2】自定义Todo清单类 - myTodoList
巽的博客
04-27 771
在写myList类的时候，就想到可以写一个类似的Todo清单类。
【Godot4.2】2D导航04 - TileMap导航的逻辑
巽的博客
03-19 545
查看icon.svg可以发现其图片大小为128×128，而我们的tileset的cell_size为16×16，所以为了将玩家显示在一个网格里，我们需要将icon.svg缩放为16×16。默认由于TileMap是world2的子节点，所以world2上用_draw绘制的内容会被TileMap绘制的地图覆盖而无法显示。128/16=8，所以我们需要将其设为原来的1/8，也就是缩小到原来的0.125倍。切换至TileMap面板，利用矩形和直线绘制方式绘制一个简单的有出口的地图。基本的导航还是可以的。
Godot 4.2源码编译（C#为编译语言 ）
weixin_42661551的博客
09-29 467
主要介绍怎么编译，编译环境上一文已经讲了。
【Godot4.2】颜色完全使用手册
巽的博客
03-17 950
本篇简单汇总Godot中的颜色的构造和使用，包括了RGB、RGBA，HSV以及HTML16进制颜色值、颜色常量等形式。颜色的运算以及取反、插值以及用数组或PNG图片存储多个颜色。可以自定义Resource，来存储多个颜色。# 调色板 - 存储多个颜色@tool你可以在检视器面板新建和编辑或者用代码方式创建、编辑并保存。
【Godot4.2】控件节点生成与布局函数库Ctl
巽的博客
03-03 1067
本文依旧来自笔者的语雀知识库。基础内容写于2023年8月份。当时写的比较随意，本篇将在其基础上扩充和修改。Godot本身提供了丰富的控件和容器来实现UI布局，但是这个过程往往需要复杂的手动操作和配置，使用代码生成方式时也会需要一大堆代码来创建控件、容器实例，并设置相关的属性。尤其是在编写自定义控件时，不依赖场景文件.tscn，一个.gd文件就是一个自定义控件的全部，所有的节点结构都需要用代码生成。简单的自定义控件：只是扩展自Godot的内置控件或容器类型，或者只涉及一些简单的动态生成。复杂的自定义控件。
【Godot4.2】 基于SurfaceTool的3D网格生成与体素网格探索
巽的博客
03-19 997
说明：本文基础内容写于2023年6月，由三五篇文章汇总而成，因为当时写的比较潦草，过去时间也比较久了，我自己都得重新阅读和理解一番，才能知道自己说了什么，才有可能重新优化整理。因为我对体素网格的原始算法并不精通，当时只是依靠自己的直觉以及Godot4.2提供的工具类来实现了体素网格的生成算法。但是本文也可以作为这些工具的类的实例教程进行使用。因此体素不体素的你也可以当我没说：），重点在于用代码进行3D网格的生成。# UV坐标# 右侧面@tool# 构造AABB。
godot-chip8-emulator：用Godot制作的CHIP-8模拟器，用GDScript编写
02-05
godot-chip8-emulator：用Godot制作的CHIP-8模拟器，用GDScript编写
Godot Engine v3.2.3-stable_win64
09-18
Godot游戏引擎：Godot Engine v3.2.3-stable win64位官方版本，上传到CSDN备用
Godot_v3.3-stable_export_templates.tpz
09-28
GODOT-android模板(3.3) ps：如没积分的兄弟请联系我
Godot_v3.3.2-stable_export_templates.tpz
09-28
GODOT-android模板(3.3.2) ps：如没积分的兄弟请联系我
Godot游戏引擎有哪些优势
最新发布
gulu230220的博客
05-23 142
哈喽呀，大家好呀，淼淼又来和大家见面啦，众所周知在当今游戏开发领域，各种游戏引擎如雨后春笋般涌现，为开发者提供了丰富的选择。而在这些众多的选择中，Godot游戏引擎以其独特的特性和开放源代码的优势，逐渐成为一股不可忽视的力量，吸引着全球范围内的独立开发者和小型工作室的关注。总的来说，Godot游戏引擎凭借其开源免费、强大灵活的编辑器、广泛的跨平台支持、活跃的社区以及轻量级高效的特点，正在逐步改变游戏开发的格局，尤其对于独立开发者和小型团队而言，Godot无疑是实现创意、探索无限可能的理想选择。
godot 的TileMap是什么? 如何学习?
多才多多
05-21 407
在Godot引擎中，TileMap是一个强大且常用的节点，用于创建基于网格的游戏地图，特别适合2D游戏开发。TileMap允许开发者使用预先设计好的瓷砖（Tile）来快速构建复杂的地图场景，如地牢、城市、平台等。
【Godot4.2】Godot中的继承与组合
巽的博客
05-21 600
继承和组合是编程中常用的两种策略,旨在尽可能多地重用代码。继承应用得非常广泛，但我认为组合在很多场景下会更加合适一些。基于组合，游戏开发前辈们专门设计出了实体组件模式（EC模式）和进阶的ECS模式。本篇所提及的Godot中的“组合”可能更倾向于UML类图中描述类与类关系的“组合”，而并不完全是EC模式或ECS模式所提到的严格的形式，尤其是在Godot中，更是以一种父子节点的关系来实现。但是这对理解什么是“组合”和“继承”，以及两者的区别和优劣，并为进一步学习ECS模式提供基础。
``` env = SConscript("thirdLibrary/godot-cpp/godot-cpp-4.1.1/SConstruct") ```
01-25
这段代码是使用SCons构建工具来调用名为SConscript的脚本文件。具体解释如下： 1. `SConscript`是SCons构建工具中的一个函数，用于调用其他的SConscript脚本文件。在这里，它被用来调用路径为"thirdLibrary/godot-cpp/godot-cpp-4.1.1/SConstruct"的SConscript脚本文件。 2. `env`是一个变量，用于存储SConscript脚本文件返回的环境变量。在这里，SConscript脚本文件会返回一个环境变量，该变量被赋值给`env`。 3. "thirdLibrary/godot-cpp/godot-cpp-4.1.1/SConstruct"是SConscript脚本文件的路径。根据路径的命名，可以猜测这个脚本文件可能是用于构建Godot游戏引擎的C++绑定库。 总结起来，这段代码的作用是调用名为SConscript的脚本文件，并将返回的环境变量存储在`env`变量中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

巽星石

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

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

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

打赏作者

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

抵扣说明：

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

余额充值