Cocos2d-x3.3利用TileMap绘制Polygon/PolyLine

tiled提供了多边形/折线的绘制,在Cocos2dx3.3(不知道其他版本如何)中能够读取这些对象. 但是网上似乎没有Cocos2dx读取多边形/折线的相关教程. 今天尝试了PolyLine的绘制,就在这里记录一下,也希望能够帮到需要的人. 这里只介绍PolyLine的情况. Polygon情况是类似的.

在CCTMXXMLParse.cpp中,有方法

void TMXMapInfo::startElement(void *ctx,const char *name,const char **atts)

找到else if (elementName == "polyline"),即解析折线的情况

可以看到,最后一行为dict["polylinePoints"] = Value(pointsArray);

即将解析得到的pointsArray以"polylinePoints"为key存储. 所以我们在第12行用该key获取储存points的ValueVector.

    auto map = experimental::TMXTiledMap::create("map.tmx");
 2     //处理对象层
 3     auto objectGroup = map->getObjectGroup(Object 4     auto objects = objectGroup->getObjects();
 5     for (auto object: objects)
 6     {
 7         auto dic= object.asValueMap();
 8         float objectX = dic.at(x").asFloat();
 9         float objectY = dic.at(y10 
11         auto drawNode= DrawNode::create();
12         auto pointsVector = dic.at(polylinePoints").asValueVector();
13         auto size = pointsVector.size();
14         获取点
15         if (size>0)
16         {
17             Vec2* points= new Vec2[size];
18             int i =0 ;
19             for (auto pointValue:pointsVector)
20             {
21                 auto dicp = pointValue.asValueMap();
22                 auto x  = dicp.at(23                 auto y  = -dicp.at(").asFloat();y取负值
24                 points[i]= Vec2( x,y );
25                 i++;
26             }
27             绘制折线
28             drawNode->drawPoly(points,size,false,Color4F::RED);
29             delete[] points;
30             drawNode->setPosition(objectX,objectY);
31             this->addChild(drawNode,10);
32         }
33     }

第16行的代码似乎没有实际意义,因为当对象不是PolyLine时会报错. 所以如果直接使用上面的代码的话,在tiled中,PolyLine所在的对象层只能有PolyLine对象而不能有其他的对象.

或者在tiled中给PolyLine添加一个类型,并在代码中进行判断.

tilemap截图

绘制结果

在tilemap中,我不太清楚如何确定点的顺/逆时针方向,然而在Cocos2dx中利用3.x的API创建多边形是要求顺时针方向的.

这个给出凸多边形求顺/逆时针的方法:

转自http://www.oschina.net/question/437512_129417

关于如何判定多边形是顺时针还是逆时针对于凸多边形而言，只需对某一个点计算cross product = ((xi - xi-1),(yi - yi-1)) x ((xi+1 - xi),(yi+1 - yi))
= (xi - xi-1) * (yi+1 - yi) - (yi - yi-1) * (xi+1 - xi)
如果上式的值为正，逆时针；为负则是顺时针而对于一般的简单多边形，则需对于多边形的每一个点计算上述值，如果正值比较多，是逆时针；负值较多则为顺时针。

我根据这个写了判断代码:

bool LogicLayer::isClockWise(Vec2 p1,Vec2 p2,Vec2 p3) { if ( ((p2.x=p1.x) * (p3.y-p2.y) - (p2.y - p1.y ) * (p3.x - p2.x))>0 )为正则是逆时针 return false; else true; }

返回true时为顺时针.

如果结果为0 的情况是无法判断的.