laya 小游戏适配步骤 | 连尚小游戏

# laya 小游戏适配步骤

# 一、说明

先用LayaAir IDE将小游戏导出 H5 版本，再通过⼀系列适配使其可以运⾏在⼩游戏平台上。

H5 版本是运⾏在浏览器环境⾥的,⽽⼩游戏平台并不提供完整的浏览器环境，只是对其进⾏了⼀定程度的模拟。

因此当 H5 游戏代码调⽤到⼀些⼩游戏平台没有提供的接⼝时就需要适配。

# 二、举例

1、打开 LayaAir 新建一个示例项目

2、发布项目为 Web 平台

3、新建⽬录 laya_cpk

4、新建⼩游戏⼊⼝⽂件 main.js

5、给 main.js 入库文件添加内容

main.js 内容为：

(1) 下面是 laya 1.x 的适配代码：

//注意：require的路径务必根据 runtime-adapter.js 和 code.js 存放路径填写
//添加适配文件
require("runtime-adapter.js");
//导入游戏运行代码 code.js
require("code.js");

(2) 下面是 laya 2.x 的适配代码：

//注意： require的路径务必根据 runtime-adapter.js 和 index.js 存放路径和实际文件名填写
//添加适配文件
window.loadLib=window.require;
require("runtime-adapter.js");
//导入游戏运行代码 index.js
require("index.js");

runtime-adapter.js下载地址

6、适配屏幕

修改 js/bundle.js 文件，在程序入口 Main.constructor 中，添加如下适配代码：

class Main {
  constructor() {
    //根据IDE设置初始化引擎
    if (window["Laya3D"]) Laya3D.init(GameConfig.width, GameConfig.height);
    else Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
    Laya["Physics"] && Laya["Physics"].enable();
    Laya["DebugPanel"] && Laya["DebugPanel"].enable();
    // ……… 省略多余代码，可以根据上面的关键字进行搜索 ………

    // 屏幕适配 开始 ↓↓↓
    Laya.stage.alignV = GameConfig.alignV;
    Laya.stage.alignH = GameConfig.alignH;

    if (typeof getAdapterInfo !== "undefined") {
        var stage = Laya.stage;
        var info = getAdapterInfo({
            width: GameConfig.width,
            height: GameConfig.height,
            scaleMode: GameConfig.scaleMode
        });
        // 注意：其中 GameConfig.width 和 GameConfig.height 为该demo中设置游戏的宽和高，
        // 请根据实际项目填写
        stage.designWidth = info.w;
        stage.designHeight = info.h;
        stage.width = info.rw;
        stage.height = info.rh;
        stage.scale(info.scaleX, info.scaleY);
    }
    // 屏幕适配结束 ↑↑↑

    // ……… 省略 ………
    //兼容微信不支持加载scene后缀场景
    Laya.URL.exportSceneToJson = GameConfig.exportSceneToJson;

    //打开调试面板（通过IDE设置调试模式，或者url地址增加debug=true参数，均可打开调试面板）
    if (GameConfig.debug || Laya.Utils.getQueryString("debug") == "true") Laya.enableDebugPanel();
    if (GameConfig.physicsDebug && Laya["PhysicsDebugDraw"]) Laya["PhysicsDebugDraw"].enable();
    if (GameConfig.stat) Laya.Stat.show();
    Laya.alertGlobalError(true);
  }
}

7、复制代码文件到laya_cpk目录

fileconfig.json
version.json
scene.json 场景文件
res ⽂件夹、
index.js 文件

8、适配本地资源读取方式

由于⼩游戏平台实现的 XMLHttpRequest 不⽀持读取本地⽂件。因此需要添加适配来读取本地⽂件。

注意

如开发中升级过 laya 版本，请以最初的版本号适配。

如不确定最初版本号，请把下⾯的适配⽅式都尝试一下。

laya 2.x版本需要修改 libs/laya.core.js 文件，laya 1.x请尝试全局搜索下面关键字适配

# 针对 `laya 2.x`版本：

修改 libs/laya.core.js文件，找到_loadHttpRequestWhat方法，增加适配代码，如下所示：

// libs/laya.core.js
_loadHttpRequestWhat(url, contentType) {
  // 这里插入添加适配读取本地资源 开始 ↓↓↓
  if (typeof loadRuntime !== 'undefined' && !url.startsWith("http")) {
    let that = this
    setTimeout(() => {
      if (url.startsWith('file://'))
        url = url.substr('file://'.length);
      var response;
      if (type == 'pkm' || type === "arraybuffer") {
        response = rt.getFileSystemManager().readFileSync(url);
      } else {
        response = rt.getFileSystemManager().readFileSync(url, "utf8");
        if ((type == 'atlas' || type == 'json' || type == 'prefab') && typeof response !== "undefined") {
          response = JSON.parse(response);
        }
      }
      that.onLoaded(response);
      }, 0);
      return;
    }
    // 适配结束 ↑↑↑
    // 下面是原本的 laya 代码
    if (Loader.preLoadedMap[url])
        this.onLoaded(Loader.preLoadedMap[url]);
    else
        this._loadHttpRequest(url, contentType, this, this.onLoaded, this, this.onProgress, this, this.onError);
    }

# 针对 `laya 1.x`版本：

找到load方法，增加适配代码，具体如下所示：

// libs/laya.core.js
/**
	*加载资源。加载错误会派发 Event.ERROR 事件，参数为错误信息。
	*@param url 资源地址。
	*@param type (default=null)资源类型。可选值为：Loader.TEXT、Loader.JSON、Loader.XML、Loader.BUFFER、Loader.IMAGE、Loader.SOUND、Loader.ATLAS、Loader.FONT。如果为null，则根据文件后缀分析类型。
	*@param cache (default=true)是否缓存数据。
	*@param group (default=null)分组名称。
	*@param ignoreCache (default=false)是否忽略缓存，强制重新加载。
	*@param useWorkerLoader(default=false)是否使用worker加载（只针对IMAGE类型和ATLAS类型，并且浏览器支持的情况下生效）
	*/
__proto.load=function(url,type,cache,group,ignoreCache,useWorkerLoader){
  (cache===void 0)&& (cache=true);
  (ignoreCache===void 0)&& (ignoreCache=false);
  (useWorkerLoader===void 0)&& (useWorkerLoader=false);
  if (!url){
    this.onLoaded(null);
    return;
  }
  Loader.setGroup(url,"666");
  this._url=url;
  if (url.indexOf("data:image")===0)type="image";
  else url=URL.formatURL(url);
  // …… 省略 ……
  if (group)Loader.setGroup(url,group);
  if (Loader.parserMap[type] !=null){
    this._customParse=true;
    if (((Loader.parserMap[type])instanceof laya.utils.Handler ))Loader.parserMap[type].runWith(this);
    else Loader.parserMap[type].call(null,this);
    return;
  }
  if (type==="image" || type==="htmlimage" || type==="nativeimage")return this._loadImage(url);
  if (type==="sound")return this._loadSound(url);
  if (type==="ttf")return this._loadTTF(url);
  // ……… 省略多余代码，可以根据上面的关键字进行搜索 ………

  // 适配 XMLHttpRequest 开始 ↓↓↓
  // 这里插入添加适配读取本地资源
  if (typeof loadRuntime !== 'undefined' && !url.startsWith("http")) {
    let that = this
    setTimeout(() => {
        if (url.startsWith('file://'))
            url = url.substr('file://'.length);
        var response;
        if (type == 'pkm' || type === "arraybuffer") {
            response = rt.getFileSystemManager().readFileSync(url);
        } else {
            response = rt.getFileSystemManager().readFileSync(url,
                "utf8");
            if ((type == 'atlas' || type == 'json' || type == 'prefab') &&
                typeof response !== "undefined") {
                response = JSON.parse(response);
            }
        }
        that.onLoaded(response);
    }, 0);
    return;
  }
  // 适配 XMLHttpRequest 结束 ↑↑↑
  // 下面是原本的 laya 代码
  this._loadResourceFilter(type, url);
}

9、右键选择 laya_cpk ⽬录内的⽂件（不包括 laya_cpk ⽬录本⾝），右键压缩为zip包，然后，重命名为 XXX.cpk，该 cpk即可运⾏在⼩游戏平台上。

laya_cpk目录结构为：

# demo 下载

laya-demo-cpk 下载地址

← Cocos打包 Egret打包 →