Free IDEs

Unless you're a hardcore programmer, you would love IDEs (or Integrated Development Environments). Who doesn't?
Presented here are some IDEs you can use in developing your game. Main criteria - must have web preview mode, or else it's just an editor.

Google Chrome

Wait, isn't Google Chrome a browser? Yes, it is, but the latest versions of Chrome come with developer tools that you can use to code, inspect and even debug your game.

How do we do that? First, let's begin with a basic starter game folder (assuming we're building from scratch). Let's call our game folder as "playground". We copy all necessary engine scripts in that folder.
```
  
playground/
	css/
		
	script/
		app/
			vncanvas-*.js
			canvastext-*.js
		lib/
			require.js
		game/
		init.js
		
	index.html
	
								
```

Note, we haven't placed anything much yet, just the template/boilerplate files.

Fire up Google Chrome. You can use the vanilla Chrome, or their developer version Chrome Canary.

Find the More Tools >> Developer Tools in Chrome menu (usually top right button). Then click on the Setting cog button. You'll get a window similar to below (click image to enlarge).

Add our playground folder in the Workspace. This should make our playground directly accessible by Chrome, so we can read/write files to it.

Now our playground is added in our sources folder. We can do all sorts of stuff directly from the IDE like make new files/folders, edit code, and, of course, preview our work. All within the same window.

With that, you're good to go. But for the advanced users, you can also debug directly from Google Chrome, meaning you can step thru your work, add breakpoints, do profiling, watch variables, etc. Lots of cool stuff, but I'm not going to discuss it here. Head over to Chrome Developer Tools site and browse over their documentation.

Adobe Brackets

Adobe Brackets is clearly a web developer tool, rather than a browser. The best part about it is having a live preview, so you can quickly view what you've done.

To use it, start with the same base folder as before. Now open the folder in Brackets and voila! Instant workspace!

Now edit, save, do what you want. When you want to preview, just click on the lightning button at the right toolbar.

A new browser window will open to preview your work. It is a live preview, so (most of the time) you won't need to refresh the browser to view your changes. Just save your edits and it will automatically reflect on the preview window.

It also has debugging tools, but I haven't gotten around to using it.

Adobe Brackets support extensions. It would be really nice to have a vn-canvas extension, maybe support syntax highlighting, add code snippets, etc. Maybe someday I'll be able to make one, unless someone out there volunteers to help and develop an extension. ;)