Tutorial: Getting started with WeChat games (Part V)

Tutorial: Getting started with WeChat games (Part V)

Cocos Creator: Getting started with WeChat games (Part 5)

Note: This is a multi-part tutorial: Part 1 | Part 2 | Part 3 | Part 4

Introduction and getting help

You are welcome to post to the Cocos Creator category on the Cocos forums to talk about any issues you encounter during the development process. This tutorial does not teach how to code.

Please prepare your development environment before starting this tutorial. If you are having trouble with our tutorial, please take a look at the following documentation:

Preparing the development environment:

Let’s begin!

In the previous tutorials, we have the two main characters of the hook and the fish in our game, and they have a successful audition (the action system is fine), then we have to hand over the most important dialogue scripts to them, that is, our game. The interaction between the fish hook and the fish.

The most important thing in the interaction between fish and fish hooks is collisions. Most of the game logic is carried out during collision events. Cocos Creator has a simple and easy to use collision detection system built-in, which makes it easy for developing collision effects.

Continuing development

First, open the Project Settings panel, we add two new groups: Fish, and Hook. Check to allow Fish and Hook to collide.

Next, set the Group property of the Fish and the Hook to it’s opposite. This means Fish has Hook for a Group and Hook has Fish for a Group.

It is a great time to save your work!

At this point, the Fish and Hook will not trigger a collision because we still lack an important prerequisite: the collision component.

If you have questions about Collider Component, please refer to the Collider Component documentation

First, add a collision component, named BoxCollider to the Controller.

Second, check Editing. You can drag the mouse to edit the size of the collision box in the editor.

We can now move on to the Fish.


First, we add the following code to the Onload method of the scene script:

onLoad () {
  // Get collision detection system
  var manager = cc.director.getCollisionManager(); 
  // The default collision detection system is disabled, 
  // you need to manually enable the collision detection system
  manager.enabled = true; 
  // The collision area can be displayed in debug after opening
  manager.enabledDebugDraw = true; 

Second, implement the collision callback function in the Controller:

onCollisionEnter: function (other , self) {
  other.color = cc.Color.RED;

We have now made the Fish read when there is a collision with it!

Our first preview

Let’s click on the Preview button to see how everything is working:

So far, the game is running as expected! We can see all the collision areas, and we can see the effect after the collision: it turns red!

Nice, the key parts have been completed. The rest is business logic and some details.

Finally, we need to add the action of closing the rod and the logic of catching the Fish to complete it. To show the effect, we adjust the anchor points of Controller and Fish.

First, and the following code to Hook.js:

    extends: cc.Component,

    properties: {
        RegainSpeed : 320,
        isRegaining : {
            default : false,
            visible : false


    // onLoad () {},

    start () {

    StartLine () {
        this.isRegaining = false;

    RegainLine () { // Close up
        if (this.isRegaining)
        this.node.stopAllActions(); // stop sinking
        var duration = Math.abs(this.node.y) / this.RegainSpeed;

        // Close event is too fast, less than 5 seconds, press 5 seconds to exercise
        if (duration < 5) duration = 5; 
        // // Close action, optimize effect by easing
        this.node.runAction(cc.moveTo(duration, cc.v2(0,0)).easing(cc.easeSineIn()));
        this.isRegaining = true;

    // update (dt) {},

Second, and the following code to Controller.js:

onCollisionEnter: function (other , self) {
  other.node.color = cc.Color.RED;
  var pHook = this.mHook.getComponent(Hook);
  pHook.RegainLine(); // fish hook

  // Set the collision group, there is no need to continue 
  // to judge the collision with the fishhook
  other.node.group = "default";
  other.node.parent = this.node; // Fish caught on a fishhook

    c.rotateTo(0.5 , -60 * other.node.scaleX),
    cc.rotateTo(0.5 , -30 * other.node.scaleX)
  ))); // Fish caught struggling


This tutorial is continuing to show us how to continue to make this game fun and playable!

Stay tuned for Part 6 of this tutorial!