cocos creator | 用摄像机实现背景滚动, camera 初学者新手教程【白玉无冰】每天进步一点点

最新推荐文章于 2023-10-17 16:53:18 发布
VIP文章 最新推荐文章于 2023-10-17 16:53:18 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： 小游戏开发 文章标签： cocos creator camera
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45686592/article/details/101748971
版权

利用摄像机的移动实现背景的移动

基本原理

利用摄像机拍摄时移动摄像拍摄点，在显示器上会呈现滚动效果。

创建拍摄画布

创建一个新的typescript项目。
在场景中添加一个场景两倍宽的画布节点，并将两张背景图放在画布节点内。

为两张背景图添加分组bg

创建显示画布

在场景中添加一个sprite用于这个摄像机显示的画布。因为用摄像机会上下反转，要修改scaleY为-1。并将它放在中间，大小调整为场景大小。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELGjTvG3-1569801741930)(/img/in-post/2019-09-25-node-show.png)]

添加摄像机

接着在拍摄画布里添加一个摄像机，并将摄像机的拍摄分组选为bg。

绑定摄像机到显示画布

最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cocos Creator 3.4.2 实现滚动数字效果
04-18
使用基本组件实现滚动数字效果。 效果图：https://blog.csdn.net/u013152718/article/details/124251430
开心消消乐、跑酷、扫雷、飞机大战等Cocos Creator小游戏源码（适合初学者）.rar
03-09
开心消消乐、跑酷、扫雷、飞机大战等Cocos Creator小游戏源码（适合初学者），可供学习参考。
开心消消乐、跑酷、扫雷、飞机大战等Cocos Creator小游戏源码 适合初学者 简单易懂
05-31
开心消消乐、跑酷、扫雷、飞机大战等Cocos Creator小游戏源码 适合初学者 简单易懂 方便大学生学习,快速上手cocos,毕业设计等哈哈,里面有好几种小游戏,赶快下载玩玩吧,哈哈.
CocosCreator重复滚动列表代码
08-11
直接挂到空预制体上，挂载一个滚动列表即可使用，支持水平和垂直滚动列表。 使用子节点缓存池，减少初始节点的创建，滚动过程中刷新界面，减少渲染和drawcall，提高性能。
微信经典飞机大战之二：飞机起飞（背景滚动）
三十画生 一个北漂的人
02-28 5149
飞机起飞，其实质上是背景在滚动，相对运行引起的错觉。 我们利用2张一样的背景来循环滚动，然后通过每次滚动的时间间隔和像素间隔来控制背景滚动的速度，也就是飞机飞行的速度。注意：图片的高度一定要比屏幕高度高，这样才不会出现黑边。 bool GameLayer::init() { bool bRet=false; do { CC_BREAK_IF(!CCLayer::init());
Cocos Creator模拟砸金蛋3d旋转效果 | 附代码egg.zip
12-13
Cocos Creator模拟砸金蛋3d旋转效果 | 附代码egg.zip // Learn TypeScript: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/typescript.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html // Learn Attribute: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html // Learn life-cycle callbacks: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html const {ccclass, property} = cc._decorator; @ccclass export default class Game extends cc.Component { @property Count: number = 5; @property(cc.Prefab) prefab: cc.Prefab = null; @property(cc.Node) nodeParent: cc.Node = null; private mEggs: cc.Node[] = []; // LIFE-CYCLE CALLBACKS: // onLoad () {} start () { } // update (dt) {} onClick(event, data){ switch(data){ case 'add':{ this.addEggs(); break; } case 'move':{ this.moveEggs(); break; } case 'stop':{ this.stopMoveEggs(); break; } } } addEggs(){ if(this.Count <= 0){ return; } this.mEggs = []; const N = 360 / this.Count; for(let i = 0; i < this.Count; i++){ let egg = cc.instantiate(this.prefab); let js = egg.getComponent('Egg'); js.setRadian(i * N * Math.PI / 180); js.updatePos(); egg.parent = this.nodeParent; this.mEggs.push(egg); } } moveEggs(){ for(let i = 0; i < this.mEggs.length; i++){ this.mEggs[i].getComponent('Egg').setMove(true); } } stopMoveEggs(){ for(let i = 0; i < this.mEggs.length; i++){ this.mEggs[i].getComponent('Egg').setMove(false); } } }
cocos creator 2.4.5 2D RPG 无限滚动背景实现
LANGZI7758521的专栏
07-25 1576
要点： 场景默认自带一个Camera，渲染场景内所有的物体 Camea节点可以看做是一个空节点下挂接一个Camea组件，所以本身不可见 每个场景都可以有多个Camera，通过关联组名来分组渲染 多个Camera的渲染层级符合节点树规则，先按Camera节点的层级分优先级，越下面的Camera，其关联的组越后渲染；同一Camera分组下的节点，越下面的节点越后渲染。越后渲染的节点看起来越接近顶层。 案例 Camera 实践：无限视差滚动地图实现 一、Camer
初学使用cocos creator + VScode制作一款飞机大战小游戏的学习心得与笔记（一）
weixin_44936189的博客
05-19 1434
个人说明 第一次写博客记录菜鸡的学习之路，此次制作跟随一位名为小白程序员的教程与官方教程、文档 学习过程 首先打开Cocos Creator创建一个项目,并在左下角的资源管理器的assets处创建几个基本要用到的文件 其中常用的prefab文件用来存放预支资源,script文件用来存放脚本等 存放背景等资源 找到你所要用到的图片等资源，选中后拖入先创建好的文件中，我这里使用了是一款TexturePackerGUI的软件将所用图片合成一张图，并会生成一个plist文件，这样比平常直接拖入图片所占用的空间更小
cocos2d-x实战项目【飞机大战】-- 背景滚动
weixin_40968046的博客
07-07 213
vector<Sprite*> m_vecBg; //容器存放图片 //创建背景 void createBg(); :m_fSpeed(-75) //向下运动 void CBackground::createBg() { //获取窗口的大小和原点 auto visibleSize = Director::getInstance()->getVisibleSize(); Vec2 origin = Director::getInstance()->getVisibleOr
cocos creator 划动屏幕以移动摄像机
Hillbox
10-17 2528
本来代码是这么写的，在浏览器中运行也是好的。 cc.Class({ extends: cc.Component, properties: { _begin: cc.Integer, _end: cc.Integer, _origin: cc.Integer, _camera: cc.Node, }, onLoad () { // 找到摄像机 this.camera = cc.find("Ca
cocos Creator 使用摄像机进行背景的差速移动
03-21
在creator中设计背景移动一般都会使用update进行刷新坐标，但是由于update中的dt值（针）不稳定就会造成背景移动时卡顿或顿挫特别难受。所以这里介绍了用相机进行背景差速移动，
Cocos Creator 数字滚动
07-16
Cocos Creator 数字滚动，Cocos Creator 所有版本都已经可使用
Cocos Creator3.8 项目实战（五）背景无限滚屏效果如何实现
w风雨无阻w的专栏
10-06 1109
就是使用多张背景图，每张图，每一帧都同时移动，当图移出屏幕外时，将其位置设置到下一张图的初始位置，最后一张图位置设置为第一张图的初始位置，如此循环即可。下面以 实现背景 1920*1080 的背景图，垂直方向无限滚动为例，进行详细说明。在游戏中，我们经常会实现背景无限滚动的效果。那这些效果是怎么实现的呢？第三张图 0 ，-1080 *2。第四张图 0 ，-1080 *3。第五张图 0 ，-1080 *4。第一张图 0 ，-1080。第一张图 0 ，0。第六张图，以此类推…
Cocos Creator 实现相机移动背景无限滚动效果
对酒当歌﹏✍
06-24 928
目录1、引言2、方法一2.1、实现方法2.2、问题分析3、方法二3.1、实现思路3.2、Demo演示3.3、示例下载4、结束语 1、引言   这段时间写了一个休闲小游戏，其中一个点就是背景移动的，事实上我直接照着上一篇的思路写完了，发布后发现有问题，当切入后台又返回的时候，两个移动的背景之间间隙！发布在vivo上没问题，发布在oppo上就一直存在这个问题，然后我就尝试解决问题！ 2、方法一 2.1、实现方法   看到使用动作系统不可以，我立即修改代码使用了update来不断刷新背景的位置，代码如下： on
Cocos无限滚动背景
最新发布
weixin_42581036的博客
10-17 267
无限滚动的背景
cocos camera targetTexture应用之小地图与残影实现
m0_63275099的博客
11-14 3373
1.效果 2.原理 残影与小地图原理是应用camera的属性targetTexture实现的，因为targetTexture是指定摄像机将拍摄到的东西渲染到指定的 RenderTexture上面，通过对指定的RenderTexture进行特殊处理来达到残影的效果。这么做的好处是如果我想要很多东西出现残影、只需要创建出残影的一组图片就能对多个物体进行统一的残影显示。 3代码 const {ccclass, property} = cc._decorator; @cccla...
从0开始做游戏—-cocos引擎
weixin_46630782的博客
11-28 2121
第一次做游戏，记录一下
CocosCreator背景无限滚动(使用多张图片实现)
楊帥
09-05 3888
本示例使用三张同样图片，排列方式为并排排列 逻辑关键代码： @property([cc.Node]) bgs: cc.Node[] = []; //用于管理背景图片结点的数组,记得回cocos面板中添加数组的结点数量 bg_speed: number = 20; //移动时控制速度的变量 dis: number = this.bg_speed * 10; //即将消失的图片延迟...
cocos creator 用摄像机实现局部缩放的效果，camera 小地图,局部放大，摄像机初学者新手教程【白玉无冰】每天进步一点点
白玉无冰
09-30 4474
多摄像机的支持可以让你轻松实现高级的自定义效果，比如双人分屏效果，或者场景小地图的生成。 摄像机是什么 摄像机(camera)是玩家观察游戏世界的窗口。可以这样理解，你在电视????电脑????上看到的演唱会直播等，会有不同的视角切换，这是因为切换不同的摄像机????视角实现的。创建场景时，Creator 会默认创建一个名为 Main Camera 的摄像机，作为这个场景的主摄像机。 添加一个摄像机 我们先创...
用cocos creator2.4版本写一个数字滚动效果
05-25
1. 创建一个空节点，取名为NumberRoller。 2. 在NumberRoller节点上添加一个Label组件，用于显示数字。 3. 在NumberRoller节点上添加一个脚本组件，取名为NumberRoller.js。 4. 在NumberRoller.js中添加如下代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值