一直都是做网页开发，对于移动端的多屏适配可以说是比较有经验了，不管是用rem还是vw。不过在写游戏的时候，有点头疼了，完全不知道如何着手。
游戏里面元素的位置变化比较频繁多变，一开始是想的所有的位移都是基准屏幕(iPhone 6)的尺寸加上屏幕变化的比率。可这样，光想想就很头疼，这种不优雅的解决方式，一定不是最优解。
在网上搜索一番之后，大概明白大致的实现方案了：把页面主要元素都放到一个rootStage里面，再等比缩放这个rootStage，因为缩放是自动计算的，其它的所有运动和碰撞都可以基于rootStage的尺寸来进行，不需要考虑多屏适配。
具体实现如下：
在pixi.js里面，有一个最基础的由Application实例化过来的stage, 先取名叫做app。
这个app里面可以放置场景内容，背景色或者背景图片什么的。需要保证这个app是完全全屏的：
app = new Application({
width: windowWidth * pixelRatio,
height: windowHeight * pixelRatio,
antialias: true,
transparent: false,
resolution: pixelRatio,
view: canvas
})
app.renderer.backgroundColor = 0xffffff;
app.renderer.autoResize = true;
app.renderer.resize(windowWidth, windowHeight);
新增一个Container，叫做rootStage，这个rootStage的width和height，是设计稿的尺寸，像我们这边都是基于iPhone6，也就是375 x 667。
基于这个尺寸和app的尺寸，计算出一个rootStage可以以cover形式放置的尺寸。(cover尺寸是指的rootStage等比缩放，在不发生裁剪的情况下，在app里面能展现出最大的尺寸）。
基于cover尺寸和实际尺寸，计算出rootStage的scale，并调整rootStage的x和y，使得可以在app里面居中放置。
root = new Container();
root.width = rootScreen.width;
root.height = rootScreen.height;
const scale = realScreen.width / rootScreen.width
root.scale.x = scale;
root.scale.y = scale;
root.x = (windowWidth - realScreen.width) / 2;
root.y = (windowHeight - realScreen.height) / 2;
app.stage.addChild(root)
现在rootStage已经配置好，后面所有游戏内的主要交互和运动的元素都可以放到这里面，计算都是基于375 x 667的舞台计算，不需要考虑多屏幕的适配问题。
这是头一回正式的进行游戏开发，也没什么领路人，暂时只能想到这么多，如果有更好的办法，也欢迎大家告知
参考资料：
