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

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

• 静态配景图：
  
  
  
  • 最简朴的方式是利用静态配景图，即将整个配景作为一个静态图像加载到游戏中。这种方式适用于简朴的游戏大概配景不需要变革的场景。
    
  
  
• 平铺配景图：
  
  
  
  • 可以利用平铺配景图的方式，将一个小配景图无限水平或垂直地重复铺设，以添补整个配景。这种方法适用于需要无缝滚动的场景，好比横版射击游戏或无尽跑酷游戏。
    
  
  
• 瓦片地图（Tilemaps）：
  
  
  
  • 类似于游戏地图的实现方式，可以利用瓦片地图来创建配景地图。通过将配景拆分成小块瓦片并进行平铺，可以创建复杂的配景效果。
    
  
  
• Parallax（视差滚动）效果：
  
  
  
  • 视差滚动效果是一种常见的配景实现方式，通过在差异速度下滚动多层配景图层来营造出深度感和动态效果。这种方式可以增加游戏场景的立体感和视觉吸引力。
    
  
  
• 动态配景天生：
  
  
  
  • 有些游戏可能需要动态天生配景，根据游戏逻辑或玩家举动实时天生配景元素。这种方式适用于需要动态变革的场景，好比无尽奔驰游戏或飞行射击游戏。
    
  
  
• 基于矢量画图：
  
  
  
  • 利用矢量画图来创建游戏地图是另一种常见的方式。通过绘制矢量图形，可以创建可缩放的地图，而不会失真。这种方法通常用于需要高度可定制化的地图。
    
  
  

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

1. drawBackground() {
2.         //清除绘制
3.         this.graphics.clear();
4.         //设置填充颜色
5.         this.graphics.fillColor = cc.Color.WHITE;
6.         //绘制矩形背景
7.         this.graphics.fillRect(-cc.winSize.width/2,-cc.winSize.height/2, cc.winSize.width, cc.winSize.height);
8.         //设置线段颜色和宽度
9.         this.graphics.strokeColor = cc.Color.GRAY;
10.         this.graphics.lineWidth = 2;
11.         //绘制竖线
12.         for(let i = 0 ; i<cc.winSize.width ; i+= this.width){
13.             this.graphics.moveTo(-cc.winSize.width/2 + i,-cc.winSize.height);//起点
14.             this.graphics.lineTo(-cc.winSize.width/2 + i,cc.winSize.height/2);//终点
15.         }  
16.         //绘制横线
17.         for(let i = 0 ; i<cc.winSize.height ; i+= this.height){
18.             this.graphics.moveTo(-cc.winSize.width/2, cc.winSize.height/2 - i);
19.             this.graphics.lineTo(cc.winSize.width/2, cc.winSize.height/2 - i);
20.         }   
21.         this.graphics.stroke();
22.     }

复制代码

注：该示例绘制的尺寸为屏幕尺寸。
上述代码所绘制出的效果如下：

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。