网站稿件管理发布系统百度移动端优化

接到一个需求是类似下图的3D多房间视角，需要拖拽屏幕

问题

在做这种屏幕拖拽的时候发现，需要拖拽起来有跟手的感觉，会存在不同分辨率机型的适配问题。

即：美术调整好了机型1的手感，能做到手指按下顶层地板上下挪动，看起来手指始终按在顶层地板上（跟手）到了分辨率不同的机型2，可能首次按在顶层地板上，往下一划手指看起来就按到下面的房间了

原因分析

不同屏幕的分辨率不同，但相机缩放只能对准长/宽一边。如此缩放就一定会导致没对准的那一边屏占比发生变化

以相机水平向对准为例：

对于水平长度X比较长的屏幕，看到的楼层屏占比较大，拖动一层划过的长度比较长

但对于水平长度X比较窄的屏幕，看到的楼层屏占比就比较小，拖动一层划过的绝对长度更短

我们计算拖动距离应用到相机移动的数值，一般是上图标识的手指拖拽轨迹的长度: $\delta y=y_2-y_1$

而3d游戏，不同分辨率的屏幕会导致层高在屏幕上渲染出来的高度不一样。水平向对齐的相机，屏幕越宽（X越大），渲染出来的层高越大。

解决

知道了原因以后，其实只需要对不同分辨率的屏幕 乘上一个系数就可以了

那么具体应该乘多少呢？

具体系数

先说结论：对于水平向对准的相机，竖直滑动的系数为：$\frac{x_1}{x_2}$

其中$x_1$是一个基准值，是美术同学调整好的机型1的水平像素值

$x_2$则是当前机型的水平像素值

推导

以水平向对准的相机为例

设屏幕尺寸水平像素x，竖直像素为y。相机映射能看到的楼层的实际高度为h，实际宽度为m。实际楼层映射到二维屏幕的映射系数为f，即：$x\times f=m$、$y\times f=m$

因为相机是水平向对准，不同机型虽然x不同，但m是一样的。这也是不同机型唯一相同的字母

问题就抽象成了：
已知：$x_1$, $y_1$, $x_2$, $y_2$，且$x_1\times f_1=m$, $y_1\times f_1=h_1$, $x_2\times f_2=m$, $y_2\times f_2=h_2$
求：系数$n$，使得$\delta y_1=n\times \delta y_2$时，$\delta h_1=\delta h_2$

由
$x_1\times f_1=m$
$y_1\times f_1=h_1$
得到
$\frac{m}{x_1}=\frac{h_1}{y_1}$即：$m=\frac{x_1\times h_1}{y_1}$

代入机型2的$\frac{m}{x_2}=\frac{h_2}{y_2}$，得到：
$\frac{x_1\times h_1}{x_2\times y_1}=\frac{h_2}{y_2}$

有 $\frac{h}{y}=\frac{\delta h}{\delta y}$ ，得到：

$\frac{x_1\times \delta h_1}{x_2\times \delta y_1}=\frac{\delta h_2}{\delta y_2}$

即：
$\delta y_1=\frac{x_1\times \delta h_1}{x_2\times \delta h_2}\times y_2$

又：$\delta h_1=\delta h_2$

得到：$\delta y_1=\frac{x_1}{x_2}\times y_2$

即： $n=\frac{x_1}{x_2}$