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

最新推荐文章于 2020-06-03 15:31:05 发布

晓衡的成长日记

最新推荐文章于 2020-06-03 15:31:05 发布

阅读量221

点赞数

原文链接：https://blog.csdn.net/kuokuo666/article/details/88409980

版权

640?wx_fmt=png

EEA阔宝：专注 CocosCreator 引擎小游戏开发两年

开发微信小游戏5款

H5 小游戏多款

CSDN 博客： KUOKUO 众享

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

第二章：小怪物的视野

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

640?wx_fmt=gif

不得已，小怪停下了！它在思考！！！这是怎么做到的呢？

原来是用代码模拟黑暗灯光效果，这里巧妙的使用了 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 &lt; 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 &gt; 0; i -= 0.1) {	
        right.lineTo(x + r * Math.sin(i) , y + r * Math.cos(i));	
    }	
    right.fill();	
}

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

640?wx_fmt=jpeg

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

640?wx_fmt=jpeg

然后是范围检测

update (dt) {	
    // 1 秒 1 次	
    this.thinkCD -= dt;	
    if (this.thinkCD &lt;= 0) {	
        this.thinkCD = 1;	
        // 向量减法，计算方向向量	
        this.vector = this.player.position.sub(this.node.position);	
        // 如果距离不在视野半径内（220）	
        if (this.vector.mag() &gt; 220) {	
            this.vector = cc.v2(0,0);	
        }	
    }	
    this.walkTo(this.vector, dt);	
    this.drawLight(this.node.x,this.node.y,200);	
},

实际效果如下

640?wx_fmt=gif

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

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

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

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

properties: {	
    thinkCD : 0.5	
},	
update (dt) {	
    // 1 秒 2 次	
    this.time += dt;	
    if (this.time &gt;= this.thinkCD) {	
        this.time = 0;	
        //  执行一些方法	
    }	
}

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

640?wx_fmt=gif 小怪过不去...

啊！！！！可恶的人类...！

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

640?wx_fmt=jpeg

墙就设置为静态刚体 640?wx_fmt=png

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

onLoad () {	
    // 开启物理	
    cc.director.getPhysicsManager().enabled = true;	
}

目前的情况不妙！！！

640?wx_fmt=gif 如何不被墙挡住呢？小怪开始思考！！！如果...我前进不了就向下走呢！尝试值每一次的改变方向都应再次尝试下靠近玩家，看代码：

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 &gt;= this.thinkCD) {	
        this.time = 0;	
        // 向量减法，计算方向向量	
        this.vector = this.player.position.sub(this.node.position);	
        // 判断是不是被墙挡住了，与上一次位置比较	
        if (Math.abs(this.node.x - this.temp.x) &lt; 1) {	
            // 尝试值	
            this.try += 1;	
            // 尝试一次后不通，改变方向	
            if (this.try &gt;= 2) {	
                this.try = 0;	
                this.vector.set (cc.v2(0,-100));	
            }	
        }	
        // 记录新位置	
        this.temp.set(this.node.position);	
    }	
    this.walkTo(this.vector, dt);	
},

看下效果，还不错。 640?wx_fmt=gif 如果不想让小怪旋转，禁用刚体旋转。