Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Visual design of a custom battle system

I'm making a bunch of changes to the battle system for the game I decided to pluck from my personal development purgatory. A CBT (FFX-like) turn-order, a magic system that (I hope) both encourages magic use over spamming "attack" and makes the big, expensive, powerful spells feel big, expensive, and powerful, and, as the title of this post suggests, a slightly modified visual design. Right now, I've got the basic layout, but a few of the details are bugging me. Here are the two alternatives I've made:
CBS_wo_window.png

and
CBS_with_window.png

The difference is obvious, I hope.

First of all, a few points of explanation.
  • The red circle is an HP bar.
  • The six jewels are mana--you start with a max of 8, and it never goes up. (Though not all spells cost mana and you can, through abilities or equipment, reduce the cost of spells.)
  • The command window, at present, stays in the top left regardless of which actor's turn it is, and whose turn it is is displayed by making the actor blink.
  • The battle background is automatically stretched in the transparent status window version, and it doesn't degrade the quality to any noticeable degree.
  • Fleeing and battle-specific commands (think "Talk" in the battles against Seymour in FFX) are available by pressing the right arrow key next to fight.
  • The command "Magic" is universal (and everyone can learn every spell), while actor-unique skills are in a separate category (in the picture, "Arcana," though the name will differ by character).

So, a few questions:
  1. Transparent or opaque window? Somewhere in between? If you like the transparent version, but think the mana/health bars are too hard to distinguish, what would you do to fix it?
  2. Should the actors be partially transparent like they are in the default battle system (and in the screens I've posted)?
  3. Like/dislike/indifferent to the mana/health bars? Do you think the HP bar looks out of place or too big next to the mana bars? How would you change it?
  4. Should the command window stay where it is? If not, should it stay in one place (where?) or go over each actor on their turn?
  5. Like the "Flee" off to the side, or should it be in the main command window?

And, of course, I'd appreciate any other comments, critiques, or opinions.
 
Hey, this looks pretty cool! Tweaks to the default battle system are always refreshing, especially when they're aesthetically pleasing.

1. In the transparent one, the battleback stretches too far and the command window looks out of place; but in the opaque one, the window takes up too much room. I would suggest trying a partially transparent window, or lowering the window slightly for more room. That would mean tweaking the location of the mana bars slightly, though.
2. They look fine now, but if you want them to stand out more (and keep consistent with the enemies) you could up the opacity.
3. The HP circle is rather inconsistent with the rest of the design; I don't think a gradient fits with the art style. It just stands out more than anything else. How is it going to deplete: graying in color or draining downward/inward? Perhaps if you didn't make the outline so bold and lower the saturation/opacity a knot it will help.
4. Centering above each actor makes more sense to me, but I understand it could block the enemy; perhaps you could lower the opacity, just like if you do so for the back window?
5. How does the "Flee" appear (off a side-window, or by replacing the "Attack" text)? I can see it becoming unbalanced, but lengthening the command window for a rarely useful line may be unnecessary. Your choice, but I'd keep it for now.

A final comment, maybe smooth out (anti-alias) those battler graphics? They're a tad jagged/pixelly on the edges.
 
Regis comments are much more thought out than mine but I'd just like to say I personally prefer number one; the less boxes the better.

You might want to resize the background to scale and then crop it to keep the right proportions however, or resize using a less distorting algo.
 
I like the transparent window, however with the battlers as they currently are, to me, at least, they look like they are fighting with their backs to the enemy. I would probably use rear facing battlers for the actors. With that said, I would not keep the actor battlers transparent either, but rather match them with the enemy.
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top