CocosCreator的H5游戏适配优化插件

当今,手游的份额可以说占据了整个游戏市场的半壁江山,特别是最近几年H5游戏的兴起,更是让手游如日中天。然而,我们在适配手机端的同时,往往也不能忘记PC的用户,那么本文将给各位介绍打出的手机端H5如何快速适配PC端。

Creator适配方式

Creator打包提供web-mobile和web-desktop两种方式,分别来适配手机和PC端。

效果

我们做个demo,四个图像分别对齐四端[左右加了widget对齐,上下没有加widget],中间一个图像进行定位

image

  1. 理想效果

  1. 打web-mobile在PC端显示

  1. 打成web-desktop在PC端显示

优势

  1. 官方提供

劣势

  1. 两套资源
  2. 需要添加自适应跳转页面或者两个网址
  3. PC端适配并不好,打包成web-mobile,竖屏游戏显示可能不全,打包成web-desktop需要上下滑动

核心问题

  1. 手机端能填充全屏
  2. PC端能尽量填充一边
  3. 尽量使用一套资源

分析问题

  1. 手机端其实用Creator的web-mobile已经可以实现了
  2. PC端在web-desktop上面,是用的指定分辨率的问题,如下
<div id="GameDiv" style="width:360px; height: 720px;">
  <canvas id="GameCanvas" width="360" height="720"></canvas>
  <div id="splash">
    <div class="progress-bar stripes">
      <span style="width: 0%"></span>
    </div>
  </div>
</div>

那如果我们获取到的实际像素并修改,其实就可以解决这个问题了。
3. 其实根据第二点,我们发现只要解决了,这个问题也就影刃而解了。

解决问题[度娘]

因为没有前端经验,纯靠大学拿点基础知识,所以我这边主要就全靠度娘

  1. js获取屏幕的方法
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
  1. 获取节点
    因为web-mobile是全屏模式的,canvas和splash都在顶层,我们先给它包一层div
  <div id="GameDiv">
    <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
    <div id="splash">
      <div class="progress-bar stripes">
        <span style="width: 0%"></span>
      </div>
    </div>
  </div>

然后我们获取节点,并修改分辨率,如果我们是竖屏,则获取高度,让宽度=高度的一半(目前主流的全面屏)

      let height = document.documentElement.clientHeight;
      let gameDiv = document.getElementById('GameDiv');
      gameDiv.style.height = `${height}px`;
      gameDiv.style.width = `${height / 2}px`;

就这么简单,让我们预览屏幕,发现屏幕已经填充全屏了

  1. 手机不做处理

因为我们修改了canvas的大小,这样手机也会受影响,我们修改下

      var userAgentInfo = navigator.userAgent;
      var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
      var isPC = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          isPC = false;
          break;
        }
      }
      
      if(isPC) {
          // TODO
      }

这样,我们的改造就完成了,改造完的显示

完善

如上解决,我们还要几个点需要考虑

  1. 横屏如何处理

  2. 想PC适配手机如何处理

  3. 想指定分辨率为设计分辨率的比例如何兼容

以上优化,可以在CocosStore中下载【H5适配优化】插件体验

插件地址

关注我的公众号,探索更多技术
wx_gh

商店的扩展插件考虑了多种情况,并适配2.x和3.x两个版本,欢迎大家下载体验。【原理很简单,各位可以自行实现,收费是给个辛苦费~】

  1. 可以设置是否忽略某个终端
    image
  2. 适配模式更多样
    image

模式说明:

  1. EXACT_FIT 即适配全屏,存在拉伸
  2. FIXED_WIDTH 适配宽度,上下可能存在黑边或需要滑动
  3. FIXED_HEIGHT 适配高度,左右可能存在黑边或者需要滑动
  4. NO_BORDED 优先利用屏幕,上下或者左右需要滑动
  5. SHOW_ALL 优先展示内容,上下或者左右存在黑边
  6. NONE 不进行适配,根据指定分辨率,上下左右都有可能出现黑边或者滑动

牛皮普拉斯

1赞

2021.03.11 更新1.2.0版本

  1. 添加全屏模式,可以隐藏状态栏【测试浏览器:chrome、safari、uc】
  2. 优化代码
  3. 价格变更为1.99

大佬请教下 按照你的代码 PC上直接显示在最左边了 怎么才能居中呢?

你是怎么配置的?我这边都是显示在中间啊

感谢答复 我在css加上了 配置 已经解决了

大佬请教一下,我买了你的插件。。。在2.4.4上面,使用之后,PC和ios上面都是居中的,但是android上面是靠左的,能指导一下吗