Designing around code

NoveltyML Designer (click for video)

Ever since I started my Novelty project I’ve been faced with a dilemma. From the very beginning of development, the engine that runs Novelty has relied heavily on XML. In fact, every texture and every object needs an XML representation before Novelty can digest it.

The dilemma is that this method of object creation has proven to be extremely powerful and flexible, but Novelty is targeted towards a non-technical crowd and most users get overwhelmed by having to type code.

I have spent countless hours designing my way around this problem. In fact, I have spent as much time designing the language itself as I have the engine that runs it. But at the end of the day it’s still a markup language and can never appeal to a wide audience.

Early on I created The Designer. It’s a tool separate from Novelty for creating Novelty assets. For writing the code. In essence it’s a fancy text editor, where you get a live preview of whatever object you are working on. By offering the ability to see a visual representation of the code you’re writing, I hoped it could bridge the mental gap between the code and the resulting graphics.

Next I made the Designer much smarter. I created a database with all of the available tags and their resources which meant the tool can make intelligent suggestions. There’s an intellisense-like feature, that will help the user whenever they needs it. In my opinion, this made the Designer a joy to use and I thought I was done with it. Unfortunately my opinion doesn’t count.

The most recent update to the Designer was born out of necessity and user feedback. What I’ve do is offer a more visual method for writing the code. The user can now view the tags and attributes as non-scary colored blocks which can be interacted with with a mouse. The user can click on a block to edit its attributes, using friendly point-n-click controls and while they’re doing this the code is being generated behind the scenes.

As I’m writing this I haven’t actually released this to the community yet, but I hope people will want to try it and can discover the flexibility of NoveltyML, without worrying about knowing the correct syntax.

 

 

Click the image above to view a video where I use the Designer to create a clock object from 3 images. First through code, then using the visual interface.

One Response to “Designing around code”

  1. Elrinth said:

    Jun 16, 09 at 13:19

    Mäkta coolt! Tänker direkt på Flash när jag ser detta. Tror jag ska tanka hem och prova det ikväll. Om jag nu inte ska lira massa Bionic Commando. :)


Leave a Reply