KUOKUO的趣味教程 | 小怪物的视野(2)_微信

 

 

本篇承接上一集故事《KUOKUO的趣味教程 | 进击的小怪诞生(1)》,看小怪是如何自我进化的!

第二章:小怪物的视野

正在小怪开心的追着玩家时,忽然飘起了雾,由于小怪的速度比玩家慢那么一点点,渐渐地,它看不见玩家了。 

KUOKUO的趣味教程 | 小怪物的视野(2)_h5_02

不得已,小怪停下了!它在思考!!!这是怎么做到的呢?

原来是用代码模拟黑暗灯光效果 ,这里巧妙的使用了 cc.Graphics 绘图组件:

  1. drawLight (x, y, r) {

  2. // 左半圆

  3. let left = this.root.children[0].getComponent(cc.Graphics);

  4. left.clear();

  5. left.moveTo(x,y+r);

  6. left.lineTo(x,320);

  7. left.lineTo(-480,320);

  8. left.lineTo(-480,-320);

  9. left.lineTo(x,-320);

  10. left.lineTo(x,y-r);

  11. for (let i = 3.141592; i < 3.141592 * 2; i += 0.1) {

  12. left.lineTo(x + r * Math.sin(i) , y + r * Math.cos(i));

  13. }

  14. left.fill();

  15. // 右半圆

  16. let right = this.root.children[1].getComponent(cc.Graphics);

  17. right.clear();

  18. right.moveTo(x,y+r);

  19. right.lineTo(x,320);

  20. right.lineTo(480,320);

  21. right.lineTo(480,-320);

  22. right.lineTo(x,-320);

  23. right.lineTo(x,y-r);

  24. for (let i = 3.141592; i > 0; i -= 0.1) {

  25. right.lineTo(x + r * Math.sin(i) , y + r * Math.cos(i));

  26. }

  27. right.fill();

  28. }

灯光是由两个半圆组成,拼接面成的,下面是左半圆

KUOKUO的趣味教程 | 小怪物的视野(2)_微信_03

这个是节点图,root 空节点包括了两个带有 cc.graphics 组件的节点。

KUOKUO的趣味教程 | 小怪物的视野(2)_方向向量_04

然后是范围检测

  1. update (dt) {

  2. // 1 秒 1 次

  3. this.thinkCD -= dt;

  4. if (this.thinkCD <= 0) {

  5. this.thinkCD = 1;

  6. // 向量减法,计算方向向量

  7. this.vector = this.player.position.sub(this.node.position);

  8. // 如果距离不在视野半径内(220)

  9. if (this.vector.mag() > 220) {

  10. this.vector = cc.v2(0,0);

  11. }

  12. }

  13. this.walkTo(this.vector, dt);

  14. this.drawLight(this.node.x,this.node.y,200);

  15. },

 

实际效果如下

KUOKUO的趣味教程 | 小怪物的视野(2)_贝塞尔曲线_05

O(∩_∩)O~~ 有意思吧!!!

继续故事,小怪在黑夜中失去了视野。

它找不到玩家的位置,只好自己默默的思考,开发自己大脑。 

 渐渐地,小怪可以每秒钟思考两次了。

  1. properties: {

  2. thinkCD : 0.5

  3. },

  4.  

  5. update (dt) {

  6. // 1 秒 2 次

  7. this.time += dt;

  8. if (this.time >= this.thinkCD) {

  9. this.time = 0;

  10. // 执行一些方法

  11. }

  12. }

等到迷雾散去,小怪的视野恢复了,但是!!! 玩家不知何时竟然造了一堵墙。 

KUOKUO的趣味教程 | 小怪物的视野(2)_贝塞尔曲线_06小怪过不去...

 啊!!!!可恶的人类...!

人类在玩家与小怪身上加入刚体和物理碰撞盒子,设置不允许睡眠,重力为0。

KUOKUO的趣味教程 | 小怪物的视野(2)_方向向量_07 

墙就设置为静态刚体KUOKUO的趣味教程 | 小怪物的视野(2)_贝塞尔曲线_08 

人类还强烈提醒,记得开启物理系统。

  1. onLoad () {

  2.    // 开启物理

  3.    cc.director.getPhysicsManager().enabled = true;

  4. }

目前的情况不妙!!!

KUOKUO的趣味教程 | 小怪物的视野(2)_贝塞尔曲线_09如何不被墙挡住呢?小怪开始思考!!!如果...我前进不了就向下走呢!尝试值每一次的改变方向都应再次尝试下靠近玩家,看代码:

  1. onLoad () {

  2. // 开启物理

  3. cc.director.getPhysicsManager().enabled = true;

  4. // 间接向量

  5. this.vector = cc.v2(0,0);

  6. // 间接时间变量

  7. this.time = 0;

  8. // 间接位置

  9. this.temp = cc.v2(0,0);

  10. // 尝试次数

  11. this.try = 0;

  12. },

  13.  

  14. update (dt) {

  15. // 1 秒 2 次

  16. this.time += dt;

  17. if (this.time >= this.thinkCD) {

  18. this.time = 0;

  19. // 向量减法,计算方向向量

  20. this.vector = this.player.position.sub(this.node.position);

  21. // 判断是不是被墙挡住了,与上一次位置比较

  22. if (Math.abs(this.node.x - this.temp.x) < 1) {

  23. // 尝试值

  24. this.try += 1;

  25. // 尝试一次后不通,改变方向

  26. if (this.try >= 2) {

  27. this.try = 0;

  28. this.vector.set (cc.v2(0,-100));

  29. }

  30. }

  31. // 记录新位置

  32. this.temp.set(this.node.position);

  33. }

  34. this.walkTo(this.vector, dt);

  35. },

看下效果,还不错。
KUOKUO的趣味教程 | 小怪物的视野(2)_方向向量_10
如果不想让小怪旋转,禁用刚体旋转。

KUOKUO的趣味教程 | 小怪物的视野(2)_小游戏_11

 

哇咔咔!!! 玩家看你哪里跑!!!

KUOKUO的趣味教程 | 小怪物的视野(2)_小游戏_12