图像与文字

有两类内容不是来自 3D 模型:你已有的图像,以及文字。两者都在一开始就作为场景的一部分进入管线,而不是在最后叠画上去——因此线条、描边、遮蔽、阴影和调色板都能作用于它们,无需任何新的处理过程。

场景中的图像

在场景步骤中,大纲的 + 菜单 一张图像 › 从图像文件… 会把图像放到一个平面上:公告板植被、远处的树、招牌、亮着灯的窗户、手绘背景。它和其他部件一样,在大纲中占一行,在检查器中有变换区块和自己的设置;它也是场景节点图中的一个图像节点:行与节点是同一个东西,它的设置也在节点上,后面的行或环形会重复它。

设置 作用
朝向 直立、地面上平放、精灵(在精灵空间中)或贴花(两者见下文)。
已镜像 左右翻转。不花任何代价,也不需要第二个文件。
倾斜 向后倾斜的角度。
四分之一转 绕竖直轴旋转。只能是四分之一圈:介于其间的角度需要过滤,而过滤会让像素画变模糊。
每像素米数 一个图像像素覆盖世界中的多大范围。
使用场景的光照 默认关闭:图片通常已经由作者画好了明暗,再加一次明暗会让它有两个光照方向。
周围的线条 与其他部件周围一样。
在下方镂空 透明度达到这个程度的像素视为空洞,所以镂空的植被能正常显示。
计入构图 用于标签时关闭:骑士上方的「GAME OVER」横幅不应该让骑士缩小。
视差图层 它属于哪个图层,从后往前计数,因此手绘美术和 3D 共用同一个图层堆栈。

有两个按钮可以让它变得清晰,两者都使用当前显示的摄像机:

  • 整像素调整大小,让一个图像像素恰好覆盖整数个精灵像素。其他任何值都会重新采样。
  • 面向摄像机会按该摄像机的俯仰角倾斜它。向下看的摄像机会让直立卡片产生透视缩短,导致丢行,字母糊成一团。

在命令行中:

pxr project set game.pixor --add-picture bush.png:-1.1,0,-0.3:0.05
pxr project set game.pixor --add-picture bush.png:1,0,0.2:0.035 --mirror
pxr project set game.pixor --add-picture sky.png:0,0,-8:0.2 --layer 0 --unframed

在精灵空间中,图像根本不是卡片。场景绘制完成后,它的图像被放到精灵自己的像素上、其位置所落的地方:所以它面向每台摄像机——就像公告板,从精灵表的每个朝向看都是同一丛灌木——而且无论摄像机如何,每个图像像素都是整数个精灵像素(精灵像素,默认 1),这正是精确的字母所需要的。它保留其位置的深度,所以位于该位置前方的东西仍会遮住它;它和卡片一样是一个部件,所以线条、清理和调色板都把它当作一个整体处理。它像直立卡片一样立在自己的位置上,即其底边中点;开启计入构图时,它的位置会参与取景。

pxr project set game.pixor --add-picture bush.png:-0.8,0,1.1 --facing sprite
pxr project set game.pixor --add-text "+12" --text-at 0.25,0.35,0.9 \
  --facing sprite --picture-pixels 2 --font pixor-5

贴花会绘制在直立卡片所在位置的任何表面上,范围是其平面两侧范围以内(单位为米):墙上的招牌、裂缝、焦痕;向后倾斜四分之一圈,就是地上的水洼或地毯。它没有几何体,也没有自己的部件:画面中绘制的表面落在其框内的地方,表面会取图像在该处的颜色,同时保留自己的光照、线条和描边,所以墙上的招牌和墙一样有明暗。

pxr project set game.pixor --add-text "OPEN" --text-at 0,0.3,0.45 \
  --text-size 0.03 --facing decal --decal-reach 0.25 --font pixor-5

落在调色板上。如果项目有固定的调色板,导入图像时会把它转换到项目的调色板,渲染结果会说明有多少像素被改变:

picture  bush: 330 of 330 pixels moved to the palette (100.0%)

--keep-colours 会让它们保持原样。使用自动调色板的项目此时还没有可吸附的调色板——它的调色板是根据场景中的内容(包括卡片)生成的——所以这一步放在管线更后面进行。

PNG 还是 JPEG:抠图需要 PNG 的透明度,用作背景的照片多半是 JPEG。

包含多帧的图像。一张帧并排排列的图像——四帧闪烁的火把、六帧飘扬的旗帜——就是一张设置了帧的图像(--picture-frames 4)。卡片宽度为一帧,显示第一帧;在 Pixor 中制作的片段可以为显示哪一帧设置关键帧(picture:NAME、frame),所以手绘的闪烁也能像其他内容一样在精灵表中播放。已镜像会在原位翻转每一帧,保持顺序不变。

这些帧可以是各自独立的文件,而不是一整条——每帧一个文件,--picture-sequence:指定的文件是第一帧,flame_0001.png,其后的编号依次递增,补零方式相同;每一帧都与第一帧尺寸相同。它们还可以自行播放——自行播放,--picture-plays:每帧一张,循环往复,不管精灵表显示什么,除非某个片段用关键帧指定显示哪一张。没有其他东西在动时,它们本身就是动画,一个名为 picture 的循环。

pxr project set game.pixor --add-picture flame_0001.png:0.7,0,0.8 \
  --picture-frames 4 --picture-sequence --picture-plays --facing sprite

天空

天空位于一切之后,在没有绘制任何东西的像素中——因此模型保留没有天空时的描边。它可以是色带:一个顶部颜色和一个底部颜色,中间有整数级过渡,从不混合;也可以是绘制的图像,锚定在帧的顶部并居中,一个图像像素对应整数个精灵像素,边缘向两侧延伸。它的颜色精确地在调色板中,所以色带就是你要求的颜色。它是世界的一部分:大纲的 + 菜单中的世界 › 天空,或 pxr project set game.pixor --sky '#2c3e6b,#9dbcd9,4'(或 --sky dusk.png:2),以及 --no-sky。

场景中的文字

文字卡片是一种图像经过绘制而非读取的卡片,因此文字可以免费获得卡片的朝向、转角、比例、镂空和线条。在应用中,大纲的 + 菜单中的图像 › 文字会在模型上方放置一个——即场景节点图中的一个文字节点——字体的一个像素对应精灵的一个像素;它的检查器中有文字、字体、文字比例、墨线和描边,下方是卡片自己的设置。无论在应用中还是脚本中,文字都是标签:它们不决定画面如何取景,所以应用会把它们放在画面顶部的内侧;开启计入构图则会改为围绕它们取景。脚本中:

pxr project set game.pixor --size 128
pxr project set game.pixor --add-text "GAME OVER" \
  --text-at 0,2.3,0 --text-size 0.033 --tilt -45 \
  --text-colour '#f4ecf2' --text-outline '#1a1620'

--text-size 是每个字体像素对应的米数,因此当它达到一个精灵像素或更大时文字才清晰可读:渲染时会输出精灵表每米的像素数(在 --size 40 的骑士项目中约为 128,0.033 × 40 ≈ 1.3;加上本页的灌木和图像为 37,仍大于 1)。在 64 px 时约为 24,即一个字体像素不到一个像素,字母会碎掉。

选项 作用
--font NAME|FILE pixor-11、pixor-5,或你自己的字体文件:Pixor 自有格式或 .bdf。
--align left|middle|right 每条线条所在的位置。
--wrap PIXELS 在此宽度处换行。过长的单词保持完整:断开的单词比突出的一行更难读。
--letter-spacing N, --line-spacing N 额外的整像素。
--text-colour, --text-outline, --text-shadow 墨线、一像素描边、像素阴影。
--text-scale N 每个像素变成 N×N。只能是整数倍。
--facing sprite, --picture-pixels N 在精灵空间中,每台摄像机上 N 个精灵像素对应一个字体像素。

布局处处只用整数:字宽和行高都是整像素,没有字形整形,也没有亚像素定位,所以同一段文字在每台机器上都得到相同的像素。字体中没有的字符显示为空白而不是方框,因为精灵中出现方框比空白更糟。

文字默认是标签:它们不影响镜头的取景。在精灵空间中,它们从每个朝向看都是精确的,不倾斜,也不随摄像机缩放:--facing sprite。

作为几何体的文字

letters 形状会拼出文字,并把字体的每个像素挤出成方块,因此字母会像其他几何体一样接受光照、色带、描边和调色板——招牌、横幅、墓碑:

pxr shapes -o sign.glb --shape letters:2,0.5,0.25
pxr project set game.pixor --add-shape letters:1.2,0.3,0.1:0,3,0 --words HELLO

文字立在 3 m 高处,不会碰到骑士的头盔;和其他形状一样,每个字体像素需要至少一个精灵像素才能看清,骑士在 --size 128 下正好满足。

只构建没有被相邻面遮挡的面,所以一个单词只有几百个三角面,字母立在墨迹上,而不是立在下伸部所需的空白处。

字体

Pixor 附带两种字体,都是专门为它绘制的:pixor-11 是界面使用的字体;pixor-5 的大写字母五像素高、多数字母三像素宽,用于精灵上方的数字、标签和 HUD,在这些地方较大的字体会喧宾夺主。letters 形状在其检查器中用字体在两者之间选择。你自己的字体是一个同样格式的文本文件,就像看起来那么简单:

== A
.###.
#...#
#####
#...#
#...#

以 == C 开头的一行指定字符(无法输入的字符用 == U+00E9),之后是它的各行:# 是墨迹,. 是空白。它易读、可以比较差异,而且不需要字体库。

BDF 文件可以直接使用:大多数像素字体都以这种格式分享。它的字形位于由字体上伸和下伸高度决定的同一格中,每个字形的宽度与字体规定的步进宽度一致,因此保留了设计者选择的间距,Pixor 不会额外添加。

从图片提取调色板

调色板文件可以是一张图像:一张参考图、一张你想要的游戏画面的截图,或一条色板。

pxr render hero.glb --palette reference.png

颜色不超过十六种的图像会原样给出这些颜色,顺序固定;颜色更多的图像会给出最多十六种最具代表性的颜色(难以分辨的相近颜色会合并为一种)。同一张图像在每台机器上都得到相同的调色板。

本页介绍的内容属于完整版;免费的浏览器演示版只提供默认外观和 PNG 精灵表。

在浏览器中试用 获取 Pixor