【用Cocos Creator给暗恋的女生写一个游戏(7)】——(Run Game)背景移动

原创 2016年08月29日 07:47:51

新建CameraManager.js添加到在Game的子节点CameraManager下

CameraManager.js

cc.Class({
    extends: cc.Component,

    properties: {
        far:cc.Node,
        farRelSpeed:0,//相对主角移动速度
        farOffX:0,//循环滚动距离
        ground:cc.Node,
        groundRelSpeed:0,
        groundOffX:0,
        pipeLayer:cc.Node,
        layerRelSpeed:0,
    },

    init: function (game) {
        this.game = game;
        this.oFarX = this.far.x;
        this.oGroundX = this.ground.x;
    },

    moveBg: function(distance){
        this.far.x -= distance * this.farRelSpeed;
        if(this.far.x < (this.oFarX - this.farOffX)){
            this.far.x = this.oFarX;
        }
        this.ground.x -= distance * this.groundRelSpeed;
        if(this.ground.x < (this.oGroundX-this.groundOffX)){
            this.ground.x = this.oGroundX;
        }
        this.pipeLayer.x -= distance * this.layerRelSpeed;
    },
});

这里写图片描述

修改Game.js

var Player = require("Player");
var CameraManager = require("CameraManager");
cc.Class({
    extends: cc.Component,

    properties: {
        player:Player,
        cameraManager:CameraManager,
    },

    onLoad: function () {
        //返回键返回菜单
        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,
            onKeyPressed: function(keyCode, event) {
                if(keyCode == cc.KEY.back){
                    cc.director.loadScene('Menu');
                }
            }
        }, this.node);
        this.startGame();
    },

    startGame: function(){
        this.cameraManager.init(this);
        this.player.init(this);
    },

    stopGame: function(){

    },

});

修改Player.js

...
update: function (dt) {
    if(this.state != STATE.NONE && this.state != STATE.DEAD){
        this.speedY -= this.gravity * dt;
        this.node.y += this.speedY * dt;
        if(this.node.y <= this.groundY){
            this.node.y = this.groundY;
        }
        this.game.cameraManager.moveBg(this.speedX * dt);
    }
},
...

下面我要用我超强的逻辑思维给大家解释一下这个背景是怎么移动的

咳咳

我们知道每一次调用update方法,player的位置就会根据相应属性更新,而背景的移动应该跟player的移动相关,(这里我们可能要讲一下爱因斯坦的相对论,但可能讲完就下课了,所以不讲了…)我们需要知道player往前移动,背景就要往后移动,它们的速度是相反的。

还有远景和近景的移动速度不同,远处的移动速度要慢一些(那位举“坐火车”的例子的同学很聪明)

所以我们在CameraManager里设置了far相对player的速度 farRelSpeed 和ground相对于player的速度 groundRelSpeed 以及 layerRelSpeed ,因为ground,pipeLayer和player是在同一平面的,所以他们的相对速度都设为1,far节点较远,设为0.2

还有两个属性farOffX和groundOffX,他们是记录两个节点循环滚动距离的,因为我们的背景只有两张图片,需要循环显示,那个farOffX = 1000是计算出来的,留给同学们当作业,做完明天班长收一下

最后我们要把上次没用到的Player的speedX填上数值

这里写图片描述

通过这么巧妙的设置,我们就可以随便更改主角的速度而不用管背景的移动速度了,因为背景会随着主角速度动态调整

看一下效果

这里写图片描述

版权声明:本文为博主原创文章,转载请保留原文链接blog.csdn.net/potato47

相关文章推荐

WIN7下安装Oracle 10g 的详细过程以及有关问题的解决(转)

WIN7下安装Oracle 10g 的详细过程

【用Cocos Creator给暗恋的女生写一个游戏(12)】——跨场景访问节点、存储数据、添加音效音乐、打包发布

跨场景访问节点我们来看一下之前做的菜单场景中间有一个记录的label我们一直没理她,今天我们就来翻她的牌子我们每次游戏结束时都会有一个分数,这个分数变量在相应的游戏场景里,我们想要的效果时:当返回菜单...

【用Cocos Creator给暗恋的女生写一个游戏(5)】——(Run Game)场景搭建

先看图这个场景我们只用了两张小图片素材,分别是A1和B1对应的图片,而A2和B2是复制前面的,可以看出,A和B部分明显长出屏幕的宽,这是为了实现背景无限移动的效果(当图片滚动到一定距离,我们让它再重新...

【用Cocos Creator给暗恋的女生写一个游戏(6)】——(Run Game)主角逻辑

我们在Canvas节点的同级添加一个Game节点,并添加两个子节点如图新建一个脚本取名叫做“Game”并添加到Game节点上Game.jsvar Player = require("Player");...

【用Cocos Creator给暗恋的女生写一个游戏(8)】——(Run Game) Prefab的动态管理

我们先来考虑一下这个PrefabManager是干什么的,我们的游戏中有重复出现的水管和老公,所以PrefabManager要能够动态管理他们,理所当然要有创建和销毁的方法,创建很简单,我们只需要每隔...

【用Cocos Creator给暗恋的女生写一个游戏(9)】——(Run Game) 游戏逻辑与碰撞检测

至此为止,我们已经把主要的技术问题都解决了,现在我们给游戏添加 具体的逻辑给主角添加碰撞组件回顾一下我们已经添加的碰撞组件的节点管子兄弟:tag=333管子哥哥和管子弟弟:tag=3331大老公:t...

【用Cocos Creator给暗恋的女生写一个游戏(11)】——(Jump Game) 镜头跟随

上节自习大家是不是上的很开心啊。。。。大家是不是发现了两个游戏有辣么多相同的地方,就连很多节点的名字都一样但是有一个东西是第一游戏没有的,那就是中间的那个Camera我把Camera节点添加上颜色Ca...

【用Cocos Creator给暗恋的女生写一个游戏(13)】——整体回顾,工程文件

Load场景Load.jscc.Class({ extends: cc.Component, properties: { loadBar: cc.ProgressBar,...

【用Cocos Creator给暗恋的女生写一个游戏(14)】——(完结)写在后面

终于写完了!虽然比我预期的晚了一点我的暑假生活就是这样的:吃饭,睡觉,看奥运会,打代码,写教程我也不知道写完有没有人看,反正我写的时候挺嗨的,本来我准备都用第三人称写的,但是不知道怎么的,不知不觉就改...

【用Cocos Creator给暗恋的女生写一个游戏(4)】——游戏主菜单

既然是两个游戏,所以X想用两个主页面,最理想的就是用pageview,可是Creator还没支持,所以用一个差不多的模拟一下——ScrollView新建一个ScrollView空节点,添加Scroll...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【用Cocos Creator给暗恋的女生写一个游戏(7)】——(Run Game)背景移动
举报原因:
原因补充:

(最多只允许输入30个字)