2.5D — 透视和深度

本指南介绍如何在 Solar2D 中实现有趣的 2.5D 效果。虽然 Solar2D 不是真正的 3D 引擎,但其 2.5D 功能允许您模拟看起来三维(3D)的效果,而无需处理 3D 的复杂性。

背景

在文艺复兴时期,菲利波·布鲁内莱斯基 展示了至今仍在使用的透视几何方法。这种方法解决了如何在二维平面上表示三维物体的问题。即使在今天,这仍然是 3D 计算机图形如何在屏幕上呈现的基础。本质上,您的眼睛被欺骗,认为在平坦屏幕上渲染的内容实际上是 3D 的。

透视

四边形变形

几个 显示对象 可以通过一般四边形(quads)进行变形。对于支持四边形的对象,每个角都有一个关联的 x,y 属性,该属性指定对象的角应如何变形。这些属性默认为 0,0,表示没有偏移。

对象 方法 四边形支持
显示组 display.newGroup()
标准图像 display.newImage()
动态选择的图像 display.newImageRect()
文本 display.newText()
动画精灵 display.newSprite()
矩形 display.newRect()
圆形 display.newCircle()
圆角矩形 display.newRoundedRect()
线条 display.newLine()
多边形 display.newPolygon()
浮雕文本 display.newEmbossedText()
容器 display.newContainer()
快照 display.newSnapshot()
粒子发射器 display.newEmitter()

下图显示了如何通过移动右上角右下角来扭曲图像。

(x1,y1) (x4,y4)
 → 
(x2,y2) (x3,y3)
local logo = display.newImage( "corona-logo.png" )

logo.path.x4 = -110
logo.path.y3 = -55

过渡变形

正如可以显式设置各个角点来扭曲显示对象一样,您还可以过渡这些点以获得逐渐扭曲的效果。

请注意,您必须在 transition 方法中将 object.path 属性作为第一个参数引用,因为您要过渡的是对象的路径,而不是对象本身。然后,依次将路径的特定角点作为过渡的目标属性。

-- Use "logo.path" as the first argument, not "logo"
transition.to( logo.path, { time=2000, x2=20, y2=-20, x4=-40, y4=40 } )

以下 示例 显示了使用过渡变形可以实现的一些有趣效果。

Z 轴排序

所有 Solar2D 显示对象都存在于 z=0 平面上,但可以按照 组编程 指南中所示进行排序。当您扭曲图像时,它看起来像是存在于 3D 世界中,但实际上它仍然在同一平面上。因此,所有标准对象排序规则将继续得到遵守。

广告牌

在 Solar2D 图形模型中,广告牌是免费提供的。只需创建一个组并通过调用 group:toFront() 确保它是顶层的。

模式 7

超级任天堂模式 7 中,您只能将背景设置为透视。在 Solar2D 中,您可以扭曲任何矩形以使图像显示为透视。

网格

您可以通过创建矩形网格并扭曲网格中特定交点的所有角来构建更复杂的效果。

local group = display.newGroup()

local a = display.newRect( group, 0, 0, 300, 300 )
local b = display.newRect( group, 300, 0, 300, 300 )
local c = display.newRect( group, 0, 300, 300, 300 )
local d = display.newRect( group, 300, 300, 300, 300 )

local intersectionX = -90
local intersectionY = -70

a.path.x3 = intersectionX
a.path.y3 = intersectionY

b.path.x2 = intersectionX
b.path.y2 = intersectionY

c.path.x4 = intersectionX
c.path.y4 = intersectionY

d.path.x1 = intersectionX
d.path.y1 = intersectionY

深度

Z 轴缩放

在 Solar2D 中,您可以通过缩放对象来模拟深度,因为它们会靠近或远离观察者。这可以用来创造相对深度的错觉,例如一系列树木向远处延伸。

滚动

在 Solar2D 中,将图像放置在背景中是免费的。因此,水平滚动条、侧滚动条和双向滚动条在 Solar2D 中都很容易实现——只需确保您的背景首先绘制或通过 object:toBack() 将其移到背面)。

视差

视差提供了一种相机与移动物体之间“距离”的感觉,这些物体后退到模拟空间中。

天空盒/天空穹顶

在 Solar2D 中,天空盒/天空穹顶效果是免费的可用的。只需创建一个组并通过调用 group:toBack() 确保它是最后面的