Warscale - ArmyEditor and GuiGridControl

Hi everybody!

Here I am again with one more blog for this series. I really didn't expected to write an entry this week and worse yet, even trying to post a screenshot, but I found that everything is coming so fine that I decided to do both.

What was planned
Army editor
As I told you last week, I intended to spend these weeks writing the two main editors and a selection start screen for the game. Of course this is heavy work and I'm far from finishing it but I like the way its shaping.

I decided that the first thing to solve was the Army Editor. The Army editor should allow you to customize our army by picking units from your collection, but if you are missing a unit, it show you all the units available in Warscale so you may add any unit to your army. Of course as you dont have the unit, building the army will have a cost in gold pieces that you will need to pay.

When I started writing the army editor, I wanted to make it work like a photo album and being able to show the images for 9 units at a time and page the units. Unfortunately, this proved hard to program and provided a bad visualization. So, how to present all the information? Of course I wont dare to create a completely new GUI idea, I just want to make this work, dirty and simple. So I went to the source... how does Magic The Gathering online presents all their thousands of units? And I found they use a plain and simple grid.

Now, the problem here is that the grid control (GuiTextListCtrl) in torque is really underdeveloped. It requires a lot of modifications to be usable to display any heavy data. Of course it can be used for many interesting things but lacks the flexibility that I required so I decided to improve this control.

First I decided to implement this interesting resource which allows to show a header in the grid:
http://www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=14209

This resource have a couple of problems but were easilly solved. But I wanted some new features.

One of the features was to be able to handle the column widths. After some hacking Im now able to change the column width just by dragging the mouse on the column header or by a script command:
AEModelList.setColumnWidth( 0, 25 );


Another feature is to identify exactly the cell being selected. The current TextList handles columns but internally its only considered a single row. This behaviour allows me to identify the column being clicked. This event fires a script callback so I can decide (in example) if I should sort on the clicked column.

Other problem was that the borders werent being painted correctly in the TextList. I decided to write some code allowing me to draw some cell borders. The borders now can be setup in the TextList profile using
border = (border value)

The border value is used bitwise and tells the control how to render the border of each cell. The values can be:
// 0000 (0) : Render no border
// 1000 (8) : Render line at the left of the cell
// 0100 (4) : Render line at the top of the cell
// 0010 (2) : Render line at the right of the cell
// 0001 (1) : Render line at the bottom of the cell

Bits can be mixed so 1111 (15) Renders all the lines. Setting the value to 1 will render horizontal lines only. Setting the value to 2 will render vertical separators only.By default the value 3 is used.

Another feature I was interested was to be able to handle the alignment and font for each individual column. That way I can render numbers using a right alignment and text using a left alignment. Some other values require to be centered. Other values may require to be rendered in bold or italics.

This cries Torque ML text all around, but how to handle ML? I decided to use a ML control as a render solution. Basically I make the control jump from position to position and render the contents using a specific format for the column. The format for each column is defined as an array of ML tags that will affect the column text value. These formats can be specified when the column is normal or highlighted. The result is amazing. In the screenshot you can see some text rendered using Arial Italic 14 font. If you notice, the font drops a shadow. You may notice also some columns are centered. Now, I havent tried but I'm pretty sure this can handle bitmaps as any TorqueML text can. I dont think URL links will work but I dont need them anyway.

Screenshot


Plan for this week
The plan this week is to keep working on the editors. There are still lots of problems to solve but I hope everything goes fine.

Luck!
Guimo