How to use cc.follow for camera tracking in CocosCreator

Cocos Creator version: 2.3.4

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

Let's first use the follow code that comes with cocoscreator, cc.follow.

Use of CC.Follow

1. Set the map adapter container leftNode

Let's say this is a horizontal parkour game. The map size is 1500x1500, so the height and width of leftNode are 1500x1500, and the widget is aligned to the lower left.

2. Set the map container map

The map container is also 1500x1500. The difference from leftNode is that it does not have an adapter component widget. If you use a widget, you cannot move the map. This is why an extra layer of leftNode is used to adapt to the screen.

There is a role in the map. (A normal cc.Button button)

There are red buttons around the map to identify the map edges.

Add the Follow.ts component to the map container and set the target role to Role. Role is a button cc.Button, and we treat it as a moving role here.

The code of Follow.ts is as follows:

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

3. Virtual joystick controls character movement

Virtual joystick reference: https://www.cnblogs.com/gamedaybyday/p/13061387.html

It doesn't matter if you don't know, as long as you can use other methods to control the character's movement and change the character's x and y.

4. Actual Demonstration Effect

You can see that when the character moves, the "camera" automatically follows the character and is limited to a range of 1500x1500, not exceeding the boundary where the red button is placed.

Source code of CC.Follow

The source code is in CC.Action.js

The above is the details of how to use cc.follow for camera following in CocosCreator. For more information about camera following in CocosCreator, please pay attention to other related articles on 123WORDPRESS.COM!