用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 == 0) {
        return false;
    }
    Vec2 u(ray.p1 - segment.p1);
    float t1 = getCross(v2, u) / cross;
    float t2 = getCross(v1, u) / cross;
    if(t1 < 0 || t2 < 0 || t2 > 1) {
        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

#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 / 2, visSize.height / 2);
    addChild(background, 1);

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

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

    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(0, 0); // 光线的端点
    Point cur(0, 0); // 光线与线段的交点
    float distance = 0; // 光源与交点的距离

    _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 = -1;
        for (auto s : _segments) {
            if (getIntersection(Line(pos, pos + dlt), s, cur, distance)) {
                if (closest == -1 || closest > distance) {
                    closest = distance;
                    tar = cur;
                }
            }
        }
        if (closest != -1) {
            vertex.push_back(tar);
        }
    }

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

void LightScene::initVertexs() {
    int crd[] = {
        0, 360, 840, 360,
        840, 360, 840, 0,
        840, 0, 0, 0,
        0, 0, 0, 360,
        100, 210, 120, 310,
        120, 310, 200, 280,
        200, 280, 140, 150,
        140, 150, 100, 210,
        100, 160, 120, 110,
        120, 110, 60, 60,
        60, 60, 100, 160,
        200, 100, 220, 210,
        220, 210, 300, 160,
        300, 160, 350, 40,
        350, 40, 200, 100,
        540, 300, 560, 320,
        560, 320, 570, 290,
        570, 290, 540, 300,
        650, 170, 760, 190,
        760, 190, 740, 90,
        740, 90, 630, 70,
        630, 70, 650, 170,
        600, 265, 780, 310,
        780, 310, 680, 210,
        680, 210, 600, 265
    };
    for (int i = 0; i < 100; i += 2) {
        _vertexs.push_back(Point(crd[i], crd[i + 1]));
    }
}

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

// 找不重复端点
void LightScene::initSingleVertexs()
{
    std::vector<Point> singleVertexs;
    for (int i = 0; i < _vertexs.size(); i++) {
        bool has = false;
        for (int j = 0; 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-4);
    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 == 0) {
        return false;
    }
    Vec2 u(ray.p1 - segment.p1);
    float t1 = getCross(v2, u) / cross;
    float t2 = getCross(v1, u) / cross;
    if (t1 < 0 || t2 < 0 || t2 > 1) {
        return false;
    }
    point = v1 * t1 + ray.p1;
    distance = t1;
    return true;
}