Help me create a basic clicker game to start learning Cocos Creator

Cocos Creator
#1

Hi everyone!

I’m just beginning with Cocos Creator and I struggle to understand the engine.
I’d like to create a very basic game with no physics (as opposed to the documentation first project tutorial) to start getting the hang of things. So I want to make a very basic clicker game.

I’ll try to build it with your help. I’ll be describing my process in very precise details in order to help others understand the engine as well.

Here is what I did so far:

  • First, I created an empty project from the dashboard.
  • I wanted to change the game resolution of the project so I selected the Canvas node in the Node Tree panel to change the Design Resolution properties to 320x180 of the Canvas component in the Properties panel. It seems that the Size properties of the Node is locked and I don’t know if the Design Resolution properties are the good way of changing the game resolution. Am I doing it right or is there another way to control that?
  • Next, I added an image file 32x32 (png format) inside the assets folder.
  • Since I wanted a pixel art style, I selected the image asset in the Assets panel to show its properties in the Property panel. I changed the Filter Mode property to Point.
  • I dragged the image asset from the Assets panel inside the scene editor to create a Node with a Sprite component assigned to that image.
  • I wanted the sprite to appear at a random position inside the canvas. I guessed I had to create a script asset and then attach it as a component to the sprite node. Then I would use the start method to set the position of the sprite at the time of its creation with some random function.

So I created a JavaScript script asset and I changed the start method as such:

start () {
        this.node.x = Math.floor(Math.random() * 320);
        this.node.y = Math.floor(Math.random() * 180);
    }

After selecting the sprite node and adding the script as a new component to it with the Add Component button and choosing Custom Component -> my_script_name I clicked the triangle Play button multiple times to see if the image would change its position each time. It seemed to work properly. However, as you can see, I don’t know how to get by code the canvas resolution So this is my first issue.

How can I get the canvas resolution by code?

#2

Yes, I think you are right about the Design Resolution.
To get the Design Resolution by code you need to get the Canvas component and access that property.
Like:
cc.find(‘Canvas’).getComponent(cc.Canvas).designResolution

1 Like
#3

Thank you for your answer.
From your code I learned some new things.

cc.find('Canvas').getComponent(cc.Canvas).designResolution
  • So to get a specific node, I have to use cc.find method and pass it the name (as a string) of the node as it’s defined in the Node Tree panel.
  • Once I have a node, I have to call getComponent method on it and pass it a component class to get the right component (if it exists).
  • Now that I got the Canvas component of the node, I can use its properties. So in this case, I need the designResolution property of type Size to get the game resolution.

Got that! It will be really useful. Thank you very much.
So I modified the start method like this:

start () {
 var gameResolution = cc.find('Canvas').getComponent(cc.Canvas).designResolution;
 this.node.x = Math.floor(Math.random() * gameResolution.width);
 this.node.y = Math.floor(Math.random() * gameResolution.height);
}

Now, if I were to change the node position again inside the update method, I guessed I would have to make my gameResolution variable a property of the node so in preparation of that I did this:

properties: {
        gameResolution: null,
    },

start () {
  this.gameResolution = cc.find('Canvas').getComponent(cc.Canvas).designResolution;
  this.node.x = Math.floor(Math.random() * this.gameResolution.width);
  this.node.y = Math.floor(Math.random() * this.gameResolution.height);
}

I tried to initialize gameResolution property right at its definition point but it didn’t worked. I guess when the node is executing the script, the canvas context isn’t available to it yet.

To avoid repeating code, I created a setRandomPosition method where I put the code to randomly set the node position:

setRandomPosition() {
  this.node.x = Math.floor(Math.random() * this.gameResolution.width);
  this.node.y = Math.floor(Math.random() * this.gameResolution.height);
},

start () {
  this.gameResolution = cc.find('Canvas').getComponent(cc.Canvas).designResolution;
  this.setRandomPosition();
},

Now I had to address the size of the sprite to make it stay entirely inside the canvas. I noticed that when I add a Sprite component to a node, its Size property automatically updated to the size of the image. First I thought to use the getComponent method again but this time using this.node to get the Sprite component and access its Size property but then I noticed that the Size property was already part of the Node and not of the Sprite component. when I checked the Node API, I couldn’t find a Size property but I found the width and height properties instead. So I used them to change my setRandomPosition method:

setRandomPosition() {
  this.node.x = this.node.width / 2 + Math.floor(Math.random() * (this.gameResolution.width - this.node.width));
  this.node.y = this.node.height / 2 + Math.floor(Math.random() * (this.gameResolution.height - this.node.height));
}

In order to check if that method worked correctly, I called it inside the update method:

update (dt) {
  this.setRandomPosition();
}

The sprite quickly moved inside the canvas but seemed to stay entirely inside its boundaries. So I guess everything is fine so far.

Then, I wanted to implement a timer. Each 2 seconds, the sprite would move at a random position. I guessed I had to use a counter variable that would stock up the dt from the update method. So I added a timer property to my script and set it to 0.

properties: {
  gameResolution: null,
  timer: 0,
}

Then I set the update method as such:

update (dt) {
  this.timer += dt;
  if (this.timer >= 2) {
    this.setRandomPosition();
    this.timer = 0;
  }
}

My sprite is changing position each 2 seconds. Great! This is the first time I got so far.

Now, I want to manage mouse clicks on my sprite. I don’t have any idea how to do that. Can anyone help me?

1 Like
#4

From the docs
https://docs.cocos.com/creator/manual/en/scripting/internal-events.html

this.node.on(cc.Node.EventType.MOUSE_DOWN, function (event) {
  console.log('Mouse down');
}, this);
1 Like