《Cocos Creator遊戲實戰》實現放大鏡效果

實現放大鏡效果

創建節點

設置分組

編寫腳本

---

在本節教程中，我們在之前的畫板功能上加一個放大鏡效果。每當玩家開始畫畫，筆觸附近區域就會被放大顯示。如果想要先了解下如何實現畫板功能，可以點擊這個鏈接。

 

運行效果如下：

 

Cocos Creator版本：2.2.0

後臺回覆"放大鏡"，獲取該項目完整文件：

 

創建節點

紅色區域是我們爲了實現放大鏡功能而創建的節點(其他的則屬於畫板功能)：

1. magnifier_camera是一個攝像機節點，用於拍攝整張畫布上的內容。

2. magnifier節點是我們的放大鏡，我們給它加上一張放大鏡圖片：

其中mask_node是遮罩節點，這個放着待會再講，先來看下show_sprite。該節點用於顯示攝像機所拍攝的內容，而我們知道要在放大鏡圖片中的鏡片區域進行顯示，所以應該要通過Widget組件把show_sprite節點固定在鏡片區。

但是show_sprite是四方形的，而鏡片區域是圓形的，所以應該通過遮罩將多餘的地方給遮擋住：

 

最後筆者把放大鏡放在了屏幕的右上角，默認狀態不顯示，只有當玩家開始畫畫時纔會出現。

 

設置分組

爲了讓攝像機能夠正確顯示出我們想要的內容，我們需要給magnifier節點設置一個分組(其子節點將都會被分到這個組中)：

然後將攝像機cullingMask中的magnifier分組給取消掉，表示不渲染該分組內容：

 

編寫腳本

新建Magnifier.js腳本，內容如下：

// Magnifier.js
cc.Class({
    extends: cc.Component,

    properties: {
        magnifierCamera: cc.Node,
        showSprite: cc.Node
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        // 創建渲染紋理，並設置紋理大小同顯示屏(showSprite)大小一樣
        let texture = new cc.RenderTexture();
        texture.initWithSize(this.showSprite.width, this.showSprite.height);
        
        // 設置攝像機縮放比率和目標投影紋理
        this.magnifierCamera.getComponent(cc.Camera).zoomRatio = 8;
        this.magnifierCamera.getComponent(cc.Camera).targetTexture = texture;

        // 顯示屏顯示紋理
        this.showSprite.getComponent(cc.Sprite).spriteFrame.setTexture(texture);
    },
});

在onLoad方法中，我們首先創建一個渲染紋理並設置其大小。然後增大攝像機的縮放比率(因爲要有放大效果，所以要讓攝像機拍得更近)，並設置目標投影紋理。最後將紋理放到顯示屏上進行顯示即可。

 

在Game.js腳本中，我們在properties中添加兩個屬性：

// Game.js
properties: {
    ...
    magnifierCamera: cc.Node,            // 攝像機
    magnifier: cc.Node                   // 放大鏡
},

每當玩家落筆時，我們先顯示放大鏡，並確保攝像機座標與筆刷座標相等：

// Game.js
onTouchStart(event) {
    // 設置筆刷起始位置
    let pos = this.node.convertToNodeSpaceAR(event.getLocation());
    this.brush.getComponent('Brush').setBrushPos(pos.x, pos.y);
    
    // 顯示放大鏡和移動攝像機位置(跟隨筆刷)
    this.magnifier.active = true;
    this.magnifierCamera.setPosition(pos);
},

然後筆刷移動，開始畫畫，這時只需要確保攝像機座標與筆刷座標相等即可：

// Game.js
onTouchMove(event) {
    let pos = this.node.convertToNodeSpaceAR(event.getLocation());
    this.brush.getComponent('Brush').drawTo(pos.x, pos.y);

    // 移動攝像機位置(跟隨筆刷)
    this.magnifierCamera.setPosition(pos);
},

最後玩家收筆，我們就隱藏放大鏡：

// Game.js
onTouchEnd(event) {
    this.magnifier.active = false;
},

 

就是這樣，非常簡單，希望大家都有所收穫~