UI Development

Over the last few days I've been working on the new UI system, going back and forth about how best to implement it.  Originally I had thought that simple objects which aren't pooled or anything would be easiest.  They would simply be a DIV overlayed on the rendering context, and it was going fine until I realized how much work I was going to create for myself since I already had components to render sprites and images, play sounds, etc.  So, back and forth I went...

Turns out, I already had everything I needed to generate UI's.  The new UI design is finalized and development is continuing.  Here is how it all came out:

• UI's are HTMLDivContext objects
• UI elements are Object2D objects
• Positioning of UI elements is handled automatically via Transform2DComponent
• Sprites and Images are rendered with components

There is a UIManager which loads user interface files and parses them into a UI with all elements generated from the UI file.  The part I'm working through right now involves how to position elements within the UI.  I want to give some flexibility so that UI elements can be positioned relative to each other.  That way, if you have a series of buttons which all need to be left aligned together, you only need to absolutely position the first then relatively position the remainder.  Next up, after that, will be enabling some sort of way to trigger methods from the UI using jQuery event binding.  UI elements currently in development:

• Image/Sprite
• Button
• Textbox
• Text Input
• Check/radio box
• Slider
• Sound

I figure that those should cover most of the basics for creating a UI.  Of course, all of this will be extendable so you can create your own UI elements.  That way, UI's can be created and used within your games as well (not just for menu and option screens).  While doing all this, I modified the multi-resource loader a bit.  I've decided that I want to be able to use the loader without having to specify what is being loaded.  As such, I've created my own extensions for files which describe meta formats such as bitmap fonts and levels:

• Level: *.level (*.lvl)
• Bitmap Font: *.font (*.fnt)
• Image: *.image (*.img)
• Text: *.text (*.txt)
• Sprite: *.sprite (*.spr)
• User Interface: *.ui

Formats like JSON, XML, and sounds have their own extensions already so I don't need to specify those.  Each of the meta formats is still a JSON object that describes the actual contents to load, so you can call the loaders in the same way, but the multi-resource loader will simplify things for you.

When the multi-resource loader is used, you can either specify the type of loader to use or let it decide based on the extension of the file being loaded.  That way, you can just use the multi-resource loader as if it were all the loaders rolled into one without thinking about what it's actually loading.  It will use the correct loader for you.  The only difficulty comes when requesting cached resources from the multi loader by name.  The name doesn't indicate what it is, so I'll have to tackle that one at a later date.