Advanced Random 插件入门

538次阅读
没有评论

共计 4444 个字符,预计需要花费 12 分钟才能阅读完成。

Advanced Random 插件允许您生成 Perlin 噪声。与传统的随机值不同,它由可预测的“波浪”组成,这些“波浪”看起来像山丘、云或水。这些几乎自然的图案可用于在游戏中创建世界或纹理。这方面的典型例子当然是 Minecraft,它使用 Perlin 噪声来生成其世界。

性能

生成 Perlin 噪声涉及大量的数学运算,因此为了尽可能快地生成 Perlin 噪声,我们将此插件的核心编译到 WebAssembly 中。WebAssembly 是一种新的浏览器低级语言,在适当的情况下,它可以比 JavaScript 快得多。它非常适合此类工作,但过程生成倾向于大量调用此代码,因此在设计游戏时应始终牢记此性能限制。

噪音的种类

Perlin 噪声与您对随机函数的期望略有不同。它作为一个无限的值字段存在,您可以从任何位置请求值。每次你要求这个职位时,它总是会给你同样的价值。如果您需要多次检查一个位置,或者您想将生成步骤分解为块,这将非常有用。
Advanced Random 不仅包含一种类型的噪声,它实际上有 5 种噪声,每种噪声都有 2D 和 3D 变体。您可能想知道为什么在 Construct 中需要 3D 噪声,毕竟它是一个 2D 引擎!但它仍然有用。例如,您可以显示一段 3D 噪声,并在 z 维度中缓慢移动。当 Perlin 噪声在所有维度上流畅地混合时,你会看到你的世界慢慢改变形状。看着真是太酷了!
让我们来看看一些类型的噪音:

数值噪声

随机(1)

Psuedo 随机不可预测的噪声,只是 Psuedo 随机数生成器(PRNG)算法的输出。
Advanced Random 插件入门

经典噪音 –

AdvancedRandom.Classic2d(x,y)

相干可预测噪声,使用 2D 改进的 Perlin 算法。
Advanced Random 插件入门

波涛汹涌的噪音 –

AdvancedRandom.Billow2d(x,y)

Perlin 噪声的转变,具有“波浪”形状。
Advanced Random 插件入门

脊状噪声 –

AdvancedRandom.Ridged2d(x,y)

具有尖锐边缘的波涛汹涌的噪声的转换。
Advanced Random 插件入门

蜂窝噪声 –

AdvancedRandom.Cellular2d(x,y)

又称沃利噪声,与沃罗诺伊噪声密切相关。
Advanced Random 插件入门

沃罗诺伊噪音 –

AdvancedRandom.Voronoi2d(x,y)

与蜂窝噪声相同,只是每个单元都被分配了一个随机值。
Advanced Random 插件入门

分数布朗运动(FBM / 分形噪声)

分形噪声本身不是一种噪声样式,它实际上是一种将多层(或八度)噪声合并在一起以提供更多细节的方法。使用珍珠膜噪声时,很容易缩放噪声以获得更多变化,但结果过于随机,丢失了较大的形状。因此,为了解决这个问题,在不同的尺度上采集重复的噪声样本,并与不同的权重合并。所选的权重是该八度音阶的倒数。

八度音程 1 –

1 罪(1 x)

Advanced Random 插件入门

八度音阶 2 –

0.5 sin(2 x)

Advanced Random 插件入门

八度 3 –

0.25 正弦(4 x)

Advanced Random 插件入门

八度音阶 4 –

0.125 sin(8 x)

Advanced Random 插件入门

FBM 公司 –

(1 sin(1 x))+(0.5 sin(2 x))+(0.25 sin(4 x))+(0.125 sin(8 x))

Advanced Random 插件入门
Classic、Billow 和 Ridged 表达式都使用分形噪声。默认情况下,它们仅使用 1 个八度音阶,但您可以使用“设置八度音阶”操作将其增加到 16。每个八度音程相当于采集额外的样本,因此使用 16 个八度音阶将比使用 1 个八度音程慢 16 倍。你会发现,你的噪音越缩小,它需要看起来细节的八度音阶就越少。

以下是由 4 个八度音阶生成的 C 生成您的第一个嘈杂图像
Advanced Random 插件入门

生成您的第一个嘈杂图像

为了帮助您入门,我们将演示如何在 Construct 中使用 Perlin 噪声创建一个简单的纹理。我们将使用另一个名为 Drawing Canvas 的插件,因为它允许您逐个像素地创建图像。

我们将从创建一个新项目并进行一些设置开始。

  1. 创建一个新的标清景观 16:9 项目。

  2. 选择布局 1 并将其调整为 1280 x 720,与视口的大小相同。

  3. 创建一个新的绘图画布并将其插入到布局 1 中。

  4. 将绘图画布移动到 0,0 并将其大小调整为 1280 x 720(再次与视口大小相同)。

  5. 将 Advanced Random 插件插入到您的项目中。

为了绘制图像,我们将使用 Drawing Canvas Snapshot 功能,该功能允许您从 Drawing Canvas 中提取像素数据。更重要的是,它允许您修改此数据并将其放回绘图画布中。让我们去看我们的活动表。

  1. 添加新事件 – 系统:在布局开始时。

  2. 将 DrawingCanvas:Save snapshot 操作添加到事件中。

好的,所以我们要求一个快照,但 SaveSnapshot 操作是异步的。这意味着我们必须等待它完成,然后才能继续。有用的是,有一个事件告诉我们它何时准备就绪,所以让我们添加它。

  1. 添加一个新事件 – DrawingCanvas:在快照上。

现在我们有了快照。我们将检查每个像素并获取其噪声值。为此,我们将使用 2 个重复循环,一个用于宽度,另一个用于高度。

  1. 将新的子事件添加到快照事件中。

  2. 选择系统:重复循环作为条件。

  3. 将计数设置为 DrawingCanvas.SnapshotWidth。

… 现在是高度。

  1. 向 Repeat 事件添加新的子事件。

  2. 选择系统:重复循环作为条件。

  3. 将计数设置为 DrawingCanvas.SnapshotHeight。

为了让我们的生活更轻松一些,我们将使用添加一些变量,这将使我们的事件表更具可读性。我们将首先使用 Loopindex 表达式获取我们的位置。

  1. 向快照事件“x”、“y”和“value”添加 3 个新数字变量。

  2. 在第一个“重复”事件中添加“系统:设置值”动作动作。将“x”变量设置为 Loopindex。

  3. 在第二个“重复”事件中添加“系统:设置值”动作。将“y”变量设置为 Loopindex。

在完成所有设置之后,我们实际上可以得到我们的噪声值,我们将其放入“值”变量中。

  1. 在第二个“重复”事件中添加“系统:设置值”动作动作。将“value”变量设置为 AdvancedRandom.Classic2d(x,y)。

是的,这个小小的表情就是我们所需要的。现在,我们需要将该值转换为颜色,并将其放入我们的快照中。

为了创建颜色,我们将使用 rgbEx 表达式。它在 0 到 100 的范围内接受 3 个值,每个颜色通道一个值,并返回一个颜色值。为了简单起见,我们现在将创建一个灰度图像,因此我们将为每个通道使用相同的值。

  1. 将操作 DrawingCanvas:Set pixel in snapshot 添加到第二个“Repeat”事件中。将 X 值设置为“x”,将 Y 值设置为“y”,将颜色值设置为 rgbEx(value 100,value 100,value * 100)。

好的,让我们启动我们的项目,然后 …… 黑屏。事实证明,我们需要将快照放回 DrawingCanvas 中。

  1. 在第一个“重复”循环之后添加一个新的空白子事件。

  2. 将操作 DrawingCanvas:load snapshot 添加到事件中。

现在,如果我们再次启动它,你应该有一个灰色的漩涡,如果你没有,那么请仔细检查你的事件与我们现在应该在哪里。
Advanced Random 插件入门
那么下一步是什么?让我们看看如何修改我们的噪音。

缩放

鉴于 Perlin 噪声基于位置的性质,很容易“放大”到模式。只需将 x 和 y 坐标乘以比例因子,如下所示:

AdvancedRandom.Classic2d(x 刻度,y 刻度)

小于 1 的刻度将“放大”,大于 1 的刻度将“缩小”。

门槛

如果你不想要一个平滑的梯度,那么你可以使用条件运算符对值执行一个简单的阈值效应:

AdvancedRandom.Classic2d(x,y)> 0.5?1 : 0

域翘曲

这是一种更高级的技术,但经过一些调整,您可以想出一些非常具有装饰性和酷炫的效果。这里的诀窍是生成噪声,以某种方式修改输出,然后将其传递回噪声表达式。下面是一个看起来有点像皱巴巴的织物的例子:

AdvancedRandom.Classic2d(y AdvancedRandom.Classic2d(x 刻度,y 刻度),x AdvancedRandom.Classic2d(y 刻度,x 刻度))
Advanced Random 插件入门
… 它又来了,但八度计数增加到 16。它现在看起来像被侵蚀的石头!
Advanced Random 插件入门
现在是搞得一团糟的好时机,试着修改每个噪声函数的输入值; 交换 X 和 Y,添加任意值或将其乘以某个数字。您可能还想在此处尝试混合不同的噪声表达式。所有 2D 表达式都采用相同数量的参数,因此您可以非常轻松地将它们替换掉。或者您甚至可以尝试进行 3 阶段转换!

颜色渐变

所以你可能已经注意到,到目前为止,我们所有的图像都是黑白的,这有点沉闷。所以让我们添加一些颜色!该插件还包括一个称为渐变的功能。这些允许您通过为每个值设置“停止”来轻松地在多种颜色或值中淡入淡出。

线性梯度

rgbEx(90,39,40)– rgbEx(57,60,90)

Advanced Random 插件入门

线性梯度

rgbEx(25,53,65)– rgbEx(92,97,88)– rgbEx(96,62,24)

Advanced Random 插件入门
要使用渐变,您必须先使用 AdvancedRandom:Create Gradient 操作创建一个渐变。为您的渐变选择一个名称,并将类型保留为“颜色”。这个名字是用来切换渐变的,我们现在只使用一个渐变,所以没关系。

让我们使用 AdvancedRandom 向梯度添加一些停止点:add gradient stop action。一个位于位置 0,值为 rgbEx(32,65,82),另一个位于位置 1,值为 rgbEx(100,100,100)。

现在,我们可以轻松地使用“渐变”表达式从渐变中抽取颜色。在我们的 DrawingCanvas:Set snapshot pixel 操作中,我们可以将表达式 rgbEx(value x 100,value x 100,value x 100)替换为 AdvancedRandom.Gradient(value)。

您最初的渲染在这里可能看起来有点沉闷 …… 因此,让我们尝试稍微调整一下。尝试这样的事情:
Advanced Random 插件入门
我们仍然在使用基本的噪声。但进行了一些修改:

  1. 将八度音阶增加到 8 以获得更多细节。

  2. 通过将位置缩放 0.15 来放大。

  3. 将噪声值乘以 1.6 以稍微拉伸它。

4. 立方取值; 这样可以重新分配噪声,使高音和低音更常见。

最后一步可能有点令人困惑,但这是一种有用的技术。我们现在应该有一些非常酷的云:
Advanced Random 插件入门

下载结果

Drawing Canvas 插件有一个很酷的功能,在这篇文章中被大量使用。您可以保存当前画布,然后使用浏览器插件下载它。

如果您想在游戏中使用噪点纹理,但又不想支付实时创建它的性能成本,那么这非常方便!
Advanced Random 插件入门

补充阅读:

这本在线书是关于使用片段着色器创建生成艺术的,因为我们一次创建一个像素的图像,它与我们正在做的事情有很多相似之处。它也有一些非常出色的交互式示例,它们都是用 GLSL 编写的,但即使您不了解它们的工作原理,它们仍然非常漂亮。

https://thebookofshaders.com

Inigo Quilez 撰写的一篇关于域扭曲的短文,他在过程生成方面有点像个巫师。他的网站上有大量关于图形效果的文章。

http://www.iquilezles.org/www/articles/warp/warp.htm

正文完
 0
评论(没有评论)