cocos creator绘制网格背景（基于矢量绘图）

在2D游戏开发中，设计2D地图的背景实现通常有以下几种方式：

1. 静态背景图：

   1. 最简单的方式是使用静态背景图，即将整个背景作为一个静态图像加载到游戏中。这种方式适用于简单的游戏或者背景不需要变化的场景。

2. 平铺背景图：

   1. 可以使用平铺背景图的方式，将一个小背景图无限水平或垂直地重复铺设，以填充整个背景。这种方法适用于需要无缝滚动的场景，比如横版射击游戏或无尽跑酷游戏。

3. 瓦片地图（Tilemaps）：

   1. 类似于游戏地图的实现方式，可以使用瓦片地图来创建背景地图。通过将背景拆分成小块瓦片并进行平铺，可以创建复杂的背景效果。

4. Parallax（视差滚动）效果：

   1. 视差滚动效果是一种常见的背景实现方式，通过在不同速度下滚动多层背景图层来营造出深度感和动态效果。这种方式可以增加游戏场景的立体感和视觉吸引力。

5. 动态背景生成：

   1. 有些游戏可能需要动态生成背景，根据游戏逻辑或玩家行为实时生成背景元素。这种方式适用于需要动态变化的场景，比如无尽奔跑游戏或飞行射击游戏。

6. 基于矢量绘图：

   1. 使用矢量绘图来创建游戏地图是另一种常见的方式。通过绘制矢量图形，可以创建可缩放的地图，而不会失真。这种方法通常用于需要高度可定制化的地图。

下面所展示的是基于矢量绘图，在Cocos creator中就是利用Graphics组件来绘制网格和纯色背景。

drawBackground() {
        //清除绘制
        this.graphics.clear();
        //设置填充颜色
        this.graphics.fillColor = cc.Color.WHITE;
        //绘制矩形背景
        this.graphics.fillRect(-cc.winSize.width/2,-cc.winSize.height/2, cc.winSize.width, cc.winSize.height);
        //设置线段颜色和宽度
        this.graphics.strokeColor = cc.Color.GRAY;
        this.graphics.lineWidth = 2;
        //绘制竖线
        for(let i = 0 ; i<cc.winSize.width ; i+= this.width){
            this.graphics.moveTo(-cc.winSize.width/2 + i,-cc.winSize.height);//起点
            this.graphics.lineTo(-cc.winSize.width/2 + i,cc.winSize.height/2);//终点
        }  
        //绘制横线
        for(let i = 0 ; i<cc.winSize.height ; i+= this.height){
            this.graphics.moveTo(-cc.winSize.width/2, cc.winSize.height/2 - i);
            this.graphics.lineTo(cc.winSize.width/2, cc.winSize.height/2 - i);
        }    
        this.graphics.stroke();
    }

注：该示例绘制的尺寸为屏幕尺寸。

上述代码所绘制出的效果如下：

并且可以不用纯色背景，而是使用了平铺图像作为背景，该实现方式只需要把图像的zIndex设为-1，然后尺寸设置为地图尺寸即可。