基于egret的点光源光线效果的实现

来源：互联网发布：剑网3笔记本优化版编辑：程序博客网时间：2024/06/06 05:23

先上效果图

白色区域为光线区域，黑色区域为阴影区域，光源可以自定义坐标，同时可以添加位图作为光源样式。

代码实现主要包含两个函数，一个是计算光源产生的射线与个图形相交的坐标，一个用于绘制图形

getIntersection(ray, segment) {//计算交点            var r_px = ray.a.x;            var r_py = ray.a.y;            var r_dx = ray.b.x - ray.a.x;            var r_dy = ray.b.y - ray.a.y;            var s_px = segment.a.x;            var s_py = segment.a.y;            var s_dx = segment.b.x - segment.a.x;            var s_dy = segment.b.y - segment.a.y;            var r_mag = Math.sqrt(r_dx * r_dx + r_dy * r_dy);            var s_mag = Math.sqrt(s_dx * s_dx + s_dy * s_dy);            if (r_dx / r_mag == s_dx / s_mag && r_dy / r_mag == s_dy / s_mag) {                 return null;            }            var T2 = (r_dx * (s_py - r_py) + r_dy * (r_px - s_px)) / (s_dx * r_dy - s_dy * r_dx);            var T1 = (s_px + s_dx * T2 - r_px) / r_dx;            if (T1 < 0) return null;            if (T2 < 0 || T2 > 1) return null;            return {                x: r_px + r_dx * T1,                y: r_py + r_dy * T1,                param: T1            };        }

draw(x, y) {            this.ctx.clear();            for (var i = 0; i < this.segments.length; i++) {                var seg = this.segments[i];                this.ctx.lineStyle(2, 0xffffff);                this.ctx.moveTo(seg.a.x, seg.a.y);                this.ctx.lineTo(seg.b.x, seg.b.y);            }            var points = (function (args) {                var a = [];                args.forEach(function (seg) {                    a.push(seg.a, seg.b);                });                return a;            })(this.segments);            var uniquePoints = (function (points) {                var set = {};                return points.filter(function (p) {                    var key = p.x + "," + p.y;                    if (key in set) {                        return false;                    } else {                        set[key] = true;                        return true;                    }                });            })(points);            var uniqueAngles = [];            for (var j = 0; j < uniquePoints.length; j++) {                var uniquePoint = uniquePoints[j];                var angles = Math.atan2(uniquePoint.y - y, uniquePoint.x - x);                uniquePoint.angle = angles;                uniqueAngles.push(angles - 0.00001, angles, angles + 0.00001);            }            var insert = [];            for (var j = 0; j < uniqueAngles.length; j++) {                var angle = uniqueAngles[j];                var dx = Math.cos(angle);                var dy = Math.sin(angle);                var ray = {                    a: { x: x, y: y },                    b: { x: x + dx, y: y + dy }                };                var closestIntersect = null;                for (var i = 0; i < this.segments.length; i++) {                    var intersect = this.getIntersection(ray, this.segments[i]);                    if (!intersect) continue;                    if (!closestIntersect || intersect.param < closestIntersect.param) {                        closestIntersect = intersect;                    }                }                if (!closestIntersect) continue;                closestIntersect.angle = angle;                insert.push(closestIntersect);            }            insert = insert.sort(function (a, b) {                return a.angle - b.angle;            });            this.ctx.beginFill( 0xffffff,1);            this.ctx.moveTo(insert[0].x, insert[0].y);            for (var i = 0; i < insert.length; i++) {                var _insert = insert[i];                this.ctx.lineTo(_insert.x, _insert.y);            }            this.ctx.endFill();        }
        segments = [//图形顶点坐标            { a: { x: 0, y: 0 }, b: { x: 640, y: 0 } },            { a: { x: 640, y: 0 }, b: { x: 640, y: 360 } },            { a: { x: 640, y: 360 }, b: { x: 0, y: 360 } },            { a: { x: 0, y: 360 }, b: { x: 0, y: 0 } },            { a: { x: 100, y: 150 }, b: { x: 120, y: 50 } },            { a: { x: 120, y: 50 }, b: { x: 200, y: 80 } },            { a: { x: 200, y: 80 }, b: { x: 140, y: 210 } },            { a: { x: 140, y: 210 }, b: { x: 100, y: 150 } },            { a: { x: 100, y: 200 }, b: { x: 120, y: 250 } },            { a: { x: 120, y: 250 }, b: { x: 60, y: 300 } },            { a: { x: 60, y: 300 }, b: { x: 100, y: 200 } },            { a: { x: 200, y: 260 }, b: { x: 220, y: 150 } },            { a: { x: 220, y: 150 }, b: { x: 300, y: 200 } },            { a: { x: 300, y: 200 }, b: { x: 350, y: 320 } },            { a: { x: 350, y: 320 }, b: { x: 200, y: 260 } },            { a: { x: 340, y: 60 }, b: { x: 360, y: 40 } },            { a: { x: 360, y: 40 }, b: { x: 370, y: 70 } },            { a: { x: 370, y: 70 }, b: { x: 340, y: 60 } },            { a: { x: 450, y: 190 }, b: { x: 560, y: 170 } },            { a: { x: 560, y: 170 }, b: { x: 540, y: 270 } },            { a: { x: 540, y: 270 }, b: { x: 430, y: 290 } },            { a: { x: 430, y: 290 }, b: { x: 450, y: 190 } },            { a: { x: 400, y: 95 }, b: { x: 580, y: 50 } },            { a: { x: 580, y: 50 }, b: { x: 480, y: 150 } },            { a: { x: 480, y: 150 }, b: { x: 400, y: 95 } }        ];
draw（）函数传入光源点坐标。后期可以根据游戏需要，通过遮罩实现光源的形式变化（如锥形光），同时结合地图障碍物制作动态光源，实现动态光影效果。

阅读全文

0 0