AuthorTopic: Combat U.I.  (Read 2063 times)

Offline Zizka

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Combat U.I.

Reply #10 on: February 25, 2020, 08:30:51 pm
Alright I've got a new version yet again:

Offline Zizka

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Combat U.I.

Reply #11 on: March 09, 2020, 07:45:10 pm
So I've ditched the symbolic dice and reverted to numbers. The reason being that it was getting too complicated to design and I wasn't getting any help so I decided to scrap the concept. Oh well, it happens. So a new screenshot once again we a new design. This time it's simple, whoever has the highest score wins the round. The loser loses a heart. When all hearts are lost, the enemy is slain or the player has lost. So again, comments on the artistry would be helpful and appreciated.

Offline eishiya

  • 0100
  • ***
  • Posts: 1226
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Combat U.I.

Reply #12 on: March 09, 2020, 09:11:28 pm
Does the score sheet need an entire "page" devoted to it? I have a hard time telling what's important and what isn't in this UI, or what I, as a player, would need to do. A player should be able to understand what's going on with minimal prompting and tutorials. Text explanations of what the various symbols mean, but you should aim to avoid anything like that for the basics, like what the dice rolls are for in the first place.

Your UI currently takes up more space than the navigable area, which leads me to believe that's where all the important things happen. But, the environment the characters are in has way more going on visually, so that's where my eyes gravitate to. If the environment is simply for navigation and isn't where the "action" happens, I'd simplify it and maybe make it part of the book UI. If the environment is meant to be more important than simply a map, I'd try to put more of the other stuff into it instead of around it.

Offline Zizka

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Combat U.I.

Reply #13 on: March 11, 2020, 08:24:35 pm
Hello eishiya, I'm glad you dropped by.

The screen ratio is set in stone as it is. It's already coded in and paid for. If I had known before I could've included the background into the book but not it's too late as my funds are limited. I'll have to make the best out of the situation and turn it to my advantage. I might've been a mistake on my part but now I can only go forward.\

The score sheet is necessary for the player what he needs to beat dice wise. For instance, notice the spider is at "two pairs" and the player is at "straight", this means the player will win the round. Without a score page, players would need to remember what beats what and it'd be messy.

Can you point out what you find convoluted about the design so that I can fix it?

The opponent rolls first, this is done automatically by the U.I. The enemy dice roll result is displayed on the right. This tells the player what he needs to roll to beat the enemy.

Once the player has rolled his turn, he/she gets the chance to pick and re-roll any dice. This is a risk/reward feature. If you're already winning the round, that's it, you won, no need to re-roll. I'm thinking of having the player win automatically in that case.

If your score is lower than the opponent, you have the opportunity to spend energy (the bolts) to re-roll the dice. You can then have a second chance at beating the opponent.

I thought it I was getting the information across with the current design but I've been re-designing this over a dozen times so I know it really well which influences my perspective on things. I'm too involved to be objective which is why comments from other people is necessary to me and why I'm repeatedly redesigning and asking for feedback.

At the moment the design isn't good. I don't like it. It looks amateur and it's not good enough for me. I need help to manage my space more efficiently so it looks pro before coding. If I mess up in my design I'll end up wasting more of my very limited financial resources. So I really need help about this.

Offline eishiya

  • 0100
  • ***
  • Posts: 1226
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram

Re: Combat U.I.

Reply #14 on: March 12, 2020, 02:00:28 pm
Have you looked at the code? If it was done by a programmer worth paying, the ratio/sizing should be in there as variables you can tweak. If not, I could try taking a look at it for you, maybe I can figure it out and make it easier to edit for you. No one deserves to be beholden to such silly limitations xP

It's not anything specific I find overwhelming, the whole thing is just full of information, most of which means nothing to me. You need to reduce the information displayed simultaneously, I think.
(To be fair, this latest go is much easier to understand since it's just

Even with your description, it took me a while to figure out where the enemy dice were. I see now they're darker, but I tend to read things from top to bottom, so I expect the first thing to happen (enemy rolls) to be at the top. Having to refer to the chart on the other side of the screen is also slow and unnatural.
Consider:
- The enemy dice at the top of the page.
- The player dice at the bottom. The confirm/reroll buttons can be below or above, season to taste.
- A horizontal "scale" between the sets of dice representing the different hands, with little arrows above and below indicating where on the scale each hand is (enemy arrow from above, player arrow from below, the arrow colours should match the dice colour, so that both the colour and position correspond).  Every hand in dice poker can be assigned a unique point value, so a scale like this can even be used to distinguish similar hands (e.g. a pair of 2s versus a pair of 5s, the 5s can put the arrow slightly further to the right, indicating a better score). The hands should be indicated with icons rather than text.
- A bolt icon on the "Re-roll" button to make it clearer that it costs a bolt.
- Removing the little "frames" around the dice, they just add more meaningless visual information.
- Making the pips all the same size. Bigger pips make the dice read less clearly, as low rolls don't look empty. Bigger pips look like they're "stronger" than smaller pips, which is obviously not the case, they're weaker! The negative space around pips is important.
- Since my suggestion adds an extra visual element, it'll take up much more space vertically. To aid this, consider putting the player and monster portraits to the left of the dice rather than above them. I think this'll make them read more clearly anyway; I kept just parsing them as decoration.
- You could put a win/loss/tie indicator on the confirm button, that would make things even clearer. It would also avoid the need to make the player auto-win when they roll a win the first time, and the player could look over the dice as much as they'd like to understand how they won (dice poker can take some getting used to for players not already familiar with it).

This would be easier to parse IMHO, and more compact. It would leave the entire right page empty. If there isn't anything you specifically need the two-page set-up for, I'd reduce it to one page (with the wire binding on the top to make things more visually interesting, or on the side if you need it out of the way).

Using a scale with icons instead of text would also be easier to localise (or easier to understand for people whose main language isn't supported).
(Edit: You could make the scale easier to understand by putting the indicators in the middle of the hand's scale segment instead of weighted by score, and only do the weighting if both players have the same type of hand, to show which has the better score.)

Here's a quick mock-up of what a scale could look like:

You could have it bigger, mine's smaller than it should be. There's space! If you go for a single-page notebook, you could even make it large enough to include text labels, though IMHO you don't need them.
I used your blue palette but IMHO it would read better with some extra hues. The full house and straight are hard to tell apart with the colours currently available.
Some indicators of poor/great on the far left and right respectively could help players unfamiliar with dice poker.

Minor suggestions unrelated to clarity:
If you're doing a "pen art in a notebook" theme, consider avoiding even fills of the darker colours. Instead, maybe employ hatching or other indicators of texture to make them look more like pen drawings.
Give the dice slightly rounded corners so they look more like real dice. The interior already has rounded corners, it's weird that the exterior does not.
Your player and enemy dice should have the same spacing. The player dice are currently more tightly spaced.
« Last Edit: March 12, 2020, 02:02:14 pm by eishiya »

Offline Zizka

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Combat U.I.

Reply #15 on: March 13, 2020, 07:02:22 pm
Quote
Have you looked at the code? If it was done by a programmer worth paying, the ratio/sizing should be in there as variables you can tweak. If not, I could try taking a look at it for you, maybe I can figure it out and make it easier to edit for you. No one deserves to be beholden to such silly limitations xP
Ok but I would ask him first. How would you make the map part of the book? How would you make it so that it respects the book theme and isn't just a random image there? Also, that image should always be visible to the player which means a page would always have the map part on it every time you change pages? Don't get me wrong, having the whole concept unified as a book would be great. I just don't see how to do it.

Quote
It's not anything specific I find overwhelming, the whole thing is just full of information, most of which means nothing to me. You need to reduce the information displayed simultaneously, I think.
(To be fair, this latest go is much easier to understand since it's just
Since it's just...? I think part of your sentence is missing. But either way, at least it's easier to understand.

The top part doesn't really serve much purpose really. It's just a visual representation of what's written in the text adventure.

I'll submit a new version with your suggestions. I like the idea of a scale but the problem is the following:
With such small icons, how do you represent a straight? I have no clue. Like you said, maybe if I can make the icons just a bit bigger I could cram it in.

Offline Zizka

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Combat U.I.

Reply #16 on: March 13, 2020, 08:42:42 pm
Alright so here's the new version with the various fixes. I graduated each section from 1 to 6 for the dice.

Offline Zizka

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Combat U.I.

Reply #17 on: March 14, 2020, 08:33:26 pm
I've tried to play around the dice symbol in the meter. I got some space free but the issue is with the straight result. I've tried a color code but it doesn't really work all that well. I would need to put numbers on the dice but at that size it's difficult to manage.



And this is my best shot at the moment:

« Last Edit: March 14, 2020, 11:37:25 pm by Zizka »

Offline Zizka

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Combat U.I.

Reply #18 on: March 15, 2020, 05:23:39 pm
So I've been playing around giving more room to the book again with perhaps the intention of having the upper part somehow integrated in the book if I can find a way how.


For the dice score bar, this is about the smallest it can get if I want to use dice which actually represent something. There's still too much empty space and the book isn't centered but let's say if we can optimize this.

Offline Zizka

  • 0010
  • *
  • Posts: 495
  • Karma: +0/-0
  • Keep on smilin'
    • View Profile

Re: Combat U.I.

Reply #19 on: March 16, 2020, 07:55:52 pm
Alright after hours pushing things around I finally managed to have the book take the whole area:


There's still a lot of space management to deal with. The picture in the frame on the right page is not really something would show up as I'd have the camera centered on the player, which means empty space wouldn't show as much.

The challenge at the moment is to make everything fit nicely on the left page. I have room, I just need to figure out how to occupy that space efficiently.