#86 做一款 Delta 模拟器皮肤
适配了灵动岛以及多项优化体验
TL;DR: 我做了一款 Delta 模拟器的 NDS 皮肤，适配了灵动岛以及多项优化体验。目前只支持全面屏 iPhone 型号。可以在此下载：
或者 Google Drive / 腾讯微云(密码cw69st)。详情见下文。
自 App Store 放开模拟器应用政策后，Delta 已被下载百万次。我也下载玩了几款游戏，体验很流畅。自带皮肤已经比较精美，但美中不足的是没有为灵动岛做适配。我最近想玩 NDS 上的超执刀系列，默认 NDS 皮肤会遮住上屏幕一部分。总觉得有点不舒服，看了下官方文档，决定自己做一款 NDS 皮肤。
皮肤展示
竖屏皮肤我让屏幕下移了几个像素，稍微放大了十字键（D-Pad）和 ABXY 按键尺寸，由于皮肤可以忽略 iOS 的安全区，所以我将菜单键挪到了上方，减少误触。右上方加如了一个彩色 Delta logo，使用了 SNES 的 ABXY 颜色。
横屏皮肤主要以「人体工程」为主，怎么舒服怎么来。由于 NDS 是双屏输出，按键也不能太小，所以导致屏幕空间不购大。上方款式作为突出主屏信息用，并加入了快捷存/读档按键。下方则突出了触屏信息。某些游戏（比如超执刀）主要玩法以触屏为主时，就可以切换这个皮肤来玩。
皮肤的设计源文件已发布到 Figma 社区。
使用皮肤
皮肤文件格式是 .deltaskin，传到 iPhone 后直接使用 Delta 打开。
打开设置，找到了 controller skins 项，选择相应平台，点击要更换的横屏或竖屏皮肤，在选择刚才安装的皮肤即可。
皮肤制作
皮肤制作很简单，出完设计图，然后再映射键位位置信息即可。详情可见文档说明。
……
懒得看的话，我在下文简单说明下。
以官方皮肤文件为例，将后缀改为 .zip 直接解压，得到如下文件列表：
info.json
iphone_edgetoedge_landscape.pdf
iphone_edgetoedge_portrait.pdf
iphone_landscape.pdf
iphone_portrait.pdf这里去掉了 iPad 一些视图文件，只留下了 iPhone 端的。info.json 里面是键位映射信息，下面 带有 edgetoedge 的是全面屏的横竖屏皮肤贴图文件，不带此后缀的是非全面屏 iPhone 的贴图文件。定制皮肤要做的就是，按照相应尺寸设计文件导出，然后在 info.json 映射键位。
皮肤设计
皮肤的设计整体上还是很自由的，但要遵从 iPhone 设备尺寸和原主机屏幕的尺寸比例。以此皮肤为例，全面屏的比例我按照 375*812 设计，如果要导出 png 格式的话，就导出为 @3x 大小。NDS 屏幕为两块 4:3 的屏幕，合一起输出比例为 2:3，也就是 256×384，皮肤的屏幕尺寸也尽量保持整数缩放。
除此之外还需要注意的是，按键与按键之间、按键与触屏之间不要重合。除非是想故意做成一键按下多按键的效果。
键位映射
位置数据只需要两个，左上角坐标和键位区域的长宽尺寸，Figma 中可以轻松查看。如下图。
十字键是一整个区域，ABXY 是单独的按键区域。前者 json 中格式为：
{
"inputs": {
"up": "up",
"down": "down",
"left": "left",
"right": "right"
},
"frame": {
"x": 15,
"y": 500,
"width": 128,
"height": 128
},
"extendedEdges": {
"top": 15,
"bottom": 15,
"left": 15,
"right": 15
}
}Delta 这样处理是为了与摇杆实现方式通用，也可以用于定位八向（斜上斜下）的键位映射（所以你可以给任何主机装个摇杆）。extendedEdges 顾名思义是拓展边缘（图中绿色部分），在空间足够的情况下，用于额外拓展键位区域，特别是用于激烈的按键交互时，稍微按歪一点也能触发。不同键位的拓展键位应从实际出发，比如 ABXY 的拓展可能更适合各方向的延展。
除此之外文档还列举了几个额外的功能按键：
quickSave: 即时存档
quickLoad: 即时读档(最近储存的)
fastForward:长按加速
toggleFastForward: 切换加速
---
Multiple Inputs: 映射多键屏幕的映射也是同理。Delta 还支持苹果的 CoreImage Filters 库，你可以随意调用里面的参数赋予屏幕效果。有一个 macOS 应用叫 Filter Magic 里面举了每个方法的例子，有时间可以研究研究。
在 json 头部可以开启 debug 模式查看实机中键位映射是否准确。
打包皮肤
填写映射参数和皮肤名字后，将所有文件打包成 .zip（不包括文件夹），然后后缀重命名为 .deltaskin 即可安装使用。