CocosCreator怎樣使用cc.follow進(jìn)行鏡頭跟隨

更新時(shí)間：2021年04月16日 15:37:46 作者：gamedaybyday

這篇文章主要介紹了CocosCreator怎樣使用cc.follow進(jìn)行鏡頭跟隨，想要學(xué)習(xí)follow的同學(xué)，一定要看一下

Cocos Creator版本：2.3.4

Demo下載：https://files-cdn.cnblogs.com/files/gamedaybyday/cocos2.3.4_ccfollow.7z

說先來使用下cocoscreator自帶的跟隨代碼，cc.follow。

CC.Follow使用

一、設(shè)置地圖適配容器leftNode

假設(shè)這是個(gè)橫屏跑酷游戲。地圖大小1500x1500，那么leftNode高寬為1500x1500，并且widget居左下對(duì)齊。

二、設(shè)置地圖容器map

地圖容器也是1500x1500，和leftNode區(qū)別就是沒有適配組件widget，因?yàn)槟阌昧藈idget，就沒法讓地圖移動(dòng)了。這也是為什么多套一層leftNode用來適配屏幕的原因。

地圖里有一個(gè)角色Role。（一個(gè)普通的cc.Button按鈕）

地圖四周有紅色的按鈕作為識(shí)別地圖邊緣。

地圖容器上掛組件Follow.ts，并設(shè)置target角色目標(biāo)為Role。Role就是一個(gè)按鈕cc.Button，我們這里把它當(dāng)成移動(dòng)的角色。

Follow.ts代碼如下：

const {ccclass, property} = cc._decorator;
 
@ccclass
export default class Follow extends cc.Component {
 
    @property(cc.Node)
    target:cc.Node = null;
 
    start () {
        var follow = cc.follow(this.target, cc.rect(0,0, 1500,1500));
        this.node.runAction(follow);
    }
}

三、虛擬搖桿控制角色移動(dòng)

虛擬搖桿參考：https://www.cnblogs.com/gamedaybyday/p/13061387.html

不知道也沒關(guān)系，只要你能用其他方法控制角色移動(dòng)，改變角色的x,y就行。

四、實(shí)際演示效果

可以看到角色在移動(dòng)時(shí)，“鏡頭”會(huì)自動(dòng)跟隨角色Role移動(dòng)，并且限制范圍在1500x1500內(nèi)，沒有超出放著紅色按鈕的邊界。

CC.Follow的源碼

源碼在CC.Action.js內(nèi)

以上就是CocosCreator怎樣使用cc.follow進(jìn)行鏡頭跟隨的詳細(xì)內(nèi)容，更多關(guān)于CocosCreator鏡頭跟隨的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

小程序api實(shí)現(xiàn)promise封裝過程解析
這篇文章主要介紹了小程序api實(shí)現(xiàn)promise封裝過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
JavaScript超過Number最大值的解決方案
在JavaScript中,Number類型是基于IEEE754雙精度浮點(diǎn)數(shù)標(biāo)準(zhǔn)表示的,雖然在常見場(chǎng)景下非常高效,但在處理大數(shù)據(jù)時(shí),Number類型存在顯著的精度限制,在這些場(chǎng)景中,如何精確處理大數(shù)據(jù)和超大數(shù)字成為了一個(gè)重要的問題,所以本文給大家介紹了JavaScript超過Number最大值的解決方案
2025-01-01
javascritp添加url參數(shù)將參數(shù)加入到url中
javascritp添加url參數(shù)方法，將參數(shù)加入到url中,如果原來url中有則覆蓋，下面是示例代碼，感興趣的朋友可以參考下
2014-09-09
js 判斷一個(gè)數(shù)字是不是2的n次方冪的實(shí)例
下面小編就為大家分享一篇js 判斷一個(gè)數(shù)字是不是2的n次方冪的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助
2017-11-11
javascript基于牛頓迭代法實(shí)現(xiàn)求浮點(diǎn)數(shù)的平方根【遞歸原理】
這篇文章主要介紹了javascript基于牛頓迭代法實(shí)現(xiàn)求浮點(diǎn)數(shù)的平方根,簡(jiǎn)單說明了牛頓迭代法的原理,并結(jié)合實(shí)例分析了javascript基于遞歸的數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2017-09-09
詳談LABJS按需動(dòng)態(tài)加載js文件
為了提高頁(yè)面的打開和加載速度，我們經(jīng)常把JS文件放在頁(yè)面的尾部，但是有些JS必須放在頁(yè)面前面，這樣就會(huì)增加頁(yè)面的加載時(shí)間；于是出現(xiàn)了按需動(dòng)態(tài)加載的概念，這個(gè)概念就是當(dāng)頁(yè)面需要用到這個(gè)JS文件或者CSS渲染文件的時(shí)候，在去請(qǐng)求這些文件，這樣就節(jié)省了頁(yè)面的加載時(shí)間
2015-05-05
JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組方法
這篇文章主要給大家分享了JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的方法，下面文章圍繞JS數(shù)組轉(zhuǎn)換的相關(guān)資料展開內(nèi)容，對(duì)大家的學(xué)習(xí)有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-01-01
完美實(shí)現(xiàn)仿QQ空間評(píng)論回復(fù)特效
這篇文章主要介紹了完美實(shí)現(xiàn)仿QQ空間評(píng)論回復(fù)特效，非常的實(shí)用，附上實(shí)例代碼給大家，有需要的小伙伴參考下吧。
2015-05-05
js實(shí)現(xiàn)無縫輪播圖插件封裝
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無縫輪播圖插件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
JavaScript?日期和時(shí)間的格式化方法
這篇文章主要介紹了JavaScript?日期和時(shí)間的格式化,JavaScript?中的?Date?對(duì)象提供了許多方法和屬性，可以用于處理日期和時(shí)間，根據(jù)具體情況選擇適合的方法和技巧，需要的朋友可以參考下
2023-02-02