用pixi.js开发微信小游戏:移动端多屏适配实现

作者 happyWang 日期 2018-07-06 Views
用pixi.js开发微信小游戏:移动端多屏适配实现

一直都是做网页开发,对于移动端的多屏适配可以说是比较有经验了,不管是用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的舞台计算,不需要考虑多屏幕的适配问题。

这是头一回正式的进行游戏开发,也没什么领路人,暂时只能想到这么多,如果有更好的办法,也欢迎大家告知

参考资料:

  1. 使用 pixi.js 开发微信小游戏
  2. 在pixi.js实现设备自适应和强制竖屏
  3. Phaser横竖屏适配