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
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle Design: A new idea

Postby Roots » Sat Sep 17, 2005 9:45 pm

visage, I merged your post here since this is pretty much *the* place to discuss the battle layout, and it doesn't make sense to talk about it in more than one thread. :)

visage wrote:1) Remove the bars on the left and the bottom.  They are very cluttered looking.  Maybe its how they are designed right now, but they take up a lot of the screen, unecessarily.  What I am thinking is maybe have the player portraits on the left side with the bars under them.  Personally, I have never been a fan of bars.  I would love to completely get rid of them in favor of a more visual system -- sure, it removes some of the strategy of knowing when to heal players, but I think that could be for the better -- especially if we had some kickass art.  For example, we already of the whole health blending down ... what if we had sprites "kneel" while they waited to be ready again?  We would need something a little more complex than just that, as we are allowing players to attack even when the character is not at 100%.  Maybe it would depend on weapon height, or something.  When Claudius is tired, his sword is down.  When he is 100% ready, his sword is up and wielded.


> if you notice, most 2D RPGs have even more space taken up by menus than what we have here. Just to keep things in perspective.

> Do you mean have ALL the player portraits (maximum of 4) on the left side? The player portraits wouldn't fit if they were all on the left side at the same time unless we make them smaller (but I like having big, pretty character portraits!). Safir-Kreuz has also got the Claudius portraits together so it would suck if we had to resize them now.

> I'm not a huge fan of bars either, but you need *some* way of informing the player of the status of his/her party. In my original draft I kind of used a circular bar-type thing around the portrait, but that won't work out very well.

> Your ideas about using sprite visuals to eliminate the bars is not a bad idea. But do you realize how much more art this is going to take to do this visualization? We need to be able to transition from one set of sprite frames to another set smoothly, and with some of the suggestions you are making here I think its simply too much work on our art team (which is already suffering from being understaffed) just to eliminate a few bars. The net gain is not worth the effort.

> Adding on to my last point, when you introduce this visualization thing, the player has to interpret the data on the screen more. A bar is simple to interpret. Blended portraits/sprite frames are much much harder on the player to know "oh, my character is at around 60% health and 80% wait time". Personally speaking, I like to be able to interpret my data swiftly and accurately so I can formulate an appropriate strategy. Like I said I don't really like bars that much either, but I will gladly take them over some non-intuitive graphics blending system anyday.


Coincidentally, there was a post on GameDev about this type of "lose the numbers" theology a few weeks ago, so you're definitely not alone in this. If you can propose something that's feasible to do and also easy for the player to interrept the data, then I will give that strong consideration over the bars. Its not an easy problem to solve, however. :|


visage wrote:2) The number on the top left has to be moved.  Perhaps on the player portrait.


Agreed. I never liked it off on the top-left in the first place. Portrait sounds like the most logical location to me.

visage wrote:3) The selection menu.  Okay, this is going to be totally out there, but what if instead of a menu, we used a "symbol" system that was a radial menu.  So when you are selecting a player, his portrait comes up in a center circle (depends if the portrait exists elsewhere on the screen) and around that circle is evenly distributed icons -- "attack, item, defend ... et cetera."  When the player chooses one (selection circle going clockwise or counter-clockwise depending on arrow keys), the icons quickly fade out, and a new set fades in.  So if he hits "attack", perhaps the next icons to come up would be "Sword Attacks, Magic Attacks, et cetera."  The icons should be fairly simple, and speak for themselves, but there could also be a status bar at the bottom -- something very simple, to give a text description of what you are about to click on.  

Pros and cons of this.
Pros: Clean looking, easy to manuever
Cons: Requires lots of small images, and makes specialized attacks hard to define without text.


> I don't really like the idea of the action icons popping up over the character portrait. I'd like the character portrait to remain as clean as possible.

> But I do like your idea of circles! That's a pretty neat concept, but my only worry is what happens when the character has A LOT of skills? You'd have to make your circles really small so they could fit in that 128x128 pixel space, and if they are that small you wouldn't be able to see the skill icon very well. That's the primary downfall I see of this method.


I think this idea has some merit to it though and it might be worth exploring as an alternative to the square action selector type graphic we've got going on now. If I get a chance I'll try drafting up some visual ideas of what I think this system could be, but I really would rather work on coding today. :angel:
Image
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Sun Sep 18, 2005 9:43 pm

A valid argument for the status bars.  I am going to let this one stew.

Anyway, as far as the circles go, you don't necessarily have to make them around the player portrait.  When you choose a player, the circles could be around the entire screen, or around the battle field ... or the more skills you get, the wider the circle becomes, something like that, always starting in the center of the screen with 1.

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

Postby Roots » Sun Sep 18, 2005 10:28 pm

Yeah, I thought about that too (the circles going across the entire screen). But then isn't that even MORE obstructive than the window at the bottom? :uhoh: That kind of defeats the whole purpose of doing it like that, don't you think?


Is our battle layout ideal? No. An ideal layout would be able to give the player exact, real-time information without "soiling" the battle artwork itself. Is that feasible? No way. (Unless we plug directly into the players brain and feed them the data they need). We have to compromise, and honestly I think that we've just about reached our limits. I still think the design is much better than most SNES RPGs, like Final Fantasy Vi which had pratically the bottom half/third of the screen as nothing but a menu!
Image
Sylon
Artist
Posts: 760
Joined: Wed Apr 27, 2005 1:03 pm
Location: Cheyenne, WY

Postby Sylon » Mon Sep 19, 2005 3:16 am

I don't feel like reading all of this new battle layout mumbo jumbo  :eyespin: .

So if any of it affects me, let me know!
-[Sylon Shanings]-, A Servant of Allacrost.
I owe my allegiance to Roots and only Roots! Hail to the dictator!

"DAD GUMMIT I NEEDA GET MY TORUS DOWN." - Sylon's art jabber
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Mon Sep 19, 2005 3:17 pm

But my point is that the circles are only there when making a choice about what action to take next, so the screen would only be filled a fraction of the time, instead of all the time with the menus.
User avatar
gorzuate
Developer
Posts: 2575
Joined: Thu Jun 17, 2004 3:03 am
Location: Hermosa Beach, CA
Contact:

Postby gorzuate » Mon Sep 19, 2005 5:36 pm

visage wrote:But my point is that the circles are only there when making a choice about what action to take next, so the screen would only be filled a fraction of the time, instead of all the time with the menus.


Ah but there you are mistaken visage. What you propose with circles only being there a fraction of the time is what we had in mind for the menus. They would pop up only when needed.
Image
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Mon Sep 19, 2005 6:05 pm

gorzuate wrote:
visage wrote:But my point is that the circles are only there when making a choice about what action to take next, so the screen would only be filled a fraction of the time, instead of all the time with the menus.


Ah but there you are mistaken visage. What you propose with circles only being there a fraction of the time is what we had in mind for the menus. They would pop up only when needed.



Exactly. :approve:
Image
nunvuru
Web Designer
Posts: 64
Joined: Sat Sep 17, 2005 12:57 am

Postby nunvuru » Thu Sep 29, 2005 1:15 am

Well, while looking over this thread I was having a hard time visuallizing so I decided to throw something together with a few of my own ideas and modifications.

Changes:
1. There wasn't any backgrounds for me to work with so I just made this temp one up. Only for placement purposes so don't mind that.
2. Over the character is a select icon to indicate current player to control. And with it the portrait is highlighted (don't mind any colors for any pic as this is all just temp)
3. No side bar (you'll see it in the next pic)
4. All 4 portraits and stats displayed (I used FF7 portraits since we only have 1)
5. Wait bar moved to side (sort of like character is charging UP, no % added yet if at all)
6. No swap # in the corner (my idea was to use "swap cards", you can see them below the stats, I figured they would dissapear after each use, just an idea!)
7. Party and enemies farther apart (looked better with layout)
Image

Changes:
1. Action selection comes up in the middle instead of the bottom (I saw something like this in a game the other day and thought it was cool and it might could work for us)
2. Temp icons for action selection
Image

Changes:
1. Action selection now highlights chosen action in blue and displays available actions.
2. Chosen action pops up available actions in a box in the middle of the fight. This box can scroll and is used for all 4 actions.
3. Added cursor (more FF, :D )
Image

Beyond those things I thought it might be cool to have the middle button of the action selector be the first thing highlighted and also the previous action list so the player can jump right into a list of previous actions. Now this is all temp, I just want to get some comments.
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Thu Sep 29, 2005 1:42 am

uNF!!!  I really, really like that.  A lot.  Like woah.  Those swap cards are slick.  I like this design way more than the others (maybe its the pretty graphics...).  But, the status bars do not mix well with the character sprites.  Too futuristic looking, as well as the currently selected character.  

I do like the verticle bar next to the face though.  

There is a lot of open space in the middle though, which concerns me.  I don't like open space -- I mean, when you aren't choosing something, that space is just going to be there.  I can't think of what else to do with it though...  

I mean, check the distance here versus what you show...
Image

There is just too much blank space.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Thu Sep 29, 2005 4:40 am

Good to see some fresh ideas thrown around here. :) I kind of like the drafts you made up nunvuru, but allow me to point out some fallacies with them.

1) Swap cards are on a global basis (not a per-character basis), thus having them under each character is redundant.

2) Status icons??? Will they float around the player (I find that kind of annoying) or go somewhere else?

3) The mock-up looks great because there's no enemies in the middle. What happens when we have a large number of enemies (or just a few large enemies)? The selector graphic and menu will completely cover them up!!! :disapprove: This is in contrast to my latest mock-up, where no battle sprites is ever covered up by a menu.


Although I kind of like having all the portraits being displayed, it eats up a lot of valuable screen space. Although I do really like the HP bar + number and SP bar + number, plus the verticle wait bar! :approve:


visage wrote:There is just too much blank space.


Its starting to annoy me a little when people say this now (since its been said many many times over). What if I start a battle with 5 enemies, then I kill 4 of them? Oh noes! There will be blank space on teh screen! :ohnoes: Honestly now, I don't feel that "too much blank space" is a valid complaint at all. Of course you will have blank space! Unless you try to fill the space with happy bunnies popping up from the ground or something. Tell me one reasonable thing to fill that blank space with, yet still have the space big enough so that different numbers and sizes of enemies can cleanly be placed in them, and I will shut up. But until someone shows me something like that, I am further disregarding all "too much empty space" arguments. Besides, our battle bakcgrounds will kick ass so they will be nice to look at. :)



By the way, what game is that visage? :angel:
Image
nunvuru
Web Designer
Posts: 64
Joined: Sat Sep 17, 2005 12:57 am

Postby nunvuru » Thu Sep 29, 2005 1:11 pm

WAM! Roots attacks  :D  I told you it was rough and I didn't take into account all previous chatter in this thread so I apologize for any inaccuracies or "fallacies".

1. I kind of figured that and thought about it again after i'd uploaded them. It doesn't change their design, only their location on the screen and I was more intent on showing their design/function so if you want to use it i'll find somewhere else to put them.

2. First off, status icons? You mean that small trianglur icon? If so, it can anywhere I guess but if you notice the FF games they use it to tell you which player is selected. It only appears when you're choose the character to control. I didn't add it as a suggestion, only as an added touch so hate and chage it as much as you like  :D

3. Boy you love that little thumbs down icon. It's so descriptive. Well, again, rough draft. The point of this was to see the potential, not exactly what I put. The menu could go vertical or to the top, become transparent, be smaller in size, cover up character portraits, cover up characters, switch places depending on selected action, etc., etc. There are options if you want them, if not that's fine too. Just adding something to the mix. As for the selector graphic, it's already transparent and very small. I wouldn't think creatures of any kind would come out that far, but again there are a thousand places you could put it,  just 1 possible place is right in front of each player when it's their turn to go and dissapear when done.

4. I don't see a lot of wasted space because I haven't yet see one of your mockups show it being used. So i'll have to take your word for it that something will go there. Even if it is used for something else, with any design so far you are still covering something up, no matter how short of a time. However, another way to use them would be to have only 1 portrait up at a given time based on who's doing the action. Using previously suggested ideas and designs it could go like this:

- Status icon shows which character is being controlled.
- The portrait and action selector "slide in" from the bottom
- Player selects attack and the available choices "slide in" from the bottom next to the other 2.
- Player chooses attack and enemy to use it on
- All 3, portrait, action selector and available choices menu slide out to be replaced with the next controllable characters portrait and action selector

It would accomplish what you're saying and be almost the same style as yours. Anyways, take and leave whatever, just wanted to add some ideas to the pot  :approve: .
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Thu Sep 29, 2005 3:25 pm

Roots, I totally disagree with you about the space thing.  It is a very, very valid complaint.  With screens as big as they are, dead space is a huge issue.  We are not talking about battles with 30 zombies -- that is just annoying and redundant.  5, 6 enemies max.  So you will probably have 10 characters on the screen at once.

In our previous mock up, there was far less free space that nunvuru's.  You see, in the picture I posted (some FF....), even when all but one chracter dies, the characters are still big enough relative to the background that they look...close.  I mean, in nunvuru's, you could fill the screen with 4 PCs and 8 enemies, and they would STILL be standing far away.  Unrealistically so.  I am not saying that there should be something in the middle, I am saying that we need to find a way to move the characters closer together.  

So what if you moved the portraits to the left side, behind where each character is?  That would force the characters and enemies closer together, removing the dead center space.  Having more verticle space shouldn't be an issue -- the artist can just make the skyline lower or something like that (which would allow for some possibly cool weather effects).  With the portraits behind the PCs, nothing will ever get covered up, either.  

As for the swap cards -- ah well.  Maybe there could be a global set of swap cards or something below all the portraits (if they are vertically on the left).
User avatar
Balthazar
Former Staff
Posts: 732
Joined: Sun Jun 20, 2004 7:12 pm
Location: Penticton, BC
Contact:

Postby Balthazar » Thu Sep 29, 2005 9:10 pm

Status icons refer to being poisoned, burned, slowed, etc.
"Homogenized?  No way, I like the ladies."
60 Tauren Shaman
31 Orc Warrior
21 Tauren Druid
18 Night Elf Hunter
12 Orc Warlock
Other various abandoned alts.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

No more bars?

Postby Roots » Tue Dec 13, 2005 8:30 pm

This idea just popped into my head while I was replying to a discussion about the battle code in the staff forums. Most RPGs make use of variable length bars to convey information to the player. For example, the wait bar indicating how long the player has to wait before a character can initiate a new action. Or a HP bar indicating the character's health. And sometimes the player has the option of switching between displaying the bar or displaying numerical values (but usually you can't display both).


Bars are fine and all, but maybe we should try something different (or maybe not). What if instead of bars, we convey the same information to the player with colors, or percentages? Lets imagine we have a small graphic (maybe a circle) for each of our three types of "bar info": wait time, HP, and SP. If my HP is really low, the circle would be dark red. If my HP is really high, it would be light green. If its at 100%, there would be a glowing border around the circle. Percentages can also be very useful, and can be color-coded just like the circle graphic.


Why would we want to throw away the well-established "bar standard"? Well, lets think of what traits the best solution would have for conveying HP/SP/wait time to the user. We would want this solution to be:

- Intuitive. (A quick glance should tell the user everything they need to know)
- Easy to read. (Don't make things too small or cluttered)
- Space economical (We don't have a huge amount of screen space to devote for this info)
- Informative. (Tell the player everything they need to know, including current value, different between current and full value, etc.)
(I may be missing some criteria...)

So lets examine four possible solutions: bars, strictly numeric, indicator graphic, and percentages and see what criteria they meet:


Bars
Refers to your standard dynamic length bars that we've seen everywhere.

Is it intuitive?
It's extremely intuitive. Probably the main reason why its used everywhere.
Is it easy to read?
Definitely.
Is it space economical?
Maybe. It takes up a lot of horizontal space, but they can probably be compacted and still work alright.
Is it informative?
Not really. All the bar information tells you is really your percentage of current value to maximum value. It doesn't give you numerical information, which is the main reason why I dislike them. I could have a character at 25% bar with 1000 health and a character at 60% bar with 200 health and its difficult to know which one I should heal first.


Strictly Numeric
Refers to the exact number of current and max. Eg. HP: 1268 / 2819

Is it intuitive?
Doesn't get any more intuitive than this. :)
Is it easy to read?
Not really. It's sometimes very difficult to do a comparison of the current value to max value.
Is it space economical?
No not at all. In fact it becomes really probalamtic when your characters grow and you need to have sufficient space to accomidate for higher and higher values (ie starting the game at 60HP, and after 30 hours of play being at 75925 HP).
Is it informative?
Yes, especially when conveying the current value and max value. But it is very poor and conveying the difference/percentage between the two.

Indicator graphic
Refers to the little circle or other graphic whose color and/or border changes to indicate the current value.

Is it intuitive?
Maybe. :| I've never seen it in a game before personally. I think it would be awkward for players at first, but after getting used to it they might be able to use it more intuitively.
Is it easy to read?
As long as the player isn't color blind. :heh:
Is it space economical?
It is very economical.
Is it informative?
It attempts to convey both the current value (by showing green color versus red color) and the current color can be compared to both the max and min. But it would be difficult for a player to get an accurate representation of this information.

Percentages
Refers to nothing more than the percentage of current value over total value (Eg. HP: 5/25 = 20%)

Is it intuitive?
It is very intuitive.
Is it easy to read?
Yes, as long as the font is large enough.
Is it space economical?
Yes, it only requires 4 characters.
Is it informative?
It is for conveying the different of current value to maximum value to the user. But it doesn't tell you the current or max values themselves.





Conclusion
We could debate this all day if we want to, but I think the best solution is meeting all of those criteria by selecting more than one option. Personally, right now I think the best solution would be to use the following:


- Strictly Numeric (only for the current value but not for the max. Ie. HP: 60 versus HP: 60 / 240)
- Percentages
- Color coding of both numeric and percentage text


Some may argue that that will clutter up the screen with too much text, which is really the only major drawback I feel this solution has. So maybe it would be better to provide 2 solutions, the one above, and also a graphical solution. :shrug: Anyway I've rambled on about this for long enough already. Back to :hack: for me :D
Image
User avatar
visage
Former Staff
Posts: 711
Joined: Sat Sep 03, 2005 9:19 pm
Location: USA
Contact:

Postby visage » Tue Dec 13, 2005 9:17 pm

Color coding plus numeric seems perfect to be, at first glance.  The issue, in my mind, becomes that the eye is used to picking out discrepencies.  Things may be hard to read when they are all red, and two are three are green.  Your eye more naturally floats over everything, making data difficult to pick out.

I think this is why most games offer both numbers and bars, but don't use a color coded system.
User avatar
Shadow
Newbie
Posts: 16
Joined: Mon Jan 03, 2005 4:51 pm

Postby Shadow » Tue Dec 13, 2005 11:09 pm

The solution in Diablo was quite good a ball filled with liquid showed the stats it was  easy to acknowledge (and despite of the speed of the game really good visible) and it was a nice eye candy how they were dipslayed.
He was skillful enough
to have lived still,
if knowledge could be set
up against mortality.
Sylon
Artist
Posts: 760
Joined: Wed Apr 27, 2005 1:03 pm
Location: Cheyenne, WY

Postby Sylon » Sat Jan 14, 2006 9:20 pm

Pardon the bump up of this old thread but I got a question.  What will be the pixel dimensions of the battle scenes?  Like 1024 x 768 or something?

I'm asking because with the wide-open spaces on the scorpion (and soon other big monsters) I will have to use more shades of colors to make smooth transitions from shade to shade.  BUT I don't wanna use more shades so what I'm doing is dithering, where I combine 2 shades into patterns to give an illusion of a new shade when in fact it is just 2 different shades mixed together.

If the battle scene dimensions are like 800x600 the dithering will become more visible.

The reason I don't want to use entirely new shades is because I don't want to have to keep track of all of them (long story but keeping track of the different shades helps a lot).

I suppose this is one negative point about making a new scorpion as opposed to using the concept art, but anyway I'm willing to do it.
-[Sylon Shanings]-, A Servant of Allacrost.
I owe my allegiance to Roots and only Roots! Hail to the dictator!

"DAD GUMMIT I NEEDA GET MY TORUS DOWN." - Sylon's art jabber
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Sat Jan 14, 2006 9:34 pm

Allacrost runs in mutliple screen resolutions (800x600, etc). Our default resolution is 1024x768 though, so you can just design your art for that and the video engine takes care of scaling, etc. Yes, things will look more grainy/pixelated at lower resolutions, but we just have to live with that. But at 1024x768, your art will be placed on the screen pixel for pixel. :approve:
Image
nunvuru
Web Designer
Posts: 64
Joined: Sat Sep 17, 2005 12:57 am

Postby nunvuru » Sat Apr 22, 2006 8:36 pm

Well I wanted to sort of shift thoughts back to the battle system for a bit. I'm not sure that anything was ever official or that a layout had been set in stone. Roots showed me one a page back that seemed to get the most favors. So to get some discussion going I thought i'd show some works in progress.

These are about as rough as they get, tons of stuff are missing (swap cards, attack queue, etc.) and they aren't exactly like the proposed layout on the previous page, but I had fun making them and thought it might be a good way to get some conversations started. And after I mentioned theming everything in the game I wanted to see if it would work for the battle system as well. Oh, and I saw a nice background that I think wayfarer made and wanted to get it in there to see what it looked like. :D

Ready:
Image

Selected:
Image

Ready:
Image

Selected:
Image
User avatar
gorzuate
Developer
Posts: 2575
Joined: Thu Jun 17, 2004 3:03 am
Location: Hermosa Beach, CA
Contact:

Postby gorzuate » Sat Apr 22, 2006 9:15 pm

zOMG! That looks freaking awesome! I want to play it now, dammit, NOW!! :heh:

:D

:bow: :bow: :bow:
Image

Return to “Design”

Who is online

Users browsing this forum: No registered users and 5 guests