像素画横版赛车游戏场景视差循环教程

打开网易新闻 查看更多图片

文本概览:全文约 1,439 字,阅读约 4 分钟。

把整条赛道拆成可单独打磨的零件——悬浮艇、大理石建筑、柏树与云——再按“近快远慢”叠成九层视差,用能整除画布宽度的位移速率做成完美循环。

打开网易新闻 查看更多图片

先造载具:轮廓草图还是直接铺色?

打开网易新闻 查看更多图片

灵感故意贴近经典:Delta 全能均衡,Omni 加速与操控好但极速低,Mega 相反。先想“厂商哲学”,再决定外形,比空想一个酷外形更稳。

把主体拆成线稿组件,方便快速定形、暂时不管调色板。推荐直接铺实色画剪影——因为线稿有时反而拖累上色。

尺寸参考(不含尾焰):

  • Delta:46×25px
  • Omni:33×24px
  • Mega:59×21px

在尺寸与剪影上拉开差距,后面的视差才有“主角”可跟。

赛道旁的世界:大理石朋克

打开网易新闻 查看更多图片

好的 AG 虚构不只靠飞船,更靠路边风景。罗马/希腊大理石,掺一点未来科技,像把奥运竞技精神推进未来。

同平面上的建筑与神庙可以共用最深色与粉色高光;远处塔楼则故意拿掉这两档,用少色做出“更远”。

  • Building:50×52px
  • Temple:75×72px
  • Tower:30×64px
自然底景:云与柏树同一套流程

打开网易新闻 查看更多图片

底环境要托住建筑。主题选了意大利柏树那种简洁自然景。大气透视很关键:远景颜色怎么灰、怎么偏蓝,决定深度是否成立。

云与树的流程一样:粗轮廓 → 修形 → 明暗阴影 → 再精修

  • 小云:96×26px
  • 大云:144×37px
九层视差:近快远慢,且速率要能整除

打开网易新闻 查看更多图片

零件齐了,才进入视差。方法沿用完美循环技巧:近处物体每帧移得多,远处移得少;每层长度不同,在固定帧数里拖过画面。

打开网易新闻 查看更多图片

要循环无缝,每帧位移必须能整除画布在滚动轴上的尺寸。可选的平滑速率被画布卡住——开画布时就要想好,别事后硬改。

本例参数:

  • 画布:192×96px
  • 帧数:192 帧,每帧 0.05 秒
  • 层数:9 层,速度从近到远递减

由近到远(像素/帧):

  1. 赛道前景 — 32
  2. 赛道 — 24
  3. 树 — 16
  4. 地面 + 建筑 — 6
  5. 高架公路 — 4
  6. 地面 + 建筑 — 3
  7. 地面 — 2
  8. 云 — 1
  9. 更远的云 — 0.5(每 2 帧移 1px)

很多人把悬浮艇、建筑、云糊在同一层,再整体平移,结果要么跳帧,要么永远对不齐循环点。先按“距离 → 速率”表格排层,再往层里塞资产,循环才会“咬住”。

参考资料

Pixelblog - 46 - Anti-Gravity Racers — SLYNYRD: https://www.slynyrd.com/blog/2023/9/25/pixelblog-46-anti-gravity-racing-scene