KUOKUO的趣味教程 | 小怪物的视野(2)
EEA阔宝：专注 CocosCreator 引擎小游戏开发两年
开发微信小游戏5款
H5 小游戏多款
CSDN 博客： KUOKUO 众享
本篇承接上一集故事《KUOKUO的趣味教程 | 进击的小怪诞生(1)》，看小怪是如何自我进化的！
第二章：小怪物的视野
正在小怪开心的追着玩家时，忽然飘起了雾，由于小怪的速度比玩家慢那么一点点，渐渐地，它看不见玩家了。
不得已，小怪停下了！它在思考！！！这是怎么做到的呢？
原来是用代码模拟黑暗灯光效果 ，这里巧妙的使用了 cc.Graphics 绘图组件：
drawLight (x, y, r) {// 左半圆let left = this.root.children[0].getComponent(cc.Graphics);left.clear();left.moveTo(x,y+r);left.lineTo(x,320);left.lineTo(-480,320);left.lineTo(-480,-320);left.lineTo(x,-320);left.lineTo(x,y-r);for (let i = 3.141592; i < 3.141592 * 2; i += 0.1) {left.lineTo(x + r * Math.sin(i) , y + r * Math.cos(i));}left.fill();// 右半圆let right = this.root.children[1].getComponent(cc.Graphics);right.clear();right.moveTo(x,y+r);right.lineTo(x,320);right.lineTo(480,320);right.lineTo(480,-320);right.lineTo(x,-320);right.lineTo(x,y-r);for (let i = 3.141592; i > 0; i -= 0.1) {right.lineTo(x + r * Math.sin(i) , y + r * Math.cos(i));}right.fill();}
灯光是由两个半圆组成，拼接面成的，下面是左半圆
这个是节点图，root 空节点包括了两个带有 cc.graphics 组件的节点。
然后是范围检测
update (dt) {// 1 秒 1 次this.thinkCD -= dt;if (this.thinkCD <= 0) {this.thinkCD = 1;// 向量减法，计算方向向量this.vector = this.player.position.sub(this.node.position);// 如果距离不在视野半径内（220）if (this.vector.mag() > 220) {this.vector = cc.v2(0,0);}}this.walkTo(this.vector, dt);this.drawLight(this.node.x,this.node.y,200);},
实际效果如下
O(∩_∩)O~~ 有意思吧！！！
继续故事，小怪在黑夜中失去了视野。
它找不到玩家的位置，只好自己默默的思考，开发自己大脑。
渐渐地，小怪可以每秒钟思考两次了。
properties: {thinkCD : 0.5},update (dt) {// 1 秒 2 次this.time += dt;if (this.time >= this.thinkCD) {this.time = 0;// 执行一些方法}}
等到迷雾散去，小怪的视野恢复了，但是！！！ 玩家不知何时竟然造了一堵墙。
啊！！！！可恶的人类...！
人类在玩家与小怪身上加入刚体和物理碰撞盒子，设置不允许睡眠，重力为0。
墙就设置为静态刚体
人类还强烈提醒，记得开启物理系统。
onLoad () {// 开启物理cc.director.getPhysicsManager().enabled = true;}
目前的情况不妙！！！
onLoad () {// 开启物理cc.director.getPhysicsManager().enabled = true;// 间接向量this.vector = cc.v2(0,0);// 间接时间变量this.time = 0;// 间接位置this.temp = cc.v2(0,0);// 尝试次数this.try = 0;},update (dt) {// 1 秒 2 次this.time += dt;if (this.time >= this.thinkCD) {this.time = 0;// 向量减法，计算方向向量this.vector = this.player.position.sub(this.node.position);// 判断是不是被墙挡住了，与上一次位置比较if (Math.abs(this.node.x - this.temp.x) < 1) {// 尝试值this.try += 1;// 尝试一次后不通，改变方向if (this.try >= 2) {this.try = 0;this.vector.set (cc.v2(0,-100));}}// 记录新位置this.temp.set(this.node.position);}this.walkTo(this.vector, dt);},
看下效果，还不错。
如果不想让小怪旋转，禁用刚体旋转。
哇咔咔！！！ 玩家看你哪里跑！！！
故事未完待续...
黑暗灯光实现源码，欢迎获取：
链接:https://pan.baidu.com/s/1-iogJucTr0TXKllA__Ah7g 密码:yqb9
感谢 「EEA阔宝」有趣的教程，让学习也变如此乐趣！「奎特尔星球」欢迎大家投稿，有意的朋友可以加我微信，愿我们一起共同成长！