Battle layout: share your thoughts

A discussion area for general design issues that staff would like detailed feedback on.

Moderator: Staff

Which design do you think is the best?

Poll ended at Sun Jun 26, 2005 10:43 pm

Draft 1
2
29%
Draft 2
0
No votes
Draft 3
3
43%
Draft 4
0
No votes
Draft 5
1
14%
A combination of the drafts (explain)
1
14%
None of them. Make something totally different (explain)
0
No votes
 
Total votes: 7
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Thu Jul 06, 2006 12:27 pm

Well, that was just a debug thing :D
When I get the change, I will try out your way.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Bottom menu layout

Postby Roots » Sat Jul 22, 2006 9:33 pm

I have no idea what came over me, but I spent the last 2 hours or so playing around in GIMP and ended up creating a layout of the bottom menu portion for battle mode.

[img:1024:128]http://www.allacrost.org/staff/user/roots/mockups/battle_bottom_layout.png[/img]

Note:

- This represents the bottom 1024x128 pixels of the screen in battle mode

- I removed the desert cave background from this completely. Instead the background is a gradient of transparent black that fades to the top

- I made a modified swap icon that is grayed out to indicate that no swapping can take place at the moment (when swapping can take place, it will be the normal color)

- I changed the swap card graphics a great deal :angel: You can see there that in this layout the maximum of 4 cards are drawn there. I changed the graphic from a mini-sprite to the classic golden "H" on a red texture. So you can think of each "H" card as being a Hero card ;)

- I enlarged the portrait size and used S-K's latest portrait (which is 95x95 pixels so its a tad small for the new portrait area). The area for the portrait is 100x100 pixels, and there is a 1 pixel gray border drawn around it

- I used the switchblade font for the HP and SP numbers text

- Each "bar" for the character is 25 pixels high and directly to the right of the portait (so all 4 bars stacked on top of each other == 100 pixels). I didn't remove the cave background from the bars because it would have been a pain in the ass to do so :heh:

- The status icons are immediately to the right of the bar. Hear, I showed 8 icons, where each icon is a size of 25x25 pixels. I think having 8 icons per-character on screen is enough. (If there are more than 8 status afflictions, we could rotate the icons in and out marquee style)

- I showed a rough idea of the enemy box on the right side. The box is 200x100 pixels and states the enemy's: name, selected attack point, and HP. Again, this is very very rough; I imagine that it would look better if there was a solid gray or white line under the enemy name. Also in the game I don't think we'd be reporting the enemy HP directly to the player like that, so we'll need to find another use for that space.

- You'll notice that there is some distance between the enemy box and the character affliction icons. In the next version I'm going to allow more width for the characters name (so that it can be drawn a bit larger and support longer names), so that space will probably be mostly eaten up by that.


So tell me what you guys think about this layout. I'm completely and fully satisfied with everything but the enemy box with regards to the bottom menu. I can post a .xcf (or .psd) file that I used in constructing this layout if anyone is interested in it or wants to mess around, so just let me know. Once we decide on this layout, I was going to mark it up with some yellow lines and ID letters so that we can document how everything is drawn/layed out for the design doc. :approve:
Image
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Sun Jul 23, 2006 2:20 am

I don't know how I feel about the gray. I kind of liked it on the background myself. What was your reasoning for graying it out?

The swap card-ness looks good to me, as well as the font, et cetera. The only thing I am iffy about is the whole "spider (head) health" thing. Since the health shouldn't be displayed (hence why we have the damage blending) -- I think it should just say "Spider \n Head" or something like that...

I dunno. Just tired thoughts.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Sun Jul 23, 2006 2:34 am

visage wrote:I don't know how I feel about the gray. I kind of liked it on the background myself. What was your reasoning for graying it out?


Actually it was supposed to be a semi-translucent black that was drawn over the background, just like in nunvurur's draft. But for some reason it didn't save the transparency correctly :huh:. I'll play around with this a little more and then give you a template image to use temporarily for the you-know-what. ;)
Image
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Sun Jul 23, 2006 2:51 am

I'll put it on the you-know-what at the you-know-where for you-know-when
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Sun Jul 23, 2006 8:06 am

Updated version

[img:1024:128]http://www.allacrost.org/staff/user/roots/mockups/battle_bottom_layout_v2.png[/img]

Changes:

- Fixed gray background and replaced with gradient transparency (bottom 110 pixels are 75% opaque black, and then it fades to 0% opqaue)

- Modified swap card graphics to have a thin shadow

- Display the non-gray swap icon since there are swap cards present

- Re-created the red "character selected" graphic from scratch to remove effects of the old background on it. Also polished the status bars, HP/SP/ST, and the character name to remove artifacts of cave background

- Created more space for character name; shifted status graphics to the right

- Modified text in enemy box; removed the HP and instead of putting the attack point name in parens, I said "AP: Head"....I think I like the parens way better, even though it is not as intuitive :shrug:


Things to fix/improve in future versions:

- Enemy box of course still needs a lot of work/polishing

- The status ailment icons need to be re-done so that they naturally conform to the 25x25 pixel size

- Probably need more progression of the black transparent background fading out (it is too sudden). I was having trouble getting the gradient tool to do what I wanted it to tonight, so this was the best I could get for now. :|
Image
User avatar
Steu
Developer
Posts: 926
Joined: Thu Jan 05, 2006 10:41 pm
Location: Medicine Hat
Contact:

Postby Steu » Sun Jul 23, 2006 2:00 pm

Looking good :approve:
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Wed Jul 26, 2006 6:35 am

[img:1024:768]http://www.allacrost.org/staff/user/roots/screenshots/battlemode_screenshot.jpg[/img]

Okay, now focusing on the top-left menu layout, I think it is clear that we need some improvement. The action selection menus are located so far on the left that the OptionBox cursor can not fit entirely on the screen for either of them! :ohnoes: So let's break-down our space and see what we have to work with here, shall we? :)


- We have a maximum of about 200 pixels of space from the left of the screen to the character sprites
- There is about 200 pixels of space from the top of the screen to the top of the sprites area


Right now I am thinking that we should put the action category (attack, defend, etc.) menu in a vertical orientation and place it to the left of the screen. The list of actions can then go in the upper-portion of the screen. Doing so would allow us for more flexibility in creating longer titles for actions, and also we will probably have more space to move the character sprites further to the left of the screen to create more space between them and their foes. :)

BTW to staff: We can do this all after the you-know-what, so don't stress about it now. ;) Anyway, I just wanted to throw that out there. Tell me what you guys think
Image
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Wed Jul 26, 2006 3:31 pm

Well, I personally like the style it is now. Originally, Matt had an indicator pointing up instead of being to the left. I was thinking, what we could do is just use the CursorOffset and use an entirely different cursor for the main menu option box. Then use highlighting when selecting a skill. I thought it looked real good when Matt pointed it out. It would require some work with the video engine, so obviously it could be done after the you-know-what.

I am a bit confused as to what you are trying to say though -- could you do a mock up?
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Thu Jul 27, 2006 3:27 am

visage wrote:Well, I personally like the style it is now. Originally, Matt had an indicator pointing up instead of being to the left. I was thinking, what we could do is just use the CursorOffset and use an entirely different cursor for the main menu option box. Then use highlighting when selecting a skill. I thought it looked real good when Matt pointed it out. It would require some work with the video engine, so obviously it could be done after the you-know-what.

I am a bit confused as to what you are trying to say though -- could you do a mock up?


I think an "up" indicator is practically a requirement for us to have (not just in battle mode either). Anyway here is a sloppy draft I did this morning:

[img:1024:768]http://www.allacrost.org/staff/user/roots/mockups/battle_layout.jpg[/img]

I was short on time/energy so there's no fancy menu for the two menus. Anyway on the left side you can see the action type selector graphics, and the one selected (Attack) is highlighted. The actual action list is on the top left of the screen, and you can see that it is wide enough that it may accomidate multiple columns of actions.


But actually just now I thought of another idea. :angel: I'm too tired to describe it now though, and anyway its better to collect opinions on this layout idea first. :)
Image
User avatar
Steu
Developer
Posts: 926
Joined: Thu Jan 05, 2006 10:41 pm
Location: Medicine Hat
Contact:

Postby Steu » Thu Jul 27, 2006 11:29 am

I like this draft better, I like the vertical menu style here as opposed to the horizontal one in the previous draft.
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Fri Jul 28, 2006 2:56 am

I don't like how the sub menu is above the regular menu. With a little graphical work though, it may be an interesting concept. What if it was vertical, but smaller on the left, then the sub menu extended vertical and right of it.

So it was sort of like:

Code: Select all


--------
 ATK   |____
 DEF   |atk1|
 MAG  |atk2|
         |atk3|
         |___ |
_____|


Beware my ASCII art!

Edit: Blah, doesn't really work.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Fri Jul 28, 2006 3:07 am

visage wrote:I don't like how the sub menu is above the regular menu. With a little graphical work though, it may be an interesting concept. What if it was vertical, but smaller on the left, then the sub menu extended vertical and right of it.

So it was sort of like:

Code: Select all


--------
 ATK   |____
 DEF   |atk1|
 MAG  |atk2|
         |atk3|
         |___ |
_____|



I acknowledged the same problem when I first created this draft, and I came up with the same answer you did visage. :) It would probably mean shrinking the size of the text for Attack/Defend/etc., but I totally think it is possible to have the list of action types on the top left, and a two-column list of actions to the right of it.

This would leave a ton of space for the middle part of the image....but we probably don't need that space :shrug: But yeah, the action type selector menu really should be above or to the left of th action list menu. :| I think nunvuru's original design is probably the best in terms of space utilization, but I don't think that the action list menu needs to be connected-to, and centered directly below the action type menu. I'll try making another draft to show you guys what I mean. :)
Image
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Fri Jul 28, 2006 1:19 pm

Yeah, because my drafts are sucky. My ASCII Skills > GIMP Skills, so you can only imagine what my mockup would look like.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Fri Jul 28, 2006 2:46 pm

visage wrote:Yeah, because my drafts are sucky. My ASCII Skills > GIMP Skills, so you can only imagine what my mockup would look like.


The only way to get better at something is to practice. :angel: I've gotten a lot better at using GIMP just in this past week.
Image
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Wed Aug 09, 2006 5:40 am

New draft! :bow:

[img:1024:768]http://www.allacrost.org/staff/user/roots/mockups/battle_layout_v3.jpg[/img]

Changes:

- switched the location of the action type selection menu with the action selection menu

- improved action type selector menu (top left)

- increased the size of the action type graphics

- removed "swap, recent, run" selections from the menu. We'll come back to which of those we want in the main menu later

- added sprite selector graphic for kicks



I don't know about you guys, but I'm feeling pretty damn good about this now. :D I think this is pretty much a done setup now, and there only remains some debate on a few cosmetic points. Namely:

- the enemy info box in the lower right

- the spacing/format in the top and left action menus

- whether or not the left action menu should be a little more embellished, instead of just a black transparent box :heh:


Let me know what you guys think :approve:
Image
User avatar
Steu
Developer
Posts: 926
Joined: Thu Jan 05, 2006 10:41 pm
Location: Medicine Hat
Contact:

Postby Steu » Wed Aug 09, 2006 11:23 am

Looking spiffy!! :approve:
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Wed Aug 09, 2006 1:21 pm

Initial reaction is "ehhh..."
Second thoughs are "mmm, well..."
Third view is "okay, well, I think we can work with it."

Originally, I didn't like the disjointedness between the primary and sub menus -- but I think it is only because I don't like all that "sub menu white space" that is there. I would really like to see the sub menu extend from the primary menu, either to the bottom or to the right. That, or have the main menu disappear while the sub menu is selected.

Secondly, I think the menu looks a little too large.

Okay, yeah. Rock on.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Wed Aug 09, 2006 5:12 pm

visage wrote:Originally, I didn't like the disjointedness between the primary and sub menus -- but I think it is only because I don't like all that "sub menu white space" that is there. I would really like to see the sub menu extend from the primary menu, either to the bottom or to the right.


That is easy enough to do.

visage wrote:That, or have the main menu disappear while the sub menu is selected.


Oh wow, I love that idea! :bow: That would free up a lot of space on the screen. :D What I'm envisioning right now is that when you select a skill type (say "Support"), the support icon quickly shifts to the left of the menu (and the other icons shift away) and then the menu becomes filled with support skills along with the support icon.

We could either place this menu at the top in landscape style or on the left in portrait style. I think I vote for the left, because then the skill type menu could look like it did in the previous draft below, and the list of skills could also be in a vertical alignment (which makes them easier to select for the player I think).

[img:1024:768]http://www.allacrost.org/staff/user/roots/mockups/battle_layout.jpg[/img]

Maybe I'll do yet another draft again tonight. :angel:

visage wrote:Secondly, I think the menu looks a little too large.


I kept the icons at their native size (60x60) in that draft. Yeah, I agree it was probably too large.
Image
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Wed Aug 09, 2006 5:17 pm

Roots wrote:Oh wow, I love that idea! :bow: That would free up a lot of space on the screen. :D What I'm envisioning right now is that when you select a skill type (say "Support"), the support icon quickly shifts to the left of the menu (and the other icons shift away) and then the menu becomes filled with support skills along with the support icon.

That sounds amazing to me, except for the horizontal design. I think we should do it vertically for the sake of clarity within the list, as well as scrolling. Here is what I say: use your vertical selection like it was before, with the 8 or so selections (attack, defend, support, item, run, et cetera). Then, when you select one, it moves up to the top, and the options fill in BELOW it within the menu.

That would be a fuckin' sweet effect. Also, as you said, save a ton of space on the screen.

:approve:

Return to “Design”

Who is online

Users browsing this forum: No registered users and 1 guest