UI Mechanics for Grid-Based Game
I'm currently working out how to implement the core gameplay mechanics of one of the games I'm working on, and it involves the user picking an object from an assortment of objects and placing each one on a grid. What I'm trying to work out is the best way to go about this in a way that balances grid size with playability. Ideally, I'd like an expansive grid, but I don't want to make each tile too small nor too difficult to navigate for the player, so I'd like to gather some opinions on a variety of possible solutions. I've come up with a few of my own here, but feel free to make your own suggestions:
Method 1a
14x9 Grid consisting of 32x32 tiles. The stats (score and such) and tools panels are initially hidden with a small thumbnail icon on the bottom right that can be tapped to slide out the semi-transparent stats and tools panels, and will automatically close again when the player picks a tool. Placement will be simple drag and drop with an indicator of some sort (halo, arrows, or magnifying glass placed wherever there is free space) to show the user where the tool will be placed. Grid snap will be employed so there is no ambiguity which tile a tool will be dropped on.
Pros: Simple to navigate, no clutter or distractions to get in the player's way while playing.
Cons: Smallish grid, extra step to pick tools.
Method 1b
12x8 Grid consisting of 32x32 tiles. The stats (score and such) and tools panels always open. Placement will be simple drag and drop with an indicator of some sort (halo, arrows, or magnifying glass placed wherever there is free space) to show the user where the tool will be placed. Grid snap will be employed so there is no ambiguity which tile a tool will be dropped on.
Pros: Simple to navigate, all information available at a glance, all tools available with a single tap.
Cons: Smaller grid.
Method 2a
19x13 grid consisting of 24x24 tiles. Same slide-out panels and placement as 1a.
Pros: Larger grid, no clutter or distractions to get in the player's way while playing.
Cons: Harder to navigate with smaller targets for placement; extra step to pick tools.
Method 2b
17x11 grid consisting of 24x24 tiles. The stats (score and such) and tools panels always open.
Pros: Stats panel always available at a glance, tools available with a single tap.
Cons: Not quite as large a grid; harder to navigate with smaller targets for placement.
Method 3a
28x18 grid consisting of 32x32 tiles. This method hides the panel as with 1a and 2a, but presents a zoomed out overview of the board, which to the user will appear as 16x16 tiles when zoomed out. When the user picks a tool the board will zoom in to full 32x32 size and allow the user to scroll around the screen to place their tool. Pinch zoom gestures will be supported at all times.
Pros: Expansive grid.
Cons: Takes longer to navigate for placement; extra step to pick tools.
Method 3b
24x16 grid consisting of 32x32 tiles. Identical to 3a but slightly smaller and with panels visible at all times.
Pros: Stats panel always available at a glance, tools available with a single tap.
Cons: Slightly smaller grid.
I should point out that grid size matters here, as the grid will become increasingly filled with objects as levels progress, so the larger the grid, the more extended the gameplay can become. Furthermore the game will have different modes of play, one of which will be timed, although this doesn't necessarily matter much as the timers can always be adjusted to suit the method of play. Taking all of this into consideration, you can see that there is a balance that must be struck here between playability, ease of use, intuitiveness, and longevity. I'm interested in hearing opinions on the above possibilities, or any suggestions any of you might have as to how you think it should best be handled. I'll consider just about anything, as the simpler and more intuitive I can make mechanics of play, the better.
Method 1a
14x9 Grid consisting of 32x32 tiles. The stats (score and such) and tools panels are initially hidden with a small thumbnail icon on the bottom right that can be tapped to slide out the semi-transparent stats and tools panels, and will automatically close again when the player picks a tool. Placement will be simple drag and drop with an indicator of some sort (halo, arrows, or magnifying glass placed wherever there is free space) to show the user where the tool will be placed. Grid snap will be employed so there is no ambiguity which tile a tool will be dropped on.
Pros: Simple to navigate, no clutter or distractions to get in the player's way while playing.
Cons: Smallish grid, extra step to pick tools.
Method 1b
12x8 Grid consisting of 32x32 tiles. The stats (score and such) and tools panels always open. Placement will be simple drag and drop with an indicator of some sort (halo, arrows, or magnifying glass placed wherever there is free space) to show the user where the tool will be placed. Grid snap will be employed so there is no ambiguity which tile a tool will be dropped on.
Pros: Simple to navigate, all information available at a glance, all tools available with a single tap.
Cons: Smaller grid.
Method 2a
19x13 grid consisting of 24x24 tiles. Same slide-out panels and placement as 1a.
Pros: Larger grid, no clutter or distractions to get in the player's way while playing.
Cons: Harder to navigate with smaller targets for placement; extra step to pick tools.
Method 2b
17x11 grid consisting of 24x24 tiles. The stats (score and such) and tools panels always open.
Pros: Stats panel always available at a glance, tools available with a single tap.
Cons: Not quite as large a grid; harder to navigate with smaller targets for placement.
Method 3a
28x18 grid consisting of 32x32 tiles. This method hides the panel as with 1a and 2a, but presents a zoomed out overview of the board, which to the user will appear as 16x16 tiles when zoomed out. When the user picks a tool the board will zoom in to full 32x32 size and allow the user to scroll around the screen to place their tool. Pinch zoom gestures will be supported at all times.
Pros: Expansive grid.
Cons: Takes longer to navigate for placement; extra step to pick tools.
Method 3b
24x16 grid consisting of 32x32 tiles. Identical to 3a but slightly smaller and with panels visible at all times.
Pros: Stats panel always available at a glance, tools available with a single tap.
Cons: Slightly smaller grid.
I should point out that grid size matters here, as the grid will become increasingly filled with objects as levels progress, so the larger the grid, the more extended the gameplay can become. Furthermore the game will have different modes of play, one of which will be timed, although this doesn't necessarily matter much as the timers can always be adjusted to suit the method of play. Taking all of this into consideration, you can see that there is a balance that must be struck here between playability, ease of use, intuitiveness, and longevity. I'm interested in hearing opinions on the above possibilities, or any suggestions any of you might have as to how you think it should best be handled. I'll consider just about anything, as the simpler and more intuitive I can make mechanics of play, the better.
[Relax with Galactic Chill] [Let me tell you a story.]
Currently working on: Music for Spirit Hunter Mineko