Cocos Creator 开发实战——背景滚动

最新推荐文章于 2024-07-24 20:28:07 发布
最新推荐文章于 2024-07-24 20:28:07 发布
阅读量1.8k 收藏 8
点赞数
文章标签： 游戏 游戏开发 游戏引擎 cocos2d javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/creator_HY/article/details/104098455
版权
本文介绍如何在Cocos Creator中实现背景滚动，提供了一种避免黑边问题的严谨方法，确保无论滚动速度如何，背景都能完美贴合。内容包括背景搭建、代码实现，以及适配游戏窗口高度和宽度的技巧。通过跟随教程，读者可以避免常见错误，快速掌握背景滚动的实现。
摘要由CSDN通过智能技术生成

Cocos Creator 开发实战——背景滚动

       今天教大家实现背景滚动和适配，可以说是全网最严谨绝对不会出黑边的方法，不管速度有多快都不会有黑边，完美贴合。
       国际惯例先上效果
每秒移动50在这里插入图片描述

背景搭建

       创建三个单色节点，分别设置不同的颜色
在这里插入图片描述
在这里插入图片描述

代码

  • 新建js文件挂载在Canvas节点下，创建数组，把刚刚新建的背景节点放入
    properties: {
   
        m_bgs: [cc.Node],
    },

在这里插入图片描述
背景适配：适配当前游戏窗口高度和宽度，并设置相应的初始位置

    onLoad () {
   
        //三张背景图位置初始化
        //获得当前游戏窗口的高度
        this.height = cc.winSize.height
        //获得当前游戏窗口的宽度
        let width = cc.winSize.width
最低0.47元/天 解锁文章
游戏创造者黄昱
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CocosCreator背景无限滚动(使用多张图片实现)
楊帥
09-05 4002
本示例使用三张同样图片，排列方式为并排排列 逻辑关键代码： @property([cc.Node]) bgs: cc.Node[] = []; //用于管理背景图片结点的数组,记得回cocos面板中添加数组的结点数量 bg_speed: number = 20; //移动时控制速度的变量 dis: number = this.bg_speed * 10; //即将消失的图片延迟...
Cocos creator 游戏背景循环滚动--Javascript编写
热门推荐
忧桑该小绵羊
01-16 1万+
Cocos creator 制作游戏背景循环滚动--Javascript编写      我们知道，在利用触控的Cocos creator编辑器开发2d横屏游戏的时候，经常需要利用背景的移动来模拟主角前进后退等效果。作为小白，在自己完成毕业设计和做一些案例的时候，接触到了这方面的东西，所以结合其他写者的方法，加上自己的一些代码，分享给需要的人。 了解原理     简单来
Cocos Creator 实现相机移动背景无限滚动效果
对酒当歌﹏✍
06-24 1012
目录1、引言2、方法一2.1、实现方法2.2、问题分析3、方法二3.1、实现思路3.2、Demo演示3.3、示例下载4、结束语 1、引言   这段时间写了一个休闲小游戏，其中一个点就是背景移动的，事实上我直接照着上一篇的思路写完了，发布后发现有问题，当切入后台又返回的时候，两个移动的背景之间间隙！发布在vivo上没问题，发布在oppo上就一直存在这个问题，然后我就尝试解决问题！ 2、方法一 2.1、实现方法   看到使用动作系统不可以，我立即修改代码使用了update来不断刷新背景的位置，代码如下： on
【Cocos Creator 3.8.3】基础篇：飞机大战系列（背景滚动）
最新发布
ghoul2010的博客
07-24 758
Cocos Creator 3.8.3 飞机大战
Cocos2d-x -- 如何让背景从上到下滚动
weixin_34233856的博客
08-27 100
1. 首先，声明一个2个大小的sprite数组 class GameScreen : public cocos2d::Layer { public: ... cocos2d::Sprite *backgroundSpriteArray[2]; }; 2. 完成初始化，1张图片用于当前显示，另1张用于滚动到下一张 bool GameS...
Cocos Creator 开发实战——数字滚动
creator_HY的博客
01-27 1648
Cocos Creator 开发实战——数字滚动代码原理 Cocos Creator 开发实战——数字滚动        国际惯例先看效果： 代码        代码比较简单，先看代码后讲原理 properties: { m_label: cc.Node, //m_label: cc.Label, ...
精选_【Cocos Creator实战教程(7)】——UI组件（1）ScrollView 组件_源码打包
03-08
在本篇精选的Cocos Creator实战教程中，我们将聚焦于UI组件的第一部分——ScrollView组件。ScrollView是游戏和应用开发中非常关键的一个元素，它允许用户滚动查看超出屏幕范围的内容，从而提供良好的用户体验。Cocos...
CocosCreator微信小游戏入门实战《小猫钓鱼》（二）：动作系统
BigBear的博客
10-15 5427
转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/83063228   上一节我们把基本的工程已经搭建起来了，并且写下了我们的第一行代码。相信你对于creator基本的操作以及Sprite已经有了一定的了解。 接下来，我们通过Prefab开始实现游戏中最为重要的配角——鱼。   动手之前，我们还是先了解一下制作需求： 我们需要...
【Cocos Creator实战教程(7)】——UI组件（1）ScrollView 组件
demongwc的博客
07-17 192
1. 知识点讲解 ScrollView 是一种带滚动功能的容器，它提供一种方式可以在有限的显示区域内浏览更多的内容。通常 ScrollView 会与Mask组件配合使用，同时也可以添加ScrollBar组件来显示浏览内容的位置。 1.1 ScrollView 属性 属性 功能说明 content 它是一个节点引用，用来创建 ScrollView 的可滚动内容，通常这可能是一个...
cocos2d实现屏幕背景滚动
10-20
cocos2d屏幕滚动的源代码，自己写的确定可用，我的博客有详细介绍！
CocosCreator项目实战（2）：背景块设置
01-08
文章目录一、背景块节点二、预置资源三、绘制第一个背景块四、绘制所有背景块 一、背景块节点 在bg节点下创建Sprite(单色)节点命名为block，在block节点下创建Label节点命名为numberLabel，可预先设置numberLabel的String为2048，字体大小为60，行高为64，字体颜色为#000000。 二、预置资源 因为需要动态创建多个block，所以将它从层级管理器拖到资源管理器的prefabs目录下，删除层级管理器下的block节点。 在scripts目录下创建game脚本，选中层级管理器的Canvas节点，将game脚本拖到右侧属性管理器中，会自动在Can
cocos Creator 使用摄像机进行背景的差速移动
03-21
在creator中设计背景移动一般都会使用update进行刷新坐标，但是由于update中的dt值（针）不稳定就会造成背景移动时卡顿或顿挫特别难受。所以这里介绍了用相机进行背景差速移动，
CocosCreator无限滚动背景
公众号 亮亮同学TT
10-15 599
想法是： 两张背景图同时移动，到达边界点 重置 背景图的位置，但是效果不好 会出现 黑边。于是看了 坐标的数据，找到了问题点是出边界的 临界点的 坐标 会有偏差，于是 变更改了 计算边界的 方法。凑效。 总体逻辑：在update里两张背景图 同时 移动 ，每张图移出屏幕时将该背景图放到 另一张图的上方。如此循环。 实操： 代码： 横版滚动以此类推。 长按 或 搜索 亮亮同学TT 关注微信公众号。获取更多 ...
CocosCreator滚动背景
nihaoqlw的博客
11-06 2387
先上代码： cc.Class({ extends: cc.Component, properties: { bg1: { default: null, type: cc.Node, }, bg2: { default: null, type: cc.Node, }, roll_speed: 3, }, update: function(dt) { var ...
《Cocos Creator游戏实战》跑酷背景移动实现
热爱代码
12-22 2219
跑酷背景移动实现 节点布局 背景移动原理 编写脚本 本节我们来看看跑酷游戏中的背景是怎么移动的。 运行效果如下（蜗牛跑酷可还行...）： Cocos Creator版本：2.2.0 公众号后台回复"背景移动"，获取完整项目源码： 节点布局 首先创建以下节点： 1. bg1和bg2是两张一模一样的图片，它们的大小和锚点都一样，位置是前后拼接。 ...
cocos2dx3.0 实现屏幕背景滚动
master-dragon的专栏
07-28 2317
主要是利用 update()方法（this->scheduleUpdate();开启），让背景图片不断的移动，两张图片交替 就能形成图片背景移动的效果了。BgScene.h#ifndef __BG_SCENE_H__ #define __BG_SCENE_H__#include "cocos2d.h"USING_NS_CC;class Bg: public cocos2d::Layer { pub
cocos2dx 背景无限滚动
lls2012的专栏
01-15 492
#include "BaseLayer.h" BaseLayer::BaseLayer() { } BaseLayer::~BaseLayer() { } bool BaseLayer::init() { bool bRes = false; do { CC_BREAK_IF(!Layer::init()); bRes = true; } while (0); re
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值