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

上节自习大家是不是上的很开心啊。。。。

大家是不是发现了两个游戏有辣么多相同的地方,就连很多节点的名字都一样

但是有一个东西是第一游戏没有的,那就是中间的那个Camera

我把Camera节点添加上颜色

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

Camera就是标记一块区域,这块区域是干什么的呢?

又是最后面那位宝强同学说出了正确答案

这块区域就是镜头范围

拿拍电影来举例子,当拍一个场景时,场景里常常有主角,而主角常常有主角光环,所以摄像机的镜头就要对准主角,镜头要跟着主角移动

这里的镜头移动方式有两种

一种是中心移动,也就是以主角为中心,主角移动镜头就同步移动

另一种是边界移动,这种移动方式下我们给镜头设定一个范围,当主角移动出这个范围时,摄像机才移动

这在游戏中也很常见,比如英雄联盟的视角锁定,为了更贴切的感受,强烈建议你打开游戏撸一局,自由视角和中心视角的切换按钮是Y(老师是鼓励你们上网,早恋的,不然等你们到大学就晚了)

我们这里用的是边界移动的方式(中心移动的我也试了一下,真的有点晕)

CameraManager2.js

cc.Class({
    extends: cc.Component,

    properties: {
        bgSky:cc.Node,
        skySca:0,
        bgHill:cc.Node,
        hillSca:0,
        bgHillnear:cc.Node,
        hillnearSca:0,
        bgFloor:cc.Node,
        floorSca:0,
        cloudLayer:cc.Node,
        cloudSca:0,
        camera: cc.Node,
        player: cc.Node,

    },

    init: function(game){
        this.game = game;
    },

    moveBg: function(distance){
        //当主角跳出镜头边界时镜头才移动
        if(this.player.y > this.camera.y+this.camera.height/2){
            this.bgSky.y -= distance * this.skySca;
            this.bgHill.y -= distance * this.hillSca;
            this.bgHillnear.y -= distance * this.hillnearSca;
            this.bgFloor.y -= distance * this.floorSca;
            this.cloudLayer.y -= distance * this.cloudSca;
            this.player.y -= distance;
        }
    }
});

看看效果

你可能感兴趣的:(Cocos,Creator)