Cocos Creator2D游戏开发(3)-飞机大战(1)-背景动起来

news2024/9/21 0:37:49

资源见: https://pan.baidu.com/s/1cryYNdBOry5A4YEEcLwhDQ?pwd=zual

步骤
1, 让背景动起来
2, 玩家飞机显现,能操控,能发射子弹
3.敌机出现
4. 碰撞效果(子弹和敌机,敌机和玩家)
5. 积分和游戏结束
6. 游戏存档,对接微信小游戏,保存历史最高分
7. cocos发布到微信小游戏

资源准备:
背景图, 敌方飞机, 玩家飞机, 爆炸效果图, 子弹动画帧, 游戏结束图,音效
Resources: 图片和音效
Scene: 场景文件文件夹
Scripts: 脚本文件夹
在这里插入图片描述

文件目录创建
在Canvas右键创建空节点,命名为root_node,在root_node下创建空节点background_node, 并将资源中的图片Background拖入节点background_node下 , 按ctrl+s 保存当前场景, 并命名为main_scene,保存在scene文件夹中,(再次打开项目就看不到这个场景了,双击场景文件就行了)
选择当前场景,点击运行按钮,浏览器就自动显示蓝天白云的背景了
让背景动起来
①将背景图片节点复制一份
② 选中Scripts文件夹右键创建脚本(TypeScript)文件,命名 Background.ts
③ 选中background_node,将脚本Background.ts拖入右侧属性检查器,将脚本进行和节点进行绑定

双击脚本Background,直接打开VScode编辑器进行写代码

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Background')
export class Background extends Component {
    private Speed = 100; // 速度
    private MyBGsArr = [];
    private DHeight = 747;

    //回调函数会在组件第一次激活前，也就是第一次执行 update 之前触发。
    start() {
        this.MyBGsArr = this.node.children; //获取当前节点子子节点(即Background_1,Background_2) 
    }

    // 游戏开发的一个关键点是在每一帧渲染前更新物体的行为，状态和方位。这些更新操作通常都放在 update 回调中。但deltaTime的值不一定
    update(deltaTime: number) {
        // 遍历两个子节点,沿Y轴向下(Y轴负方向)
        for (let i = 0; i < this.MyBGsArr.length; i++) {
            const pos = this.MyBGsArr[i].getPosition();
            const x = pos.x;
            const y = pos.y;
            if(y<= -747){
                this.MyBGsArr[i].setPosition(x, 747); // 将移动到屏幕下方的图片放到上方
            }else{
                this.MyBGsArr[i].setPosition(x, y - deltaTime * this.Speed);
            }
        }
    }
}

当前场景运行,背景图就运动起来了,偶尔会看到一条线,因为deltaTime不是恒定的所以将图片高度调整为750; 这样就能覆盖住那条线
在这里插入图片描述