CocosCreator零基础制作游戏《极限跳跃》五、制作游戏主场景背景滚动
首页 > CocosCreator > 《极限跳跃》    作者:闭眼就天黑   2016年5月29日 13:29 星期日   热度:19933°   百度已收录  
时间:2016-5-29 13:29   热度:19933° 

CocosCreator零基础制作游戏《极限跳跃》五、制作游戏主场景背景滚动


刚刚我们实现了玩家的一些功能,测试了下发现我们的玩家跳跃几次后,就会超出屏幕,这样体验很差,那下面我们来实现场景背景的滚动作为参照物来实现玩家移动。也就是说玩家只需要小范围的移动就行了,剩下的交给背景的移动来给用户带来玩家在移动的错觉,游戏都是这样实现的。


新建脚本BgMove,并实现移动方法,参数为移动的距离。实现代码:

//BgMove.js
cc.Class({
    extends: cc.Component,
    properties: {
        // foo: {
        //    default: null,
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },
    //背景移动
    setMoveAction: function(height){
        // 移动距离
        var moveHeight = height;
        var moveAction = cc.moveBy(this.jumpTimes, cc.p(0, - moveHeight));
        return moveAction;
    },
    // use this for initialization
    onLoad: function () {
    },
    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {
    // },
});

创建好脚本后,我们在场景中给节点bg1、bg2绑定此脚本。

QQ20160529-15@2x.png


绑定后,我们在打开GAME.js脚本,在顶部引用此脚本。

QQ20160529-16@2x.png

然后在事件监听方法,触摸结束的方法里添加背景移动的监听。

 //事件监听
    setEventControl: function(){
        var self = this;
        var hero = self.player.getComponent(HeroPlayer);//角色绑定控件
        var bg1 = self.bgsprite1.getComponent(MoveBg);//绑定背景控件
        var bg2 = self.bgsprite2.getComponent(MoveBg);//绑定背景控件
//.....
//...省略部分代码.
//.....
onTouchEnded: function (touch, event) {            // 点击事件结束处理
                if(self.player.getPositionY() > 0){
                    
                    var height = self.player.getPositionY();//背景需要移动的高度
                    self.player.setPositionY(height/2);//设置精灵的高度位置
                    
                    bg1.node.runAction(bg1.setMoveAction(height));//背景实现向下滚动
                    bg2.node.runAction(bg2.setMoveAction(height));//背景实现向下滚动
                    
                }
 //...省略部分代码.

这里分析下代码部分,首先我们创建场景时候,场景Canvas的锚点为(0.5,0.5),也就是屏幕的中心点坐标为0,0。其所有子节点的坐标都是相对于场景来布局,所以说我们的主角布局时候放在屏幕的中下方位置,一开始的Y坐标为负数。每次移动Y坐标会增加,当Y坐标增加超过中心点坐标我们需要进行背景移动,而背景移动的距离则是我们的主角Y坐标值减去中心点的Y坐标0,也就是主角Y坐标值本身。

所以每次触摸结束,我们对主角的Y坐标进行判断,如果大于0,说明背景需要移动,移动距离为主角Y坐标值,然后我门调用背景1和背景2的移动方法,参数为主角的Y坐标。

背景移动时候,我们同时需要修正主角的坐标,设置主角的坐标为超过中心点的一半,这样主角不论怎么移动都只能在屏幕内移动。

下面我门来运行预览,测试下。。

beijingyidong.gif

是不是可以实现背景滚动了,大家最后发现了一个问题,背景移动完毕了,没有背景会出现黑色的区域。。

下面我们要实现一个方法,来对背景进行计算。我们现在是两个背景进行拼接的。我们需要来判断哪个背景已经移除屏幕,移除屏幕后改变其位置,让它Y坐标变成正在移动的那个背景的上边,这样来实现无缝拼接。这样才是无限滚动的背景。

下面我们继续在GAME脚本添加新的方法来实现计算,下面贴代码。

//GAME.js
//...省略代码
 //如果背景1的坐标移出屏幕开始设置新的坐标
    setBgMoveCreate: function(){
        //如果背景1的坐标移出屏幕开始设置新的坐标
        if(this.bgsprite1.getPositionY()  < -500 ){
            this.bgsprite2.setPositionY(this.bgsprite1.getPositionY()+this.bgsprite1.getContentSize().height);
        }
        //如果背景2的坐标移出屏幕开始设置新的坐标
        if(this.bgsprite2.getPositionY() < -500 ){
            this.bgsprite1.setPositionY(this.bgsprite2.getPositionY()+this.bgsprite2.getContentSize().height);
        }
    },
    //实现update方法
   update: function (dt) {
            
        this.setBgMoveCreate();//检测背景
        
        },

我们在update里不停的检测背景移动事件来解决黑色问题。下面来再次测试下。

beijingyidong22.gif


到此我们已经实现了 玩家角色的移动,背景的滚动了。。游戏完成了三分之一了。。感觉还可以吧。继续。。

二维码加载中...
本文作者:闭眼就天黑      文章标题: CocosCreator零基础制作游戏《极限跳跃》五、制作游戏主场景背景滚动
本文地址:https://www.byjth.com/jixiantiaoyue/70.html
版权声明:若无注明,本文皆为“闭眼就天黑专栏_技术博客_个人学习总结”原创,转载请保留文章出处。
相关文章

版权所有:《闭眼就天黑专栏_技术博客_个人学习总结》 => 《CocosCreator零基础制作游戏《极限跳跃》五、制作游戏主场景背景滚动
本文地址:https://www.byjth.com/jixiantiaoyue/70.html
除非注明,文章均为 《闭眼就天黑专栏_技术博客_个人学习总结》 原创,欢迎转载!转载请注明本文地址,谢谢。

cc.Class({
    extends: cc.Component,

    properties: {
        jumpTime : 0, //这里补加一个时间,在属性面板里面动态调整具体值,这样背景移动会变的平滑,不然很生硬,视觉效果极差
    },
    //背景随着角色跳跃而移动
    setMoveAction: function (height) {
        //移动距离
        var moveHeight = height;
        var moveAction = cc.moveBy(this.jumpTime, cc.p(0, - moveHeight));
        return moveAction;
    },
    // onLoad () {},

    start () {

    },

    // update (dt) {},
});
@youzi:୧(๑•̀◡•́๑)૭ 厉害
这里图像不移动是因为this.jumpTimes会未定义的!!!  改一个常数值试试就知道了
BgMove.js的this.jumpTimes从那里导过来的啊?显示为undefined
背景图不动
@好好:用浏览器 看看
@好好:if (self.player.getPositionY() > 0) {  这行里面 你可能写成了if (self.player.getPositionY> 0) {

getPositionY是方法 要加(), getPositionY()

JS编码一定要仔细 ,不然调试起来不容易找出问题 ,有时 他不会具体给你报错哪一行 ,直接不抱错,但就是运行没效果。
背景图不动,问题出在哪里了?
为什么背景一移出屏幕要设置背景二的坐标在上面啊,难道不是设置背景一的位置吗?请大神指教啊。
@李艳:我们需要来判断哪个背景已经移除屏幕,移除屏幕后改变其位置,让它Y坐标变成正在移动的那个背景的上边,这样来实现无缝拼接。这样才是无限滚动的背景。

返回顶部    首页    手机版本    版权所有:闭眼就天黑专栏_技术博客_个人学习总结
    站长: 闭眼就天黑    搜索cocos2dx主题 技术支持:闭眼就天黑   皖ICP备14007736号-1  

皖公网安备 34132102000107号

   sitemap