一张“讨巧”的视差卡片的诞生记录

09/0847 浏览

如封面效果所示，是一个很有趣的效果。

视差效果是什么？

简单的来说，就是欺骗眼睛造出的一种立体感。值得注意的是：视差不是真的 3D 物体运动，只是不同图层运动速度 / 幅度不一样，欺骗人的眼睛，制造 “远近” 的错觉。

放在当前视差卡片上，为了制造这种立体感，我用了3层内容来制作这个视差效果：

当然有非常讨巧的部分，就是背景卡片与中景图片使用的是一样的颜色。

同时为中层图片添加边缘羽化效果。

这样做在晃动的时候就好像只有中间的放大镜在移动，而不是整个中景图片（才不是懒得抠图呢），由此组合成了这张视差卡片。

在我的设置中，底层的卡片是最大的，移动的速度不快，中层的图片移动速度是最快的，文字层则是跟着底层卡片进行布局，速度也与底层的卡片相差不大。

那么视差卡片可以被用在哪些地方？

比较常见的场景是游戏首页的菜单页面，就是有那个“开始游戏”“继续游戏”“收藏物品”页面，如果后面taptap制造开放了陀螺仪权限的话，晃动手机就能感受到这种视差效果，可以为游戏套上更多质感。

还有比如卡牌游戏，卡牌边框、背景、光晕分层动，能跟着角度跑的高光镭射反光等，模拟实体闪卡的质感。

当然视差效果不止3D视差卡片这一种啦，常见的场景就是游戏背景，比如泰拉瑞亚，拆成好多层：近处花草树木、中间山丘、远处大山、云朵、天空等，这种是视差滚动。

还有视差贴图、镜头视差等不同效果，这就不再本帖的讨论范围了~

欢迎大家来我的游戏中体验：（过完新手教程就可以到“提示App”中看到这个视差卡片）

视差卡片的实现：

这一步，交给伟大的嗒啦啦女士为我们讲解了：

以下是制作完嗒啦啦整理的步骤，准备好素材就可以复制文档给嗒啦啦进行尝试：

3D视差卡片的一次应用

https://my.feishu.cn/wiki/JXRnw8jNeiI2L1kfuUvc7oqEnjh

最小实现（参考代码）：

lua
-- 状态
nx, ny, targetNx, targetNy = 0, 0, 0, 0
dragging = false
tau = 0.1

function onDown(px, py)
    if hit(bgRect, px, py) then
        dragging = true
        targetNx, targetNy = normalize(px, py, bgRect)
        return true   -- 吞滚动
    end
    return false
end

function onMove(px, py)
    if not dragging then return false end
    targetNx, targetNy = normalize(px, py, bgRect)
    return true
end

function onUp()
    if not dragging then return false end
    dragging = false
    targetNx, targetNy = 0, 0
    return true
end

function tick(dt)
    local k = 1 - math.exp(-dt / tau)
    nx = nx + (targetNx - nx) * k
    ny = ny + (targetNy - ny) * k
end

function draw()
    local bg = offset(bgRect,  nx * MAX_BG,  ny * MAX_BG)
    local mid = offset(midRect, -nx * MAX_MID, -ny * MAX_MID)
    local tilt = nx * MAX_TILT - ny * MAX_TILT * 0.35

    rotateAround(center(bgRect), tilt)

    fillRoundRect(bg, radius, CARD_COLOR)
    fillRoundImage(mid, radius, image, bleed)
    featherRoundRect(mid, radius, CARD_COLOR, FEATHER)

    local fgx, fgy = -nx * MAX_FG, -ny * MAX_FG
    text(bg.x + pad + fgx, bg.y + pad + fgy, "TITLE")
    text(bg.x + bg.w - pad + fgx, bg.y + bg.h - pad + fgy, "HINT")
end

合集

系统重启中

9.8

9.2