【用Cocos Creator給暗戀的女生寫一個遊戲(11)】——(Jump Game) 鏡頭跟隨

原創

potato47

2020-02-21 08:54

上節自習大家是不是上的很開心啊。。。。

大家是不是發現了兩個遊戲有辣麼多相同的地方，就連很多節點的名字都一樣

但是有一個東西是第一遊戲沒有的，那就是中間的那個Camera

我把Camera節點添加上顏色

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;
        }
    }
});

看看效果