中文
resource-icon
SSRGridCCLContour v1.0.0
类别
源码
作者
supersuraccoon
Creator版本要求
v2.4.0
支持平台
AndroidiOSHTML5
评分
售价
¥ 6.99 (个人)

介绍

0x01 About / 关于

SSRGridCCLContour 是一个算法演示程序,它包含两大算法工具:

  1. 基于 Grid / 网格 的 ( 或是 TiledMap / 瓦片地图) 的 connected-component-labeling / 连通区域 算法
  2. 基于 Grid / 网格 的 ( 或是 TiledMap / 瓦片地图) 的 contour-extractor / 轮廓提取 算法

作者曾在用 cocos2dx 开发的 光照地下城演示程序 中,使用该算法,动态生成光照区域 (在演示程序制作期间,对算法进行了大量的调试和优化):

Cocos2dx Line Of Sight Dungeon Demo on BiliBili

map_demo0002.png

map_demo0001.png

Attention / 注意

  • 当前演示程序,基于 Creator v2.4.x 版本 编写
  • 当前演示程序中的算法,使用 javascript 编写,纯算法,可以通过自行装换为 typescript 用于 Creator v3.x 的项目
  • 上面的光照演示程序和截图为 cocos2dx 版本,并不包含在本插件项目中

0x02 Contents && 内容说明

下面,针对本项目中的两种算法,进行简单的说明。

grid-connected-component-labeling

连通区域(Connected Component)一般是指图像中具有相同像素值且位置相邻的前景像素点组成的图像区域(Region,Blob)。

连通区域分析(Connected Component Analysis,Connected Component Labeling)是指将图像中的各个连通区域找出并标记。

SSRGridCCLContour0002.png

例如在 TiledMap 制作的游戏中,通过连通区域算法,可以快速的将地图中的障碍物区域,进行提取归类。

grid-contour

连通区域轮廓提取算法,主要配合上面的 CCL 算法使用,它可以将上述算法中提取出来的 连通区域 进行处理,针对每个区域,生成对应的 轮廓顶点数组,若是区域存在 空洞结构,同样也会生成 空洞顶点数组。生成的多边形数组,可就行配合各种算法进行使用,如寻路,光照效果渲染,视野可见区域计算等等。

这是当初编写算法时,主要参考的资料:

https://stackoverflow.com/questions/20997254/java-merge-adiacent-rectangles-into-a-polygon

SSRGridCCLContour0004.png

0x03 Features && 功能说明

连通区域计算

/**
  * @param {Array<Array>>} grid: 二维数组,存放网格状态值,0 为无占用,1 为被占用
  * @param {int} width: 横向网格数量
  * @param {int} height: 纵向网格数量
  * @return {Object<int>>} 返回值为所有连通区域,每个连通区域为网格索引值
  */
ssr.GridConnectedComponentLabelingUtil.process(grid, width, height)

示例:

输入值为:

// grid 36 * 20
[ 0]: [0, 0, 0, 0, ...... 0] // 20 个
[ 1]: [0, 0, 0, 1, ...... 0]
[ 2]: [0, 0, 1, 0, ...... 0]
......
[35]: [0, 0, 0, 0, ...... 0]

输出值为:

/* 
  regions: key: 区域 id;value:区域网格的下表索引数组
  该例子表示,输入网格,有3个连通区域,每个区域的网格块索引,如下所示
 */
{
  "1": [
    [17, 13],
    [17, 14],
    [17, 15]
  ],
  "2": [
    [5, 5],
    [5, 6],
    [5, 7]
  ],
  "3": [
    [12, 13],
    [12, 14],
    [12, 15]
  ]
}

区域轮廓提取

/**
  * @param {Array<cc>} region: 区域数据,数据格式同上述连通区域算法输出的,每一个区域数据的索引数组值
  * @return {Object} 输出轮廓信息
  */
ssr.GridContourUtil.process(region)

示例:

输入值为:

[
  [5, 5],
  [5, 6],
  [5, 7]
]

输出值为:

/*
  hulls: 为轮廓顶点数组
  holes: 为空洞顶点数组 (如果形成空洞,否则为空)
  数组中存放的,同样是网格的索引下标,如要转换为坐标,请使用左下角
*/
{
  "hulls": [
    [6, 5],
    [5, 5],
    [5, 8],
    [6, 8],
  ],
  "holes": [
  ]
}

具体使用方式,可以参考下载后的演示程序。



下面是作者的其他一些插件,如果有感兴趣的,可以支持一下,感谢 ~

01.SSRFBONodeComponent_Banner.png 02.SSRSVGComponent_Banner.png 03.SSRSVGWriterComponent_Banner.png 04.SSRShaderFXEditor_Banner.png 05.SSRLoSComponent_Banner.png 06.SSRFogOfWarComponent_Banner.png 07.SSRCreatorPluginAdaptor_Banner.png 08.SSRShaderFXTutorial_Banner.png 09.SSRDnDComponent_Banner.png 10.SSRShaderGallery_Banner.png 11.SSRDynamicMaterial_Banner.png 12.SSRBluePrintStarterKit_Banner.png 13.SSRPostProcessingFX_Banner.png 14.SSRDeviceMotion_Banner.png 15.SSRGridCCLContour_Banner.png 16.SSRWorkCollection_Banner.png 17.SSRScreenSplitFX_Banner.png 18.SSRShaderConverter_Banner.png

用户评分

平均评分
(0)
共有 0 位用户参与评分

评论

暂无评论

  • 1

2020 © Cocos.com版权所有

增值电信业务经营许可证:闽B2-20160169

闽ICP备14002653号-6

闽公网安备 35020302033941号