前言
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)
