记录开发过程中的小问题,请多指教
由于是直接从微信文制过来,文章样式格式有点乱·····
完整样式请阅读微信原文
更多笔记和源码请访问公众号


原文链接:https://mp.weixin.qq.com/s/zu444KC27-EvRJYVtKevpA
技术摘要
更新摄像机位置
限制摄像机边界
实现
1
添加分组
项目->项目设置->分组管理->添加分组
设置新添加分组的名字:ui
2添加Camera组件
复制 Main Camera 节点,名字改为 UI Camera
有关摄像机的详细介绍,请参考文档:
https://docs.cocos.com/creator/2.2/manual/zh/render/camera.html
depth 摄像机深度,用于决定摄像机的渲染顺序。值越大,则摄像机越晚被渲染
cullingMask 将决定这个摄像机用来渲染场景的哪些部分
clearFlags 指定渲染摄像机时需要做的清除操作
设置 UI Camera 属性:
ui 一般在游戏中处于最上层,所以将 depth 设置为一个较大的数字
cullingMask 只勾选ui分组
clearFlags 取消勾选color(清除背景颜色),否则看不到 Main Camera 中物体,只能看到黑色(即 UI Camera 的 backgroundColor)
设置 Main Camera 属性:

3设置相关节点分组
ui节点的分组需要设置为 ui
地图、玩家、怪物等节点的分组需要设置为 default
4脚本控制
在编辑器中拖拽对应的节点到脚本中
这里需要的是节点是 Main Camera(摄像机)、tiledmap(地图)、player(玩家)
因为玩家是3D模型,所以还需要一个平行光源,玩家才能显示

首先计算下摄像机边界:
//摄像机边界
this._cameraMaxX = this.tileMap.node.width/2 - cc.winSize.width/2;
this._cameraMaxY = this.tileMap.node.height/2 - cc.winSize.height/2;
然后在玩家移动的时候调用updateCameraPosition函数
updateCameraPosition() {
let target = this.nodePlayer.position;
if (target.x > this._cameraMaxX) {
target.x = this._cameraMaxX;
}
if (target.x < -this._cameraMaxX) {
target.x = -this._cameraMaxX;
}
if (target.y > this._cameraMaxY) {
target.y = this._cameraMaxY;
}
if (target.y < -this._cameraMaxY) {
target.y = -this._cameraMaxY;
}
this.mainCamera.node.position = target;
}
当摄像机到达边界后,摄像机不会再移动,只有玩家移动,这样可以防止屏幕内出现黑边



