Cocos Creator Tutorial: The Cannon 2, Part 1

Making the Cannon

Introduction

When I first began learning Cocos Creator, I was met with a jarring lack of help from the internet. It was my first foray into game development, and I was coming from a programming background where for years I had been coddled with an endless supply of Medium tutorials, Stack Overflow questions, and (more importantly) Stack Overflow answers. I was terrified. For the first time ever, I had to think. Dig through documentation. Fiddle around. It wasn’t that I had use the second page of Google — it was that there was no second page of Google. A nightmare come true.

Well, almost. I might have suffered that fate, had it not been for one tutorial — the one, magnificent tutorial (and also the only text-based one I could find)— that got me started with game development in Cocos Creator. It’s called The Cannon, and it’s glorious.

It isn’t perfect, though. It was already pretty dated when I found it, to the point where I ended up using it more as a list of exercises than a tutorial. It was also pretty hard to follow; in many areas it was lacking in detail and did not provide external references. But, nonetheless, it was there for me. So, in what will hopefully be perceived to be a flattering tribute rather than a lazy imitation (although both are true), I present to you The Cannon 2: Electric Boogaloo, written in Cocos Creator 1.9 and Typescript 2.8.

Getting Started

Cocos Creator is an IDE and a framework for cross-platform game development. Before you get started with this tutorial, I recommend going through the beginner’s guide from the official documentation. It introduces you to Cocos Creator and includes a nice little tutorial that should get you familiar with the IDE. If you’re not familiar with Javascript, they have a primer that’ll be worth taking a look at.

This tutorial will be split into multiple Medium articles and organized as follows:

Part 1: Build the cannon and set up the physics engine

Part 2: Get meteors and bullets to appear & collide

Part 3: Touch everything up: add a background, sound effects, visual effects, etc.

Part 4: Advanced Cocos Creator: memory management, optimization, things like that

The complete project can be found on Github. If you want to use the sprites I use––which are just shapes from Adobe XD, because that’s what I had open when I was making this––you can find them there, in the assets/textures folder. Alternatively if you want to make something that will actually look nice, head over to http://opengameart.org/.

Keep in mind that this is about learning how to get things done in Cocos Creator; it doesn’t focus on game development methodology or anything like that. With that in mind, let’s get started.

Make the cannon

If you’ve already gone through the beginner’s guide in the Cocos documentation, you should be familiar with the IDE and how to get a game started, so I’m just going to jump right into building the cannon.

Create an empty node by right clicking on the canvas and selecting “Create > Create Empty Node, ” name it “cannon”, and then drag an image for the cannon barrel & the cannon body into the node tree as its children. Your node tree should now look like this:

Let’s get these into a script so we can begin doing things with them. Create a file named Cannon.ts and give it properties to reference the cannon barrel and tank:

The “@property” decorator is what tells Cocos Creator to reference that property in the right-side properties pane. You must also set default values for properties.

As for the properties that we have added, they’re just properties of the cannon movement: angle is the current angle of the barrel, baseAngleSpeed is the speed it rotates at, angleSpeed is the current rotation speed, and leftMaxAngle and rightMaxAngle are the maximum angles for the barrel. Fairly straightforward.

Now we just need to go to the Cocos Creator scene editor and configure the cannon. The first thing you need to do is add the Cannon.ts script to the cannon node; do this by selecting “Add Component > Custom Component > Cannon” in the cannon’s properties pane. Then, set the barrel’s anchor point to (0.5, 0). The anchor point is the point which a node will rotate about; setting it to (0.5, 0) will cause it to be rotated about its end.

Finally, add some values in for those properties we’ve just created. Connect the barrel & body nodes to the script by dragging them from the node tree to the properties pane, and input values for the other properties. At this point, your project should look something like this:

Now, let’s get some movement in there!

Move the Cannon

The movement of the cannon involves 2 things: capturing (“hooking”) user input and updating the cannon accordingly.

Hooking User Input

This is the code for hooking the user input:

And lets break it down by those numbers:

1. onLoad() is one of the lifecycle callbacks available in Cocos and is triggered right after initialization. Other commonly used ones include: start(), which is triggered after initialization but before anything happens; and update(), which is called all the time and is used to, well, update things
2. cc.eventManager.addListener() is the method used to initialize the event listeners used to hook inputs. It takes 2 arguments: the listener configuration and the target node.
3. In this case, we will be hooking input from a keyboard; this is how we specify that
4. onKeyPressed() and onKeyReleased() are callback methods for key events

Essentially what we’re doing with this method is updating the angleSpeed property based on the keyboard input; we set it to -baseAngleSpeed when “a” is pressed and to +baseAngleSpeed when “d” is pressed.

Right now, updating the properties doesn’t actually do anything to the nodes on screen. Let’s change that

Updating the Cannon

As you may have predicted, in order to update the cannon based on user input we’ll be using the update() lifecycle callback. Here’s what that looks like:

It’s fairly straightforward, as you can see; it updates the rotation of the barrel based on the angleSpeed property, which we change when the user presses keys.

The MathUtilities.clamp() function is a simple helper that I wrote. You can put it wherever you like.

And that’s it for the movement! You should be able to use the “a” and “d” keys to move your cannon barrel like so:

Add Physics

Now, let’s add some simple physics to our cannon by putting a floor down and adding gravity.

Add a Floor

To add the floor, just grab a sprite––I’m using another basic rectangle that you can find on Github––and move it into your scene editor beneath the cannon.

Add Gravity

The physics engine in Cocos Creator is applied to nodes that have a RigidBody component. Let’s go ahead and add that to our cannon by selecting “Add Component > Physics Component > RigidBody” in the properties pane. Then do the same for the floor, expect for the floor make sure to go to the properties pane and give it a “type” of “static”. This will ensure that it doesn’t move due to gravity or other bodies colliding with it.

Physics must also take place in the context of a game. Create a script Game.ts, and then in your node tree select the “Canvas” element and add the Game.ts script to it (you should be able to do this on your own by now).

1. Notice that we’re adding the “floor” here as a RigidBody, because in the context of the game that’s the only thing that matters––that it’s a physics component. We don’t need to manipulate it or anything; we just need it to interact with other physics objects (i.e. the cannon)
2. This is all that’s needed to set up our physics engine with gravity. We enable the physics engine, then give it gravity with 0 acceleration in the x-direction and this.gravity acceleration in the y-direction

Finally, add the floor to the game by dragging it from the node tree to the properties pane. Make sure that you’ve set the “gravity” property of the game to something (a negative value, preferably). When you recompile your game, gravity should now be working:

Add Collisions

As you may have noticed, while gravity is working objects don’t seem to be colliding. In order to achieve that, we need to enlist the help of colliders.

In the properties pane of the cannon, select “Add Component > Add Physics Component > Collider > Box” (note: do NOT select “Add Collider Component” instead of “Add Physics Component”). It should appear as a green box in your scene editor; to edit it, just check the “editing” box in the property pane and resize it to your liking.

Now do the same for the floor. Your cannon should no longer be falling into the void!

Wrapping Up

That’ll about do it for part 1! We covered spawning nodes, hooking user input, updating nodes, adding physics, and adding collisions. In part 2, we’ll get our cannon to shoot some rocks!

• Part 2
• Part 3