用Cocos2d-x实现2D光线效果

2015.3.23优化修改，现在已经能达到稳定60帧了。。

本博客地址：http://www.cnblogs.com/wolfred7464/

创意来自于：http://ncase.me/sight-and-light/

我要介绍的，就是这样的效果：（创意和素材都来自于上文的网址）

由于原文介绍的过于简练，导致像我这样的小白根本看不懂，所以我想要介绍的更易懂一点。。

一、画线段

在Cocos2d-x中，已经封装了通过Opengl ES的画线函数，只需要创建一个DrawNode对象，就可以画线了，画几条线段，就像这样：

二、画射线和线段的交点及轨迹。

这里需要一点点几何知识了。（我也是恶补的）

直线的参数表示：

直线可以用直线上的一点P₀和方向向量v表示，直线上的所有点P满足 P = P₀ + tv。

参数方程最方便的地方在于直线、射线、线段的方程形式是一样的，区别在于参数t。直线的t没有范围限制，射线的t>0，线段的t在0~1之间（t >=0 && t <= 1）。

直线交点：

设直线分别为 P+t₁v 和 Q+t₂w，设向量u=QP，设cross(x, y)为向量x和y的叉积，则：

t1 = cross(w, u) / cross(v, w)

t2 = cross(v, u) / cross(v, w)

当cross(v, w) == 0时，两直线平行，无交点。

所以把屏幕中心作为光源，方向指向鼠标所在的位置，画一条射线，t即是光源与交点的距离，选一个最近的交点（即t最小），连接光源和这个点，就会得到这样的效果：

主要代码：

 bool HelloWorld::getIntersection(const Line& ray, const Line& segment,
                                  Point& point, float& distance)
 {
     Vec2 v1(ray.p2 - ray.p1);
     Vec2 v2(segment.p2 - segment.p1);
     float cross = getCross(v1, v2);
     if(cross == ) {
         return false;
     }
     Vec2 u(ray.p1 - segment.p1);
     float t1 = getCross(v2, u) / cross;
     float t2 = getCross(v1, u) / cross;
     if(t1 <  || t2 <  || t2 > ) {
         return false;
     }
     point = v1 * t1 + ray.p1;
     distance = t1;
     return true;
 }

射线与线段的交点

三、以鼠标为光源，画射向线段端点的光线

改动一下刚才的代码，以鼠标作为光源，画射向每个端点的光线，在每条光线的两侧同时画出极角偏移1e-4的两条光线，用来穿过线段端点，与端点后面的线段相交。看起来就像这样：

四、画多边形，标记出光亮区域

上一步画的光线表示出了光亮区域，还需要画出填充多边形来标记一下，但是opengl只能画凸多边形。所以为了画出需要的不规则多边形，要分割成三角形来画。

容易看出，任意相邻的两个交点与光源，可以组成一个三角形，接下来就是找相邻的点。所以极角排序一下，依次取相邻的点就可以了。画完三角形后的效果就像这样：

五、实现本文开头的效果

Cocos2d-x提供了ClippingNode类，可以做出不规则的裁剪图形，以上一步画的多边形为模板裁剪就可以了，不多赘述，代码中有详细。但是目前还有两个问题：1、没有实现出原文中的阴影效果 2、编译到安卓看不到效果。

希望有大牛能指教一下。

六、附上Cocos2d-x写的主要代码

 #ifndef __LIGHTSCENE_H__
 #define __LIGHTSCENE_H__

 #include "cocos2d.h"

 class Line
 {
 public:
     cocos2d::Point p1;
     cocos2d::Point p2;
     Line(const cocos2d::Point& p1, const cocos2d::Point& p2) {
         this->p1 = p1;
         this->p2 = p2;
     }
 };

 class LightScene : public cocos2d::Layer
 {
 public:
     static cocos2d::Scene* createScene();
     virtual bool init();
     CREATE_FUNC(LightScene);
 private:
     void initVertexs();
     void drawSegments();
     void initSingleVertexs();
     void calcAngles(const cocos2d::Point& touchPos);

     float getCross(const cocos2d::Vec2& v1, const cocos2d::Vec2& v2);
     bool getIntersection(const Line& ray, const Line& segment,
         cocos2d::Point& point, float& distance);

     void drawLight(const cocos2d::Vec2& pos);

     cocos2d::DrawNode* _staticDraw;
     cocos2d::DrawNode* _touchDraw;
     cocos2d::ClippingNode* _clip;

     std::vector<cocos2d::Point> _vertexs;
     std::vector<Line> _segments;
     std::vector<float> _angles;
 };

 #endif

LightScene.h

 #include "LightScene.h"

 USING_NS_CC;

 Scene* LightScene::createScene()
 {
     auto scene = Scene::create();
     auto layer = LightScene::create();
     scene->addChild(layer);
     return scene;
 }

 bool LightScene::init()
 {
     if (!Layer::init()) {
         return false;
     }

     // 添加背景图
     auto visSize = Director::getInstance()->getVisibleSize();
     auto background = Sprite::create("background.png");
     background->setPosition(visSize.width / , visSize.height / );
     addChild(background, );

     _staticDraw = DrawNode::create();
     addChild(_staticDraw, );
     _touchDraw = DrawNode::create();
     addChild(_touchDraw, );

     _clip = ClippingNode::create();
     _clip->setInverted(false);
     _clip->setAlphaThreshold(255.0f);
     auto foreground = Sprite::create("foreground.png");
     foreground->setPosition(visSize.width / , visSize.height / );
     _clip->addChild(foreground, );
     _clip->setStencil(_touchDraw);
     addChild(_clip, );

     initVertexs();
     drawSegments();
     initSingleVertexs();

     // 触摸监听
     auto listener = EventListenerTouchOneByOne::create();
     listener->onTouchBegan = [=](Touch* touch, Event* event) {
         drawLight(touch->getLocation());
         return true;
     };
     listener->onTouchMoved = [=](Touch* touch, Event* event) {
         drawLight(touch->getLocation());
     };
     getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);
     return true;
 }

 void LightScene::drawLight(const cocos2d::Vec2& pos)
 {
     Point tar(, ); // 光线的端点
     Point cur(, ); // 光线与线段的交点
     float distance = ; // 光源与交点的距离

     _touchDraw->clear();

     // 计算极角，添加两个偏移1e-4的极角
     calcAngles(pos);

     // 极角排序
     std::sort(_angles.begin(), _angles.end(), [](float x, float y) {
         return x < y;
     });

     // 找最近的交点
     static std::vector<Point> vertex;
     vertex.clear();
     for (auto angle : _angles) {
         Vec2 dlt(cos(angle), sin(angle));
         float closest = -;
         for (auto s : _segments) {
             if (getIntersection(Line(pos, pos + dlt), s, cur, distance)) {
                 if (closest == - || closest > distance) {
                     closest = distance;
                     tar = cur;
                 }
             }
         }
         if (closest != -) {
             vertex.push_back(tar);
         }
     }

     // 画三角形
     int limit = vertex.size() - ;
     for (int i = ; i < limit; i++) {
         _touchDraw->drawTriangle(pos, vertex[i], vertex[i + ], Color4F::WHITE);
     }
     if (limit > ) {
         _touchDraw->drawTriangle(pos, vertex[limit], vertex[], Color4F::WHITE);
     }
 }

 void LightScene::initVertexs() {
     int crd[] = {
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , , ,
         , , ,
     };
     for (int i = ; i < ; i += ) {
         _vertexs.push_back(Point(crd[i], crd[i + ]));
     }
 }

 // 画线段
 void LightScene::drawSegments()
 {
     for (int i = ; i < _vertexs.size(); i += ) {
         _segments.push_back(Line(_vertexs[i], _vertexs[i + ]));
         _staticDraw->drawSegment(_vertexs[i], _vertexs[i + ], 0.5f, Color4F::WHITE);
     }
 }

 // 找不重复端点
 void LightScene::initSingleVertexs()
 {
     std::vector<Point> singleVertexs;
     for (int i = ; i < _vertexs.size(); i++) {
         bool has = false;
         for (int j = ; j < singleVertexs.size(); j++) {
             if (_vertexs[i] == singleVertexs[j]) {
                 has = true;
                 break;
             }
         }
         if (!has) {
             singleVertexs.push_back(_vertexs[i]);
         }
     }
     _vertexs.clear();
     for (auto v : singleVertexs) {
         _vertexs.push_back(v);
     }
 }

 // 计算极角
 void LightScene::calcAngles(const Point& touchPos)
 {
     _angles.clear();
     const float eps = static_cast<float>(1e-);
     for (auto p : _vertexs) {
         auto angle = atan2(p.y - touchPos.y, p.x - touchPos.x);
         //_angles.push_back(angle);
         _angles.push_back(angle - eps);
         _angles.push_back(angle + eps);
     }
 }

 // 向量的叉积
 float LightScene::getCross(const Vec2& v1, const Vec2& v2)
 {
     return (v1.x * v2.y - v1.y * v2.x);
 }

 // 射线与线段的交点
 bool LightScene::getIntersection(const Line& ray, const Line& segment,
     Point& point, float& distance)
 {
     Vec2 v1(ray.p2 - ray.p1);
     Vec2 v2(segment.p2 - segment.p1);
     float cross = getCross(v1, v2);
     if (cross == ) {
         return false;
     }
     Vec2 u(ray.p1 - segment.p1);
     float t1 = getCross(v2, u) / cross;
     float t2 = getCross(v1, u) / cross;
     if (t1 <  || t2 <  || t2 > ) {
         return false;
     }
     point = v1 * t1 + ray.p1;
     distance = t1;
     return true;
 }

LightScene.cpp