专栏首页Creator星球游戏开发社区KUOKUO的趣味教程 | 小怪物的视野(2)

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

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star),作者:EEA阔宝

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 狂热「小工」的9款Creator游戏源码及图文教程,等你来拿!

    他在 Cocos 论坛上公开了自己9款小游戏作品,完成度相当之高,是不可多得的Creator学习资源,下面是论坛链接地址:https://forum.cocos...

    张晓衡
  • Creator3D新教程,你能射中靶心么?

    长按屏幕,拖动瞄准,放手发射。风向、重力和距离影响最终结果!越靠近中心得分越高!最高分10分!

    张晓衡
  • 重磅!H5游戏接入App已经解决了,民间SDK将会崛起!

      《各种红包 App 最后都会整合游戏!App+游戏的变现模式分析》一文让晓衡有幸结识到了一位技术大佬「梦近在咫尺」,有时候真的是心想事成!大佬在第2天就写下...

    张晓衡
  • 实现红警式的建筑物拖拽生成特效

    望月从良
  • 通过vue.js 学习来总结es6语法中的箭头函数,箭头函数原理分析。

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/acoolgiser/article/details/...

    acoolgiser
  • 使用物理引擎Box2D设计类愤怒小鸟的击球游戏--基本架构设置

    望月从良
  • 聊聊rocketmq的PushConsumerImpl

    io/openmessaging/rocketmq/consumer/PushConsumerImpl.java

    codecraft
  • 多 UI 版本网页五子棋实现

    五子棋是大家很熟悉的一种小游戏,本文给大家介绍如何制作一个简易的网页版五子棋游戏,并且考虑实现普通 DOM 和 Canvas 两种 UI 绘图模式供随时切换。最...

    WecTeam
  • php实现img转ASCII编码图片

    经过3晚上的研究,成功实现用php将图片转换成ascii编码图 主要原理:分析像素点的灰度值,用不同字符的深浅度表示(@和.),然后进行字符串组合,输出

    仙士可
  • python3爬虫-知乎登陆

    参考的是这位博主的博客:https://home.cnblogs.com/u/zkqiang

    py3study

扫码关注云+社区

领取腾讯云代金券