CocosCreator怎样使用cc.follow进行镜头跟随

Cocos Creator版本：2.3.4

Demo下载：https://files-cdn.cnblogs.com/files/gamedaybyday/cocos2.3.4_ccfollow.7z

说先来使用下cocoscreator自带的跟随代码，cc.follow。

CC.Follow使用

一、设置地图适配容器leftNode

假设这是个横屏跑酷游戏。地图大小1500x1500，那么leftNode高宽为1500x1500，并且widget居左下对齐。

二、设置地图容器map

地图容器也是1500x1500，和leftNode区别就是没有适配组件widget，因为你用了widget，就没法让地图移动了。这也是为什么多套一层leftNode用来适配屏幕的原因。

地图里有一个角色Role。（一个普通的cc.Button按钮）

地图四周有红色的按钮作为识别地图边缘。

地图容器上挂组件Follow.ts，并设置target角色目标为Role。Role就是一个按钮cc.Button，我们这里把它当成移动的角色。

Follow.ts代码如下：

const {ccclass, property} = cc._decorator;

@ccclass
export default class Follow extends cc.Component {

    @property(cc.Node)
    target:cc.Node = null;

    start () {
        var follow = cc.follow(this.target, cc.rect(0,0, 1500,1500));
        this.node.runAction(follow);
    }
}

三、虚拟摇杆控制角色移动

虚拟摇杆参考：https://www.cnblogs.com/gamedaybyday/p/13061387.html

不知道也没关系，只要你能用其他方法控制角色移动，改变角色的x,y就行。

四、实际演示效果

可以看到角色在移动时，“镜头”会自动跟随角色Role移动，并且限制范围在1500x1500内，没有超出放着红色按钮的边界。

CC.Follow的源码

源码在CC.Action.js内

以上就是CocosCreator怎样使用cc.follow进行镜头跟随的详细内容，更多关于CocosCreator镜头跟随的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • CocosCreator学习之模块化脚本

    Cocos Creator模块化脚本 Cocos Creator 允许你将代码拆分成多个脚本文件,并且让它们相互调用.这个步骤简称为 模块化. 模块化使你可以在 Cocos Creator 中引用其它脚本文件: 访问其它文件导出的参数 调用其它文件导出的方法 使用其它文件导出的类型 使用或继承其它 Component Cocos Creator 中的 JavaScript 使用和 Node.js 几乎相同的 CommonJS 标准来实现模块化,简单来说: 每一个单独的脚本文件就构成一个模块 每个

  • 解读CocosCreator源码之引擎启动与主循环

    解读CocosCreator源码之引擎启动与主循环

    前言 预备 不知道你有没有想过,假如把游戏世界比作一辆汽车,那么这辆"汽车"是如何启动,又是如何持续运转的呢? 如题,本文的内容主要为 Cocos Creator 引擎的启动流程和主循环. 而在主循环的内容中还会涉及到:组件的生命周期和计时器.缓动系统.动画系统和物理系统等... 本文会在宏观上为大家解读主循环与各个模块之间的关系,对于各个模块也会简单介绍,但不会深入到模块的具体实现. 因为如果把每个模块都"摸"一遍,那这篇文章怕是写不完了. Go! 希望大家看完这

  • 如何在CocosCreator中做一个List

    如何在CocosCreator中做一个List

    CocosCreator版本:2.3.4 cocos没有List组件,所以要自己写.从cocos的example项目中找到assets/case/02_ui/05_listView的demo来改造. 自写一个虚拟列表,有垂直布局,水平布局,网格布局和Padding的List Demo地址:https://files-cdn.cnblogs.com/files/gamedaybyday/cocos2.3.4_ListViewDemo_Grid.7z cocos原来的LayOut做列表,有100个数

  • CocosCreator入门教程之用TS制作第一个游戏

    CocosCreator入门教程之用TS制作第一个游戏

    前提 无论学什么技术知识,官方文档都应该是你第一个教程,所以请先至少阅读新手上路这一节 http://docs.cocos.com/creator/manual/zh/getting-started/ 再来看这篇文章. 这里假设你已经安装成功了 Cocos Creator. TypeScript VS JavaScript 这里当然只会讲优点: 1. ts 是 js 的超集,所有 js 的语法 ts 都支持. 2. ts 支持接近完美的代码提示,js 代码提示接近于没有. 3. ts 有类型定义

  • CocosCreator通用框架设计之资源管理

    CocosCreator通用框架设计之资源管理

    如果你想使用Cocos Creator制作一些规模稍大的游戏,那么资源管理是必须解决的问题,随着游戏的进行,你可能会发现游戏的内存占用只升不降,哪怕你当前只用到了极少的资源,并且有使用cc.loader.release来释放之前加载的资源,但之前使用过的大部分资源都会留在内存中!为什么会这样呢? cocos creator 资源管理存在的问题 资源管理主要解决3个问题,资源加载,资源查找(使用),资源释放.这里要讨论的主要是资源释放的问题,这个问题看上去非常简单,在Cocos2d-x中确实也很简

  • 如何在CocosCreator中使用JSZip压缩

    如何在CocosCreator中使用JSZip压缩

    CocosCreator版本:2.4.2 jszip的实际项目应用 游戏中有大量配置的情况下,文件会变得非常大,所以有些游戏会采用zip包压缩解压 例如如下游戏,将游戏配置config.json压缩成zip包,加载后进行解压使用 拿到他的配置压缩包 将.bin改成.zip,进行解压,得到游戏的所有json配置文件 未压缩之前6M+ 压缩后文件 500KB+,压缩后小了10倍左右. 在cocos中使用jszip 首先,在github上下载jszip库  https://github.com/Stu

  • 剖析CocosCreator新资源管理系统

    剖析CocosCreator新资源管理系统

    1.资源与构建 1.1 creator资源文件基础 在了解引擎如何解析.加载资源之前,我们先来了解一下这些资源文件(图片.Prefab.动画等)的规则,在creator项目目录下有几个与资源相关的目录: assets 所有资源的总目录,对应creator编辑器的资源管理器 library 本地资源库,预览项目时使用的目录 build 构建后的项目默认目录 在assets目录下,creator会为每个资源文件和目录生成一个同名的.meta文件,meta文件是一个json文件,记录了资源的版本.uu

  • Unity3D实现摄像机镜头移动并限制角度

    本文实例为大家分享了Unity3D实现摄像机镜头移动并限制角度的具体代码,供大家参考,具体内容如下 摄像机镜头跟随鼠标移动,并限制上下左右的移动角度 public class ViewFromCream : MonoBehaviour { public int speed=5; public Vector3 vect; private float xcream; private float ycream; public void Update() { CreamView(); } private

  • 怎样在CocosCreator中使用物理引擎关节

    怎样在CocosCreator中使用物理引擎关节

    CocosCreator版本2.4.2 mousejoint鼠标关节 cocos文档定义: 鼠标关节用于使刚体上的一个点追踪一个指定的世界坐标系下的位置. 鼠标关节可以指定一个最大的里来施加一个柔和的约束. 鼠标关节会自动使用 mouse region 节点来注册鼠标事件,并且在触摸移动事件中移动选中的刚体. 注意:一般鼠标关节只在测试环境中使用 说明: 任意cc.Node上添加鼠标关节,设置mouseRegion为Canvas,弹力和阻尼都为1 Mouse Region:鼠标注册节点 Freq

  • 如何在CocosCreator中使用http和WebSocket

    如何在CocosCreator中使用http和WebSocket

    CocosCreator版本2.3.4 一.HttpGET Get方式,客户端请求本机地址3000端口,并携带参数url和name,服务端收到后返回name参数. cocos客户端: //访问地址 let url = "http://127.0.0.1:3000/?url=123&name=321"; //新建Http let xhr = new XMLHttpRequest(); //接收数据 xhr.onreadystatechange = function () { if

  • 详解CocosCreator中几种计时器的使用方法

    一.setTimeOut 3秒后打印abc.只执行一次. setTimeout(()=>{console.log("abc"); }, 3000); 删除计时器,3秒后不会输出abc. let timeIndex; timeIndex = setTimeout(()=>{console.log("abc"); }, 3000); clearTimeout(timeIndex); setTimeout这样写,test函数中输出的this是Window对象

随机推荐