Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1386997 Posts in 66501 Topics- by 59051 Members - Latest Member: Strongfinger

January 17, 2021, 07:16:20 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperArtWorkshopNeed help with Screen Layout
Pages: [1]
Print
Author Topic: Need help with Screen Layout  (Read 441 times)
Montoli
Level 7
**


i herd u liek...?


View Profile WWW
« on: March 31, 2019, 11:21:36 AM »

So I have this game I've been working on.  And I'm pretty happy with the game itself!  It's fun to play, interesting, and people seem to enjoy it in playtests.  Development is going well, and overall, life is good!

Except... screen layout.

The game has a lot of information, and I'm struggling to figure out how to put it all on screen in a way that is readable to the player.

Here's a sample game screen.

You'll have to forgive the placeholder art.  I haven't wanted to invest time or resources in "real" art until I'm sure what things need to be on screen, or what they'll look like.  Just pretend that there are real assets, instead of random free icons blown up to way-too-big, and MSPaint backgrounds.

Anyway!  What this image is supposed to convey, is that there are 4 enemies around.  (And one shipwreck, but we're going to ignore that for now.)

If we look at, say, the mermaid, (second from the right), then she has 16/30hp, has a buff (the musical notes) that has 12/12 hp, and is going to attack in 3 turns for 16 damage, unless the player can muster 16 dodge.  (In general, each enemy is the big [placeholder] icon, and the attacks are below it, and the buffs are running down the right side.)

It's kind of a mess.  But I'm not sure how to fix it?  The information I (think) I need to convey is:


  • There are three types of "things" on the board - Enemies, enemy attacks, and enemy buffs.
  • Each of these needs a "health bar", because each one can be "Attacked" individually.
  • Attacks have two extra numbers associated with them as well:  How much damage they'll do if they land, and how much time the player has until that happens.
  • Each enemy can have up to 2-3 buffs and/or attacks.  (Or more, but on average, few enemies have more than 2 attacks active at once, or more than 2-3 buffs.)
  • Ideally, there should be some color consistency as well - enemies should have a red tint, because the resource used to defeat enemies is read.  Attacks should have a blue tint, because the resource used to dodge attacks is blue.  Buffs, same deal, yellow.
  • There needs to be at least some room at the bottom for a list of "Crew members", each of which has some stats, and a blob of rules text.  (They're generally like Magic Cards - most will have a sentence or two describing the unique way that they break the rules.)

So my problem, of course, is that when I try to do that, I get the mess in the picture.  Numbers everywhere, cramped layout, and the whole thing looks generally a mess.  (Again!  It's actually fun when you can read it and know what's going on!  Honest!)

So I'm looking for suggestions.  How to lay this out to be easier to read.  How to have this much information on the screen without overwhelming the player.

So yeah.  Genius layout artists of TIGsource!  Tell me your secrets!  Or at least your well-considered layout suggestions!

Thanks in advance!
Logged

www.PaperDino.com

I just finished a game!: Save the Date
You should go play it right now.
pyxelbit
Level 0
**


View Profile WWW
« Reply #1 on: April 02, 2019, 03:19:53 PM »

i would suggest to put all the information in layers. just show the most important things and add overlays when you put your mouse over an enemy.
consistent colors and readable fonts and icons also help a lot.

take a look how blizzard deals with all the information in hearthstone. i think they did a good job. even the mobile version has every information.
Logged

My Artstation Portfolio click here
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic