Live Coding in AS3 using COLT
I hope many of you have seen this amazing video made by Bret Victor: Inventing on Principle. This is one of the best introduction to live coding if you never heard about it.
Recently, Code Orchestra, released an amazing tool named COLT. It enables live coding in AS3, you will find many great video examples on their page. You can use the tool with a free trial during 15 days, don’t hesitate! It comes with many examples to help you understand the basis, oh and there is one running with the Citrus Engine
At first, if you never tried live coding, it’s a very strange feeling: you think that you will be able to change everything at runtime, like building from scratch your application in one single shot, but it isn’t possible at all.
Examples: you want to change position of an object? You may create functions which edit object properties, but you have to think it before compiling. The easiest way is to call a live function from your constructor which will destroy all the existing objects at first (when you will live edit this part of code it will be performed again and so you won’t have two times your objects) and then instanciate objects with the new positions.
We know that programming user interface for the iPad retina is a pain because we don’t have a screen which is able to display entirely its screen. Here live coding is an incredible gift!
Also when you’re trying to balance a gameplay it may save you a lot of time, especially on mobile where compiling time and launch time is long, because you will be able to modify quickly some values and test it again and again.
I invite you to give a look to COLT documentation to know all of its features, and know how to enable them.
Adding COLT in your workflow
COLT is an external tool, there are some plugins to enable it in your IDE but there isn’t one for all of them. Personnaly, I use FDT. So for me it means I’m not able to use it with my usual workflow which is already a bit complex: I add referenced projects (like the Citrus Engine) to my working/current project. This way, I’m sure to work all the time with its last version and benefit the last changes (bug fixed, new features). It may also rise compatibility issues, but that’s another story.
You can always code in your favorite IDE and have all its advantages, but you will have to re setup your project into COLT and compile there.
So let’s take an example: see how the Citrus Engine repository is setup, it’s shared in my current project, Silly Family, which is exactly configured the same way. I’ve added a colt directory at the root of my project, and saved colt project there.
This is how the project paths are set up into COLT. Note that I had some issues at first. It may have a priority for the paths, but I’m not sure… I’ve tried several configurations. There are many source folder so I’m sure to be able to edit whatever I want and some SWCs for third part libraries.
Now this is the Compiler Settings. Note that COLT is provided with an old SDK (I don’t know why), mine is AIR 3.8 (still in beta). The outpout path is in the bin directory, so I share the same assets (at the same position) than my IDE.
Except for the issue when setting projects paths (I also had a strange issue saying that flash.display.MovieClip wasn’t found) it isn’t hard to setup your project. If you’ve some problem when you compile it, just change the order when you added projects paths.
COLT issues & improvements
When I worked with COLT I encountered strong issues. It seems that many guys haven’t them so it may be a problem on my side, this part should not prevent you to give a try to COLT! This is mainly a feedback for COLT’s developers.
- problems at the compilation that I’ve solved by deleting and recreating the whole project. I may have change the project paths, but not the Live Settings or Compiler Settings. Sounds strange.
- Livecoding doesn’t work anymore after a while, sometimes my content is no more refreshed. It works several times, then it is frozen. It isn’t updated anymore even if I’m just changing some positions (tried on Flash player and on mobile). I have to recompile.
- the log window isn’t easy to use. It isn’t really clear, and in the connection window it doesn’t provide the actual time when it’s started which is less useful IMHO.
- the trace I’ve when I launch the application (so not in a LiveCodeUpdateListener method) are not displayed.
- it seems we’re not able to target AIR without using a mobile, that’s annoying.
- when adding new connections it freezes some of them.
- when generating script for mobile we are not able to select an existing *-app.xml, it may overwrite the one added by our IDE if we’ve chosen the same name for the project. Here we would just need to be able to select an existing @-app.xml or create a new one.
- on Android it doesn’t automatically uninstall the previous application and it doesn’t install the recent one, we have to do uninstall it ourselves and recompile. I’m not sure for iOS.
- a good feature would be to be able to make several connections (in an AIR project) based on different resolutions, and be able to make changes at the same time everywhere. It would make mobile development very easy!
Many of this issue may be resolved using a plugin directly in our IDE, which would be a top features!
COLT is a young tool, they already achieve the impossible: live coding in AS3. With a bit more maturity, it will become the most useful tool for AS3 developer! On my side I’ve no doubt about it, I bought my license yesterday. It’s time to refresh our brain and our code. We’re no more in a static way of testing our app when it is compiled.
- Sophie the Girafe 2
- Silly Family available on the Mac App Store
- GPU render mode hell, and how we barely got out of it alive.
- AS3 Skeletal animation libraries performance test
- Silly Family, being an indie dev
- Flambe versus the World!
- Finally I made a serious game
- AIR ANEs
- Working with multi-resolutions assets
- Monsieur Bear’s ABC and the myth of not being able to run SWF vector graphics on mobile