Critique => Pixel Art => Topic started by: Zizka on January 19, 2020, 09:17:48 pm

Title: Combat U.I.
Post by: Zizka on January 19, 2020, 09:17:48 pm
As a rule of thumb, it's never a good idea to discuss to many things in the same thread:

I need to have the equipment on both sides of the book since I have empty space there. Also, it would allow me to get rid of the tabs altogether. I've thought about cards (like above) but then I don't have enough space for the description unless I make a huge drawing for each item.

I'm looking for design ideas or art comments. I thought about adding a notepad just for the items but I think there would be too much clutter... I also need to add a spot for health and energy.

EDIT: Another try on the card but no:

Another possibility:
Title: Re: Combat U.I.
Post by: Zizka on January 21, 2020, 01:41:52 am
1. Changed the general u.i. Monster and player both have a new spot in the book along with their health points.

2. Changed the energy and health logo for the player.

3. Drew a new logo for the enemy hp to fit with the chart.

4. At the moment, the left page feels too empty.

5. The possible roll outcome will now be displayed in green, it'll be up to the player to make the selection among what's available.

6. Moved everything to the left side to have some room for the dice on the right.

7. Cleanup the skull icon to make things less busy.

8. Changed the bindings in the middle to make them look better.

9. Moved the chart further to the right to avoid having the cursor in the middle of the book.

10. Added a coffee mug.

11. Made the first symbol, the bullet vest, for the dice.

12. Made the second symbol, energy.

13. Made the third dice, gun.

14. Made the fourth dice, noose.

15. Made fifth dice, horseshoe (for wild). Will likely change it later.

So I'm still looking for an icon for the sixth dice. Ideas?


The idea is that if you roll a minimum of 3 of a kind, you trigger the corresponding icon:

3x energy +5 energy
3x gun: trigger weapon damage bonus
3x bullet proof vest: prevent some damage based on the armor worn.
3x noose: this is the 'bad' roll since getting 3 of those doesn't trigger anything although it works normally for the chart.

the horseshoe is just a wild so having 3 of those doesn't trigger anything either.

I'm still missing one idea for the icon. So far I have:
'bad' roll
so the last one maybe could trigger a bad effect if you end up with 3x or more of it.


That's it for my notes for today.
Title: Re: Combat U.I.
Post by: Zizka on January 24, 2020, 12:18:42 am
Title: Re: Combat U.I.
Post by: aeveis on January 27, 2020, 06:34:34 am
Randomly popping in here, I checked out the other thread that had more context on the game.

Some thoughts:
Do you have an idea of everything that you'll need for the UI? Might be helpful to make a flow map of possible options first, rather than deciding since there's extra space you should have equipment there. Especially since the decision of equipment has caused more problems for you to solve visually, like where to fit the description and the like. I would think of what info is really needed for the player to see and then format the art and the layout to that.

Basically organize and plan out the UI first and then make the art work for it.

Visually I think you've made good decisions in improving readability and everything looks pretty good - but if the layout changes that you may have to rehash things anyway, so I'm not sure if feedback on how things look will really help if the layout is not figured out first.

It feels like you are describing a lot of the game without much context - there's a lot of detail and it's a bit hard to parse and feels unfocused.  Might be better to make a devlog and just talk about one subject at a time, or perhaps a game design document of how you want everything to work. Otherwise I'm concerned there'll be a lot of churn - a lot of repositioning and revising of assets with an unclear design goal.

Hope that is helpful!
Title: Re: Combat U.I.
Post by: Zizka on January 29, 2020, 09:56:05 pm
Again I stopped dropping by when someone replies  :D.
That's the screen I dropped by to share:

You bring valid and interesting points, I'll try to answer to the best of my ability.

I'm pretty much done with the rest of the game design and it has already been coded in or is in the process of being coded. Right now, the biggest challenge is the combat.

As you can see from the previous screens, I've thought about a lot of different design ideas for the combat. The game is meant to replicate 'fighting fantasy'/choose your own adventure books. So battle uses dice.

Recent changes I've made:
a. I've dropped the idea of using cards, too clunky and cumbersome.

b. I've replaced regular dice with various faces on the actual dice.

c. The player rolls the dice and checks the chart (like in the example) to determine the outcome of the round.

d. The player can choose to re-roll any dice at the cost of one energy. So the player can re-roll 2 for 2 energy and 4 for 4 and so on. This is a risk-reward feature, the player can decide to take a change and re-roll the result he got.

e. The player can re-roll as many times as he wants but each re-roll sequence costs +1 energy. So far example, if the player rolls: 4,4,3,2,2,1, he could choose to re-roll the '1' for 1 energy. If he then gets:
4,4,3,2,2,5 he could try again but this time it would cost 2 energy and so on. ( I used numbers here to make it simpler to explain but replace the numbers with pictures).

f. All the dice are identical but I'm having trouble deciding on which sides I want.

g. I know I want a neutral side which has no impact on the game which is the skull.

e. I know I want the noose which is the negative side. It prevents the player from re-rolling that dice.

f. This is where I'm stuck, I don't have anymore ideas for the other faces of the dice. I've asked around multiple forums but can't get any suggestions.

g. I'd like to replace numbers by pictures (hearts and bolts). As you can see, I've done some experimentation in this attempt at different layouts and concepts.

Maybe a devlog would help about this particular issue since there's a of information to process both regarding the art and the actual concept, I'll think about it.
Title: Re: Combat U.I.
Post by: aeveis on January 30, 2020, 04:47:27 am
Ah ok, that clears up some things.

What's the current theming with the dice or game and what are the current symbols? They look different from your previous symbols. Also, usually if a dice landed on a skull that would feel like a bad result, but may make sense depending on the theme. So far I see the skull, chains, bullet vest, gun, and you mentioned the noose. Previously you mentioned energy and horseshoe.
Title: Re: Combat U.I.
Post by: Zizka on January 30, 2020, 12:03:09 pm
Good questions! Allow me to answer to the best of my ability.

* The theme is horror.

The sides I have considered so far:

Skull: this is actually taken straight from Hero Quest, the board game. In the game it is meant to represent offensive properties. In a game about horror I figured it could be neutral enough nothing is set in stone.

Noose: the hangman noose. Prevents that dice from being re rolled.

Horseshoe: initially meant to be a wild meaning it can match with other dice to create combinations. I have since considered dropping it as I feel it is too powerful.

Brain (energy): meant to replenish the playerís energy. I donít know to implement this in-game.

Chain: something negative. I donít know what yet.

Gun: something offensive, I donít know how to implement this.

Bullet vest: something defensive, I donít know how to implement yet.

Core idea:
A. Risk/reward by risking rerolling dice.

B. Energy management. Rerolling consumes energy.

C. Energy management 2: getting damaged grants energy (adrenaline). Also meant to balance out negative rng outcomes.

D. Executing higher combinations requires energy. This one Iím not sure. Feels like it dampens the success of getting a good combination.

E. Some ideas to consider:
Continue to stray away from yahtzee as a mechanic. Work with symbols combinations for outcomes instead of focusing solely on pairs. Danger of becoming too complicated. Need to be careful about this.

F. Always be wary of overcomplicating things to solve design hurdles. Strive for simplicity and effectiveness.

Title: Re: Combat U.I.
Post by: Zizka on January 30, 2020, 06:22:12 pm
Alright, so I've reworked the whole thing so that it's more cohesive and more readable. I think now anyone can figure out what's happening at a glance.
Title: Re: Combat U.I.
Post by: Zizka on February 03, 2020, 11:21:17 pm

Newest version with explanations.
Title: Re: Combat U.I.
Post by: Zizka on February 17, 2020, 09:11:45 pm
I thought it was too cramped in the previous version so I've tried again:
At the moment there's a lot of empty space and I'm racking my brain to my all of the elements in place.
Title: Re: Combat U.I.
Post by: Zizka on February 25, 2020, 08:30:51 pm
Alright I've got a new version yet again:
Title: Re: Combat U.I.
Post by: Zizka 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.

Title: Re: Combat U.I.
Post by: eishiya 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.
Title: Re: Combat U.I.
Post by: Zizka 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.
Title: Re: Combat U.I.
Post by: eishiya 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.
- 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.
Title: Re: Combat U.I.
Post by: Zizka on March 13, 2020, 07:02:22 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
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.

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.
Title: Re: Combat U.I.
Post by: Zizka 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.

Title: Re: Combat U.I.
Post by: Zizka 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:

Title: Re: Combat U.I.
Post by: Zizka 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.
Title: Re: Combat U.I.
Post by: Zizka 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.
Title: Re: Combat U.I.
Post by: Zizka on March 18, 2020, 07:39:56 pm
Title: Re: Combat U.I.
Post by: Zizka on March 24, 2020, 11:27:08 pm
Not sure why I keep posting but I've never been one to quit  :lol:. This is pretty much the final version unless someone comments otherwise.