原创

Cocos Creator零基础游戏实战《左右跳》JS教程03-游戏背景移动

本章简介

使用Cocos Creator开发游戏,在实现游戏背景移动的时候,有两种实现思路。一种是通过两张背景图片循环播放,另一种是通过相机移动视角让玩家感觉是背景在移动。我这里用的是第一种方式实现游戏背景移动

Cocos Creator切换游戏场景

上一章我们学会怎么给开始游戏按钮绑定点击回调事件。我们点击开始游戏按钮之后需要跳转到游戏开始场景。我们先创建一个游戏开始场景取名为start

file

修改game脚本里处理游戏开始逻辑的回调函数onStartGame

onStartGame: function () {
        // 开始游戏
        console.log('开始游戏');
        cc.director.loadScene("start");//切换场景到开始场景
},

修改完成后记得CTRL + S 保存,运行看下效果,点击开始游戏,会跳转到start游戏场景。因为start场景我们还没有做任何处理,默认是黑色背景。

file

file

Cocos Creator添加触摸事件

左右跳小游戏需要玩家点击手机屏幕,来控制游戏角色。我们要给游戏添加触摸回调函数,在添加触摸回调函数之前,我们先创建一个名为start的游戏脚本控制游戏开始场景的逻辑,我们会在start脚本上添加触摸回调函数

file

我们打开start游戏脚本,在onLoad方法下添加触摸回调函数,添加完成记得保存:

onLoad () {
        this.node.on(cc.Node.EventType.TOUCH_START,this.onTouchStart,this)
},
onTouchStart (event) {
        console.log('点击屏幕');
},

保存之后,把start脚本挂载在start场景Canvas节点

file

运行后,点击游戏场景可以看到点击屏幕的日志打印出来,证明我们给游戏添加触摸事件成功。

file

背景图片布局

先把设计分辨率调整为W:640H:1600,勾选Fit Width

file

然后把背景图片摆放成想要的位置,因为背景图片要始终在最左侧,所以我们用Widget组件

file

编写控制背景移动脚本

背景图片摆放完成后,我们在start脚本添加一个名为bgMove的函数来控制背景的移动。我们要控制背景图片的属性来实现背景移动,所以先要在start脚本声明引用背景图片。左侧两张背景图片,右侧两张背景图片。打开start脚本,在properties添加声明:

properties: {
        l1: cc.Node, //左侧背景1
        l2: cc.Node, //左侧背景2
        r1: cc.Node, //右侧背景1
        r2: cc.Node, //右侧背景2
        speed: 50, // 背景移动速度
},

添加完声明,选中start场景,点击Canvas,在右侧的属性检查器里,把背景节点拖进去,引用背景节点,这样脚本才能控制背景移动。

file

完成声明和引用,我们编写控制背景移动脚本。

1.在onLoad方法记录获取重置触发坐标点

onLoad () {
        this.node.on(cc.Node.EventType.TOUCH_START,this.onTouchStart,this)
        // 获取重置触发坐标点
        this.triggerLY = -this.l1.height;
        this.triggerRY = -this.r1.height;
},

2.编写控制背景移动逻辑。

bgMove () {
        // 背景移动
        this.l1.y -= this.speed;
        this.l2.y -= this.speed;

        this.r1.y -= this.speed;
        this.r2.y -= this.speed;

        // 重置左侧背景
        if (this.l1.y <= this.triggerLY) 
            this.l1.y = this.l2.y+this.l1.height;
        else if (this.l2.y <= this.triggerLY) 
            this.l2.y = this.l1.y+this.l1.height;

        // 重置右侧背景
        if (this.r1.y <= this.triggerRY) 
            this.r1.y = this.r2.y+this.r1.height;
        else if (this.r2.y <= this.triggerRY) 
            this.r2.y = this.r1.y+this.r1.height;
},

在屏幕点击回调函数onTouchStart里,调用背景移动方法bgMove

onTouchStart (event) {
        console.log('点击屏幕');
        this.bgMove();
},

保存后,运行看下效果。

本章源码地址

码云地址:https://gitee.com/cbb123/LR03

本章内容到此结束,觉得对你有帮助的记得收藏本站,谢谢老铁们的支持!

正文到此结束
本文目录