巽的博客

之前编写过一个基于指令绘图的类交myPoint，但是只涉及折线段生成。这次我基于SVG的<path>标签路径指令的启发，实现了一个能够获得连续绘制的直线段、圆弧和贝塞尔复合路径的类型myPath。可以使用绘图指令方法或字符串形式的绘图指令解析来创建符合路径。通过points属性可以获取路径的点集，并用于CanvasItem绘图函数绘制。

平面图形，除了常规的线性变换：平移、缩放、旋转、斜切之外。还可以模仿在三维空间旋转、透视等等。

空间的透视是可以在二维平面上参数化计算和模拟的。本篇基于CanvasItem绘制函数自带的UV坐标和贴图功能，实现基础的平行透视效果。或者可以叫做一点透视，由一个消失点决定物体的透视效果。

这个方法是我自己想到的，经典的矩形重叠（碰撞）检测，是一段很复杂的逻辑判断，而根据两个矩形中点连线，与两个矩形宽度和高度之和一半的比较，就可以判断两个矩形是否重叠，并且能够计算出重叠向量。通过给两个矩形施加反向的一半重叠向量，可以将两个矩形“推开”。通过用鼠标自由移动的矩形，可以使用给原本静止的矩形施加重叠向量，从而推动它真实的物理碰撞是要考虑两个物体的质量和速度的，本文和ShapeTest所研究的只是几何上的重叠和重叠部分的向量求取。

最近积累了一些图形重叠检测，以及求图形的轴对齐包围盒Rect2，还有求Rect2的外接圆等函数。感觉可以作为一个单独的函数库，提供日常的使用，所以汇总成了ShapeTests。注意：函数名和写法可能会不断改进。

最近开始研究游戏物理的内容，研究运动、速度、加速度之类的内容。也开始模仿一些简单的粒子模拟。这些都是一些基础、简单且古老的算法，但是对于理解游戏内的物理模拟很有帮助。甚至你可以在js、Python或者其他程序语言中实现它们。图形的碰撞检测是第一个我想要实践的内容，而在碰撞检测中最简单的应该就是圆的碰撞检测了，本篇就简单实践一下圆的碰撞检测。本篇简述在Godot用CanvasItem绘图函数实现简单的圆粒子和元粒子的重叠检测与推开操作这是图形碰撞检测算法的第一篇，后续文章将讨论矩形包围盒的算法。

在GDSCript中你想要表示一个平面三角形，只需要设定3个点的位置，也就是3个Vector2就行了，或者一个size()==3的。但是想要进一步处理三角形，获得它的一些几何特征，比如：某个内角的角度值，角平分线、垂直平分线、中线、高线，还有对应的内接圆、外接圆圆心与半径等，就会变得比较困难。本篇就讲述如何在Godot4.3中，用类来表示三角形，并获取它的几何特征。本文所述，是三角形几何特性获得的初步，API肯定会大改，只是作为初步试验成功的结果。三角形是一种特殊的多边形，一些几何特性值得深入研究。

Godot的2D程序化植物生成是我一直想要探讨的一个内容，但是一直没有真正开动，在刚过去的中秋节假期期间，在老家无聊，在一个素描本上构思了一系列想法。本篇就基于这些自己的想法介绍一下程序化植物生成的基本思路。不一定对，不一定能实现到什么程度，但是思考、探索和总结的过程，本身可能比结果更重要。初步设想，但可行性比较高。

在构造多点路径时我们会用到，并使用Vector2()来构造点。在手动创建多点数据时，这种写法其实很难看，有大量重复的Vector2()如果有办法省去重复的Vector2()就好了。代码会显得简洁不少。这也就是本篇文章探讨和实现的内容，用更简单的方式去表示点集（

曲线可以通过描点，然后连线得来。并不是所有曲线都有数学函数，但是有表达式的数学函数，都可以用描点法求出来。

很早之前发布过一篇关于几何体程序生成的文章，当时对于三角面和网格的构造其实还没有特别深入的认识，直到自己脑海里想到用二维数组和点更新的方式构造2D类型的多边形Mesh结构，也意识到在Godot中其实Mesh不仅是3D网格，也可以构造2D网格。在查看一些文章以及复习Godot相关的内置文档之后，发现基于三角面的Mesh构造，其基本结构包含两种形式，一种是三角扇，一种是三角带。几乎所有的几何图形和三维立体结构，都可以用这两种结构组合生成。

如果你从事过平面设计行业，在古早的PS海报设计中，会使用一种复制+像素偏移的方式创建一个图形或图片元素的厚度。这是一种很妙的思路。而在本文中，所要讨论的就是基于GDSCript，实现这一过程的程序化和参数化。从而能够为任意图片元素添加参数化的厚度。# 绘制基于堆叠模拟厚度的图片canvas_item:CanvasItem, # 要绘制到的目标 CanvasItemtexture:Texture2D, # 要添加厚度的纹理图片thickness:int = 20, # 厚度（堆叠绘制次数）

之前用半圆弧拼接的方式求过胶囊形，在逐渐熟练使用Geometry2D的过程中，发现通过线段求端点是圆角类型的偏移多边形，获得的就是胶囊形。所以我们有了第二种胶囊形求法。# 基于多边形偏移的胶囊形求取函数polygon.append(polygon[0]) # 闭合这只是一个基于Geometry2D改变特殊图形求取思路的案例之一，实际上通过偏移、布尔运算，你可以用几行代码求出一些原先用向量旋转、向量加减法以及线性变换思路弯弯绕半天的图形。

本篇讨论的内容是笔者基于B站视频《一种简单的程序化动画技术_哔哩哔哩_bilibili》所演示的内容，简单实现的Godot版本。主要探讨如何设计一种关节链条结构，能够跟随鼠标进行位置运动，并用圆形链条结构模拟软体动物动态爬行的过程和其身体本身。本文到发布为止，并没有完全实现视频中全部的内容，后续可能会在本文基础上扩展和更新。

图案（Pattern）填充是一个非常常见的效果。其中又以斜线填充最为简单。本篇就探讨在Godot4.3中如何使用Geometry2D和CanvasItem的绘图函数实现斜线填充效果。本篇简要描述了多边形斜线填充算法的简单思路，当然这里只是初步的测试，只适用于凸多边形在0到90度之间的情况。上面例子中的凹多边形在一定0到90度之间的某些清下也会出现错误，如下图：这种错误其实也可以通过将凹多边形拆解为若干凸多边形求解。0到90度之外的求解本篇并没有补足，但是大致思路是一致的。

在绘图函数的使用过冲中，已经总结出了这样的图形类，并通过将其资源化，可以方便的用于自定义节点。初期的也加入了多边形阴影的绘制选项，不过是简单的复制+偏移形式。本篇在简单复制+偏移形式阴影的基础上，讨论了多边形的平行光阴影、点光源阴影等模拟原理和在Godot4.3中的实际求解。最后给出一个初步的既适用于凸多边形也适用于凹多边形的平行光阴影求解函数。

通过把之前自定义的类变成资源类型，将可以同时用于CanvasItem绘图和创建扩展的Node2D和Polygon2D节点等。本篇就完成类的资源化改造，并记录改造过程和思路。通过将CanvasItem绘制的图形编写为自定义类，完成了第一次简单的进化而将变成自定义资源类型，则完成了二次进化，它将可以用于Node2D、Control、Polygon2D以及其他自定义节点上，也可以单独用于代码形式的CanvasItem绘图通过在类、场景节点或自定义节点中设定。

同样是来自2023年7月份的一项实验性工作，基于纯绘图函数扩展的一套线框图控件。初期只实现了三个组件，矩形、占位框和垂直滚动条。本文中的三个控件类已经经过了继承化的修改，使得代码更少。这也是一项很随意的试验性工作，初期并没有采用类的继承，所以参数有很多重复代码，经过改进之后，代码量下降，而且可以很好的进行拓展。你可能会问在Godot这么简单的软件中还需要线框图嘛，直接干不就行了。但其实线框图作为一个设计阶段的工具对整体策划和把握还是有一定作用的。尤其是对UI界面设计。

这同样是来自2023年7月份的一项实验性工作，基于最初版本的静态函数库，实现了对Polygon2D节点的扩展，用于创建参数化图形的Polygon2D节点。Polygon2D节点本身只能通过顶点绘制工具，创建很随意的多边形。通过函数库求取对应图形的顶点数据，然后赋值给Polygon2D节点的polygon属性，可以实现特殊几何图形的快速创建。基于函数库所提供的图形，创建了包括矩形、圆、星形等等一些列的参数化图形Polygon2D节点。基于静态函数库对Polygon2D。

这是2024年7月份的一项工作，在研究外XML和SVG解析与生成过后，想到可以将自己写的绘图函数库拆分为图形类，于是就有了类。它包含了从填充、轮廓、阴影、虚线、顶点和中心点绘制的全部要素。只需要给定points属性和调用draw()方法就可以在CanvasItem节点上绘制大多数多边形和折线了。是一个可以包含多个或的元素，基于它，可以创建树形的图形元素结构。方便动态管理和输出保存。

近期在研究基于Godot的XML和SVG解析，并且在昨天（2024年7月20日）编写了一个简易的SVG文件解析器。在群友的提示下，知道早就存在GodotXML这样的解析器。所以今天就来测试使用并准备研究学习源代码了。和以往一样，看源码里一堆英文注释就手痒，机翻之。并且想要分享出来，供大家一起学习，于是就有了这篇笔记。。GodotXML支持Godot 4.0-4.2，以及可能的未来版本。Godot中的XMLParser。

这是一个基于GDScript内置XMLParser编写的简易SVG文件解析函数库。目的就是可以将SVG文件解析为GDSCript可以处理的字典或DOM形式，方便SVG渲染和编辑。目前还只是一个简易实现版本。还需要一些改进。

最近在重温游戏美术的内容，一路从Krita板绘到对矢量绘图，尤其是PS、Krita和InkScape的自由钢笔（或叫自由路径，铅笔）工具感兴趣，再到想用InkScape制作矢量图形模板，然后在Godot中用模板字符串替换形式批量生成SVG矢量图。再到发现InkScape的源文件中不是太纯净的SVG源码，所以转而开始研究SVG。

通过指定平面上的多个点，然后顺次连接，我们可以得到折线段，如果闭合图形，就可以获得多边形。通过向量旋转我们可以获得圆等特殊图形。但是对于任意曲线，我们并没有很好的算法去直接实现，好在计算机大神们已经发明了贝塞尔曲线这样的算法。本篇就介绍如何在Godot中绘制贝塞尔曲线，并通过设定控制点来精确控制曲线的走向。

作为中国传统文化符号之一，太极八卦图，无论是哲学还是玄学，都不可能避开。之前在函数库实现了太极的点求取函数。当时采用的时圆弧拼接的方式，但是存在某些尺寸下多边形无法三角化的问题。于是就有了今天的内容。就是采取一种完全不同的思路来绘制太极。并在此基础上补足八卦的绘制。本节介绍了对复杂图形——太极八卦图的求图形顶点和绘制思路可以看到，灵活的利用绘图顺序，进行“盖印”操作，是一种聪明的图形绘制方式另外，也可以看到，有些复杂图形的求解需要使用多重线性变换。

在Godot中没有办法直接绘制圆环，利用Geometry2D的布尔运算也无法实现。所以只能另想办法。这个问题其实想了有一段时间了，昨天因为QQ群群友的提问，于是就直接试验了一下，结果就有了本文。对于在Godot中绘制圆环，我自己想到两种办法。这种思路的好处是，通过求一个小梯形，然后旋转变换，就可以绘制出圆环的形状。而且这种方式可以很方便的用颜色插值做出渐变色环效果。这种方法获得的圆环一体性强，可以直接作为单个多边形绘制，顶点数目也相较第一种方式少但缺点是可能没法获得方法1样的效果。

在一个平面上基于一个定点，可以创建一个平面直角坐标系，同时也可以创建一个极坐标系。通过极坐标系，可以将平面上的点用极坐标形式描述出来。本文就记录一下如何在Godot中创建和表示极坐标点，并将其运用于绘图。本文描述了如何创建一个与Godot的屏幕坐标系保持一致的假想的极坐标系，并通过pVector2()函数来表示极坐标点pVector2()返回的实际是等价的直角坐标系中的Vector2，因此我们可以直接将它用于图形顶点的表示和绘制pVector2()本质上还是Vector2，所以可以使用Vector2。

如果用向量加减和旋转方式，估计艰难绘制分形图案，好在有了myPoint类后，简单的分形图案绘制不再是什么难事。本篇我们就研究使用myPoint类在Godot的CanvasItem中绘制科赫雪花。科赫雪花是一种简单的分形图形，它的规律就是不断的将边线划分为三段，并在中间这一段向上拉出来一个正三角形。绘制思路当然是使用函数和递归，绘制出一条科赫曲线，然后通过旋转90度方式绘制其他三个边，构成一个闭合的科赫雪花。

用于生成常见二维几何图形顶点数据）的静态函数库。生成的数据可用于_draw和Line2DPolygon2D等进行绘制和显示。

本篇为静态函数库的补充和辅助文档。函数库是一个用于生成常见几何图形顶点数据（）的静态函数库。生成的数据可用于_draw和Line2DPolygon2D等进行绘制和显示。因为不断地持续扩展，函数库的函数数目在不断增加，同时涉及的图形类型也在发生变化。本篇按照一定的分类，阐述每个图形函数的原理和具体实现，以及具体使用。注意：本篇基础内容写于2023年7月，由3篇文章汇总而成。函数库及其使用会单独发文贴出。本篇更接近原理讲解。

在很多绘图软件中，都会有对于任意图形围绕给定的旋转中心旋转的基本操作。本节就基于Godot实现任意多边形（Polygon）或折线（Polyline）绕任意旋转中心（在图形内或外都可以）进行旋转。

求一个点沿任意直线对称的点的坐标，这是一个简单的初中几何问题，如果用传统的求解思路，就是用公式，解方程组。但是作为Godot的使用者，要深谙向量的魅力。对称轴L可以被理解为一个向量A点也可以理解为一个从坐标系原点指向(x1,y1)的向量A向量与X轴的夹角为σL向量与X轴的夹角为θ则A向量与对称轴L向量的夹角θ=σ-θ`那么B点坐标就可以通过A向量旋转`2θ``求得。如果L不经过原点，那么只需要加上偏移值offset就可以了。

基于CanvasItem提供的绘图函数进行线段绘制只需要直接调用draw_line函数就可以了。但是对于可以保存的图片，却需要依靠Image类，而Image类没有直接提供基于像素的绘图函数。只能依靠set_pixel或set_pixelv进行逐个像素的填色。所以问题就变成了获取线段上两点之间所有经过的点的位置的问题。搞定绘制线段后，就可以基于多个点连线绘制多边形，也就可以绘制出其他常见的几何图形。基于Image搞自己的绘图函数，其目的不言而喻，就是为了实现像素画绘制工具，以及实现。

Rect2存在一些问题，比如难以获取除positionend和center之外的其他点。虽然计算并不复杂，就是简单的向量加减。但每次手动计算则比较麻烦。其实在静态函数库中，已经尝试返回矩形的四个顶点，用于绘制矩形。# 返回矩形的顶点# 注意：以(0,0)为几何中心-size/2,size/2,-size/2]mRect2要做的是基于一个Rect2，快速返回九个位置点。这个类初始创建于2023年7月9日，于2024年3月21日进行了一定的改进和扩充。

在Godot中，乃至一切游戏编程中，你应该都躲不开向量。这是每一个初学者都应该知道和掌握的内容，否则你将很难理解和实现某些其实原理非常简单的东西。我也是好几次想尝试完全总结这一部分内容了，这次就趁着要写公众号文章和星球剪报，尝试一次性总下。让新手们不再和我当初初学时那样迷茫。本篇汇总了我两年时间里写过的一些关于向量的东西。说明：本文写于2022年11月26日，基于的Godot版本是3.5，与目前Godot4.2在某些语法和API上可能会有差异，后续会基于4.2进行改写和拓展。

Godot4.2提供了一个名叫Geometry2D的类。它提供了一些用于2D几何图形如多边形（Polygon）、折线（PolyLine）相关的函数，可以方便实现诸如多边形与多边形或多边形与折线的布尔运算求交点等。这是一个非常强大的2D几何辅助类，可以方便你基于几何图形的一些复杂操作。本篇是笔者2023年7月受到B站一个搬运视频启发，然后基于Godot内置文档研究Geometry2D并逐个尝试方法，从而总结的一份笔记。原始笔记分为两篇，这里合二为一，并可能会做一定的改写和扩充。期望对你的学习或项目有用。

Godot提供了CanvasItem类型，并提供了_draw虚函数和一系列绘图函数。通过这些绘图函数，我们可以绘制各种图形、文本、纹理、样式盒、导航路径、辅助线以及制作自定义Node2D或Control。我个人以往研究和使用比较多的是基础图形绘制功能，我想这也是很多人停留的层次。但是经过我本次的一番研究，发现了很多以往忽略或不了解的功能和细节。还发现有很多其他类型本身提供了绘图函数，可以绘制在某些CanvasItem或其子类型上。本系列就尽量完整补足CanvasItem相关绘图函数以及相关类型的内容。

欢迎来到系列的第4节，本节我们来讲CanvasItem绘图函数中的样式盒绘制函数。：空样式盒：平面样式盒，不使用纹理，而是通过定义边框和背景色来实现。：线样式盒，可以绘制水平或垂直的分割线：纹理样式盒，类似于，可以基于九宫格形式，拼凑出自适应的纹理背景样式。而CanvasItem提供了用来绘制样式盒，上面4种都可以用这个函数来绘制。可以看到，与绘制简单的几何图形相比，样式盒可以做出更好的设计，可以很简单的实现圆角矩形以及描边和阴影等效果。我也会在下一节讲完字符和字符串绘制后，在综合案例。

本节通过实例来简单讲解CanvasItem绘图函数中用于图形绘制的一些函数。其他内容可以查看系列相关文章。

之前发布的几篇文章几乎阐述了CanvasItem绘图函数最基础的内容。本篇结合和类，自定义了一个可以自适应宽高显示多行文本，且带有一个样式盒作为背景的文字板节点TextBoard。