Monday 8 May 2017

Cocos2d-x HTML5 (JavaScript) project in Visual Studio


Cocos2d-x is a free multiplatform game engine.
Microsoft Visual Studio for many users is a very comfortable programming environment and it provides many good tools, especially for debugging.

In this tutorial I would like to describe how to open Cocos2d-x HTML5 (JavaScript) project in Microsoft Visual Studio.

1. Preparing the Visual Studio

I used Microsoft Visual Studio Community 2017 but this tutorial should work for other versions.
However, we need make sure that our Visual Studio supports JavaScript and allows us to create a new web application project. By opening the Visual Studio installer and pressing modify, we make sure that we have this add-on installed:


If we have it installed, we are fine ;), if we don't have it then it is about 2.6 GB to download (I had to download 2.6 GB).
We can also check if we have it installed by pressing in Visual Studio File->New->Web Site. If there is nothing in the Templates, we are missing the add-on.

2. Creating a new Cocos2d-x project

OK! Now we can create a new cocos2d-x project. I assume that you have configured all the system variables for cocos2d-x game engine and its dependencies. If not, I need to send you to cocos2d-x documentation. I can only briefly tell you that you need to run setup.py in the cocos2d-x root folder (you need to install python first), then you need to install everything what you will be told after running the setup.py script.

When everything is ready (system variables are set), we open the command prompt and navigate to the folder we have chosen for our cocos2d projects.
Then we type: cocos new yourProjectName -l js to create a new project:

3. Creating a new Visual Studio project

Now we can open our Visual Studio. In File->New->Web Site we select from the Templates Visual C#->ASP.NET Empty Web Site. Then we need to select the path for the project. It has to be the same path where we created our cocos2d-x project:

Now we need to select Open the exiting Web site and press 'OK':

Now we can work with the project :)



I had problems with the current version of the cocos2d-x (3.15). It didn't work in the Internet Explorer (IE11). I wrote about this issue on Cocos2d-x Forums. Unfortunately Visual Studio debugging works well with the Internet Explorer and I am not sure how to configure it to work with the Firefox.

If you ever have a problem to compile the game for Windows in Visual Studio 2017,  try to change the Platform Toolset to Visual Studio 2015 (v140).

No comments:

Post a Comment