cocos如何读取json格式数据

Cocos Creator 中读取与解析 JSON 数据的完整指南**

在游戏开发中,数据配置是不可或缺的一环，JSON（JavaScript Object Notation）以其轻量、易读、易于解析和生成的特点，成为了游戏数据存储和交换的常用格式，Cocos Creator 作为一款强大的游戏引擎，对 JSON 数据的读取和解析提供了良好的支持，本文将详细介绍在 Cocos Creator 中如何读取和解析 JSON 数据，涵盖从简单到常用的几种方法。

JSON 数据简介

JSON 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，它基于 JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999 的一个子集，JSON 格式主要有两种数据结构：

对象（Object）：无序的键值对集合，以包裹，键值对之间用逗号分隔，键和值之间用冒号分隔。{"name": "Player", "level": 10, "items": [1, 2, 3]}。
数组（Array）：值的有序列表，以 [] 包裹，值之间用逗号分隔。["apple", "banana", "orange"]。

在 Cocos Creator 中，我们通常使用 JSON 来存储配置数据，如角色属性、关卡信息、道具列表、对话文本等。

在 Cocos Creator 中读取和解析 JSON 的常用方法

Cocos Creator 本身是基于 TypeScript (JavaScript) 的，因此我们可以充分利用 JavaScript/TypeScript 原生的 JSON 解析能力，并结合 Cocos Creator 的资源加载系统来读取 JSON 文件。

使用 `resources` 目录加载并解析 JSON（推荐用于开发中可配置的、需要热更新的数据）

resources 是 Cocos Creator 中的一个特殊目录，存放在此目录下的资源可以通过 resources.load 或 resources.loadDir 方法直接加载，无需填写完整路径。

步骤：

创建 JSON 文件：
- 在 Cocos Creator 项目资源管理器中，找到 resources 文件夹（如果没有，可以手动创建，注意 resources 文件夹本身不会被打包，只有其子文件/文件夹会）。
- 在 resources 文件夹下创建一个新的 JSON 文件，config.json。
- 编辑 config.json 文件内容，
```
{
"playerName": "Hero",
"playerHp": 100,
"playerMp": 50,
"skills": [
  {"id": 1, "name": "Fireball", "damage": 20},
  {"id": 2, "name": "Icebolt", "damage": 15}
]
}
```

编写代码加载和解析：

在你的脚本中（GameController.ts 或 Player.ts），你可以使用 resources.load 方法加载 JSON 文件，注意，resources.load 加载 JSON 文件默认会返回一个 JsonAsset 资源对象，我们需要通过 json 属性获取实际的 JSON 数据。
示例代码：

  const { ccclass, property } = cc._decorator;
  @ccclass
  export class DataLoader extends cc.Component {
      start() {
          this.loadJsonData();
      }
      loadJsonData() {
          // 加载位于 resources 目录下的 config.json 文件
          // 注意：路径不需要带 .json 后缀
          cc.resources.load("config", cc.JsonAsset, (err, jsonAsset) => {
              if (err) {
                  cc.error("Failed to load JSON file: " + err);
                  return;
              }
              // jsonAsset.json 属性就是解析后的 JSON 对象
              const jsonData = jsonAsset.json;
              cc.log("Successfully loaded JSON data:", jsonData);
              // 现在你可以使用这些数据了
              this.processJsonData(jsonData);
          });
      }
      processJsonData(data: any) {
          cc.log("Player Name:", data.playerName);
          cc.log("Player HP:", data.playerHp);
          cc.log("First Skill:", data.skills[0].name, "Damage:", data.skills[0].damage);
          // 你可以将数据赋值给组件的属性
          // this.playerName = data.playerName;
      }
  }

异步加载：resources.load 是异步的，所以通常使用回调函数或者 async/await 来处理加载完成后的逻辑，上面的例子使用了回调函数，如果使用 async/await：

  async loadJsonDataAsync() {
      try {
          const jsonAsset = await new Promise<cc.JsonAsset>((resolve, reject) => {
              cc.resources.load("config", cc.JsonAsset, (err, asset) => {
                  if (err) reject(err);
                  else resolve(asset);
              });
          });
          const jsonData = jsonAsset.json;
          cc.log("Async loaded JSON:", jsonData);
      } catch (err) {
          cc.error("Async load failed: " + err);
      }
  }

使用 `cc.loader.load` 加载任意路径的 JSON 文件

如果你的 JSON 文件不在 resources 目录下，或者你想从动态路径（如远程服务器、特定 bundles 目录）加载 JSON 文件，可以使用 cc.loader.load 方法。

步骤：

放置 JSON 文件：可以将 JSON 文件放在项目的任意位置，assets/data/remote_config.json。

编写代码加载和解析：

cc.loader.load 需要完整的文件路径（相对于 assets 目录，或者绝对路径，或者远程 URL），加载完成后，默认会得到一个 JSON 对象（如果文件类型是 .json 并且引擎正确识别）。

  const { ccclass, property } = cc._decorator;
  @ccclass
  export class RemoteJsonLoader extends cc.Component {
      start() {
          this.loadRemoteJson();
      }
      loadRemoteJson() {
          // 假设 JSON 文件位于 assets/data/ 目录下
          const jsonPath = "data/remote_config.json";
          cc.loader.loadResDir(jsonPath, (err, jsonData) => {
              if (err) {
                  cc.error("Failed to load remote JSON: " + err);
                  return;
              }
              // 注意：load 加载单个 json 文件，直接返回解析后的对象
              // 如果是 loadDir，则返回数组
              cc.log("Successfully loaded remote JSON:", jsonData);
              this.processJsonData(jsonData);
          });
      }
      processJsonData(data: any) {
          // 处理数据
          cc.log("Remote Data:", data);
      }
  }

加载远程 JSON：如果你想从远程服务器加载 JSON 数据，只需提供完整的 URL 即可：

  loadRemoteJsonFromUrl() {
      const remoteUrl = "https://your-server.com/data/config.json";
      cc.loader.load(remoteUrl, (err, jsonData) => {
          if (err) {
              cc.error("Failed to load remote JSON from URL: " + err);
              return;
          }
          cc.log("Successfully loaded remote JSON from URL:", jsonData);
          this.processJsonData(jsonData);
      });
  }

直接内联 JSON 字符串解析

在某些情况下,你可能已经将 JSON 数据作为字符串写在代码中，或者从其他地方（如服务器 API 响应）获得了 JSON 字符串，这时可以直接使用 JSON.parse() 方法进行解析。

示例：

const { ccclass, property } = cc._decorator;
@ccclass
export class InlineJsonParser extends cc.component {
    start() {
        const jsonString = `{
            "serverName": "GameServer1",
            "status": "online",
            "playersOnline": 150
        }`;
        try {
            const jsonData = JSON.parse(jsonString);
            cc.log("Successfully parsed inline JSON:", jsonData);
            cc.log("Server Name:", jsonData.serverName);
        } catch (error) {
            cc.error("Failed to parse inline JSON: " + error);
        }
        // 模拟从服务器获取的 JSON 字符串
        this.simulateServerResponse();
    }
    simulateServerResponse() {
        // 假设这是从服务器返回的 JSON 字符串
        const serverResponseJson = '{"code": 200, "message": "Success", "data": {"userId": "12345", "userName": "TestUser"}}';
        setTimeout(() => {
            try {
                const response = JSON.parse(serverResponseJson);
                if (response.code === 200) {
                    cc.log("Server response data:", response.data);
                    cc.log("User ID:", response.data.userId);
                }
            } catch (error) {
                cc.error("Failed to parse server response JSON: " + error);
            }
        }, 1000);
    }
}

注意事项

文件路径：使用 resources.load 时，路径是相对于

正文

cocos如何读取json格式数据

JSON 数据简介

在 Cocos Creator 中读取和解析 JSON 的常用方法

使用 `resources` 目录加载并解析 JSON（推荐用于开发中可配置的、需要热更新的数据）

使用 `cc.loader.load` 加载任意路径的 JSON 文件

直接内联 JSON 字符串解析

注意事项

相关阅读

json格式怎么转换成表单

地址怎么直接传json

怎么把json上传到node

怎么获取网页中的json数据

发表评论取消回复

还没有评论，来说两句吧...

目录[+]

JSON 数据简介

在 Cocos Creator 中读取和解析 JSON 的常用方法

使用 resources 目录加载并解析 JSON（推荐用于开发中可配置的、需要热更新的数据）

使用 cc.loader.load 加载任意路径的 JSON 文件

直接内联 JSON 字符串解析

注意事项

相关阅读

json格式怎么转换成表单

地址怎么直接传json

怎么把json上传到node

怎么获取网页中的json数据

发表评论取消回复

还没有评论，来说两句吧...

目录[+]

使用 `resources` 目录加载并解析 JSON（推荐用于开发中可配置的、需要热更新的数据）

使用 `cc.loader.load` 加载任意路径的 JSON 文件