PS: I'm not sure if this is the right place to be posting this.
I'm currently attempting to make an adaptation of a card game called Bang! But I'm not too sure what the best way would be to lay out the UI. I've attached a screenshot with two possible layouts.
The first is the one with nova, where the character panel has everything spaced out pretty nicely. The downside of it is that you have to select your opponent to see their character panel. It will be explained later why this is bad.
The second is the one in the orange border, with everything crammed into a small area and always displayed to all players. IMO it looks kinda fugly and im not sure how to improve it. I can't afford to lay it out horizontally as it would cause overlap with other characters portraits.
I'm not sure if anyone here has ever tried Bang! before but it is important to be able to see the cards an opponent has on their table. To have to click on their character just to see it would probably be a hindrance to the game.
I would be really grateful if anyone could provide feedback on whether or not i should scrap the first layout in favor of the second UI layout. Only issue is that I would have to shrink some of the icons significantly to make them fit nicely, Or maybe just scrap the health buttons overall in favor of something simpler. The cluttered look isn't very appealing after all.
If anyone else has better ideas feel free to make suggestions.
Thanks in advance.
Edit: Please note that with the second alternative, the equipment/trap icons are only intended to be visible when they are in effect. What you would see otherwise at the start of the game is just health bars, the weapon and the role guessing button.
From what I understand about the game so far is that you will be up against all the other opponents at the same time.
If so, generally second option does seem to make things easier to see as a whole, however if cluttered and confusing it could hinder a new player starting off.
If possible, using text instead of icons to reduce clutter would improve the UI significantly, especially with the health bars.
You could make a health bar underneath the portrait and make it always visible. When you click on an opponent it shows their specifics in greater depth.
The portraits do look good, but I am not sure they help as much with the gameplay. It is important to know who is who, but considering how many opponents there are it could be a bit much for the user.
Widescreen monitors should have no issues with that interface, but a non-widescreen monitor might have problems with seeing everything. If you did go with the first option, placing the opponent's screen above your own UI section may be a good idea.
The first option could also be beneficial in some ways as well by adding an extra amount of skill or experience to the game.
For example, say you have low health but people aren't selecting you and aren't attacking you either. If unnoticed, it could give you an edge over your opponents which could lead to you winning, or at least allow to harass them for longer.
Compare that to a situation where everyone can see you and you are low health. They'll finish you off quickly so you don't hang around for too long.
I'm not sure if I am entirely on the right track, but I hope that helps! :)
From what I understand about the game so far is that you will be up against all the other opponents at the same time. If so, generally second option does seem to make things easier to see as a whole, however if cluttered and confusing it could hinder a new player starting off.
Yes, thats right. I do have another layout idea in mind which is a little less cluttered than this one. Basically involves scaling down the hp icons and lining them up at the top of the portrait. The ability icon is embedded to the button that hovers over the opponent portraits. This leaves another 7 icons. The 5 equipments/traps line up at the bottom of the portrait, and the weapon and role guess button at the top right.
A card also exists with the ability to remove equipments/traps. Which makes it even more important to be able to see who has what. Otherwise using this card would be rather difficult as you'd have to flip through each of the players just to see who has what. If this 3rd layout were to be used, the question would be whether or not i should still have the opponents information appear in place of my own information panel (which is how it currently works)
Quote:
If possible, using text instead of icons to reduce clutter would improve the UI significantly, especially with the health bars. You could make a health bar underneath the portrait and make it always visible. When you click on an opponent it shows their specifics in greater depth.
Just to be clear, do you refer to text for the players information panel instead of icons? If you could draft out what you've pictured on a paint scribble or something that'd be great. I just want to be sure I'm envisioning your idea as how you see it.
If that is what you refer to, its something that was considered, though the text would take up too much space as some of the item descriptions are quite lengthly. Its not clear from the screenshot, but all the icons have tooltips attached to them to make it more obvious what each of them represents. As for health bars, for this game, the maximum life of players vary depending on their characters, ranging from 3-5 HP. So a health bar may just be a bit of an overkill.
Quote:
The portraits do look good, but I am not sure they help as much with the gameplay. It is important to know who is who, but considering how many opponents there are it could be a bit much for the user.
I was considering the possibility of attaching hotkeys 1-7 to each of those portraits to make it easier for players to switch targets when playing their cards. But as you suggest, they do take up quite a bit of space on screen.
The placement of the portraits is unique to every player in a rotational manner. Since the original game has a mechanic that only allows you to attack players within a certain range, the placement of these portraits actual tells you how far away each player is from you, and possibly also whether you have the range to target them.
Quote:
Widescreen monitors should have no issues with that interface, but a non-widescreen monitor might have problems with seeing everything. If you did go with the first option, placing the opponent's screen above your own UI section may be a good idea.
This is the actual reason why there are some blank spaces at the side of the screen. I'm designing the UI under the constraints of 4:3 screens at the moment. There is intent to have a setup option that allows users to play with widescreen. I'm not sure I'm following with regards to "placing the opponents screen above your own UI section" though. Do you mean when an opponent is selected, his character info appears on my UI bar?
Quote:
The first option could also be beneficial in some ways as well by adding an extra amount of skill or experience to the game.
For example, say you have low health but people aren't selecting you and aren't attacking you either. If unnoticed, it could give you an edge over your opponents which could lead to you winning, or at least allow to harass them for longer. Compare that to a situation where everyone can see you and you are low health. They'll finish you off quickly so you don't hang around for too long.
I'm not sure if I am entirely on the right track, but I hope that helps! :)
That does sound like an interesting take on it. Its something I need to take into consideration. I'll explain a little more about the game mechanics. It might help discuss on whether or not it would be a good idea to implement this.
The way the original game is played, you are able to see everyone elses remaining life. This however does not necessarily mean killing off would be beneficial. I'll explain a little. 8 Players in game, and there are 4 roles.
Emperor: Has to survive until all raiders and the changeling's are dead. If he kills a Sentinel, he loses his whole hand.
Sentinels (x2): Has to protect the emperor and kill the raiders/changelings
Raiders (x3): Has to kill the Emperor
Changeling (x2): Has to kill every other player.
Only the emperors role is known to all players at the start of the game. Everyone elses role is concealed, so if someone is on 1 HP left. You would need to assess whether or not killing him/her would be to your advantage or not.
Take the emperor for example. He see's another player on 1 hp, and deals the finishing blow. The dead player reveals his role to be a sentinel. This backfires on the emperor and he loses his hand, putting himself at a great disadvantage.
Another scenario would be If I was playing as the changeling and I see that both the sentinels are dead. I would need to swing my allegiance to defend the emperor or else I lose if he dies before everyone else.
Anyway, If you think more screenshots of how the game currently works would help, i'll make some and attach them. Forgive the super long post. Thanks for being the first to provide some feedback :) Really appreciate it.
@VoidPotato: Go
Just to be clear, do you refer to text for the players information panel instead of icons? If you could draft out what you've pictured on a paint scribble or something that'd be great. I just want to be sure I'm envisioning your idea as how you see it.
I think I may have been slightly off here. I wasn't 100% sure what kind of icons and other stuff which had to be displayed. Now I see that the icons are used to contain tooltips which explain about their function. I also see that it would be hard to expand it out too much and you do not want to omit the information about the other players either.
What I meant mostly was having some text to the side or below saying what equippment and traps (etc.) they had and their health. This wouldn't help out much, because you would have to memorize all the equippment and traps or refer to a help section detailing this.
I am working on a picture at the moment and will post it soon.
@VoidPotato: Go
Do you mean when an opponent is selected, his character info appears on my UI bar?
I meant that you have a relatively simple bar with the health and other information about the target you selected above yours so it doesn't take up too much space and allows for more room on the screen. The picture I am working on should reflect this.
@VoidPotato: Go
Anyway, If you think more screenshots of how the game currently works would help, i'll make some and attach them. Forgive the super long post. Thanks for being the first to provide some feedback :) Really appreciate it.
It wouldn't hurt to include a few more, just so myself and others can get a better understanding of the game. I personally have not played Bang! before and loosely based some of my comments on a quick look at Wikipedia and Google image search.
Thank you for explaining more about the game rule and elements as well. I will think about it a bit more and hopefully be able to come up with some more suggestions. For now I will work on this picture. I wanted to reply first just to clarify some things.
Finally, I don't mind providing feedback at all, just happy to be of some assistance!
P.S. I now can see the gaps you have put there for non-widescreen users. For some reason the image wasn't being displayed on my screen and i should have scrolled over a bit to see the right side. I actually have a widescreen monitor, but I just wanted to make sure because it could drastically affect the gameplay for some people.
EDIT: Updated with image. I will check this topic again once I have had some sleep.
EDITS 2-5: Updated the image again, there were (more than) a few errors. Labeled the blue area as well.
Uploaded a second version so that posts below still make sense if its changed.
Just to be clear before I start coding the proof of concept :P In summary, according to your picture and with the quoted text of the description I'm guessing they refer to:
1st Selection system:
Quote:
I meant that you have a relatively simple bar with the health and other information about the target you selected above yours so it doesn't take up too much space and allows for more room on the screen. The picture I am working on should reflect this.
Only the Health Bar is shown next to the portrait (below it)
When opponent is selected, the selection bar appears with the relevant icons and tooltips
2nd Selection system
Quote:
What I meant mostly was having some text to the side or below saying what equippment and traps (etc.) they had and their health. This wouldn't help out much, because you would have to memorize all the equippment and traps or refer to a help section detailing this.
Health Bar and Equipment Icons always shown
A little confused by the two arrows pointing at the portrait on the top left, they seem to contradict each other. Specifically the clauses
"Smaller, icons containt tooltips, Health Always displayed"
"For the second proposed design, these icons will not be displayed" <= Just guessing, did you mean icons wouldn't be displayed for the 1st proposed design? Since they would be appearing above the target in the selection bar after all.
Overall, I really like the idea of the selection bar above the players UI. It solves another problem I was stumped with earlier. There is a card called "Disarm"
It allows you to target another player and "Disarm" one of the equipments/traps they have attached to them and place it in your hand for your own use. With the old design I used, a player would have to move their cursor back and forth about half a screens distance between the usage of the disarm card and the "icon" (equipment/trap) they wanted to disarm. The selection bar cuts down this movement significantly.
For proof of concept, I think I'll probably try have both the selection bar and the side icons at the side at once, just to see what works. If they go well together, might just be a good idea to have them both implemented :)
What do you think of it if I scrap the portrait borders? They don't really go well with a health bar at the bottom or icons at the side IMO. But maybe thats just me. You could refer to the 2nd alternative picture attachment in the first post to see a "sample" of this .
Nice drawing btw. Photoshop? if you did that with paint I must say its very impressive.
Edit: Whoops, just noticed your edits. I'll look into the changes tomorrow and reflect on them here tomorrow. Time for me to get some shuteye too.
A little confused by the two arrows pointing at the portrait on the top left, they seem to contradict each other.
Sorry about that, I fixed some of it up to actually not be completely wrong!
The one on the top left is more of a generic description about them. I might need to fix that image again just to make it less confusing.
I also removed the alternate one because I only kept it there for the smiley face. I was initially going to draw it with a tablet and then I gave up and used vectors.
What do you think of it if I scrap the portrait borders?
I kind of like them actually.
You could always put the icons that are below the health bar and overlapping the border above the health bar so everything is over the portrait image. The ones on the right could be pushed out slightly further so they don't overlap the border.
I've put some thought into both ideas that we've discussed. Both of them are good, but I think I'll be going with the first proposed idea, the red bar.
Reason being is that the second proposed idea with the icons at the side kinda break the symmetry of the portrait layout, So I'd imagine it might not work well. Its possible to instead stack these equipment/trap icons on top of the health bar instead, but this would cover up the neck of most of the character portraits making it not look so good.
In conclusion, the first proposed concept would probably be a better move. Plus, it also adds some element of skill to the game as you mentioned earlier. The only two things I intend to make visible on the portrait at this point is the weapon currently being wielded and the role guessing button. Everything else will appear on the red bar depending on the currently selected target.
In order to save some space for the user bar area, I've also considered the possibility of having the players UI icons appear on the bar when no target is selected as well. Will post a screenshot of the new concept shortly.
Another important thing that needs to be integrated into the UI, is a bar that tells everybody what cards are being played. I'm not sure where the best place to place such a bar is, but I personally think the location of the red bar would also be appropriate for such a purpose. Alternatively, placing such a bar right at the top of the screen might work too. Though it would mean the portraits would have to be rearranged a little.
EDIT: Added picture. Do you think it would be a good idea to have game updates posted in the red border area? Or would they look better if they appeared at the top of the screen instead? Will psot a screenshots once this is all coded. Used paint cos i don't have photoshop right now.
I thought you might take that design approach. The second one is good, but the first one works better. The changes you have made so far seem to have improved it in my opinion. It looks great and should work out well. :)
In order to save some space for the user bar area, I've also considered the possibility of having the players UI icons appear on the bar when no target is selected as well.
That is an interesting idea, as long as it doesn't get too complicated when trying to switch between multiple players, including yourself.
Do you think it would be a good idea to have game updates posted in the red border area? Or would they look better if they appeared at the top of the screen instead?
I think that the red bar is a good point for players to focus on. Placing the updates on the red bar or slightly above would be a good location for this.
Placing it too high could be distracting, especially when things get more hectic during the game.
Overall, it looks awesome, keep up the good work. I am looking forward to playing the finished map!
PS: I'm not sure if this is the right place to be posting this.
I'm currently attempting to make an adaptation of a card game called Bang! But I'm not too sure what the best way would be to lay out the UI. I've attached a screenshot with two possible layouts.
The first is the one with nova, where the character panel has everything spaced out pretty nicely. The downside of it is that you have to select your opponent to see their character panel. It will be explained later why this is bad.
The second is the one in the orange border, with everything crammed into a small area and always displayed to all players. IMO it looks kinda fugly and im not sure how to improve it. I can't afford to lay it out horizontally as it would cause overlap with other characters portraits.
I'm not sure if anyone here has ever tried Bang! before but it is important to be able to see the cards an opponent has on their table. To have to click on their character just to see it would probably be a hindrance to the game.
I would be really grateful if anyone could provide feedback on whether or not i should scrap the first layout in favor of the second UI layout. Only issue is that I would have to shrink some of the icons significantly to make them fit nicely, Or maybe just scrap the health buttons overall in favor of something simpler. The cluttered look isn't very appealing after all.
If anyone else has better ideas feel free to make suggestions.
Thanks in advance.
Edit: Please note that with the second alternative, the equipment/trap icons are only intended to be visible when they are in effect. What you would see otherwise at the start of the game is just health bars, the weapon and the role guessing button.
Could one of the mods please help me move this thread to the Map Feedback Sub-Forum? I'd prefer not to make a duplicate thread there.
Thanks in advance.
From what I understand about the game so far is that you will be up against all the other opponents at the same time. If so, generally second option does seem to make things easier to see as a whole, however if cluttered and confusing it could hinder a new player starting off.
If possible, using text instead of icons to reduce clutter would improve the UI significantly, especially with the health bars. You could make a health bar underneath the portrait and make it always visible. When you click on an opponent it shows their specifics in greater depth.
The portraits do look good, but I am not sure they help as much with the gameplay. It is important to know who is who, but considering how many opponents there are it could be a bit much for the user.
Widescreen monitors should have no issues with that interface, but a non-widescreen monitor might have problems with seeing everything. If you did go with the first option, placing the opponent's screen above your own UI section may be a good idea.
The first option could also be beneficial in some ways as well by adding an extra amount of skill or experience to the game.
For example, say you have low health but people aren't selecting you and aren't attacking you either. If unnoticed, it could give you an edge over your opponents which could lead to you winning, or at least allow to harass them for longer. Compare that to a situation where everyone can see you and you are low health. They'll finish you off quickly so you don't hang around for too long.
I'm not sure if I am entirely on the right track, but I hope that helps! :)
Yes, thats right. I do have another layout idea in mind which is a little less cluttered than this one. Basically involves scaling down the hp icons and lining them up at the top of the portrait. The ability icon is embedded to the button that hovers over the opponent portraits. This leaves another 7 icons. The 5 equipments/traps line up at the bottom of the portrait, and the weapon and role guess button at the top right.
A card also exists with the ability to remove equipments/traps. Which makes it even more important to be able to see who has what. Otherwise using this card would be rather difficult as you'd have to flip through each of the players just to see who has what. If this 3rd layout were to be used, the question would be whether or not i should still have the opponents information appear in place of my own information panel (which is how it currently works)
Just to be clear, do you refer to text for the players information panel instead of icons? If you could draft out what you've pictured on a paint scribble or something that'd be great. I just want to be sure I'm envisioning your idea as how you see it.
If that is what you refer to, its something that was considered, though the text would take up too much space as some of the item descriptions are quite lengthly. Its not clear from the screenshot, but all the icons have tooltips attached to them to make it more obvious what each of them represents. As for health bars, for this game, the maximum life of players vary depending on their characters, ranging from 3-5 HP. So a health bar may just be a bit of an overkill.
I was considering the possibility of attaching hotkeys 1-7 to each of those portraits to make it easier for players to switch targets when playing their cards. But as you suggest, they do take up quite a bit of space on screen.
The placement of the portraits is unique to every player in a rotational manner. Since the original game has a mechanic that only allows you to attack players within a certain range, the placement of these portraits actual tells you how far away each player is from you, and possibly also whether you have the range to target them.
This is the actual reason why there are some blank spaces at the side of the screen. I'm designing the UI under the constraints of 4:3 screens at the moment. There is intent to have a setup option that allows users to play with widescreen. I'm not sure I'm following with regards to "placing the opponents screen above your own UI section" though. Do you mean when an opponent is selected, his character info appears on my UI bar?
That does sound like an interesting take on it. Its something I need to take into consideration. I'll explain a little more about the game mechanics. It might help discuss on whether or not it would be a good idea to implement this.
The way the original game is played, you are able to see everyone elses remaining life. This however does not necessarily mean killing off would be beneficial. I'll explain a little. 8 Players in game, and there are 4 roles.
Only the emperors role is known to all players at the start of the game. Everyone elses role is concealed, so if someone is on 1 HP left. You would need to assess whether or not killing him/her would be to your advantage or not.
Take the emperor for example. He see's another player on 1 hp, and deals the finishing blow. The dead player reveals his role to be a sentinel. This backfires on the emperor and he loses his hand, putting himself at a great disadvantage.
Another scenario would be If I was playing as the changeling and I see that both the sentinels are dead. I would need to swing my allegiance to defend the emperor or else I lose if he dies before everyone else.
Anyway, If you think more screenshots of how the game currently works would help, i'll make some and attach them. Forgive the super long post. Thanks for being the first to provide some feedback :) Really appreciate it.
I think I may have been slightly off here. I wasn't 100% sure what kind of icons and other stuff which had to be displayed. Now I see that the icons are used to contain tooltips which explain about their function. I also see that it would be hard to expand it out too much and you do not want to omit the information about the other players either.
What I meant mostly was having some text to the side or below saying what equippment and traps (etc.) they had and their health. This wouldn't help out much, because you would have to memorize all the equippment and traps or refer to a help section detailing this.
I am working on a picture at the moment and will post it soon.
I meant that you have a relatively simple bar with the health and other information about the target you selected above yours so it doesn't take up too much space and allows for more room on the screen. The picture I am working on should reflect this.
It wouldn't hurt to include a few more, just so myself and others can get a better understanding of the game. I personally have not played Bang! before and loosely based some of my comments on a quick look at Wikipedia and Google image search.
Thank you for explaining more about the game rule and elements as well. I will think about it a bit more and hopefully be able to come up with some more suggestions. For now I will work on this picture. I wanted to reply first just to clarify some things.
Finally, I don't mind providing feedback at all, just happy to be of some assistance!
P.S. I now can see the gaps you have put there for non-widescreen users. For some reason the image wasn't being displayed on my screen and i should have scrolled over a bit to see the right side. I actually have a widescreen monitor, but I just wanted to make sure because it could drastically affect the gameplay for some people.
EDIT: Updated with image. I will check this topic again once I have had some sleep.
EDITS 2-5: Updated the image again, there were (more than) a few errors. Labeled the blue area as well. Uploaded a second version so that posts below still make sense if its changed.
Just to be clear before I start coding the proof of concept :P In summary, according to your picture and with the quoted text of the description I'm guessing they refer to:
1st Selection system:
2nd Selection system
A little confused by the two arrows pointing at the portrait on the top left, they seem to contradict each other. Specifically the clauses
Overall, I really like the idea of the selection bar above the players UI. It solves another problem I was stumped with earlier. There is a card called "Disarm" It allows you to target another player and "Disarm" one of the equipments/traps they have attached to them and place it in your hand for your own use. With the old design I used, a player would have to move their cursor back and forth about half a screens distance between the usage of the disarm card and the "icon" (equipment/trap) they wanted to disarm. The selection bar cuts down this movement significantly.
For proof of concept, I think I'll probably try have both the selection bar and the side icons at the side at once, just to see what works. If they go well together, might just be a good idea to have them both implemented :)
What do you think of it if I scrap the portrait borders? They don't really go well with a health bar at the bottom or icons at the side IMO. But maybe thats just me. You could refer to the 2nd alternative picture attachment in the first post to see a "sample" of this .
Nice drawing btw. Photoshop? if you did that with paint I must say its very impressive.
Edit: Whoops, just noticed your edits. I'll look into the changes tomorrow and reflect on them here tomorrow. Time for me to get some shuteye too.
Sorry about that, I fixed some of it up to actually not be completely wrong!
The one on the top left is more of a generic description about them. I might need to fix that image again just to make it less confusing.
I also removed the alternate one because I only kept it there for the smiley face. I was initially going to draw it with a tablet and then I gave up and used vectors.
I kind of like them actually.
You could always put the icons that are below the health bar and overlapping the border above the health bar so everything is over the portrait image. The ones on the right could be pushed out slightly further so they don't overlap the border.
Yes, I did use Photoshop. :) I was considering using paint but it would have taken longer and probably less clear.
EDIT: Fixed some errors and added a bit more. Also, I will actually sleep now I think.
EDIT 2: I might be slightly addicted to editing my posts, whoops.
I've put some thought into both ideas that we've discussed. Both of them are good, but I think I'll be going with the first proposed idea, the red bar.
Reason being is that the second proposed idea with the icons at the side kinda break the symmetry of the portrait layout, So I'd imagine it might not work well. Its possible to instead stack these equipment/trap icons on top of the health bar instead, but this would cover up the neck of most of the character portraits making it not look so good.
In conclusion, the first proposed concept would probably be a better move. Plus, it also adds some element of skill to the game as you mentioned earlier. The only two things I intend to make visible on the portrait at this point is the weapon currently being wielded and the role guessing button. Everything else will appear on the red bar depending on the currently selected target.
In order to save some space for the user bar area, I've also considered the possibility of having the players UI icons appear on the bar when no target is selected as well. Will post a screenshot of the new concept shortly.
Another important thing that needs to be integrated into the UI, is a bar that tells everybody what cards are being played. I'm not sure where the best place to place such a bar is, but I personally think the location of the red bar would also be appropriate for such a purpose. Alternatively, placing such a bar right at the top of the screen might work too. Though it would mean the portraits would have to be rearranged a little.
EDIT: Added picture. Do you think it would be a good idea to have game updates posted in the red border area? Or would they look better if they appeared at the top of the screen instead? Will psot a screenshots once this is all coded. Used paint cos i don't have photoshop right now.
I thought you might take that design approach. The second one is good, but the first one works better. The changes you have made so far seem to have improved it in my opinion. It looks great and should work out well. :)
That is an interesting idea, as long as it doesn't get too complicated when trying to switch between multiple players, including yourself.
I think that the red bar is a good point for players to focus on. Placing the updates on the red bar or slightly above would be a good location for this.
Placing it too high could be distracting, especially when things get more hectic during the game.
Overall, it looks awesome, keep up the good work. I am looking forward to playing the finished map!
@VoidPotato: Go
Ah finally. The changes are complete :) Posted a screenshot just as a minor update. Now to fix up the rest of the gameplay.
Positioning of the bar has been placed to ensure message spammage won't override it.
Tooltips are used excessively in the game as they overlap chat, thus making it easier to play if people are spamming.
If anyone has any doubts about the proposed design please don't hesitate to voice out your concerns.