Setting up JetBrains WebStorm to work with Cocos2D

7. June 2012

 

After spending so many years as a Windows/Visual Studio developer, Intellisense is a simple must have in my arsenal.  In fact, I believe my repeated use of Intellisense actually severedWebStormAndCocos2d the part of my brain that remembers functions and variables!

 

As I’ve been doing a lot of JavaScript development recently ( between Node.js and now Cocos2D ), I needed to recreate the Visual Studio experience.  I am an avid Notepad++ fan, but I never did get autocomplete working to my liking.  Then I discovered JetBrain’s WebStorm IDE and everything was right with the world.  If you want a full blown IDE for HTML and JavaScript development, you really can’t beat WebStorm ( it is however, not free software ).  Working with Node, auto-competition worked right out of the box.  With Cocos2D-html, there is a bit more work to do.

 

Here, we are going to cover that configuration process.  This process actually applies to configuring any JavaScript library to work with WebStorm, not just Cocos2D.

 

First things first, we need a project.  I am going to create one out of the code I created in the second Cocos2d tutorial. A WebStorm project is simply a directory full of code.  Let’s create one now.

 

Load up WebStorm ( I’m using 4.0.1 ).  Select File->New Project:

image

 

In the Create New Project dialog, under the location select the folder containing your project’s code, then in the Project name field enter your app directory name.  You may have to fight a bit with the UI to get it to work right, it really wants to create a new directory.  If you are creating a completely new project, you can ignore this bit.

 

image

 

Now it will prompt  you:

 

image

 

This is what we want, click yes.  This will simply create a .idea folder within your directory with the project data.  If all went well, you should now have a project like this:

 

image

 

Now the we have a working project, we can adjust the settings on it.  In the menu, select File->Settings:

image

 

Now scroll down and expand JavaScript and select Libraries:

image

 

On the right had side of the screen, locate and click the Add button:

image

 

Name it Cocos2D and click the Attach button:

image

 

Navigate to and select the Cocos2d folder, then click OK:

image

 

You may want to repeat the process for box2d and CocosDenshion ( audio library ) if you wish to use them as well.  Click OK when done.

 

Back in the settings menu, Click the Apply then OK button.

image

 

Now, when you are editing your JavaScript code, you will now have complete auto-completion data for the entire Cocos2D library:

 

image

 

 

Ahhhh, just like being back in Visual Studio with full Intellisense support. My brain can happily go back to forgetting all about functions and member variables! Smile

 

 

If you are looking for a solid JavaSript IDE, you really should check out WebStorm.  If you are looking for a great HTML5 based game library, you should check out Cocos2d-html. As you can see, they work well together.

 

The eagle-eyed viewer may have noticed the Sublime text project files. This is another great IDE (sorta) option that is worth checking out.  I switch back and forth between the two.

General , , ,







blog comments powered by Disqus