当前位置：首页 > news >正文

跑酷游戏开发笔记1 背景移动 cocos3.8.7

news 2025/11/8 14:43:10

创建一个场景，然后为场景添加几个节点，构成背景，控制节点移动，为每个节点设置速度。

背景节点的移动实现

 /*** 地面相关节点定义*/// 绑定地面节点@property(Node)ground0: Node = null;@property(Node)ground1: Node = null;// 地面移动速度@propertygroundSpeed: number = 300;update(deltaTime: number) {//每帧执行一次/*** 控制ground地面移动*///移动距离const groundmoveDistance = this.groundSpeed * deltaTime;//ground0移动//getPosition() 方法获取节点当前的坐标（gcp1 是一个包含 x、y 属性的位置对象）let gcp0 = this.ground0.getPosition();//setPosition() 方法设置节点的新坐标this.ground0.setPosition(gcp0.x - groundmoveDistance, gcp0.y);//ground1移动let gcp1 = this.ground1.getPosition();this.ground1.setPosition(gcp1.x - groundmoveDistance, gcp1.y);//判断gcp0是否超出屏幕if (gcp0.x < -730) {//重新获取ground1的位置，此时位置已经发生改变了gcp1 = this.ground1.getPosition();//移动1到背景0的位置this.ground0.setPosition(gcp1.x + 728, gcp1.y);}//判断p2是否超出屏幕，超出则把1号背景放在2号背景右边if (gcp1.x < -730) {gcp1 = this.ground0.getPosition();this.ground1.setPosition(gcp0.x + 728, gcp0.y);}
}

1. 变量定义部分

// 绑定两个地面节点（通常是完全相同的地面图片）
@property(Node)
ground0: Node = null;@property(Node)
ground1: Node = null;// 地面移动速度（像素/秒）
@property
groundSpeed: number = 300;

核心设计：使用两个完全相同的地面节点（ground0 和 ground1）横向拼接，形成连续的地面
速度控制：groundSpeed 定义移动速率，值越大地面滚动越快

2. 更新逻辑（`update` 方法）

每帧执行一次，负责地面的移动和重置，实现循环滚动效果。

2.1 计算移动距离

const groundmoveDistance = this.groundSpeed * deltaTime;

deltaTime：两帧之间的时间间隔（秒）
移动距离 = 速度 × 时间，确保不同帧率下移动速度一致（时间补偿）

2.2 地面移动

// 移动 ground0
let gcp0 = this.ground0.getPosition();
this.ground0.setPosition(gcp0.x - groundmoveDistance, gcp0.y);// 移动 ground1
let gcp1 = this.ground1.getPosition();
this.ground1.setPosition(gcp1.x - groundmoveDistance, gcp1.y);

两个地面节点同时向左移动（x 坐标减小）
保持相同速度，确保拼接处无缝衔接

2.3 重置逻辑（核心）

// 当 ground0 完全移出屏幕左侧时
if (gcp0.x < -730) {// 重新获取 ground1 当前位置（因为可能已移动）gcp1 = this.ground1.getPosition();// 将 ground0 放到 ground1 右侧，形成连续拼接this.ground0.setPosition(gcp1.x + 728, gcp1.y);
}// 当 ground1 完全移出屏幕左侧时
if (gcp1.x < -730) {gcp1 = this.ground0.getPosition();// 将 ground1 放到 ground0 右侧，形成连续拼接this.ground1.setPosition(gcp0.x + 728, gcp0.y);
}