popStar 又叫 消灭星星。 闲着想了下算法。 点击星星格子 会出现星星的描边，就是多边形格子的描边 最终 效果类似下图.
中心思想，贴出核心代码
--[[
假如 一个格子 上方的格子 是无效格子
意味着这个格子的上面的这条边 是多边形的轮廓边
同理 根据四个方向的无效点 就可以获取 四个方向的轮廓边
最终将所有无效边 连接起来就是多边形的轮廓
]]
--[[
step1:
@param 单个格子
@return1 返回 在map内 上下左右的有效格子
@return2 返回 在map内 无效方向。用来获取多边形的轮廓
step2:
1、获取所有点
2、根据点之间的距离 分组
获取 任意点a 如果 找不到 a 相邻 格子间距 的点就说明是轮廓点
如果能找到 偶数个点 就丢弃 说明可以合并
如果奇数个点 就保留 说明是转折点
]]处理点击的方法
--@param 点击位置
function GameLayer:handleTouch( pos_tbl_ )
local pos_x = pos_tbl_.x
local pos_y = pos_tbl_.y
-- 根据点击的点 获取所属行列 x y
local x,y = getXYForPosition({pos_x,pos_y})
print(tostring(x) .. " === handleTouch === " .. tostring(y))
if x <= 0 or x > MAP_WIDTH then
print("Touch x not in map " .. tostring(x))
return
end
if y <= 0 or y > MAP_HEIGHT then
print("Touch y not in map " .. tostring(y))
return
end
-- 根据xy 坐标获取到对应的点
local target_node = self:getPointWidgetByPos({x, y})
if target_node then
-- 根据格子节点 获取 挨着的所有相同颜色的点
local points = self:getAdJoinPoints({x, y}, target_node.color)
if #points <= 1 then
print("只有一个单元结点,不会标记或删除")
return
end
-- 根据所有 同色格子 获取所有格子的边的向量集合
local edges = self:getBorderPointsByInvalidDirPoints(points)
-- 合并所有同方向 首尾相接的向量
local ret = self:combineEdges(edges)
-- 将所有向量的边 重新转换成点
local border_points = self:convertEdges2Position(ret)
-- 将所有点连线 画出来
self:drawNodesBorder(border_points, cc.c4f(0.5, 0, 0.5, 1), self._main_panel)
else
print("not find target_node index = " .. tostring(index))
end
end通过dfs 获取相邻同色节点
--[[
@func 用来判断当前点是否有效 就是合法的格子
因为后面格子会消除 所以宽度高度都是不定的 维护一个二维的array
@param1 当前点
@param2 当前map所有列的array
每个array中 对应列的格子的集合
]]
local function isPointValid( temp_pos_tbl_, map_height_tbl_ )
-- 当前列的最高值
local cur_line_height = map_height_tbl_[temp_pos_tbl_[1]]
local cur_line_count = #(map_height_tbl_)
return (temp_pos_tbl_[1] >= 1 and temp_pos_tbl_[1] <= cur_line_count) and (temp_pos_tbl_[2] >= 1 and temp_pos_tbl_[2] <= cur_line_height)
end
--[[
dfs 根据单个格子位置 获取所有同色格子的集合
]]
function GameLayer:getAdJoinPoints( pos_tbl_, color_ )
-- 获取一个点 相对轮廓来说 有效格子集合和无效格子集合
local function getNearByPoint( temp_pos_tbl_ )
local temp_x = temp_pos_tbl_[1]
local temp_y = temp_pos_tbl_[2]
local temp_ret = {}
-- 方向向量
local dir_points = { {0,1}, {0,-1}, {-1,0}, {1,0} }
local invalid_dir_points = {}
for i=1,#dir_points do
local dir_p = dir_points[i]
local p = {temp_x + dir_p[1], temp_y + dir_p[2], dir_p}
if isPointValid(p, self._map_height_tbl) then
table.insert(temp_ret, p)
else
table.insert(invalid_dir_points, dir_p)
end
end
return temp_ret, invalid_dir_points
end
-- 已经处理过的列表
local handled_key_map = {}
-- 预处理 队列的key map 格子的查重 避免一直遍历
local pre_point_key_map = {}
-- 将要处理的列表
local pre_point_list = {}
--[[
起始点 -> 获取邻接有效点 ->放入预处理队列
遍历预处理队列 -> 处理 -> 处理完成 -> 获取当前结点的邻接有效点
如果当前结点在预处理队列中 则跳过 不在 则加入预处理队列。
广度优先
]]
local ret_tbl = {}
-- 起始点
local t_p = pos_tbl_
repeat
-- 放入处理过的格子map
local handled_key = getKeyByPos(t_p)
handled_key_map[handled_key] = 1
-- 获取邻接的有效格子集合 和 无效格子集合
local nearby_points, invalid_dir_points = getNearByPoint(t_p)
-- 遍历有效格子集合
for i,v in ipairs(nearby_points) do
local temp_pre_key = getKeyByPos(v)
if not pre_point_key_map[temp_pre_key] and not handled_key_map[temp_pre_key] then
-- 比较有效格子的颜色 颜色相同的点就是想要的
local node = self:getPointWidgetByPos(v)
if node.color == color_ then
table.insert(pre_point_list, {v[1], v[2]})
--标记这个点已经处理过
pre_point_key_map[temp_pre_key] = 1
v[3] = {}
end
end
end
-- 将无效方向的点 放入结果集中 在下一步需要用
table.insert(t_p, invalid_dir_points)
table.insert(ret_tbl, t_p)
t_p = table.remove(pre_point_list, 1)
until (not t_p)
return ret_tbl
end获取轮廓边向量
--[[
@param1:
points_tbl_ = {
{
x,
y,
{
{
1,
0
},
{
-1,
0
},
...
}
},
...
}
这个方法是用来 将无效点转换成 边的向量
最终将向量连接起来变成多边形的轮廓
.. {0,1},{1,1}
.. {0,0},{1,0}
四个格子组成一个田字
左下格子的右上顶点 定义为{0,0}点
左上格子的右下顶点 定义为{0,1}点
右上格子的左下顶点 定义为{1,1}点
右下格子的左上顶点 定义为{1,0}点
将这个属性放到 边的顶点的第三个位置 组成点 {x,y,dir_p} 下一步用来方便边的合并
]]
function GameLayer:getBorderPointsByInvalidDirPoints( points_tbl_ )
-- local dir_points = { {0,1}, {0,-1}, {-1,0}, {1,0} }
-- 返回一个 向量 { {x1,y1, 额外属性dir_p}, ... }
-- 规定方向向量都是顺时针转 按照顺时针组成一个多边形的轮廓
local function getEdgeByXYAndDirP( x_, y_, dir_p_ )
-- 方向向量{0,1}即相对本格子上边的格子为无效格子 则对应的轮廓边为 上面横着的从左到右
if dir_p_[1] == 0 then
if dir_p_[2] == 1 then
return {{x_, y_ + 1, {1,0}}, {x_+1, y_+1, {0,0}}}
else
-- 方向向量{0,0}即相对本格子下边的格子为无效格子 则对应的轮廓边为 下面横着的从右到左
return {{x_+1, y_, {0,1}}, {x_, y_, {1,1}}}
end
elseif dir_p_[2] == 0 then
if dir_p_[1] == 1 then
-- 同理 竖着的 右边缘 从上到下
return {{x_+1, y_+1, {0,0}}, {x_+1, y_, {0,1}}}
else-- 同理 竖着的 左边缘 从下到上
return {{x_, y_, {1,1}}, {x_, y_+1, {1,0}}}
end
end
end
-- 先将格子根据坐标排序 这样获取的边会更集中
local points_tbl = points_tbl_
table.sort(points_tbl, function ( v1_, v2_ )
if v1_[1] == v2_[1] then
return v1_[2] > v2_[2]
end
return v1_[1] > v2_[1]
end)
local direct_edges_tbl = {}
for i,v in ipairs(points_tbl_) do
local dir_p_tbl = v[3]
for j,vv in ipairs(dir_p_tbl) do
local edge = getEdgeByXYAndDirP(v[1], v[2], vv)
table.insert(direct_edges_tbl, edge)
end
end
return direct_edges_tbl
end合并边
--[[
根据交点 把边串起来
@param1
direct_edges_tbl = {
{{x1_, y1_}, {x2_, y2_}},
{{x2_, y2_}, {x3_, y3_}},
...
}
]]
function GameLayer:combineEdges( direct_edges_tbl_ )
-- 将对角线上的两个点 合并成 一个点 针对品字形的左肩这种情况
local function getPdir( p1_, p2_ )
local dir_1 = p1_[3]
local dir_2 = p2_[3]
-- 两个点x,y存在相同 就直接return 否则返回两个点的延长线交点
if dir_1[1] ~= dir_2[1] and dir_1[2] ~= dir_2[2] then
else
return nil
end
-- 点1的x摩2取反 点2的y摩2取反
local x = (dir_1[2] + 1) % 2
local y = (dir_2[1] + 1) % 2
local ret_dir = {x, y}
return ret_dir
end
--核心就是操作 这个深拷贝出来的边的集合 将边连起来
local copy_direct_edges_tbl = clone(direct_edges_tbl_)
local function getSamePointsEdge(edge_)
local t_p = edge_[2]
for i=1, #copy_direct_edges_tbl do
local edge = copy_direct_edges_tbl[i]
local temp_p1 = edge[1]
local temp_p2 = edge[2]
local point_value = t_p[3]
if t_p[1] == temp_p1[1] and t_p[2] == temp_p1[2] then
edge = table.remove(copy_direct_edges_tbl, i)
local t = getPdir(t_p, temp_p1)
if t then
t_p[3] = t
temp_p1[3] = t
end
return {edge[1], edge[2]}
end
if t_p[1] == temp_p2[1] and t_p[2] == temp_p2[2] then
edge = table.remove(copy_direct_edges_tbl, i)
local t = getPdir(edge_[1], temp_p1, t_p[3])
return {edge[2], edge[1], t}
end
end
end
-- 从一条边的 起始点p1开始走,从当前边edge的另一个点p2到 copy_direct_edges_tbl 边的集合里面去找另一条边的相同点
local cur_edge = table.remove(copy_direct_edges_tbl, 1)
local cur_p = cur_edge[1]
local order_edges = {v}
for i,v in ipairs(direct_edges_tbl_) do
local edge = getSamePointsEdge(cur_edge)
if edge then
table.insert(order_edges, edge)
cur_edge = edge
else
--最后一条边 会找不到下一个
print("getSamePointsEdge not find node ===")
end
end
-- 起始点和尾节点要连起来 这里有点问题 遇到不完全闭合的图形会出现连接位置问题 (问题不大,再优化啦)
if cur_p and cur_edge then
local t = getPdir(cur_edge[2], cur_p)
if t then
cur_edge[2][3] = t
cur_p[3] = t
end
end
--合并同一方向上的 边 首尾相接的合并
local function mergeTwoEdge( edge1_, edge2_ )
local t_p1 = edge1_[1]
local t_p2 = edge1_[2]
local t_p3 = edge2_[1]
local t_p4 = edge2_[2]
local point_value1 = t_p1[3]
local point_value2 = t_p4[3]
local x = t_p1[1]
if x == t_p2[1] and x == t_p3[1] and x == t_p4[1] then
if point_value1[1] == point_value2[1] or
point_value1[2] == point_value2[2] then
return true, {t_p1, t_p4}
end
end
local y = t_p1[2]
if y == t_p2[2] and y == t_p3[2] and y == t_p4[2] then
-- return true, {t_p1, t_p4}
if point_value1[1] == point_value2[1] or
point_value1[2] == point_value2[2] then
return true, {t_p1, t_p4}
end
end
return false
end
-- 合并同一条直线上的点
local ret_edges = {}
local cur_edge = nil
for i,v in ipairs(order_edges) do
if cur_edge then
local flag, edge = mergeTwoEdge(cur_edge, v)
if flag then
cur_edge = edge
else
table.insert(ret_edges, cur_edge)
cur_edge = v
end
else
cur_edge = v
end
end
return ret_edges
end把合并后的边还原成点
--[[
把边还原成点
]]
function GameLayer:convertEdges2Position( order_edges_ )
local max_x, max_y = 0, 0
--根据第三位属性 计算是否添加 格子间距
local function convertIndexPoint2Pos( p_ )
local pos = getXY2Position(p_)
local x = pos[1]
local y = pos[2]
local dir_x = p_[3][1]
local dir_y = p_[3][2]
if dir_x == 0 then
x = x - MAP_CELL_SEP_WIDTH
end
if dir_y == 0 then
y = y - MAP_CELL_SEP_WIDTH
end
return {x = x, y = y}
end
--把点从边上拆出来
local points = {}
for i,edge in ipairs(order_edges_) do
if i == 1 then
local p = edge[1]
table.insert(points, p)
end
local p = edge[2]
table.insert(points, p)
end
local ret_points = {}
for i,v in ipairs(points) do
table.insert(ret_points, convertIndexPoint2Pos(v))
end
return ret_points
end完啦！
最终的结果就是如上图 代码写的有点啰嗦,但是几个月之后,自己还能看懂 还不错哈, 有问题请指教咯
在这里记录下,其实根据这个思想 是可以做多边形的描边算法的. 比如三角形组合起来做描边算法...
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
