【自试用教程二】2d光线

首先,祝大家新年快乐。:14:
其次,祝大家新年快乐。:14:
最后,祝大家新年快乐。:14:

还是先上工程,先下载。http://pan.baidu.com/s/1gdP9NyV,1

首先定义2个结构:

// 线段// @param segA 线段起点// @param segB 线段终点
var LightLine = 
{
    segA: cc.p( 0, 0 ),
    segB: cc.p( 0, 0 ),
};

// 角度点,与光源连通的点,及其相对于光源的角度
var PointWithAngle = 
{
    point: cc.p( 0, 0 ),
    angle: -1,
};

初始化两个绘制线条对象

this._drawLine = new cc.DrawNode();
this._updateDraw = new cc.DrawNode();

一个是画固定障碍物,另一个是时时绘制光线

然后画障碍物,见

initSegs: function()

然后

getEachPointAngle

这里说下:
1.获得唯一点: 两点确定一条线段,两条线段相连,需要3个交点,而不是4个,减少一个点的运算量。
2.获得唯一点的角度:每个点相对于光源的角度,相当于光源是圆心。± 0.00001是为了光线偏移平滑。
3.循环各角度, 找出最近的点:以光源为起点,360°抛出射线,射线尽头是无线远的,可能会交叉无数条其他线,_getIntersection: function() 就是为了确定这个点,最靠近光源的与之交叉的点,保存其点位置,和角度,this._intersects就是来保存这个的。
4.根据角度,从小到大,排序。
5.然后用this._updateDraw绘制吧。

可是:
只有光线,只有光线,只有光线。

为了达到效果,我选择用颜色填充可是范围。我能搜到的API是用drawPoly()
但是这个API个人认为可能有点问题,所以填充颜色已注释,有兴趣的看下cc.DrawNode.drawPoly()函数里面的cc._DrawNodeElement()传入的枚举.

年后再见。:7:

1赞

这个光源demo我做过
用DrawNode类的drawTriangle方法来填充三角形

drawTriangle方法creator未支持。
我以前也是用的drawTriangle。

额,这只能等底层支持了。。