Wednesday, September 17, 2014

New panels, Web UI development

Hi :)

So the last week or so has been taken up by rebuilding the formation editting panel. Since we've been moving our UI frontend code to web tech through Awesomium, this means learning a whole bunch of new technologies to manage it. And since I'm new at these sorts of languages, it also means constant retuning and rebuilding of the code. Now that's it's a little more stable I wanted to talk about it some.

First, one of the big advantages of using the web-style frontend, is that you can use it in a browser! So, here's the new panel! Go take a look!

Commander Formation Panel Tester

This thing here is built using a pile of stuff a learned recently:

  • Javascript, of course, since the web runs on javascript. I don't have all that much javascript experience in the past, so there was certainly some learning. The first set of UIs, which have been in the game's main menus for a year or so, use JS of course, but there's good JS, and bad JS, and those menus are... bad JS...
  • TypeScript: I admit it, I'm only comfortable programming in primarily statically typed languages. Typescript is a nice balance between typing and javascript. While it took a bit to learn how to use it properly, since you have to compile it into JS, it's been a noticable improvement for me personally.
  • Handlebars: Handlebars is a templating system to build HTML docs (or JS I suppose) from JS data. My standard coding methodology is to break things down into pieces, yes? HTML/JS/CSS don't really let you do that. Using handlebars to break the HTML bits into pieces gets me some of the way there. Most of the pages I build now use a few templates. Recently I started keeping them in separate files, loaded dynamically when needed.
  • HTML5 Canvas: The main interactive area of the formation panel is displayed with canvas. Turns out that coding to canvas is a lot like using a super-primitive 2D version of OpenGL. Piece of cake :)
  • JQuery / JQuery UI: JQuery of course is largely requisite for some kinds of JS development. I know it's not truly necessary and that there are other options, but I don't have a personally compelling reason to switch. JQuery UI is a bit of a different beast. We use it mostly to set up buttons with consistent styles, tabs, sliders, checkboxes, and other core UI elements. I'm not sold on it, but it does seem to work well enough so far. 
So mercifully the frontend code is becoming less of a mess. With other bugs getting fixed in the game's UI management, we may actually be getting somewhere on having a reasonable UI toolkit. 

Took long enough, eh?

Next task is the commander panel; skills and classes and customization. It used to sound like an impossible task, but I'm beginning to think it won't be so terrible. Will find out soon :)