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

先上效果图

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

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

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（）函数传入光源点坐标。后期可以根据游戏需要，通过遮罩实现光源的形式变化（如锥形光），同时结合地图障碍物制作动态光源，实现动态光影效果。

基于egret的点光源光线效果的实现相关推荐

基于egret的mud客户端（一）
传统的mud用lpc语言编写,移动端mud在最近比较热门. 国内比较知名的移动端mud就是以zjmud为代表的mud系列. 我认为移动端+基于大数据的弱智能化对于mud来说会是一个不错的发展前景. 由 ...
基于egret的小游戏——拼图
前天接触了egret引擎,看了下里面的系列教程(黑白方块):http://edn.egret.com/cn/article/index/id/57 ,自己跟着做并改了一下逻辑,完善了一下,包括第一次点 ...
基于单片机的点光源控制系统
目录一.方案流程及技术规格书设计二.系统硬件电路设计三.系统软件设计四.系统调试测试与分析前言电是人类发展与社会建设的重要基础,它与现代化设备的紧密结合带来了绚丽多彩的现实世 ...
基于egret引擎、P2物理库的搭积木游戏
最近更新源代码: https://github.com/lixintong1992/egret_game 最近不务正业,参加了一个HTML5游戏设计比赛.速成了一个搭积木游戏. http://dev. ...
基于Egret的微信小游戏H5项目总结
H5 puremvc框架 View 与 Mediator 组合模式 View 上Button Image scrollView的事件在Mediator中实现,View仅仅是皮肤.是界面. 修改界面布局 ...
基于Egret的OPPO小游戏接入
参考文档:OPPO小游戏打包官方文档前提安装了 node 环境,建议安装 8.x 稳定版本 [node官网:https://nodejs.org/en/] 开发 Cocos Creator 游戏, ...
基于Egret的VIVO小游戏接入
vivo的接入很曲折,搞了两天才把微信小游戏移植到vivo上,没有IDE,官方提供的chrome调试又没作用,所以每次找问题都需要借助console,将步骤一步一步输出,然后定位到问题,每次都要经历: ...
爆发前的最后按钮白鹭推HTML5首款生态产品Egret Runtime
随着HTML5标准定稿掀起的热潮,白鹭时代14年11月主办"HTML5移动游戏大会",微信开放HTML5分享接口引得行业一片惊呼,再到搜狐力推HTML5而重磅发布手机搜狐网3.0, ...
Egret中使用P2物理引擎
游戏中的对象按照物理规律移动,体现重力.引力.反作用力.加速度等物体特性,实现自由落体.摇摆运动.抛物线运动,以及物理碰撞现象的模拟.用于模拟物理碰撞.物理运动的引擎称为物理引擎. 来自瑞典斯德哥尔 ...
html 游戏引擎白鹭,HTML5游戏性能大幅提升白鹭Egret Engine 1.5震撼发布
近日,白鹭时代发布了***一代的Egret Engine 1.5移动游戏引擎,其中备受行业关注的全新物理系统与WebSocket,随着新版引擎的发布与开发者见面.全新的Egret Engine 1.5 ...

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

基于egret的点光源光线效果的实现相关推荐

最新文章

热门文章