CocosCreator开发笔记(8)-读取和解析JSON数据文件

朱雀 2022-05-29 11:35 1445阅读 0赞

在游戏开发过程中，读取配置文件是必不可少的，而使用JSON做配置文件又比较常见，本文主要讲述什么是JSON文件以及如何在CocosCreator开发中读取和解析JSON数据文件。

## 什么是JSON ##

JSON的英文全称是JavaScript Object Notation，即JavaScript对象表示法。

## JSON的特点 ##

1、是一种轻量级的文本数据交换格式，类似XML，但是比XML更小、更快、更易解析。  
2、使用JavaScript语法来描述数据对象，JS程序无需解析器即可生成原生的JavaScript对象。  
3、独立于语言和平台，目前大多数的编程语言都支持JSON。

## JSON的语法 ##

JSON语法是JavaScript语法的子集，具有以下规则：  
\- 数据在名称/值对中  
\- 数据由逗号分隔  
\- 大括号保存对象  
\- 中括号保存数组

## 如何解析JSON文件 ##

#### 1、关键原则 ####

大括号代表对象，中括号代表数组；

#### 2、用什么方法读取？ ####

CocosCreator提供了cc.load.loadRes来专门加载位于 resources 目录下的文件，所以提前把JSON文件放到 asserts/resources 目录下即可。  
先来一个简单的JSON文件，如下：

// box2dDemo.json
    {
      "engine": "Box2D",
      "version": "2.3.1"
    }

读取/解析代码如下：

cc.loader.loadRes('box2dDemo.json', function (err, object) {
        if (err) {
            console.log(err);
            return;
        }
    
        // 读取的数据返回在object中，这是一个拥有2个元素的对象
        let engine = object.engine; // engine = box2D
        let ver = object.version;   // ver = 2.3.1
    });

是不是很简单？实际使用的JSON配置常常比这复杂一些，所以我们现在再给JSON文件增加一些元素，如下：

// box2dDemo.json
    {
      "engine": "Box2D",
      "version": "2.3.1",
    
      "bodies":
      [
        {
            "name": "root",
            "body":
            {
                "type": "static",
                "gravityScale": 0.2
            }
        },
        {
            "name": "aa1",
            "body":
            {
                "type": "static",
                "gravityScale": 0.2
            }
        }
      ],
    
      "joints":
      [
        {
            "bodyA": "root",
            "bodyB": "aa1",
            "lowerAngle": 0.5,
            "enableLimit": true
        },
        {
            "bodyA": "aa1",
            "bodyB": "aa2",
            "lowerAngle": -0.5,
            "enableLimit": true
        }
      ]
    }

我们在代码中定义一个解析函数叫 readJson，并且把解析出来的JSON数据保存起来，实现代码如下：

readJson: function() {
            this.box2d = {}; // 存储解析出来的JSON数据
            var self = this;
    
            cc.loader.loadRes('box2dDemo.json', function (err, object) {
                if (err) {
                    console.log(err);
                    return;
                }
    
                let engine = object.engine; // engine = box2D
                let ver = object.version;   // ver = 2.3.1
                let bodies = object.bodies; // bodies是个数组
                let joints = object.joints; // joints是个数组
    
                // 需在回调外面提前用self代替this
                self.box2d = object; // box2d是整个对象
    
                // 将循环2次，因为bodies是个拥有2个对象的数组
                for (let x=0; x < bodies.length; x++) {
                    let root = bodies[x]; // root是个对象
                    let root_name = root.name; // 第1次循环root_name = root
                    let type = root.body.type; // type = static
                    let gravity = root.body.gravityScale; // gravity = 0.2
                }
            });
        },

这样就结束了，关于JSON文件的读取和解析，如还有问题，欢迎留言讨论。