Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
27. September 2012

 

The author contacted me a few weeks up with a heads up that he had a Moai friendly Lua IDE in development and I said I would look into it… and well, I didn’t.  Things came up, then something else and something else and frankly it got pushed into the back of my mind.  In the end, that was a good thing too, as since that point in time the author has added auto-completion… a critical feature.

 

As of writing though, this feature is only available from the github sources.  So long as you have cygwin configured ( assuming you are working with Moai, you should already ), and git installed, the process is fairly simple:

 

cd /cygdrive/c/folder/to/install/to

git clone https://github.com/pkulchenko/ZeroBraneStudio.git

 

This will create a folder ZeroBraneStudio with all the appropriate files. 

EDIT (29/09/2012): Author made update, should no longer need to set permissions described below

There is another catch, git mangles the executable permissions on Windows.  The long answer is well… long, the hackishly easy answer is to run:

chmod a+x –R ZeroBraneStudio

 

There is one last catch, you need to set the MOAI_BIN environment variable to point to your MOAI host folder, either that or add it to your PATH variable.  ( I suggest the former ).  To set the MOAI_BIN path, simply open a command prompt and type:

setx MOAI_BIN c:/path/to/moai/host

 

You can of course set the environment variables using the System control panel, but this will require you to reboot your computer for the change to take effect.  SetX simply requires you close the console to take effect.

 

Now you should be able to run the Studio, just double click zbstudio.exe to start it.  Hopefully the author will have a new release soon, that prevents all of this ( except the MOAI_BIN environment variable that is ).  Finally run ZeroBrane and this is what you see:

 

image

 

 

So then… why?  What does ZeroBraneStudio bring to the table that SublimeText or IntelliJ don’t have?

 

That’s an easy one.  I mentioned the first one earlier:

 

image

 

Auto-completion!  After years of using Visual Studio, this one is a gigantic must for me.  Granted as I covered earlier, IntelliJ can be configured to supported auto completion.  But ZeroBrane Studio has a massive head up on IntelliJ, watch this!

 

image

 

This you cannot do with IntelliJ, and it is a gigantic advantage.  But auto-completion isn’t the only thing ZB brings to the table, ZeroBrane Studio has the ability to debug running code!  You can set breakpoints, step in/over and out, set watches and do dynamic expression evaluations, pretty much most of what you expect to see in a debugger. Oddly enough, this needed a Windows Firewall exception.

 

To debug your code, select a line of text to set a breakpoint then hit F9 to create a breakpoint ( a red stop sign will appear in the margin ).  Then select Project->Start Debugging Server.  Then select Project->Start Debugging or hit F5 to run your code and voila:

image

 

Code execution stops at your breakpoint.  Use F10, Ctrl+F10 and Shift+F10 enable you to navigate through your code. You can hover your mouse over a variable to inspect it’s value.  You can also right-click a variable and create a watch window like this:

image

Unfortunately you can’t drill down into an individual Lua table, but hopefully this feature gets added soon!

 

Perhaps coolest of all, ZeroBrane Studio enables REPL interaction.  You can open the console and interact with your code directly:

image

 

As you can see, you can interact with your values in real time, and here are the results in the output:

image

 

It also has the ability to analyze your code, and show you the plethora of stupid mistakes you are making:

image

 

Not everything is perfect.  As mentioned earlier, watch expressions cant drill down into Lua tables, hopefully something that will change soon.  Additionally, it would be nice if the Moai host could be added using a configuration setting instead of using MOAI_BIN, as it makes it difficult to change between runtimes ( moai, moai-untz, release, debug, etc… ), but this is a minor point.  It would also be nice to be able to control more via context menu’s ( add breakpoint, step over/in, etc ). The code syntax highlighting could be improved a bit as well.  Of course, as a straight code editor, it isn’t going to give IntelliJ or SublimeText a run for it’s money just yet.

 

 

That said, this is an absolutely invaluable tool for people working with Moai or LOVE, the debugger and full auto-completion guarantee that this is going to be a stable part of my toolset going forward.  Hopefully the author is able to add more detailed debugging information soon.  If you are working in Moai or LOVE, you owe it to yourself to check out ZeroBrane Studio.

 

Speaking of which, you can get more information here.  Keep in mind, MOAI auto-completion is currently only available in the source distribution, at least as of version 0.32.  Hopefully the new release is bundled soon.

 

EDIT:

I have spoken with the author, and it appears a few of my issues aren’t issues after all.

The system will check for Moai executable in your PATH environment
variable. You can also set "path.moai = 'd:/lua/moai/moai'" in
cfg/user.lua (see cfg/user-sample.lua for example).

 

EDIT2:

ZeroBrane actually can drill down details into a Lua table, in my relative Lua newbishness, I made a pair of mistakes.  First off, it only works on local variables.  Second, Moai does not return tables, it returns Userdata, which ZeroBrane currently can’t parse ( fingers crossed he figures out a way! ).

 

image

 

Here is the behaviour I was expecting to see, and exactly what I got once I defined the table as a local.

General Programming


17. August 2012

 

In the past I mentioned and even recommended HTML5 developers give WebStorm a shot, this is the IDE I use personally when working in JavaScript, but I realized I never actually said why.  One of the big reasons is, its just a good solid text editor, with good project management and solid code completion, which is an area most tools fail at.  But one of the biggest reasons is, it gives a rock solid debugging experience… very similar to native code.  This is something that can make JavaScript development a WHOLE lot nicer.

EDIT: I should make it clear at this point, virtually nothing in this guide is specific to WebStorm, you can debug using the Chrome Developer Tools or using Firebug in FireFox. Webstorm however integrates the process directly within the IDE.  The process will change slightly ( different buttons/hotkeys ), but the instructions below basically apply to debugging in browser as well.

 

At the same time it dawned on me… if you don’t come from a compiled code background, you probably don’t even realize what you have been missing!  So, I have put this post together, it will hopefully make the developer experience better for at least a couple of you.  If you are currently debugging using a combination of alerts, console writes and breakpoints in the browser, listen up!

 

First off, you are going to need a project to debug.  I am going to use my most recent tutorial post on creating sprite sheets with Cocos2D if you want to download and follow along.  Of course, any project will work, but that particular project has an interesting… quirk that will come in useful.  Next, to get the most out of Webstorm debugging, you should also have Firefox installed.  If you are doing web development, I assume you do already anyways.  Alright, let’s get started.

 

Open the project up in WebStorm.

Now we want to create a debug profile.  In Webstorm, select Run->Edit Configurations…

image

 

In the resulting dialog, click the + icon:

image

 

Choose JavaScript Debug –> Local

image

 

On the left hand side, a new entry should appear.  Select it and file in the form like follows.  Navigate to your index.html or root HTML file, select Firefox from the browser dropdown and name it whatever you would like:

image

Click Apply then Ok when complete.

 

You are now ready to debug. 

Select Run-> Debug ‘Your App’ or press Shift + F9

image

 

Voila, or app should load up in our browser:

image

 

Now what we want to debug is debug the activity that occurs when the user presses a key.  Go back over to Webstorm, open MyFifthApp.js , locate the line with onKeyDown: function, and select the line right below it.  Here we want to set a breakpoint, which will cause our code to stop when the breakpoint is hit.  Set a breakpoint by hitting CTRL+F8 or selecting Run->Toggle Line Breakpoint.  You will see a red dot once your breakpoint is set, like so:

image

 

With the breakpoint set, now flip back to Firefox and hit a key.  This will immediately trigger the breakpoint, pausing your programs execution.  Now if you head back to Webstorm, there will be a wealth of information available to you:

 

image

 

There is quite a bit going on here.  Our code is currently paused executing on our breakpoint.  You can’t see it in the screenshot, but I am hovering my mouse over the e parameter, and it is popping up a tooltip showing its current value.  When debugging, you can interact with your code in a lot more detail.  Now lets take a closer look at the different bits of the interface here.

 

At the bottom left you have a very important window:

image

 

The toolbar on the left hand side can be used to resume program execution, stop completely, or to run from the beginning ( currently grayed out ).  When you are done with a breakpoint, you hit the resume button to continue your program execution.  The two buttons below on the toolbar are for managing breakpoints ( you can end up with a lot of them quickly! ), as well as to mute a breakpoint, which causes it not to fire DURING THIS DEBUGGING SESSION.  The next time you run your program, your breakpoint will be re-enabled unless you remove it.

 

To the right is something traditionally called a callstack, and it’s extremely useful.  Basically, it’s a hierarchy of the last functions called.  So in this case, you can see that our current ( anonymous) method inside MyFifthApp, was called by an anonymous method in CCKeyboardDispatcher, which was called by a different method in the same file.  Clicking the value in the callstack will immediately bring you to the line of code, where you can inspect the current value of any variables there.  Often the error actually occurs further up the callstack, so being able to trace backwards through a programs execution is incredible handy.

 

Next is an incredibly valuable toolbar, that controls your program’s execution while debugging.

 

image

These three are the most commonly used.

Step Over will cause your code to jump to the next line of code in the same file.

Step Into will jump into the code that you are currently on.  If it is a function for example, it will jump into the code for that function, even if it is in a different file.

Step Out backs you out, think of it like undoing a step into, you basically jump back into the calling code.

You use these 3 buttons ( or their hotkey/menu equivalents ) to run through your code as you debug.  There is also an option of run to cursor, which will run to whatever line of code your cursor is currently active on ( clicked on, not just hovering over ).

 

The program will update as it executes, so keep in mind, variable values will often be garbage, until the line they are allocated on is executed.

 

Next up is the Variables window.  Often called “Locals” in other IDEs:

image

 

This is a list of all locally declared variables.  Notice how indexAsString and prevPrefix are both shown, but valued as void?  This is because they haven’t been executed yet.  Lets take a closer look at that.  In WebStorm, locate the line this.removeChild(this.sprite), left click it to focus your cursor, then select run to cursor from the toolbar we just discussed:

image

 

As you can see from the blue line, or program execution continued to that point.  More importantly, if you look in the Variables window, they will now have values, since they have executed in the debugger:

image

 

You may also notice the + sign next to this.  That is because it isn’t a single value variable, so it is composed of other values.  Clicking the + icon will give you more details about the contents of that object:

image

 

Of course, often you want particular information about a specific variable.  This is where watches come in.  Say we want to see more details about this.sprite. In your code window, select all of this.sprite, right click and select Add To Watches.

image

 

Now details of that variable will be available in the watches window, at least, when it is in scope it will:

image

 

You can watch a number of variables at the same time.  Watches are especially useful for watching long lasting variables, like Director or when working in a browser, document.  Just like in the variables list, you can drill down to get more information on child values of the watched variable.

 

Another incredibly handy ability is the expression evaluator, invoked with this button:

image

 

The expression evaluator allows you to run any arbitrary code and see the value.  You can used it for example, to see what a function value would return.  Here for example, I am examining the results of calling this.sprite.getPosition().  Nicely, the expression evaluator has full code hints.

 

image

 

 

 

Finally, sometimes you want to debug code that is running from a server.  This is especially true if you are doing a number of AJAX or socket requests.  You can do this with Webstorm as well, with a few requirements.  First, you need to have a copy of the code installed locally, next you need to use Firefox for this part.

 

Let’s try it with our sample project, which exists on my servers at https://www.gamefromscratch.com/downloads/cocos2d/run/MyFifthApp/index.html while you can download the project source code at https://www.gamefromscratch.com/downloads/Cocos2d/zips/MyFifthApp.zip.

 

First we need to create a new remote debugging session.  In WebStorm, select Run->Edit Configurations…  Hit the + icon and selection JavaScript Debug->Remote.

image

 

Fill the resulting dialog out like so:

image

 

Click Apply then OK. Now everything else works exactly like it did before, with one exception.  Select Debug MyFifthApp Remote.

When you run your code and it hits a breakpoint, it will need you to tell it what file on the remote server matches the file the breakpoint is in.  Since we have a breakpoint set in MyFifthApp.js, when we run it, we will see:

 

image

 

Simply click the Set link, and a dialog will appear:

image

Simply type the URL of the remote file.  You only need to perform this once per file you set a breakpoint into.  You of course can perform this setup step in advance if you want.

 

Now you can locally debug code that is actually running on a remote server.

 

I hope you’ve found this guide handy.  In IDE debugging can make life a thousand times easier. 

General Programming


21. March 2012

 

 

Hey, I’m on time this time! Well, almost…

 

 

This weeks cool thing is in an area where there aren’t too many options, audio capture and manipulation tools.  On the “pro” side, the dominant player is probably Pro-Tools, which is in a word expensive.  With pricing starting at 700$ and going up from there, it is out of the reach of many peoples budget.  Truth of the matter is, it’s probably overkill for most people too.

 

 

In the mid range you have other, slightly cheaper options such as Adobe's SoundBooth or if you are the Mac type, Apple’s Logic Pro.  Both of these apps sell for about 200$.  If you’ve noticed one thing about me though, it’s I like free stuff, I really like free stuff.

 

 

Thankfully there is a free option, and it’s pretty damned good.  This weeks CTofW is Audacity.  In addition to being a rather clever pun, it is also a “free, open source, cross-platform software for recording and editing sounds.  It is available on Windows, Linux and Mac. 

 

 

Audacity in action editing a Wav file:

image

 

 

As is pretty typical of open-source projects, it’s a bit on the ugly side, although compared to it’s open-source peers, it is the belle of the ball.  However, unlike most open sourced projects, it’s incredibly well documented.  In addition to the included documentation, there are actually a few published books including Getting Started with Audacity 1.3 and The book of Audacity.  It’s a good thing too, even though Audacity is pretty simple to get started with, it’s an amazingly deep program.  The short form description for their site goes as follows:

 

You can use Audacity to:

  • Record live audio.
  • Convert tapes and records into digital recordings or CDs.
  • Edit Ogg Vorbis, MP3, WAV or AIFF sound files.
  • Cut, copy, splice or mix sounds together.
  • Change the speed or pitch of a recording.
  • And more!

 

 

 

Instead of going into depth here about what this program can do, I’ll refer you to their feature list.  And I promise you, that list just scratches the surface.

 

 

So, if you are looking for a audio capture and manipulation application and are doing things on a budget, you really can’t do better than Audacity.  Seeing as it’s free and only a 20MB download, what have you got to lose?

Cool Thing of the Week


25. August 2011

 

In putting together content for this site, I find myself working in Visual C++ which presented an unintended consequence, the project folder’s files are big, huge in fact!  Most of the problem boils down to the intermediate files that Visual C++ generates for intellisense and pre-compiled headers.

 

Therefore each time I wanted to post a code example to this site, I had to go through and delete all of these temporary files or my archives would be huge.  Worse still, every time I open up the solution, they would be regenerated.  ( Yes, you can move these files outside of your folder as a possible work around ).  I figured with the whole me being a programmer thing, I could throw together a program that did this work for me.

 

Therefore I present to you ProjectCleaner.  Aim it at a folder containing your project or sln file click “Clean Project” and it will go through and delete all the temporary cruft ready for you to zip up and share.  For the record, it deletes log, tlog, pch, pdb and obj files as well as the ipch folder.

 

image

 

 

Here are the results after applying to a relatively simple project folder:

image

 

As you can see, it results in a 37MB reduction in size, which saves more than just a small bit of bandwidth.

 

So, if you are finding yourself needing to shrink your Visual C++ projects down to share them, this tool may prove useful.  The source is exceedingly primitive.  It’s written in C#, requires .NET 4.

 

 

Files:

 

CleanProject.zip  -- program executable

CleanProjectSource.zip -- source code

Programming


21. May 2011

 

In every industry there are definitely trends, and the CG world is no exception.  I remember the days when patch modeling were the “IT” thing, and every package under the sun added some forms of patch or spline modeling feature to its toolbox.  Then came NURBS and Sub-D surfaces, etc…

 

 

Pixologic_Logo_2

These days, the “IT” thing is sculpting.  Pretty much modeling via “virtual clay”.  Maya’s Artisan Tools no doubt was one of the big contributing factors to the whole sculpting movement with its release in 1998, but without a doubt the most disruptive and important program in the sculpting movement was Pixologic's zBrush.  Put simply it changed how the industry worked and if you have never checked it out, it is really worth a look! 

 

 

 

Now the gotcha, zBrush meshes by nature tend to be quite dense, as in high in polygon count.  Therefore it is a pretty piss poor tool for creating real time meshes ( although still useful for normal maps ).  In recent years though, lower polygon tools have more commonly made their way into the toolset.  Now, in regards to our project here, zBrush isn’t really all that relevant as simply put, it cost 700$.  That said, there are options.

 

See, a fellow by the name of DrPetter started an amateur project to create his own sculpting software.  In that way that can make you so damned jealous of other peoples abilities, the son of a… er wait… well anyways, he pulled it off, and created a pretty damned cool piece of software in just 6 months.  Being a hobby project he was pretty much going to abandon it, but the folks at pixologic stepped in an employed the fellow to continue work.

 

So, long story short, there is a freely available sculpting solution out there, thanks to drpetter and pixologic.  Given the cost of admission, you really owe it to yourself to check it out.  It is now called Sculptris Alpha 5 and you can download it here.  It’s a zip, download, extract and run the EXE, simple enough.

 

And to whet your appetite so you actually go ahead and download this powerful and FREE program, check out the following video!  Oh, and it is truly free, no watermarks, no limitations, simply free.

 

Sculptris in action

Art


GFS On YouTube

See More Tutorials on DevGa.me!

Month List