Improve UX for the Game Setup window

[stickgrinder]

Dependencies

This issue follows #374

Benefit description

Although functional, the setup window in 2.0 is cluttered and hard to eye-scan.
Some of the problems we think we should address:

The game setting should be done by pre-selecting a "game type," like "Pixel Art," "High Res," and others if we think it's worth adding more.

• Parameters are pre-set and can be customized only by opening a section in the setup window (like "Advanced options" or "Customize")
• The GUI selection section would scale poorly when adding more elements. We must make it sleeker and provide more visual and less textual info.

This issue is mildly related to #251. Evolving the setup experience is expected to render that issue irrelevant.

Solution description

Thanks to Papernoise, we now have a mockup design or the desired interaction.

An interactive version can be found here.

The setup window becomes a wizard-like procedure, broken up into steps that logically guide the developer to select a game style, a resolution from among the standard ones defined, and one of the available interfaces.

We are making assumptions here and will offer options that address the most common use cases. A "Custom" button will allow the user to switch to a window similar to the current one (but less cluttered with information), where he can set things up the way he wants.

Here is an overview of the setup flow:

Implementation details

Compared to the mockup, the final solution will differ as follows:

Step 1

• The labels for the game type should be "Retro / Pixel Art" and "Modern / Hi-Res".

Step 2

• The game resolutions available should be these:

  Retro	Modern
  Neo-Retro - 16:9 (384x216)	4K (2160p)
  VGA - 4:3 (320x200)	Quad-HD (1440p)
  VGA - 16:9 (356x200)	Full-HD (1080p)
  CGA/EGA - 4:3 (320x180)	HD-Ready (720p)
  CGA/EGA - 16:9 (356x180)	Retro HD (1024x768)

• The preview resolution dropdown refers to the window size when you launch the game. I would suggest these options:

  Retro	Modern
  Quadruple (4x)	Native resolution
  Double (2x)	Half-size
  Native (1x)	Full-HD (1080p)
  	HD-Ready (720p)

Step 3

In the scope of this first iteration, the options will be the same for both types of games as we are going to provide the same interfaces both in low and high resolutions:

• SimpleClick
• LucasArts (9-Verbs)
• Sierra (SCI)

I would remove the text box explaining the interfaces or - if we want to leave it there - reduce the text to a minimum (like "Same as LucasArts' Monkey Island 2 or The Day of the Tentacle" or "Same as Sierra's King's Quest V or Space Quest IV").

ALTERNATIVE: We may want to ditch these explicit names for a different approach, like "9-Verbs" and "Icon-Bar", and then use the text box to clarify the source of inspiration.

Custom step

We will reduce this to the bare minimum, more or less like this:

This is a less cluttered version of the current setup window. No specific instructions will be provided, but we'll document it in the proper documentation section (in scope for this feature).

The "Graphics preset" dropdown will have the current values but renamed "Pixel Art" and "High Resolution".

The user can select the interface among the ones available for low-res and high-res. Of course, he can make a mess by choosing the wrong interface, but he can always change it by running the setup again.

To-do

• Change the setup window behavior to match the one in the design
• Create new, more coherent, and less "pixel artsy" icons for the selection of the interface (or switch to a text-only one?)

Exclusions

These changes may highlight the need for resolution-specific game GUIs. They are out of the scope of this issue, but they are tracked in this one: #374 which is propedeutic.

Implications

Ideally, pressing the "Setup" button in the game dock should bring the user back to the procedure, pre-populated with all the selections he has already made. If the user chooses to go custom, the custom step should appear without forcing the user to go back "full circle." If not, we can show the wizard with the field pre-populated from the previous selections.

[mapedorr]

Looking forward to start creating the HD version of each template!!!