Game Design Question

[Zizka]

Hello again,

I’d like your comments regarding the design I’m going for in my game. I need to make sure before making a decision because then I’ll pay the programmer and there’s no going back (well there is but then I’ll have to pay him again).

What I’m basically going for is something similar to “Wizard of Firetop Mountain”, by Tin Man Games:


It's basically a gamebook with graphics.

In the case of Firetop Mountain you'll notice that text is displayed over the game environment, the player statistics are on the left and the inventory is on the right (along with the options).

The resolution of the game is 816x624. I'll making my art at 1:1 and then resample it at 1:2. Basically, this means art like this:
will end up looking like this:



Now, please look at this mockup:


I have several issues:
1. The various HUD elements are not disposed logically.
2. Screen is currently too wide at 1202 px while it should be at 816.
3. I'd like the notepad to be larger to display more text at once.
4. The inventory takes too much room compared to the other elements. I've tried to change the shape of the suitcase but stops looking like a suitcase.
5. Some elements clash with one another.

So basically, I'd like ideas and suggestions so I don't have to pay many times to have this changed programming wise. Any ideas are welcomed!

Thank you!

[Xorceles]

i rotated the briefcase and enlarged the notepad,all was adjusted to fit in 816x624 resolution if your programmer is good he can rotate the briefcase and the options button with a script without errors this is just a idea

hope it work

[Zizka]

@xorceless:
Thanks for the edit. I still feel it's a bit chaotic though.

Here's my new take on it:


I've eliminated all the unnecessary clutter and streamlined everything. Pressing a key on the keyboard will reveal the menu the player is looking (status, notes, inventory or options). I came to the conclusion that they didn't need to be constantly displayed on screen anyway. This allowed me to save a lot of space.

I replaced the notepad with a book which feels more in the spirit of things. I've also added some text from the actual game here to give you guys a better idea.

Remaining issues:
-Still looks amateur. I'd like the visual area (with the characters) to be clearly identified from the hud area (book, inventory and so on).
-Still too wide. I went from 1200ish to 1032 but I'm still over. So there's still some work left here.
-The amount of text displayed might still be a bit too limited. I mean, it's not too bad but I wish I could cram a few more words in there so the player doesn't have to interact to get to the next part of text.
-Empty space to the left and right of the visual area which could be used more efficiently.

Do let me know what you think. I'm so involved in this it's sometimes difficult to take a step back and get the picture as a whole.

Thank you for reading.

[eishiya]

All your different sections and buttons don't match each other, because they're all using different metaphors and styles. Pick one, two at the most, and stick to that.

If you run with the book metaphor, you could use it for all the menus. The inventory could be a literal inventory, i.e. a list of items. The different menu icons could be bookmarks sticking out of the book (or out of the bottom of the screen when the "book" is inactive, you could have a show/hide "bookmark" for that), and the different symbols would be drawn on the bookmarks.
If you want the condition (and whatever that winged-heart number is) visible at all times, it can be scribbled in the top margin of the page, it doesn't even have to be its own section.
You don't need quite that much shadow and margin around the middle of the book. It might be realistic, but it's not very good UI. Unless turning pages back and forth is something you want, you could even have just one page of the book visible.

I've critiqued the way you do upturned paper corners before. You're doing them weird again, even though you did it right on the notepad!
I don't think you need them in this case anyway, unless those are buttons to go to prev/next "pages" (in e.g. dialogue).

The world seems too modern to be represented by a time-stained book in any case, so perhaps expanding the notepad metaphor would be better. Proper bookmarks would look weird on a notepad, but you could have earmarks. You could orient it coils-up or could to the side, depending on which gives you the separation you want. I think as long as the various buttons (bookmarks/earmarks) are attached to the notepad rather than floating, and don't have much of the game-background visible behind/around them, you don't need to worry too much about intentionally separating them.
If you go with the notepad, make the lines much lighter, perhaps your lightest blue that they fade out to. The dark lines will be distracting and make things harder to read.

The text in the book feels oversized compared to the artwork, I think the font you had in the notepad is better. Ideally you should provide an option for larger text for players with poor eyesight, but in that case you'd also need something to enlarge the world/characters too, just larger text would probably not be enough.

[Zizka]

Thanks again, eishiya.

-I've dropped the old book and decided to go for a notebook instead. It's more modern and it holds more text than the notepad. It also allowed me to make my screen fit the resolution I was looking for. This has also taken care of the page corner thing you told me before. I had forgotten you had mentioned that actually.

-I looked up ''earmark'' on google but couldn't find anything. So I tried separators instead.

-I dropped the page shadows.

-I lightened the lines to a light blue.

There's still some issues with the line spacing and word arrangement. I can't fit enough words on the pages at the moment. That's fine though as I can make the pages wider.

How does this look then?

[eishiya]

By earmark, I meant those little sticky bookmarks, I don't know why I said earmark. Sorry :'D
The sticky bookmarks are great for menu icons because they give a good visual cue for which one is currently active, since you can show where it's stuck onto the page. At the same time, since it's sticky and small, it doesn't cover up any content.

You can always make the line spacing larger, too.

I recommend leaving some extra space above the top line, to put menu headings, speakers' names, etc.

The UI should probably fill up the full width of the screen, no? Otherwise, you're wasting that space. You don't have to show the bottom of the notebook, you could just show the top part, like you did with the book. If you do show the bottom, consider putting the curled corners there instead of at the top, so that they're less likely to distract from the text. And again, you don't even need the corners unless they're functional. As pure decoration, I think they're too distracting because they look functional.

You could put the menu icons/separators on the side rather than the top, which would use up some of that horizontal space and give you more space up top for the game world.

The coil of the notebook is distracting. Try using lighter colours for it.

Nitpicks:
The lines in the notebook are off-centre. Cheap lined notebooks usually have the lines go all the way to the edge (the lines are printed before the sheets are cut up), so that's one way to solve the problem. If this is meant to be more of a journal with per-page line printing, then I think it should have more decorations suggesting its extra price, like dotted rather than solid lines, flourishes, etc.
Why are the page corners so dark? That makes it look like the pages are blue on the other side.


This is all very blue. A lot of your work is. Is that intentional?

[Zizka]

Thanks again.

-Alright, so I optimized the space like I had mentioned in my previous message.
-I increased the line spacing.
-I changed the color of the coils to make them less distracting. They might still be too dark however, we'll see what you guys think.
-As for sticky bookmarks, I used this as a reference:

I decided against sticking to the same palette for the actual separations for variety sake.
The first tab is meant to take you to story mode.
The second tab takes you to inventory mode.
The third tab takes you to status mode.
The fourth tab takes you to options.
-I've rearranged the tabs to make them more organized. I've reworked the options tab giving it more texture and reflection so that it looks much better now. In fact, all four tabs look pretty good now in my opinion.

-I replaced the previous status icon which didn't look good with this new one which looks much better.

-I removed the bottom of the book as well as the corners.

I recommend leaving some extra space above the top line, to put menu headings, speakers' names, etc.

I wasn't sure if you meant inside the book (on the page) or outside the book. I added some more space on top of the pages as well.

You could put the menu icons/separators on the side rather than the top, which would use up some of that horizontal space and give you more space up top for the game world.

True, but I feel like it's fairly evenly distributed now (at a glance anyway).

Speaking of color, I changed the color of the notebook a bit.

Much more room for text now, acceptably so.

So here's the new version:


Do let me know what you think, always interested in what you guys have to say.

As far as the parts of the book where the player needs to make a choice, I was thinking of having a pop-up to show up like this:


But then that would hide the gameplay are, so I figured something like this would be better:


Not 100% on the footprints yet, however.

You'll notice that the game area to be interacted with are outlines with a 1px line. I think this will create more uniformity between the text and the playing area.

As far as the equipment tab is concerned, you'll notice it stands out when that it's selected.

I've done a first draft for the inventory. What I am not satisfied with here is the location of the description on the other page. It doesn't work for me. I'll need to find something else.

[eishiya]

Minor nitpicks, but they bug me: Your two pages are different widths, and your sticky bookmarks appear to be on different pages than the ones they bookmark xP They should be in front of the page, not behind it.
Also, the lines on your notebook paper aren't evenly spaced, that's going to make positioning text and icons a nightmare for your programmer.


Here's my try with the bookmarks on the side, with them being stuck onto the page rather than behind it, and an idea for how to do the inventory:

Sticky bookmarks, in my experience, tend to be stuck onto the side of the page rather than the top anyway, since that makes them easier to use and doesn't risk damaging the page when you pull on them. And, it also means your space is used more effectively. If you want the currently selected bookmark to stand out better than it does with just overlapping the page, you could make unselected bookmarks darker, as if they're in shadow.

Having the item icon become circled when selected fits the notebook metaphor better than a hand icon, and saves space. You could use the same one for all the icons, or, if you want to give the game a lot of polish, give make a selected version of each icon that has a custom circle.

I put the item's description next to the item, using up the otherwise empty space, and freeing up the second page for more inventory items. Longer text could start on the same line as the item name, then wrap to the line below (aligned right). I think it looks best if the text appears when the item is selected. This also means you could have even longer text, by letting it wrap to the lines below it (or above it, for items near the bottom), since you know there's not going to be other text there (unless you have items with very long names).

I also made the dark line separating the two pages a little bit lighter. I'd consider making it even lighter, as currently it's so intense that it makes the two pages look like they're separate areas, when they're not.


You could give this notebook additional polish and fill up the space between the bookmarks on the side by having some very dark background/decorative bookmarks behind the menu ones, making it look like the notebook is used for other things too.


What platform is this game for? The screen size seems rather unusual.

[Zizka]

What platform is this game for? The screen size seems rather unusual.

RPG Maker MV.

Minor nitpicks, but they bug me: Your two pages are different widths, and your sticky bookmarks appear to be on different pages than the ones they bookmark xP They should be in front of the page, not behind it.

I've copy/pasted each line on each page and then the page itself so it should be perfect now.

If you want the currently selected bookmark to stand out better than it does with just overlapping the page, you could make unselected bookmarks darker, as if they're in shadow.

I've tried something else. Basically, the selected section ends up on the front page while the other stickies end up on other actual pages so to speak. Check out my example to get a better idea.

Having the item icon become circled when selected fits the notebook metaphor better than a hand icon, and saves space. You could use the same one for all the icons, or, if you want to give the game a lot of polish, give make a selected version of each icon that has a custom circle.

That's true, it does makes more sense than a hand. The problem is that small circle would be harder to implement when making choices in the game (see my other example above with the door and the bed).

I thought of using a small pen icon instead (with that little drop of ink). This would also fit in the theme of the notebook and could be applied in other areas and not only inventory.

I still feel like the item description is wonky. Come to think about it though, I don't need one at all so that could solve the problem entirely. Fighting Fantasy Books didn't use to have description to the equipment:


Here's the new version then:


I still feel like the "Inventory" heading lacks flair and rather bland but I could live with it.

[eishiya]

RPG Maker is an engine, not a platform. I guess this is PC? The reason I ask is this is a non-standard aspect ratio, so it's going to have black bars on the sides on most people's screens, or will have to be played in windowed mode.

The circle could work with the choices, they'd just be around the the bullet points. You could also have hand-scribbled underlines and the like, you don't have to have the exact same graphic for each section, they all just should feel similar and share a theme.
Alternatively, how about drawn arrows? It could work just like the pen icon, but feel less like an icon, and more like part of the notebook.
(Speaking of things feeling like part of the notebook, I think if you're going with this theme, it could feel even better if the menu and item icons were done in a "drawn" style too. They don't have to be monochrome, of course. It would give the whole thing more cohesion and character.)

If you're not going to have item descriptions and there are many different items, consider having two columns of items in the inventory, and/or using adjacent lines instead of skipping lines, so it looks more like a real inventory list. You could even have hand-drawn separators and the like between the columns. You could have slightly larger spacing between the lines if it feels a bit too crowded. I think that would help your longer texts be more legible, too.

As for the headings, why not "handwrite" them? Depending on the personality of the character the notebook belongs to, you could add other decorations too, like stickers, doodles, etc. Also, I put mine on the left because that feels more "natural" to a notebook. Centring feels "cheap" and lazy in this context, though I don't know why.


I feel like there should be more bookmarks on the right side too, currently it's off-centre and asymmetrical, and not in an intentional-feeling way. It might be good to have the in-game bookmarks (inventory, character status, notes) on one side, and meta bookmarks (settings, save/quit, whatever else) on the other. It wouldn't work well with 4 bookmarks, but could work with more, especially if they're larger. Alternatively, you could have the pagination (next/prev) at the top on the right, and the settings underneath, so you'd have six total, nice and symmetrical.