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,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d"],

    "jsList" : [
        "src/resource.js",
        "tsdist/main.js",
        "src/app.js"
    ]
}

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.

References

http://www.cocos2d-x.org/docs/editors_and_tools/cocosCLTool/index.html