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
ChopperDave
Developer
Posts: 543
Joined: Tue Sep 05, 2006 4:07 pm

Postby ChopperDave » Tue Jan 23, 2007 2:21 am

I'm confused as to what the different periods mean on the stamina bar. For me, it seems like there should only be 3 of them:

1) Standard movement along the bar until you can choose your action.
2) The time between choosing your action and execution of it.
3) The cool-down period until you start moving on the time meter again.

What's the 4th period for?

I wanted the colors to feel somewhat like a normal progression, but I don't know if I pulled that off well.


I think you did. It doesn't have to be a smooth gradient from one color to the next -- in fact, the sharp decision helps the player know when he's entering and exiting a particular period.

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

:approve:

The background we choose for these icons depends mostly on whether or not they will be in color or black and white. I *highly* recommend we don't mix the two. If we choose colored icons (which is pretty much guaranteed), then a transparent background will work perfectly. It won't block the view of overlapped icons, and makes it simpler to gauge where you are on the meter.

The icons should definitely stack, not have separate sides like the red section of your bar shows (unless that was just to show the art).

We might want to adjust the distribution of how much length each state of the bar takes up


Well, obviously the idle part takes the most. But what we have to understand is that the visual length of the cool down period is going to be different then the time length of it. Visually it may be 75 pixels or whatever, but some characters may need to cool down for 5 secs, others none at all.

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.


No idea. We'll have to play with it. It boils down to how well the size of the image represents the char's movement on the bar. The smaller the more accurate, but harder to see. 20x20 seems fine -- it's double the height of the bar, so it'll be easy to see.

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


Oh. :(
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:39 am

ChopperDave wrote:I'm confused as to what the different periods mean on the stamina bar. For me, it seems like there should only be 3 of them:

1) Standard movement along the bar until you can choose your action.
2) The time between choosing your action and execution of it.
3) The cool-down period until you start moving on the time meter again.

What's the 4th period for?


The 4th period is the "queued" state. It means that the actor is ready to execute their action, but there are other actors that are in the queue before them. Recall that only one actor can be actually executing an action at a time, thus we need a queued state.
Image
User avatar
eleazar
Senior Member
Posts: 110
Joined: Mon Sep 18, 2006 7:56 pm
Location: USA

Postby eleazar » Tue Jan 23, 2007 2:50 am

a few comments:
The whole point of the bar is to show when a character or creature passes from one state of activity to another. If they actually cover the bar, they can't do that. Make the markers more like the ones in the round example, with a little point that shows where the character is on the bar, instead of forcing the player to guess, which part of the icon is actually marking the place.

I'd prefer to put the enemies and playable characters on different sides of the bar, just to make things easier to spot, because i think there is plenty of space. However, if you but them both on the same side of the bar, the icon shape could differentiate who is who, squares for one, circles for the other.

Overlap: the icons shouldn't shift position according to the location of other icons. They shouldn't be prevented from overlapping, otherwise it will look rather weird when one jumps over another. The selected character and enemy should show up on top, if there is overlap.

The background of the icons should be nearly or fully opaque, it will just make things harder to read if it's not.

The outermost part of the icon should be black or very dark.

I'm not sure what the 4 segments of the bar are supposed to represent, so i can't comment on the colors, but having an indistinct boundary makes it a little harder to use.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Tue Jan 23, 2007 3:32 am

eleazar wrote:The whole point of the bar is to show when a character or creature passes from one state of activity to another. If they actually cover the bar, they can't do that. Make the markers more like the ones in the round example, with a little point that shows where the character is on the bar, instead of forcing the player to guess, which part of the icon is actually marking the place.


Perhaps a little arrow could be placed above or below the icons to indicate its center position. I think that would be very easy to do.

eleazar wrote:I'd prefer to put the enemies and playable characters on different sides of the bar, just to make things easier to spot, because i think there is plenty of space. However, if you but them both on the same side of the bar, the icon shape could differentiate who is who, squares for one, circles for the other.


I disagree that we have plenty of space. We have a maximum of four characters that are 128 pixels tall each, so we need sufficient space to place all of those. I don't want to have to "crowd" sprites together to fit them in the battle. :( Anyway, I don't think that making one icon square and the other circle will provide much of an advantage to distinguish characters and enemies. I don't think that they will be difficult to distinguish at all in fact.

My preference right now is: square icons, on the same side of the bar, below the bar without overlapping the bar, but allow the icons to overlap each other. Maybe the icon arrow pointers can be green for characters and red for enemies to distinguish the two.

eleazar wrote:Overlap: the icons shouldn't shift position according to the location of other icons. They shouldn't be prevented from overlapping, otherwise it will look rather weird when one jumps over another. The selected character and enemy should show up on top, if there is overlap.


I agree :approve:. I was just testing the waters since some had voiced concerns over too much overlap.

eleazar wrote:The background of the icons should be nearly or fully opaque, it will just make things harder to read if it's not.

The outermost part of the icon should be black or very dark.


So 25% alpha then. I don't think the fully opaque Claudius icon looks very good. :|

eleazar wrote:I'm not sure what the 4 segments of the bar are supposed to represent, so i can't comment on the colors, but having an indistinct boundary makes it a little harder to use.


I was thinking the same thing, but it looked ugly when I didn't blend the colors together. I think that if the icons do not cover up the bar (ie they are put above or below it), the the different regions will be easy to distinguish.


I'll make a new mock-up based on these discussions. :angel:
Image
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Tue Jan 23, 2007 3:50 am

Here we go. Added green arrows for characters and red arrows for enemies, allowed overlap, and placed them completely below the bar. I also made the icon fills to be 75% opaque with black. Better? Worse? I still think 50% black opaque looks the best for icon fills...

Image
Image
User avatar
ChopperDave
Developer
Posts: 543
Joined: Tue Sep 05, 2006 4:07 pm

Postby ChopperDave » Tue Jan 23, 2007 5:43 am

As far as background color of icons goes, I really don't know.

The arrows look good, but we should make them larger. I think they should actually touch the bar (not cover it though) so the player does not have to draw that imaginary line between the arrow and the bar.
User avatar
Burnsaber
Member
Posts: 85
Joined: Fri Feb 04, 2005 9:29 am
Location: Finland, Kuopio
Contact:

Postby Burnsaber » Wed Jan 24, 2007 9:57 am

Maybe you could "turn" those squares 90 degrees? Then it would be pointy and no need for arrows.

You know, like this (but square, text is weak when making geomaetric patterns):

/\
\/
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 » Thu Jan 25, 2007 10:13 pm

- I agree that the arrows should be made larger (and/or perhaps brighter)

- I don't think that putting the portraits in diamond shape would help us save space. It effectively makes the icon image smaller, since the width and height do not change, but the amount of viewable area inside does.


Alright, well I'm back in Austin now and have access to my battle layout mockup image now. I took into account the recent decisions in this thread and the battle design topics thread.

Image

(The stamina bar in the upper left is there to just show its present. I couldn't find a good position for it yet).

As I suspected, it is going to be a little difficult to find space for the stamina bar. For ease of explanation, I added the battle grid (64x64 tiles used to better explain the space for the battle) as well as some shaded areas. Here is a distribution of the space:

- Bottom two rows are completely taken up by permanent status info
- Left three columns are unoccupied by sprites, and consist of the action selection menu when it is present
- Top two rows are unoccupied by sprites and used for the "depth" aspect of the background
- Green shaded area is where character sprites are located
- Yellow shaded area is a "no mans land" between characters and enemies
- Red shaded area is where enemy sprites are located

Now, the sprite area *must* be 8 tiles in height in order to fit all four characters on the screen. The combined width of the stamina bar + icons is going to be about one tile high. If we tried to place the bar on the bottom of the screen just above the bottom menu, that means the sprite space has to be moved up one tile (or else the sprites and stamina bar would overlap, and I'm not sure if we want that). If its bumped up one tile though, that leaves only one tile row at the top of the screen for the background (which is insufficient IMO) and requires changes to our background image so it looks like the sprites have their feet properly planted on the ground. So things are not looking good for putting it at the bottom. :|

So then I thought maybe we could put it at the top. The disadvantages of putting at the top are: (1) It covers up a fairly important part of the background image, (2) Its located very far away from the other battle info, (3) I was hoping to use the top row of the screen to display temporary text, such as descriptions of skills/items or possibly short dialogue text. So the top doesn't seem like a good option either. :uhoh:


Taking a look at the present layout, I suggest the following:

- Orient the stamina bar to be vertical instead of horizontal
- Place the stamina bar at the far left column of the screen, just above the bottom menu
- Move the action menu and sprite grids one tile to the right, shaving off a column of tiles available for the enemy sprites

The disadvantage here is that we have less space to place enemies, but I think this is an acceptable loss (we still have a pretty big area for them to be placed). The advantage is that the stamina bar is located close to the other menus, and I also don't think it will look too cluttered this way.


I'll post a draft illustrating my idea later tonight or tomorrow. But for now I wanted to throw the idea out there and see what you guys think. :)
Image
User avatar
ChopperDave
Developer
Posts: 543
Joined: Tue Sep 05, 2006 4:07 pm

Postby ChopperDave » Thu Jan 25, 2007 10:25 pm

The green and yellow regions are too narrow, and the red region is too wide. Give each of the green and yellow regions one more column of tiles and shave two off the red.

That still leaves plenty of room for enemy sprites w/o putting them inches for the character sprite (which the current regional division would allow). Simply move them to the right more (this will also align them more with the enemy info box, which is handy.

While the vertical time bar is a good idea, there is simply no good place to put it. Putting it to the left of the menu seems counter-intuitive, and placing it to the right interferes with watching the battle (b/c the animations will draw your eye away from battle.

Having it horizontal at the bottom is still our best option because then the player's eyes are drawn there naturally, which is good since that's where all the critical info is.

That being said, character sprites could easily shift up one tile. Now, I know we all like the "3-D" background to give the illusion of depth, and moving the chars up one space actually helps us. It puts a foreground object against the background, enhancing the illusion of depth.

I don't think that putting the portraits in diamond shape would help us save space. It effectively makes the icon image smaller, since the width and height do not change, but the amount of viewable area inside does.


I agree. Though it was a nice idea.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Thu Jan 25, 2007 10:59 pm

ChopperDave wrote:The green and yellow regions are too narrow, and the red region is too wide. Give each of the green and yellow regions one more column of tiles and shave two off the red.


I agree that the yellow region was too narrow, but I disagree that the green area is too narrow. There is plenty of space for characters to be placed.

ChopperDave wrote:While the vertical time bar is a good idea, there is simply no good place to put it. Putting it to the left of the menu seems counter-intuitive, and placing it to the right interferes with watching the battle (b/c the animations will draw your eye away from battle.


I can't say I agree with you here, although I think that perhaps a vertical stamina bar on the right of the screen would look better than one on the left, due to the counter-intuitive nature of the menu as you suggested.

ChopperDave wrote:Having it horizontal at the bottom is still our best option because then the player's eyes are drawn there naturally, which is good since that's where all the critical info is.

That being said, character sprites could easily shift up one tile. Now, I know we all like the "3-D" background to give the illusion of depth, and moving the chars up one space actually helps us. It puts a foreground object against the background, enhancing the illusion of depth.


I disagree for reasons I stated earlier, and I do agree with eleazar now that the screen would look too cluttered if it was in that location. I think a vertical bar fits more naturally with the other elements in the layout.

Actually, foreground objects are already placed against the background. The third tile row from the top is actually a part of the depth in that background image (see how that dark tunnel entrance begins there?). If you place the "feet" of a sprite on the third tile up, that looks unnatural because in this background, it would appear as they are standing on the wall. For that reason, there is a (probably unwritten) rule that sprites of 1 tile in height can not be placed at the top.



Image

Anyway, here is another mockup testing out the vertical stamina bar idea. I also did the following changes:

- Added one extra column of "no man's land" between characters and enemies
- Shrunk stamina bar length from 800 pixels to 512 pixels
- Removed one colored region of the stamina bar. Instead now we have simply: idle, warm-up, and queued (removed the cool-down part, since we don't really need to represent that visually)
- Made the actor stamina icons have bigger pointer arrows to their location on the bar

With this scheme, the area for enemies is 512x512 pixels, meaning that the largest possible enemy we can have on the battle field would be that size.


The stamina bar might possibly look better if it was on the right-hand side of the screen, but I'm not sure. Can we have some more comments on this please? :angel:
Image
User avatar
gorzuate
Developer
Posts: 2575
Joined: Thu Jun 17, 2004 3:03 am
Location: Hermosa Beach, CA
Contact:

Postby gorzuate » Fri Jan 26, 2007 8:17 am

Here're some comments. I'm not particularly fond of that last mockup. It seems like there's less and less room for the actual battle.

I'd say make no-man's land 1 column wide, and put the stamina bar on the right side of the screen. Having the action menu just floating there seems weird to me. When it's on the side I think it looks better.
Image
User avatar
Rain
Musician
Posts: 1525
Joined: Sun Aug 08, 2004 6:43 am
Location: Granz

Postby Rain » Fri Jan 26, 2007 9:51 am

gorzuate wrote:Here're some comments. I'm not particularly fond of that last mockup. It seems like there's less and less room for the actual battle.
Given the length of the screen in coordination with the height and width of the characters/monsters (and the fact that likely there won't be any need for movement in any case and if there is, we don't want Claudius to have to run a marathon in order to reach the enemies anyways.) with the way things look now, I would say the less empty space the better.
'When Zeon lost his powers, he fell to Earth, and created a giant crator where he hit. His moan destroyed the mountains and the crater was buried by the debris.'

(of Zeon)

Image
User avatar
Jetryl
Artist
Posts: 1485
Joined: Fri Aug 26, 2005 7:35 am
Location: Southern Minnesota, USA

Postby Jetryl » Fri Jan 26, 2007 10:00 am

gorzuate wrote:Here're some comments. I'm not particularly fond of that last mockup. It seems like there's less and less room for the actual battle.

... Having the action menu just floating there seems weird to me. When it's on the side I think it looks better.


Emphasis mine. Most of the mockups that have been in this thread guzzle up screen space like ... hephalumps and woozles. I think that is one of the primary issues you need to tackle; you need to do something that will convey the same information in as little space as possible.


Here's a mockup that tries to put the interface where it will least impede the actual battle imagery; including when the menus expand for additional actions/techniques.

[img:1024:768]http://www.allacrost.org/staff/user/jetryl/Misc/battle_system4_7.jpg[/img]
User avatar
Rain
Musician
Posts: 1525
Joined: Sun Aug 08, 2004 6:43 am
Location: Granz

Postby Rain » Fri Jan 26, 2007 11:18 am

Looks great! :approve: I still think there is way too much difference between Claudius and the monsters. Oh well...
'When Zeon lost his powers, he fell to Earth, and created a giant crator where he hit. His moan destroyed the mountains and the crater was buried by the debris.'

(of Zeon)

Image
User avatar
Jetryl
Artist
Posts: 1485
Joined: Fri Aug 26, 2005 7:35 am
Location: Southern Minnesota, USA

Postby Jetryl » Fri Jan 26, 2007 1:27 pm

Rain wrote:Looks great! :approve: I still think there is way too much difference between Claudius and the monsters. Oh well...


If you mean "distance, on the ground", then yeah - I totally think that the monsters should be moved to where they were in Roots' most recent demo. Or more accurately; "most monsters should always be placed near the main character, unless those spots are already taken." Leastways until we have animations of things running. :|


I just didn't think that was the focus of this thread (and if it starts becoming the focus, then the interface designs being worked on are encumbering other design work).


On a side note; no, I'm not "strongly vouching" for the diamond-shaped dude icons, I'm just demonstrating that they could be done and yet save space. Not space inside the icon, but space because the icon can be overlaid on the bar and not really obscure it, rather than having to sit a full half-or-more of its width away from the bar.
User avatar
eleazar
Senior Member
Posts: 110
Joined: Mon Sep 18, 2006 7:56 pm
Location: USA

Postby eleazar » Fri Jan 26, 2007 4:04 pm

Note that in jetyl's mock-up the whole vertical 512px is not used for the heroes. I believe they look better like this, staggered. Thus 512px is not absolutely needed for the battle-ground.

Unfortunately he chose the worst version of the menu. While the small size could be imitated, the weird layout should be avoided. When you select the "attack" button it should become highlighted, not duplicated. In general i prefer the all-in-one-box menu.

The status bar takes up the same amount of space if it's at the top or bottom. To shorten eye-travel distance, as mentioned previously, both parts should be at the top or bottom.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Fri Jan 26, 2007 7:25 pm

eleazar wrote:Note that in jetyl's mock-up the whole vertical 512px is not used for the heroes. I believe they look better like this, staggered. Thus 512px is not absolutely needed for the battle-ground.


True, but I still don't like putting the stamina bar at the bottom of the screen. It looks cluttered, as you said so yourself. :)


eleazar wrote:Unfortunately he chose the worst version of the menu. While the small size could be imitated, the weird layout should be avoided. When you select the "attack" button it should become highlighted, not duplicated. In general i prefer the all-in-one-box menu.


That menu could be easily modified to not do the duplication. I don't think its a poor menu necessarily.

eleazar wrote:The status bar takes up the same amount of space if it's at the top or bottom. To shorten eye-travel distance, as mentioned previously, both parts should be at the top or bottom.


Or on the right? :angel:

Image

I made another mockup here with the staggered characters. I moved the stamina bar to the right hand side of the screen and aligned the action menu with its top location instead of its bottom (it looked weird aligned to the bottom).



But honestly, I think I like Jetryl's mockup the best so far. It makes the screen feel so much less cluttered than trying to cram everything on the left and the bottom, and makes it easier for my eyes to focus the attention on the action. It does take up a bit of the depth of the background, but not so much as to obstruct the scenery IMO. I also like the larger stamina icons for the actor. Yes, there's more "eye traveling" going on here, but I think the fact the screen looks so much more open and the menus more compact negates that. The only caveat I find is that if we were to display info about a skill or item or show dialogue between characters, then the screen might appear rather cluttered. :|


So, lets come to a decision here. Where should the stamina bar go? Up, down, left, or right?
Image
User avatar
Drakkoon
Developer
Posts: 173
Joined: Thu Jan 11, 2007 12:54 am
Location: Montréal, Qc

Postby Drakkoon » Fri Jan 26, 2007 9:45 pm

My vote goes to the right.

Putting it at the bottom clutters it too much.

Putting it at the top with Jetryl's icons looks very good, but since there is nothing to look at at the top of the screen, it does add eye movement and takes the place of the "message box".

Putting it to the left is yuck!

I think putting it to the right doesn't look bad and doesn't add too much eye movement. You'll usually look to the right to choose your attack point on the monster, so giving a little look at the bar won't be too hard.
User avatar
Rain
Musician
Posts: 1525
Joined: Sun Aug 08, 2004 6:43 am
Location: Granz

Postby Rain » Sat Jan 27, 2007 1:27 am

Right, for reasons bought up by Drakkoon.
'When Zeon lost his powers, he fell to Earth, and created a giant crator where he hit. His moan destroyed the mountains and the crater was buried by the debris.'

(of Zeon)

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

Postby Roots » Sat Jan 27, 2007 3:01 am

Another vote for right, possibly with the larger diamond shaped stamina icons that Jetryl made.
Image

Return to “Design”

Who is online

Users browsing this forum: No registered users and 4 guests