Battle Layout Discussions, Part II

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

Moderator: Staff

Which battle layout entry do you personally like the best?

Entry #1
5
56%
Entry #2
1
11%
Entry #3
1
11%
Entry #4
2
22%
My favorite isn't listed! (explain)
0
No votes
 
Total votes: 9
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Battle Layout Discussions, Part II

Postby Roots » Tue Aug 15, 2006 5:41 am

There has been a lot of changes in our battle layout lately, and especially a lot of change from the early designs. So I thought now would be a good time to get another poll started. :D When you cast your vote, also tell why you voted for one over the other please.

Entry #1
Image

Entry #2
Image

Entry #3
Image

Entry #4
Image


Let the debate begin! :argue:
Last edited by Roots on Thu Nov 27, 2008 12:09 am, edited 1 time in total.
Reason: Fixed img tags from phpBB upgrade
Image
User avatar
Loodwig
Musician
Posts: 511
Joined: Mon Apr 18, 2005 5:15 am
Location: Chicago, IL
Contact:

Postby Loodwig » Tue Aug 15, 2006 6:05 am

I like 1, if you could make it as clear as 4. The others take up too much of the screen.
"We want a simpler and more melodic style for music, a simple, less complicated emotional state, and dissonance again relegated to its proper place as one element of music..."
~Sergei Prokofiev
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Tue Aug 15, 2006 6:34 am

We're mainly debating the top/left action menus. I think that we are all decided upon what the bottom menu should look like (it should look like something close to #4).


I voted for #4. Note that #4 could easily be made to take up less screen space (the icons will be made smaller, and the menu can be truncated so that it is "sized to fit". My "ideal" #4 is basically going to look like #1's action menus, except that there is not both a vertical and horizontal menu, but instead a single vertical menu that is shared (you won't see the list of action types and the list of actions at the same time). I think that #4 can be tweaked so that it takes up just as little screen space as #1.


My problem with #1 is that the left border of the menus are completely missing. Also, we are going to want more than 4 types of actions, so the horizontal box there is going to be at least 50% larger, and it would make the drop-down vertical menu look more awkward since it's so skewed to the left. Still, #1 would be my "runner-up" I think.



And I didn't vote for #2 or #3, because #4 is better than both of those. :heh:
Image
User avatar
Steu
Developer
Posts: 926
Joined: Thu Jan 05, 2006 10:41 pm
Location: Medicine Hat
Contact:

Postby Steu » Tue Aug 15, 2006 11:52 am

I voted for #1 cause I like that style the best, it just needs some tweaking like making the font a little larger more like #3 or #4.
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Tue Aug 15, 2006 3:56 pm

#4 with a few tweaks. When you select on an action, the other actions should disappear, and a line between the action and the possible "actions" should be there. So when you click on "defend" -- it should appear at the top of the menu with a line under it, and all possible "defend" actions should appear under it.

If we design it like that -- then #4.
User avatar
Burnsaber
Member
Posts: 85
Joined: Fri Feb 04, 2005 9:29 am
Location: Finland, Kuopio
Contact:

Postby Burnsaber » Tue Aug 15, 2006 7:32 pm

I find the number #3 most functional (haven't voted for it thought, i'm not sure if this is a developer's only poll, or something like that).

When i saw it, i instantly understood how it worked. You toggle the attack-defend-support-item with horizontal arrow keys and special stuff with vertical arrow keys.

I still have no idea how #4 is supposed to work.
I'm the 50th person who joined on these forums! I'm special!
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Tue Aug 15, 2006 7:53 pm

You know what, looking at #1 and #3 for the action menus, the only real difference is that #3 does not have the sub-menu extend directly down from the top menu, and the top menu is a bit larger. So they're really not that different at all.

Burnsaber wrote:I find the number #3 most functional (haven't voted for it thought, i'm not sure if this is a developer's only poll, or something like that).

When i saw it, i instantly understood how it worked. You toggle the attack-defend-support-item with horizontal arrow keys and special stuff with vertical arrow keys.


If this was a developer's only poll, then you wouldn't even see the thread. :) By all means, cast your vote :approve:


Burnsaber wrote:I still have no idea how #4 is supposed to work.


I guess I'm going to have to tweak it some more and then post up two shots of it to illustrate how it works. I'll do that either tonight or tomorrow. :)
Image
alenacat
Artist
Posts: 155
Joined: Mon Jan 16, 2006 11:11 pm
Contact:

Postby alenacat » Tue Aug 15, 2006 9:43 pm

I suppose 1 looks the best, but it's confusing because some seem to be more advanced design-wise. I don't like those HP numbers in yellow, they could be dark red/blue, or light and antialiased

I also really like 2 and if that had the same economical look 1 has, it could work the best. but I don't know, I think whichever works best and has everything needed :) asthetics can always be improved and menus slimmed down, I suppose. Hope that helps
User avatar
ChopperDave
Developer
Posts: 543
Joined: Tue Sep 05, 2006 4:07 pm

Postby ChopperDave » Wed Jan 17, 2007 1:44 am

Thread revivial!

I thought of some new ways to improve/add features to the battle mode UI. Some of the improvements are listed in the image -- the time meter is explained below.

Image

The time meter will be cyclic in nature, fairly close to a backwards 'C'. Portraits of the characters and enemies will be placed along side the meter. When a character's timer begins, he will move along the time meter until he reaches the end, at which point he will be able to choose an action. When he completes the action, he moves to the beginning of the meter, and begins again. This si similar to the IP gauge in Grandia:

Image

This method adds a new dimension of strategy since you can also see where the enemy is in his turn. This shouldn't require much extra artwork -- we can create a portrait for each monster group (i.e. skull for the undead, fly for insect monsters, etc.), or we can just shrink down the monster's battle sprite and use that!

Let me know what you guys think.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Wed Jan 17, 2007 5:58 am

Yay, my favorite thread :heh: Since ChopperDave is going to start coding all the finishing touches up on this soon, I think we need to come to a final, unwavering decision on this topic.



With regards to the post above, I like the idea of having a "universal" stamina bar that shows both characters and enemies. I've played Grandia II before (which uses this system) and it makes battles a lot more exciting and fun IMO. So I definitely want to give an :approve: to that idea, and I hope others approve as well. What I don't like is where it is and what it is. Circles are nice and compact, but they are more confusing. Furthermore, its in a far corner of the screen, far away from the character's stats. I don't want to have to move my eyes that far to see.


I have to say I :disapprove: of the box to display item/skill info. I don't think its a bad idea, but I don't want it to take a huge chunk of the screen like that. If we have something like that, I think that the item/skill text should be temporarily drawn over something else, -OR- can be a single line description that is displayed at the top of the screen.


FYI: the size of the status icons are 25x25 pixels, and the height of each character info is 25 pixels tall, so those status icons may not have their size expanded.



Since I'm all fired up, I decided to do another draft, even though I'm not at home and don't have all my nice cut-ups for constructing it easily. The draft below takes in elements from draft #1 and draft #4 at the top of this thread, and the universal stamina bar proposed in the previous post. I added some notes in the image like CD did:

Image

First lets look at the left menu. This is a hybrid of the left menu from drafts #1 and #4. When no action category is selected, the menu looks like it did in #4. But when an action type is selected (attack in this case), the icon + text quickly moves to the top of the screen, the other action types vanish, and the remainder of the menu becomes a list of actions and SP consumption (similar to how it looked in draft #1).


The bottom menu is mostly the same. I removed the ST bars for the character and shifted everything else over. This leaves a rather large chunk of empty space to put monster info, etc. I'm not sure exactly what would be good to put here.


Now the most obvious changes is the universal stamina/wait bar. Instead of a circle at the top left, I put a very long bar just above the bottom menu. This way it is closer to the other battle stats info. You can also see that I divided the bar up into four colors that represent the states that an actor can be in. The icons traverse from left to right, and once they get to the queued state they become "stacked" on one another so you can tell which actor is going to take an action next.

The only disadvantage about my horizontal stamina bar is that it takes up more of the active screen space for sprites, so if we want to have the same amount of space we have to slightly change our background image requirements to be moved "up" a little more.



So what do you all think? I think the biggest question right now is "do we want to have a universal stamina bar or not?". I :approve: to this idea and I think ChopperDave does too.
Image
User avatar
ChopperDave
Developer
Posts: 543
Joined: Tue Sep 05, 2006 4:07 pm

Postby ChopperDave » Wed Jan 17, 2007 3:23 pm

Solid design, but only three things bother me:

1) You have to move your eyes all the way to the top of the screen to see the item info. The item info should be as close to the item list as possible, since they go together.

On the other hand, for each item/skill they should only need to see the description once, so this design could work (we could also use this top area for displaying skill/item names when they're executed, just like FF6).

2) Don't stretch the action window the entire height of the screen. Then the player will have to move his eyes down a huge list to check all the possibilities. I want to keep this as compact as possible to avoid wear and tear on th eyes.

3) The circular time meter was chosen because it's more compact, but also because you can use both the inside and outside of the circle to display people's ST. If you look at the Grandia pic, you'll see how allies are on the inside track, and enemies on the out side. If we did a straight bar, then portraits would be stacking up on top of each other, making it that much harder to tell where your guys are.

Also, that golden color for the item/skill list is kinda ugly. Can we get some artists in here to vote on this? Otherwise we're going with programmer art. And we all know what that leads to.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Wed Jan 17, 2007 10:22 pm

ChopperDave wrote:1) You have to move your eyes all the way to the top of the screen to see the item info. The item info should be as close to the item list as possible, since they go together.

On the other hand, for each item/skill they should only need to see the description once, so this design could work (we could also use this top area for displaying skill/item names when they're executed, just like FF6).


I see your point, but like you said the player isn't always going to want to/need to read this info every single time that he/she uses the skill. Plus, the bottom of the screen is already pretty full of information, and we don't want it to become cluttered with even more info.

BTW: I'm still undecided over whether we will really want to/need to display skill and item info all the time in battle. Most other RPGs don't do this, and I don't see much of a reason why we would need to. Although it might be nice to allow the player to hit the "menu" key or something to bring up the info box. :shrug;

ChopperDave wrote:2) Don't stretch the action window the entire height of the screen. Then the player will have to move his eyes down a huge list to check all the possibilities. I want to keep this as compact as possible to avoid wear and tear on th eyes.


Agreed. Lets keep the height of it constrained to the combined height of the four character sprites placed on the battle field (4x128 pixels tall).


ChopperDave wrote:3) The circular time meter was chosen because it's more compact, but also because you can use both the inside and outside of the circle to display people's ST. If you look at the Grandia pic, you'll see how allies are on the inside track, and enemies on the out side. If we did a straight bar, then portraits would be stacking up on top of each other, making it that much harder to tell where your guys are.


I disagree. I think it would be less intuitive with a circle, since enemy portraits will move faster (since they are on the outside) than the character portraits which are on the inside. My horizontal bar covers almost the entire width of the screen, leaving plenty of room. Yes, there will be some overlap from time to time, but I'm willing to bet that its not going to be a big problem (we won't see several portraits grouped on top of each other). And if we're that concerned about overlap, we can just have characters on the bottom of the bar and enemies on the top.


I think the best way to figure out which is better is to see both in action, even though that will take a bit of work (and require some place-holder art). I'm not completely sold on either scheme, but I do still believe that the circular one will be more confusing to the player.

ChopperDave wrote:Also, that golden color for the item/skill list is kinda ugly. Can we get some artists in here to vote on this? Otherwise we're going with programmer art. And we all know what that leads to.


Well excuse me. :rolleyes: I just wanted to show that it would look different from the usual menu skin. I was trying to emulate the color of the menu in draft #1, but that was the most effort I was willing to put into it.
Image
User avatar
ChopperDave
Developer
Posts: 543
Joined: Tue Sep 05, 2006 4:07 pm

Postby ChopperDave » Wed Jan 17, 2007 10:40 pm

Although it might be nice to allow the player to hit the "menu" key or something to bring up the info box.


Yeah, like holding tab for a minimap or alt to bring up item names like in Diablo.

I think the best way to figure out which is better is to see both in action, even though that will take a bit of work (and require some place-holder art). I'm not completely sold on either scheme, but I do still believe that the circular one will be more confusing to the player.


Agreed.

Well excuse me.


That did not come out at all like I had planned. My bad. :bash:

Anyone else have input?
User avatar
Burnsaber
Member
Posts: 85
Joined: Fri Feb 04, 2005 9:29 am
Location: Finland, Kuopio
Contact:

Postby Burnsaber » Fri Jan 19, 2007 10:00 am

In my opinion, that round IP grip looks pretty, but I'd take the clarity of a nice line IP gauge anytime.
I'm the 50th person who joined on these forums! I'm special!
User avatar
eleazar
Senior Member
Posts: 110
Joined: Mon Sep 18, 2006 7:56 pm
Location: USA

Postby eleazar » Fri Jan 19, 2007 4:58 pm

Burnsaber wrote:In my opinion, that round IP grip looks pretty, but I'd take the clarity of a nice line IP gauge anytime.

I haven't personally used either type of interface, but i suspect that the long-line one would be much easier to use.

The latest mock-up seems to work better than previous ones, I strongly approve of putting the sub-options in the same box as the options as shown. (the various attacks displayed in same box after selecting "attack")

However, it seems like too much is being cramed into a small space at the bottom. With all the empty space at the top, i think you should let the interface at the bottom breathe a bit more.

Also have you considered what the maximum HP and SP could be? I'd recommend "999" or less for the sake of the interface. The white numbers over skinny HP/SP bars seem rather cluttered to me. Ideally the number could be placed in-front of the bar.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Sat Jan 20, 2007 7:07 am

eleazar wrote:However, it seems like too much is being cramed into a small space at the bottom. With all the empty space at the top, i think you should let the interface at the bottom breathe a bit more.



I thought the same thing actually. It looked nice and perfect before the universal wait-bar, but now it looks a little claustrophobic down there. I agree that it would look less cluttered if the stamina bar was at the top, but then the player has to move their eyes all the way up and down the screen, since both the stamina bar and the info in the bottom menu are things that the player will be looking at the bottom.

Also I would prefer that the top of the screen be kept free for other reasons. Instead of having still background images for battles, we have had plans to provide animations in the background. For example, in the scene in the prologue where the demons are attacking Harrvah while Claudius runs to the castle, a battle background for that map could show other knights battling the demons and fires actively burning structures to the ground.

IMO, having animated battle backgrounds is something HUGE, because it brings SO much more of the environment into the game. It won't be like other SNES RPGs where the only living entities in sight are your party and a few enemies. :cool: Its actually one of the features that I am most looking forward to with Allacrost.


eleazar wrote:Also have you considered what the maximum HP and SP could be? I'd recommend "999" or less for the sake of the interface. The white numbers over skinny HP/SP bars seem rather cluttered to me. Ideally the number could be placed in-front of the bar.


I was thinking something more like 99,999 max HP, less than 1000 seems too little to me. :| I do agree that the numbers on top of the bars seem cluttered. I think what we might be able to do is decrease the size of the number text and perhaps the size of the bar as well, and then place the numbers on top of the bar, to result in very little or no overlap of the two. That's something that can be easily changed later though since it doesn't really affect the other elements of the screen, so for simplicity since we already have this bar/# system working in the game, I think we should stick with it until we're ready to polish it off :) But I do agree that it needs to change.
Image
User avatar
ChopperDave
Developer
Posts: 543
Joined: Tue Sep 05, 2006 4:07 pm

Postby ChopperDave » Sun Jan 21, 2007 1:56 am

So do we have a "final" consensus on what we want to see for this iteration of the UI?
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Sun Jan 21, 2007 2:59 am

ChopperDave wrote:So do we have a "final" consensus on what we want to see for this iteration of the UI?


Well from the recent replies, it sounds like everyone approves of the last draft I made. Code-wise CD, I think you should work on the left-menu for now. I'll work on creating some decent looking artwork for the universal stamina bar and mini-portraits. Once I get back to Austin (in 4 days), it will be easier for me to create a comprehensive image draft since I'll have access to all the cut-ups of images. :)
Image
User avatar
eleazar
Senior Member
Posts: 110
Joined: Mon Sep 18, 2006 7:56 pm
Location: USA

Postby eleazar » Sun Jan 21, 2007 6:33 am

Roots wrote:
eleazar wrote:However, it seems like too much is being cramed into a small space at the bottom. With all the empty space at the top, i think you should let the interface at the bottom breathe a bit more.


I thought the same thing actually. It looked nice and perfect before the universal wait-bar, but now it looks a little claustrophobic down there. I agree that it would look less cluttered if the stamina bar was at the top, but then the player has to move their eyes all the way up and down the screen


No, i'm not recommending that part of the UI be moved to the top of the screen, just that you use a bit more space at the bottom. There's room to move everything up a bit, without loosing the space for animated backgrounds.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Tue Jan 23, 2007 2:00 am

I did some work with creating a decent looking stamina bar image.

Image

The stamina bar is 800x10 pixels. This is almost exactly as wide as the place holder stamina bar I put in the last battle draft, but about 60% as tall as that draft. I'm actually pretty pleased with how it turned out, so don't insult it too much. :angel: The only part I feel :| about is the choice of colors right now. I wanted the colors to feel somewhat like a normal progression, but I don't know if I pulled that off well. :| The four sections of the bar (and hence four states for actors) are of even lengths for now.

I also created a couple of actor icons, a character and an enemy.

Image Image

Each are 25x25 pixels. I found this to be a suitable size. They don't take up too much space, but aren't too small to see either. The character icon is an obvious copy/paste job of Claudius' head. :angel: I tried to make a "silhouette" of a spider but it didn't turn out to good. :ohnoes: I tried using a black border for characters and white for enemies to better distinguish the two, but I think a common black border would look better (the bright white border is rather distracting)


I tried combining the stamina bar and actor icons in various ways to see how they would go together.

Image

On the left in the yellow are four versions of the two icons. The first has pure alpha filled inside the box, the second has 75% alpha of the border color, the third 50% of the border color, and the fourth 0% alpha of the border color. I like the 50% alpha fill the best, so I used that scheme in the next sections.

The orange section shows what it would be like if both character and enemy icons were placed in the middle of the stamina bar. There is a large potential for overlap here as you can see, but keep in mind that this is just a "snap shot" and unless the two actor icons progress down the stamina bar at the same speed, the overlap is only momentary.

The red section shows a different scheme, where character icons are aligned at the bottom of the bar and enemy icons at the top. There is 0% chance for overlap here. The only (minor) disadvantage here is that the stamina bar takes up a little more space.

The green section is the "queued" state, where actors are simply waiting their turn to act. Here, I stacked the icons on top of another and intentionally created some overlap. I like this look better than keeping the icons standing side-to-side with each other. Note that this scheme with the intentional stacking only applies for the queued state, not the other areas.



Some final thoughts:

- The bar + icons look better on the battle background than the lightly colored forum background, so keep that in mind.

- We might want to adjust the distribution of how much length each state of the bar takes up. For example, we might want to make the "idle" section the longest and shorten the lesser used "cool-down" and "warm-up" states. We'll just have to see this in action in the game and tweak the bar as appropriate.

- If we go with a black border/fill for both enemies and characters, that means we can't have any black silhouettes for the enemy icons. They'll either have to be in color, or we'll have to figure something else out.

- I'm not sure if I like the color scheme of the stamina bar. Open to comments.

- 25x25 size for icons seems sufficient. If someone wants to try out other sizes (20x20, 30x30, etc.) feel free to give it a shot, but I'm not going to experiment further with icon size.

- A 50% alpha fill with the border color for actor icons looks the best IMO.


I hope to see some insightful comments/suggestions on this post, especially from artists! ;)
Image

Return to “Design”

Who is online

Users browsing this forum: No registered users and 3 guests