Detailed explanation of the fish school algorithm in CocosCreator game

Detailed explanation of the fish school algorithm in CocosCreator game

Preface

I recently wanted to learn CocosCreator, so I downloaded the editor and started it.

As we all know, learning by writing is the fastest way to learn. You have to write a demo to practice. So what should you write? I heard that "Ink Shrimp Exploring Tadpoles" is very popular now, so let's copy it (how can studying be called copying?) and write a similar game!

(In "Ink Shrimp Exploring Tadpole", the position of the fish is fixed. When a certain number of fish are reached, the player will upgrade, and there will not be a large school of fish. This project is actually different from it. There is no upgrade or evolution, but there will be a large school of fish. Each fish is not in a fixed position, but has its own movement logic. In fact, it is more like another game, but I don’t know what it is called...)

Effect display:

text

First, create a player:

The picture resources used are pictures from the official Demo of CocosCreator. I learned from the official Demo. I was too lazy to find pictures of fish so I just used the pictures directly. This project currently uses only two pictures.

Once you have a player, you need to write a player control script. Click a direction and the player will keep moving in that direction. Then we first need to get the position where the player clicks, and then calculate the direction in which the player moves. We write this in the GameManager, so create a new script GameManager, and hang this script on the Canvas.

First define two variables, the player node and the direction vector:

@property(cc.Node)
player: cc.Node = null;
ir: cc.Vec2 = cc.Vec2.ZERO;

How to get directions:

getClickDir(event) {
    let pos: cc.Vec2 = event.getLocation();
    //Convert to local coordinates let localPos = this.node.convertToNodeSpaceAR(pos);
    let playerPos: cc.Vec2 = new cc.Vec2(
        this.player.position.x,
        this.player.position.y
    );

    let len ​​= localPos.sub(playerPos).mag();

    this.dir.x = localPos.sub(playerPos).x / len;
    this.dir.y = localPos.sub(playerPos).y / len;
}

This method is called in onMouseDown and onMouseMove:

onMouseDown(event) {
    if (event.getButton() == cc.Event.EventMouse.BUTTON_LEFT) {
        this.getClickDir(event);
    }
}

onMouseMove(event) {
    if (event.getButton() == cc.Event.EventMouse.BUTTON_LEFT) {
        this.getClickDir(event);
    }
}

onLoad() {
    cc.director.getCollisionManager().enabled = true;
    cc.director.getPhysicsManager().enabled = true;

    this.node.on(cc.Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
    this.node.on(cc.Node.EventType.MOUSE_MOVE, this.onMouseMove, this);
}

onDestroy() {
    this.node.off(cc.Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
    this.node.off(cc.Node.EventType.MOUSE_MOVE, this.onMouseMove, this);
}

With the direction vector, you can move the player. Create a new FishPlayer script.

In order to prevent the player from running around, we first build the wall:

Add a physical collision body to the wall:

Then you can start writing the FishPlayer script. First, define the variables you will use:

@property(cc.Node)
camera: cc.Node = null;

@property(cc.Node)
gameManager: cc.Node = null;

game: GameManager;
speed: number = 170;
velocity: cc.Vec3 = cc.Vec3.ZERO;

Assign a value to game in onLoad():

onLoad() {
    this.game = this.gameManager.getComponent("GameManager");
}

The method of detecting the boundary through rays to determine whether the player can move:

canMove() {
    var flag: boolean = true;
    //There is an obstacle ahead var pos = this.node.convertToWorldSpaceAR(cc.Vec3.ZERO);
    var endPos = pos.add(this.node.up.mul(40));
    var hit: cc.PhysicsRayCastResult[] = cc.director
        .getPhysicsManager()
        .rayCast(
            new cc.Vec2(pos.x, pos.y),
            new cc.Vec2(endPos.x, endPos.y),
            cc.RayCastType.All
        );
    if (hit.length > 0) {
        flag = false;
    }
    return flag;
}

Control player movement in update:

update(dt) {
    if (this.game.dir.mag() < 0.5) {
        this.velocity = cc.Vec3.ZERO;
        return;
    }

    let vx: number = this.game.dir.x * this.speed;
    let vy: number = this.game.dir.y * this.speed;

    this.velocity = new cc.Vec3(vx, vy);
    //Moveif (this.canMove()) {
        this.node.x += vx * dt;
        this.node.y += vy * dt;
    }

    //Camera follows this.camera.setPosition(this.node.position);

    //Rotate in the direction of movement let hudu = Math.atan2(this.game.dir.y, this.game.dir.x);
    let angle = hudu * (180 / Math.PI);
    angle = 360 - angle + 90;
    this.node.angle = -angle;
}

Now that the player's movement logic is written, let's write the fish school.

Create a new FishGroupManager script and a FishGroup script, hang FishGroupManager on Canvas, and hang FishGroup on player.

A static fishGroups variable is defined in FishGroupManager to manage all Groups (because there may be multiple players and multiple schools of fish in the scene, and there is only one player now, which is convenient for future expansion):

static fishGroups: FishGroup[]; //all groups

Here is a static method to add a group to groups:

static AddGroup(group: FishGroup) {
    if (this.fishGroups == null) this.fishGroups = new Array();

    if (this.fishGroups.indexOf(group) == -1) this.fishGroups.push(group);
}

Here is another static method to get the group (get it by index):

static GetFishGroup(index: number) {
    for (var i = 0; i < this.fishGroups.length; i++)
        if (this.fishGroups[i].groupID == index) return this.fishGroups[i];
}

FishGroupManager is now written. Next, write FishGroup to define the groupID used above and the fish group array:

groupID: number = 0; //group id    
fishArr: cc.Component[] = new Array<cc.Component>();

Add itself to fishGroups in onLoad:

onLoad() {
    FishGroupManager.AddGroup(this);
}

Now we have a school of fish, but there are no fish in it, so we need a way to catch fish:

catchFish(fish) {
    this.fishArr.push(fish);
}

Define some more parameters to be used, and FishGroup is complete:

keepMinDistance: number = 80;
keepMaxDistance: number = 100;
keepWeight: number = 1; //Member keep distance and keep distance weight moveWeight: number = 0.8; //and member move weight

Now comes the highlight - the movement logic of other small fish in the school.

Simply copy the player, remove the mounted FishPlayer and FishGroup scripts, and name it fish. This is our little fish. Make it a prefab. Then create a new FishBehaviour script, which is attached to the player and ordinary fish.

First, implement the "fish catching" function. When the player approaches a small fish, the small fish will be caught and become a member of the player's fish school.

Define the relevant variables:

@property(cc.Node)
gameManager: cc.Node = null;
game: GameManager;
isPicked: boolean = false;
pickRadius: number = 50; //Grab distance groupId: number = -1; //Group id
myGroup: FishGroup;

Similarly, assign a value to game in onLoad():

onLoad() {
    this.game = this.gameManager.getComponent(GameManager);
}

Method to determine the distance to the player:

getPlayerDistance() {
    let dist = this.node.position.sub(this.game.player.position).mag();
    return dist;
}

How to join a school of fish:

onPicked() {
    //Set group
    this.groupId = this.game.player.getComponent(FishGroup).groupID;
    this.myGroup = FishGroupManager.GetFishGroup(this.groupId);

    if (this.myGroup != null) {
        this.myGroup.catchFish(this);
        this.isPicked = true;
    }
}

Call in update:

update(dt) {
    if (this.isPicked) {
        //Move with the fish school}
    else {
        if (this.getPlayerDistance() < this.pickRadius) {
            this.onPicked();
        }
    }
}

OK, now the little fish is in the school of fish. How can it move with the school of fish?

There are two main points here:

1. The fish will move with the surrounding "neighboring fish"

2. Keep a distance between small fishes and avoid crowding them

So we need to calculate the average value of the fish movement vector within a certain range around the small fish. This is not enough. We also need to determine whether it is "crowded". If it is "crowded", we will add a trend of moving away. If it is too far, we will add a trend of moving closer. Then multiply them by the weights respectively and add them up to get the vector we want. The code is as follows:

Define variables:

moveSpeed: number = 170;
rotateSpeed: number = 40; //Move rotation speed neighborRadius: number = 500; //A distance less than 500 is considered a neighbor speed: number = 0;
currentSpeed: number = 0;
myMovement: cc.Vec3 = cc.Vec3.ZERO;

Find the mean vector:

GetGroupMovement() {
        var v1: cc.Vec3 = cc.Vec3.ZERO;
        var v2: cc.Vec3 = cc.Vec3.ZERO;
 
        for (var i = 0; i < this.myGroup.fishArr.length; i++) {
            var otherFish: FishBehaviour = this.myGroup.fishArr[i].getComponent(
                FishBehaviour
            );
 
            var dis = this.node.position.sub(otherFish.node.position); //Distance//Not a neighbor if (dis.mag() > this.neighborRadius) {
                continue;
            }
 
            var v: cc.Vec3 = cc.Vec3.ZERO;
            //Greater than the maximum distance, close if (dis.mag() > this.myGroup.keepMaxDistance) {
                v = dis.normalize().mul(1 - dis.mag() / this.myGroup.keepMaxDistance);
            }
            //Smaller than the minimum distance, far away else if (dis.mag() < this.myGroup.keepMinDistance) {
                v = dis.normalize().mul(1 - dis.mag() / this.myGroup.keepMinDistance);
            } else {
                continue;
            }
 
            v1 = v1.add(v); //Distance to surrounding units v2 = v2.add(otherFish.myMovement); //Direction of movement of surrounding units}
 
        //Add weight factor v1 = v1.normalize().mul(this.myGroup.keepWeight);
        v2 = v2.normalize().mul(this.myGroup.moveWeight);
        var ret = v1.add(v2);
        return ret;
    }

Now, we can complete the update:

update(dt) {
        //Move with the fish school if (this.isPicked) {
            var direction = cc.Vec3.ZERO;
            if (this.node.name != "player") {
                direction = direction.add(this.GetGroupMovement());
            }
 
            this.speed = cc.misc.lerp(this.speed, this.moveSpeed, 2 * dt);
            this.Drive(direction, this.speed, dt); //Move}
        //Capture else {
            if (this.getPlayerDistance() < this.pickRadius) {
                this.onPicked();
            }
        }
    }

Drive() method:

Drive(direction: cc.Vec3, spd: number, dt) {
    var finialDirection: cc.Vec3 = direction.normalize();
    var finialSpeed: number = spd;
    var finialRotate: number = 0;
    var rotateDir: number = cc.Vec3.dot(finialDirection, this.node.right);
    var forwardDir: number = cc.Vec3.dot(finialDirection, this.node.up);

    if (forwardDir < 0) {
        rotateDir = Math.sign(rotateDir);
    }

    //Anti-shake if (forwardDir < 0.98) {
        finialRotate = cc.misc.clampf(
            rotateDir * 180,
            -this.rotateSpeed,
            this.rotateSpeed
        );
    }

    finialSpeed ​​*= cc.misc.clamp01(direction.mag());
    finialSpeed ​​*= cc.misc.clamp01(1 - Math.abs(rotateDir) * 0.8);
    if (Math.abs(finialSpeed) < 0.01) {
        finialSpeed ​​= 0;
    }

    //Moveif (this.canMove()) {
        this.node.x += this.node.up.x * finialSpeed ​​* dt;
        this.node.y += this.node.up.y * finialSpeed ​​* dt;
    }

    //Rotation var angle1 = finialRotate * 8 * dt;
    var angle2 = this.node.angle - angle1;
    this.node.angle = angle2 % 360;

    this.currentSpeed ​​= finialSpeed;
    this.myMovement = direction.mul(finialSpeed);
}

canMove() {
    var flag: boolean = true;
    //There is an obstacle ahead var pos = this.node.convertToWorldSpaceAR(cc.Vec3.ZERO);
    var endPos = pos.add(this.node.up.mul(40));
    var hit: cc.PhysicsRayCastResult[] = cc.director
        .getPhysicsManager()
        .rayCast(
            new cc.Vec2(pos.x, pos.y),
            new cc.Vec2(endPos.x, endPos.y),
            cc.RayCastType.All
        );
    if (hit.length > 0) {
        flag = false;
    }
    return flag;
}

The above is a detailed explanation of the fish school algorithm of CocosCreator game. For more information about CocosCreator fish school algorithm, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • How to draw a cool radar chart in CocosCreator
  • Detailed explanation of CocosCreator MVC architecture
  • Detailed explanation of CocosCreator message distribution mechanism
  • CocosCreator Getting Started Tutorial: Network Communication
  • How to create WeChat games with CocosCreator
  • Detailed explanation of how CocosCreator system events are generated and triggered
  • Detailed explanation of CocosCreator Huarongdao digital puzzle
  • Detailed explanation of CocosCreator optimization DrawCall
  • How to make a List in CocosCreator

<<:  Linux uses join -a1 to merge two files

>>:  My personal summary of mysql 5.7 database installation steps

Recommend

A practical guide to Vue project first screen performance optimization components

Table of contents Vue first screen performance op...

A brief analysis of the matching priority of Nginx configuration location

Preface The location in the server block in the N...

HTML tag ID can be a variable

<table id=" <%=var1%>">, the...

JavaScript to achieve time range effect

This article shares the specific code for JavaScr...

Detailed explanation of Excel parsing and exporting based on Vue

Table of contents Preface Basic Introduction Code...

Detailed explanation of how to deploy and install the Chinese version of Redash in Docker

1. Installation Instructions Compared with local ...

Mobile development tutorial: Summary of pixel display issues

Preface I believe that in the process of mobile t...

JavaScript to implement the most complete code analysis of a simple shopping cart (ES6 object-oriented)

This article shares the specific code of JavaScri...

Ideas and codes for implementing Vuex data persistence

What is vuex vuex: is a state manager developed s...

Complete steps for mounting a new data disk in CentOS7

Preface I just bought a new VPS. The data disk of...

Html+css to achieve pure text and buttons with icons

This article summarizes the implementation method...

Docker deployment springboot project example analysis

This article mainly introduces the example analys...

After mybatis-plus paging parameters are passed in, the sql where condition does not have limit paging information operation

I spent almost two hours trying various methods. ...

How to prevent computer slowdown when WIN10 has multiple databases installed

Enable the service when you need it, and disable ...

Basic concepts and usage examples of HTML inline elements and block-level elements

There are two types of html tags, inline elements...