[WIP] Equipment Screen

[Zizka]

Hello guys  ,

I'm working on the equipment screen for my game. A paper doll system to be more precise, sort of like this:


Grimrock


Baldur's Gate

I'm aiming for something more like Grimrock as the equipment won't show up on the actual doll.

Here's a general rough idea:


The thing is that I have only have 6 slots for equipment: head (armor), torso (main armor), left hand & right hand, foot/legs. The missing slot is misc. (ring, amulet, etc...). So I'm wondering if I use a paper doll in the first place, or one that is that big at least.

So I could just go for something simple like: or using a smaller "doll": I'm just not sure a paper doll is warranted.

There's also the ultima alternative where equipment isn't on the actual body part (like in Grimrock) but rather assigned to a "line":


I'd like suggestions and wips if possible!

Thanks!

[eishiya]

I don't think a big "doll" is warranted, I think you could use a smaller one (though perhaps not as small as your example). For only a few slots, the human-shaped arrangement isn't necessary, but I do think having some sort of spatial arrangement is better than relying solely on text or symbols to identify the slots. Plan the arrangement first, then draw the doll to fit, if you want one. Think of the doll as a unified set of labels for the slots; players will be ignoring it when they get used to the equipment screen.

[Zizka]

Thanks!

Would this work ok?:

[eishiya]

It's a fine arrangement, but it gets lost against the noise of the environment behind it. I'd put it in a window so that there's a solid background behind the icons.

[Zizka]

Ok, here it is again:



Any better?

[eishiya]

It's easier to read, and I like that all the stats are there too, but now you have a lot of distance between the inventory and the equipment slots that the player will have to cover every time they change gear if they want to drag-and-drop. Maybe have smaller margins in the book? Or have a scroll? Or have the inventory on the same page as the equip slots and the stats+character art on the opposite page.

If the inventory is drawn on the page, why is it still in a backpack? Bit of a confused metaphor.
If you like the bag metaphor, what if the inventory screen is drawn on a flap from the bag (maybe the bag opens sideways?), or is a scroll coming out from behind the bag?

[yrizoud]

Be careful to plan for enough space to comfortably handle what happens throughout the game : 3x3 cells in the backpack looks  nice, but if the player has to scroll through 10 pages with the tiny arrow buttons, it's not fun.

The "book" idea is an opportunity to make some very artistic things, especially if it handles many menus like "character" "inventory" "magic", "log" etc.
A google image search for "spellbook UI" provides many examples.

Note that the silhouette "doll" can let you provide some information, for example about character gender, or class. It's helpful if there are items restrictions, or character designs that don't clearly show the class.

[Zizka]

@eishiya: I don't think having a scroll sliding from the side of the backpack would make sense. Having information on the flap is a good idea but since that would include some more unrelated things (like statistics) I find it would be out of place. I agree that the backpack in the book doesn't make sense either.

So I decided to expand on yrizoud's comment regarding the book. I've added three bookmarkers: one for inventory (it's longer now because the inventory is selected), one for spells and skills (on the left) and the one on the right for options.



I've added icons on the separation lines, the backpack for inventory and the magnifying glass which gives you info about whatever is selected by the cursor. Items are now close to the character inventory, which is something you guys mentioned before.

I've also added the four characters on top of the left page. The idea is that clicking on each character will shift to each character's individual inventory.

The book is bigger so that the information fits neatly. That's about it I think.

Good?

[eishiya]

It's weird that the item descriptions aren't on the same page as the inventory. The character sprites at the top also seem out of place.
How about having the different characters be additional bookmarks (perhaps on the side of the book, or at the top on the right) instead of having them take up space on the page. That'll fit the book theme more, too.

Unrelated nitpick: the folded-up corners of the pages are way bigger than they would be, and are apparently cup-shaped xP

[Zizka]

Ok so:



I removed the four characters and replaced them as bookmarks on the right side. I put the equipment description on the same page as the rest of the equipment.

The stats are now on the right. I want to put the skills on the rest of the page on the right as I don't have any ideas as to what I could put there anyway.

I removed the magnifying glass, I felt like it was too much.

As for the page corners, I don't understand the cup thing?

I'd like to have an icon on the line but I don't know what to put. What icon would represent skills? A star? Feels too cartoony. I did a google image search for "skill" but couldn't find something convincing which would fit the dark fantasy theme of the game. Any ideas?

[eishiya]

The bookmarks are hard to "read", the characters blend into them. Use colours closer to the paper colour, perhaps? Maybe one of the slightly darker paper colours, and have just a strip of each character's identity colour on each, instead of overlapping them.

I agree that the magnifying glass was a bit much, and it's not even needed now that the information is on the same page and changes based on the player's actions.

With the page corners, see how the dark edge is curved? That's only possible if the paper isn't flat (i.e. the corner makes a little "cup" because the paper is super-warped). If the paper is flat, that edge would just be straight.
Take a piece of paper and curve its corner up and you'll see it's straight. In addition, the little triangle that's lifted up would look smaller than the space it used to fill, due to foreshortening. Something like this, but with more of your lovely texture:

The straight line of the corner's edge doesn't have to be 45 degrees, but the triangle's shape will change according to the angle.

[Zizka]

Ok so:


I redid the book marks (shape and color strips). Not sure if the color strips provide enough information to refer to each individual characters however.

Redid the page corners (bottom and top). I also added the skill icon (a skull with a bolt on top) and a list of skills.

Any other ideas? As you can see, I take feedback seriously.

[eishiya]

I meant having the heads and the colour strips. The problem was just that the heads faded into the coloured backgrounds. I suggested the strips as a way to keep the colours without having them all over the bookmark and behind the heads.

Those page corners look more realistic!

The skull doesn't read well to me. I also tend to associate skulls with status effects or character deaths. I don't really know what to suggest though. Maybe a hand with some magic blob above? A fist? A "skill" is something a character does, and hands are usually how people do things.

[Zizka]

I meant having the heads and the colour strips. The problem was just that the heads faded into the coloured backgrounds. I suggested the strips as a way to keep the colours without having them all over the bookmark and behind the heads.

Ok, I'll fix that, shouldn't be too hard.

Regarding the skill icon, please look at the bottom right, I did 7 different versions:


I prefer number 7 but it's still too big. It should be about the size of the backpack icon so the whole icon thing remains consistent.

An edit  would help at this point to fix that skill icon so I can move on with fixing the book marks as mentioned above. Or some pointers as to how I can improve said icon. Unless you guys think one of the other icons look better?

[eishiya]

Rough edit of what I meant with the character bookmarks. You can probably fancy this idea up.

With the skill icon, I think 5 and 7 are the best. Maybe if you rotate 7 90 degrees so it's horizontal, it'll feel compact like the backpack, even though it's larger? The energy bits will look more part of the border then.

I think it might fit the book theme better to have these border elements (inventory backpack, skill icon) be ink-coloured, and leave colours to gameplay-important things like items, skill and stat icons, and character portraits.

[Zizka]

A'right!

So I checked the size of the backpack (13x14) while the lightning bolt hand is/was 10x23. So I shifted it horizontally and used the line of both sides to sort of conceal that it's a fair bit bigger than the backpack. The hand is still too cartoonish to my liking but it'll do for now. It reminds me of Superhero League of Hoboken.

Anyhow, I felt like just adding faces to the bookmarks felt sort cutting corners so I decided to use symbols before. Maybe it's overkill now to have both the color strip and the logo on each bookmark, not sure.

Here's the new version:


I think the upper left is still too empty and I'd probably need more room at the bottom of the book to add a spot to give skill descriptions (I don't have any right now).

I'll also get rid of the older bookmarks at the bottom since I have both  skills and equipment on the same page so to speak. I'll add another bookmark on the side for options though.

Comments (everyone is welcome by the way, not just eishiya even if his comments are very helpful).

EDIT:


Current version.