IT评测·应用市场-qidao123.com技术社区

标题: cocos creator绘制网格配景（基于矢量画图） [打印本页]

作者: 玛卡巴卡的卡巴卡玛 时间: 2024-8-1 02:08
标题: cocos creator绘制网格配景（基于矢量画图）
在2D游戏开辟中，设计2D地图的配景实现通常有以下几种方式：

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

下面所展示的是基于矢量画图，在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，然后尺寸设置为地图尺寸即可。

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

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)