有关消灭星星的描边算法
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
完啦！
最终的结果就是如上图 代码写的有点啰嗦,但是几个月之后,自己还能看懂 还不错哈, 有问题请指教咯
在这里记录下,其实根据这个思想 是可以做多边形的描边算法的. 比如三角形组合起来做描边算法...
