极简像素画游戏横版场景设计
![]()
文本概览:全文约 1,709 字,阅读约 5 分钟。
Jesse Eisenbart 给横版《Return》写第二篇 devlog 时,只甩出两条招:视差滚动,以及把玩家画小。没有讲树叶怎么簇、没有讲调色板怎么扩。独立游戏 mockup 里,第一眼判断“这世界有没有体积”,往往不是中景多了几片叶子,而是镜头一动,远近层是不是在错开,角色站在树下时是不是显得像个点。
2D 像素场景的纵深,先靠至少四层不同速度的背景,再靠撑出画面的巨大前景,把角色压小。
第 1 步:先看没有视差的森林
Jesse 先放了一段“关掉视差”的森林:地面一层、树墙一层、星空一层,镜头平移时整块背景几乎一起走。角色走在中间,树冠和人差不多高,世界像一张贴在玻璃上的贴纸。
![]()
同一段林子,层没有速度差。远山、树墙、地面绑在一起滑,纵深读不出来。
Jesse 的做法相反——先把背景拆成可平铺的独立层,再给每层不同的水平速度。
他给的起步数是大约4 层。
远的层动得慢,近的层动得快。接下来只选一种驱动方式:
像射击游戏那样持续横滚:给每层一个水平速度,远处设成近处的几分之一。
像探索关那样跟相机走:把每层的 x 写成相机 x 的一个分数。相机动 100 像素,最远层只动 20,中景动 50,前景几乎 1:1。
GMS2、Unity、Godot 都有现成的视差教程,devlog 里链过去了。像素画这一侧要先保证:每层都能无缝平铺,否则一滚就露接缝,速度差再对也救不回来。
![]()
层速一错开,树墙和星空不再同步。角色还是那么小,林子却开始有前后。
第 2 步:尺度比细节先到位
视差解决的是“动起来有体积”。静止 mockup 里,更省事的一招是:让玩家在画面里显得很小。
Jesse 先给了一张“只有中景树墙”的夜林。角色站在画面正中,手里那把枪是全图最亮的点。
树冠顶到星空下沿,人和树的比例接近 1:2——能看清是树林,但读不出“这片林子很大”。
![]()
星空、一排等高的树、一条地平线。角色几乎站在画面视觉中心,世界没有参照物压他。
然后他在左右各加一棵撑出画框的前景大树。树干是近黑的剪影,树冠切到画面顶外,地面粒子跟着近景走。角色还是同一个,立刻被夹在两根柱子中间。
![]()
左右两棵近景树把镜头“卡住”。中景那排小树反而退成远景,角色掉进林子里。
转折就在这一对前后对照。大树不必画满树皮裂纹;剪影够黑、轮廓够出框,尺度就成立。Jesse 写得很直白:不一定是树,任何能让玩家显得渺小的巨大物体都行。
第 3 步:前景伸出画面,背景比人高
他把同一套办法用到新地点的 mockup:废墟区。背景是发绿雾的高楼剪影,中景是塌掉的梁和碎石,前景一块废铁墙直接伸出镜头上沿。角色在左下角举着白剑,对面一只三眼的大家伙。墙比人高出去好几倍,楼比墙还高。
![]()
竖向空间被前景墙和远楼同时拉开。角色只占画面一角,世界比他大。
竖向尺度不只靠“画更高的东西”。另一张营地里,近景是带屏幕的终端和四足机械,中景树丛,远景两层越来越浅的山。颜色只剩四五档绿和近黑,纵深全靠层和剪影,不靠在树上加高光。
![]()
近景最暗、远山最浅。角色和终端贴在最前一层,山在他头顶往后推。
先锁“角色在画面里占多高”,再决定树要不要出框。出框一次,比在中景加二十片叶子更便宜。
参考资料
Return Devlog 02 - Creating Visual Depth in a 2D Pixel World: https://jesseeisenbart.itch.io/return-alpha/devlog/384936/return-devlog-02-creating-visual-depth-in-a-2d-pixel-world
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.