如何以不引人注目的方式创建重复的大空间背景


14

如何创建一个大型空间背景,可以重复进行rts游戏。我也想拥有复杂的星云和尘埃场,但是由于这些单位将有很大的探索空间,所以我不能拥有120000px x 1200000px jpeg的像素,因此我想重复图像,但不要在片段之间使用变化线。

我将它与Microsoft的Babylon框架一起用于Web GL画布


8
您是否考虑过仅使用过程着色器而不是任何图像?一个简单的网络搜索就可以显示出这一点,这看起来非常令人印象深刻:Casual-effects.blogspot.com.au/2013/08/starfield-shader.html
LeFauve 2015年

@LeFauve实际上我非常喜欢这个想法。当您继续旅行时,游戏还记得过去产生的东西吗?如何在浏览器内存中进行管理?
SuperUberDuper'1

@SuperUberDuper:只要它以确定性和局部方式生成,就无需“记住”任何内容。只要需要,就可以重新生成数据。
R .. GitHub停止帮助ICE

@LeFauve:确实应该是一个答案。这比给出的答案要好得多。
R .. GitHub停止帮助ICE,2015年

@R ..我同意,在webGL中为其提供一些代码也将很不错;)
SuperUberDuper

Answers:


19
  1. 使用视差滚动。具有多个背景层,它们以主要视点速度的不同分数滚动。层越低,滚动速度越慢。这不仅是提供深度幻觉的好方法,而且还使背景看起来不太重复,因为不同图层上的对象由于图层不同步而将以不同的构图出现。

  2. 程序地创建背景。代替一个巨大的背景图形,而是具有多个不同的较小元素,并将它们全部随机地放置在整个游戏世界中。

顺便说一句:请尽量避免使用JPEG。这是一种有损格式,每次修改和保存时都会失去更多质量,它已针对摄影进行了优化,并且不支持透明度。对Alpha通道(如PNG)使用无损格式。唯一的好理由是您的源图像仅以JPEG格式提供(NASA发布了很多精美的天文学图片,这些图片都在公共领域中),并且您不希望对其进行任何修改。


7

为2D游戏建立无限背景的方法如下:

  1. 使用图形编辑器软件(例如iDraw for Mac)创建代表背景的图像A。该图像的大小应受限制。
  2. 复制A并将其镜像到Y轴,这是B
  3. 现在(水平)粘贴到A和B,这是AB
  4. 最后,将图像AB导入您的游戏中,并根据需要通过代码水平重复多次。

希望这可以帮助。


2
规模有限,但不是限制。方块越小,通常重复就越明显。
cHao 2015年

1
或者,不使用镜像,而是在Photoshop中使用“偏移”滤镜并在边框上克隆图章,或者仅使用GIMP的“使无缝”滤镜(“滤镜”→“贴图”→“使无缝”)。
wchargin 2015年

5

图层运作良好。

这是一些数学:

假设您的一条铁轨做得不好,以至于类似的东西__ __注意到它们之间的间隙。当车轮滚过时,会形成一个小缺口(微小的缺口)。

如果轨道长度l和轮具有半径r2pi r是车轮的圆周,ration=l/(2pi r)如果该比率为10.25说那么车轮将每季度得到一个缺口在它,因为它骑长。

这是我想到的最简单的方式来解释覆盖空间。

因此,假设您有两张图片,如果一张图片具有此四分之一的比例,您将获得一个4相图案,在4个图块之后将重复该图案。假设您有1个主要背景和2个叠加层,分别具有m和n个相位。然后,模式将在m * n个图块之后重复。

尽管数字无关紧要,但模式看起来最好,但最大公约数是1。例如,假设我们有一个阶段6和一个阶段4,其他每个阶段都会“排列”在某种意义上。

您可以使用这种技术(尤其是使用粒子和填充物),只需很少的工作即可创建很多“独特”的填充物。

回到火车车轮,如果传动比不合理,则凹槽会覆盖车轮!但这并不重要。


5

这似乎是另一个想法:

对于长距离背景(例如天空盒),视差图层的感觉并不佳。例如,想想星星,当在地球上行走时,或者甚至整夜更好时,所有的星星都会一起移动,尽管我们知道它们彼此之间相距数百光年或思想距离。问题是它们离我们太远了,我们无法注意到它们的距离。综上所述,我们仍然希望使用我们有限的计算能力(最多可以处理8k * 8k)绘制非常大的纹理(例如120k * 120k)。就像使用多个视差图层一样,您应该创建不同的纹理,每个纹理具有不同种类的细节。例如,一个代表星系,另一个代表一束恒星,等等。但是这一次与其以不同的速度移动,不如改变它们的大小。这是一个示例:考虑使用3个纹理,一个是2048 * 2048,另一个是729 * 729,第三个是625 * 625。由于这些数字互为素数,因此在将这3个纹理合并为3层时,应该将1cm(2048,729,625)= 764M像素从原点移开,以看到被绘制的同一事物,这有点像无穷大。实际上,您可以添加其他层或更改每个纹理的大小,并且最终总会得到与最小的纹理尺寸倍数


2
这和@AlecTeal的答案描述了一种称为蝉原理的技术。这是一种使用很少的资源创建非随机,非常大的非重复背景的简单方法。
Lie Ryan

4

这似乎是程序像素着色器的工作。

使用图像的优势在于:

  • 您无需提供巨大的位图
  • 它是程序性的,因此不必重复固定的图像(它可以无限变化)
  • 如果您需要视差效果,则可以模拟成千上万个平面,使用图像将是不切实际的
  • 您可以进行非常先进的效果,例如动态照明
  • 大多数处理是由您的GPU进行的,而CPU则可以留给游戏的其他部分

通过简单的网络搜索,可以将该着色器调到http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html,它看起来像您要找的东西。

我不是WebGL的专家,但是根据此页面,它看起来像使用常规的GLSL语言(这是图形卡用于对着色器进行编程的C类语言)。这意味着您可能几乎不需要做任何更改就可以使其工作。

但是,您可以尝试从更基本的着色器开始,以了解其工作原理。

该博客页面列出了在WebGL中实现着色器的所有步骤。这似乎是一个不错的起点。

查找精彩着色器示例的另一个好地方是https://www.shadertoy.com/


非常感谢!我现在很难选择答案!
SuperUberDuper

2
好吧,如果您有机会尝试着色器,那么从长远来看,如果您想制作漂亮的游戏,那肯定是有用的。第一步有点高(我花了两个星期的时间使我的第一个着色器看起来像我想要的样子),但从长远来看,这是值得的。
LeFauve 2015年

2

您可以将大的jpeg切成小段并将其放置(可见部分),甚至不需要一直将其存储在内存中。

就像旧游戏一样,某些“拼贴”也可以重复。那是NES控制台的常见解决方案,那甚至被硬件支持。


1
将JPEG剪切成较小的JPEG极其困难,即使不是不可能的,由于压缩的损失,这些JPEG不会产生视觉毛刺。如果要使用图块,则必须使用无损压缩文件格式,例如PNG。
LeFauve 2015年

1
我同意,PNG可能会更好,在另一方面,JPEG纹理常见的3D图形,更重要的JPEG使用16×16块编码en.wikipedia.org/wiki/Macroblock右切可如果不做编码最低可没注意到率。
Alexsey Shestacov,2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.