游戏适配
发布网友
发布时间：2023-04-14 08:43
共1个回答
热心网友
时间：2023-10-11 14:24
手机屏幕宽高比千差万别，如果不做好适配，就会在屏幕上留有黑边，或者有些内容超出去了，体验不会很好，因此我们需要做好适配，完善好一个游戏
最开始html采用的是像素来进行适配，因为屏幕的度量不是米，厘米，而是一个个像素，多少个像素就显示多少个“格子”
随着设备的发展，像素的“格子”越来越小，有时候完全一样大小的手机，新的手机的格子尺寸是原本格子的一半，这样用像素来描述已经不精确了，因此引进了这一个概念
如375*667的iphone6，实际像素为750*1334，我们给的图需要真实的像素，才能展现得更精细，因此就衍生两个概念，屏幕宽高和游戏宽高，屏幕宽高*pixelratio=游戏宽高
很多游戏开发都用750*1334这个比例作为参考，宽高比(aspect ratio)为0.56，（我偷偷定义为0.56屏）
在dom的canvas API上，canvas.width/canvas.height是上下文宽高，即游戏宽高，而style.width或者通过transform来描述的，是css的宽高，即屏幕宽高
如果比例一致，如游戏是640*1334（即0.56屏），我们可以简单等比缩放即可
如果比例不一致，有两种做法
如果是调整游戏的尺寸，那么游戏内的UI也需要坐对应的调整，因为只是视口变大了，但是UI的定位还没有改变，仍需要进一步进行调整
通常来说我们会选择固定宽（fixedWidth），因为从iphone6过渡到iphoneX的第一感觉是高度变大了，而不是宽变窄了
适配需要考虑两个轴向，水平和垂直，由于采用了fixedWidth，我们不需要考虑水平了，仅仅考虑垂直轴即可
有时候我们通过适配改变了一个显示对象的缩放，位置，这时候使用动画的时候，可能初始值已经不正确了，或者终点值
这个时候我们可以使用双层容器，外层容器是适配，内层是动画用，如外层适配导致了缩放为0.8，但是内层依然是1到1.2的放大，两者最终会被叠加
