前言

phaser是一个开源2d游戏框架, 在phaser开发中, 你是否有思考过如何才能做类似移动端vw适配, 开发时直接按照设计稿的坐标与尺寸构建UI就好, 那么你可以参考本篇的适配方案

ps: vw适配方案请见我的掘金文章: 从一个祖传项目谈移动端vw适配

以终为始

先看适配方案的最终效果, 以下为同一套代码在手机和pad里的效果

示意图, 这是一般标准的设计稿尺寸, iPhone 678, 375x667

这是减去了刘海的模拟iPhoneX, 375x812

这是竖屏版iPad mini, 768x1024

这是横屏版iPad mini, 1024x768

开发时, 我们添加元素, 设置其坐标为(0, 0), 如果其原点也为(0, 0), 其左上角就在蓝色框内区域的左上角

核心概念

1.内容区: 上图中蓝色框内区域, 主要的交互内容UI呈现区域

2.背景区: 上图中红色框内区域, 放置背景和返回按钮等非主要的交互内容UI

3.视口: 屏幕的可见区域

适配方案总结

1.如果是窄屏, 则以屏幕的宽 / 375 为比例缩放, 上下垂直居中

2.如果是宽屏, 则以屏幕的高 / 667 为比例缩放, 左右水平居中

主要代码

show code

// 相机的缩放比
let zoom: nubmer = 1
// 背景区缩放以后的左上角x坐标
let backgroundRectX: nubmer = 0
// 背景区缩放以后的左上角Y坐标
let backgroundRectY: nubmer = 0
const designWidth: nubmer = 375
const designHeight: nubmer = 667
const designRatio: nubmer = designWidth / designHeight
const viewRatio: nubmer = window.innerWidth / window.innerHeight
// 根据设计稿的宽高比与视口的宽高比判断缩放的基准
if (designRatio > viewRatio) {
  // 以宽为基准做缩放
  zoom = window.innerWidth / this.designWidth
  backgroundRectY = -(window.innerHeight / zoom - designHeight) / 2
} else {
// 以高为基准做缩放
  zoom = window.innerHeight / designHeight
  backgroundRectX = -(window.innerWidth / zoom - designWidth) / 2
}
const camera: Phaser.Cameras.Scene2D.Camera = this.cameras.main
// 相机缩放
cameras.setZoom(zoom)
// 相机移动
camerassetScroll(-(window.innerWidth - designWidth) / 2, -(window.innerHeight - designHeight) / 2)