Tutorial – Getting started with TypeScript and Cocos2d-x JS – Part 3 – Hello Cocos2d-x

Tutorial – Getting started with TypeScript and Cocos2d-x JS – Part 3 – Hello Cocos2d-x

Merging our TypeScript project with Cocos2d-x JS

If you followed the preliminary steps in part 1 of this tutorial series you should already have Cocos2d-x installed and ready to go. If not please download from here, and refer to the Cocos2d-x command line guide here.

The version of Cocos2d-x used in this tutorial is 3.14 but after looking at the changelogs, I’m reasonably certain that the current version (3.15) should be fine.

We are going to create a new Cocos2d-x project and then merge the files created in part 2 of this tutorial series.

Let us get started.

Create a new Cocos2d-x project with  the following command:

cocos new HelloCocos2dx -p com.dalste.HelloCocos2dx -l js

This command should create a folder named HelloCocos2dx which will now be the root of our project containing the Cocos2d-x project skeleton.

The steps we took in our TypeScript project setup ensures that there shouldn’t be any file conflicts when merging with the Cocos2d-x  project skeleton generated from the Cocos2d-x command-line tool.

Copy the files from the project created in part 2 of our series into the root of the Cocos2d-x project that you have just created.

Alternatively, grab and merge the files from the typescript-cocos2dx-mocha  project in the tutorials Git Repository

Your folder structure should now look something like this:

Open the project.json and paste in the following JSON (changes are highlighted):

    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : true,
    "frameRate" : 60,
    "noCache" : false,
    "id" : "gameCanvas",
    "renderMode" : 0,

    "modules" : ["cocos2d"],

    "jsList" : [

Navigate to your projects root folder and execute the following command.

cocos run -p web

This should start up your default browser; you should see the following line in the console:

Hello from TypeScript


That’s it for now, I encourage you to read the TypeScript documentation to familiarise yourself with namespaces, external modules, type definition files and other aspects of  TypeScript goodness.

I will see you in part 4  of this tutorial where we will explore these topics further, build an Application Bootstrap, and introduce some External Modules.


You will find the completed HelloCocos2dx project on the Git Repository.



Leave a Reply

Your email address will not be published. Required fields are marked *