Ok so simple demo:

• Login
• Character Select (names will be replaced with ‘mid level zoom’ infoblocks… on click, they will go to ’sidebar’ for verification and a blurred version of the map where you were (stored as a screen shot from last game) will load on the left)
• Chat Panes demo (forced ‘receive’ messages are moving the tabs around)
• Character InfoZoom demo

There’s still a lot wrong with the transition code… Adobe did not make it easy, and it seems every possible method I try doesn’t work re: the black and the label text in the character select. I’ll figure it out eventually.

Demo Here (requires flash 9)

A couple decisions we made:

• The background isn’t going to try to be photoreal, instead we will build layers. Similar to google’s ‘hybrid’, ‘map’, and ’satellite’, only more like checkboxes. One useful mode will be parchment map-like giving more symbolic cues than photographic ones. Also the ’satellite’ mode will be more about washes of colors and impressionism (you walk slower, the parchment lines show little inverse ‘V’s, the ground is brown with spatterings of white spirals… you get the feeling of being in the mountains, without having to visually see it).
• Movement rates and collision will use the same system, server-side: a simple grid division of your movement rate multiplier through the given area, and some possible flags (hinders flyers too, etc). The resulting grid that the vector lands in will be used for determination, regardless of passage.
• Map-based effect spells will be dumped into a linked list of shapes with a type (full square, circle, gridmap) for best-fit occlusion. These don’t scale that greatly, so there shouldn’t be that much emphasis placed on them.
• More emphasis will be placed on 2D-specific strengths: Oekaki-style drawing on the map will be able to be used as a communication medium between players.
• AoE spells might have a tradeoff of size of circle vs spread of damage, with minimum and maximums. Circles can be drawn easily with a click and drag (center->radius)
• Spells like summon wall, lifelines, etc can be easily drawn with a click and drag between two points. Some of these might snap to valid targets (players).

So building a quick-list of interface panels or templates that need to be built.

Some of these can start out as command-line.

• Character
• Picture
• Synopsis
• Attributes
• Effects
• Modifiers
• Skills
• Active Slots
• Known
• Learnable
• Inventory
• Equipment
• Chat
• Trade Listing
• Trade Browse
• Trade
• Group Listing
• Group Browse
• Party List
• Enemy List
• Character Mini
• Character One-Line
• Faction Preferences
• Faction Listing
• Proposal
• Props Popup
• Buddy List
• Death / Resurrect
• Login
• Game Preferences
• Account Preferences
• Graphics Preferences
• Sound Preferences

Was just working on some ideas for how to display the information on the battlefield. Built a flash test that does the google maps style zoom (mouse wheel zooms centered on wherever your mouse cursor is).

The icons do not scale well down, and only half-decent up, so I came up with some possible ideas for the icons:

• Maintain an exact icon size regardless of zoom
• “Supreme Commander”-style, zoom out far enough and they become dots. Basically Level Of Detail in our little 2D world. additional information could begin to show at different zoom levels. Dots can be vectors so they can have nice scaling.
• You could some player options on what displays and how: “Main icon slot: [ class icon, face, current status, health bar ], secondary slot: [ class icon, etc…]”, whereby when they zoom out it goes down to only Main icon and secondary and then eventually just main.
• Have rollovers on the dots or small version switch to the big detail version on the particular character.
• Have rollovers also display full information in a dialog on the side of the map of the current selected / highlighted target

This is an example (two pngs on a background), of some possible icon meshes.

  In this example we have character face as Main, some icon slots for class or effects, health and mana below and elemental weaknesses and strengths to the right

In this example I have an archer class icon, some weaknesses and strengths to the right, and effects/buffs above.

One of the recent interface tests I did was a trade offer submission.  Came across a mnemonic conundrum.  When posting offers to trade it may not be intuitive to use the two-column representation.  We’ve gotten very used to seeing price tags below an item to mean price that it’s worth / that you will exchange.  So I think I will make a 3 tabs or views of the trade offer panel: “WTB”, “WTS”, and “Trade”.  The trade interface will be more like what you see below.  The WTB and WTS will have a slot for a single item and then the offer price below.

Anyhow, this is my little drag-n-drop screenshot for the first test I did yesterday: