A Knight's War - Code A Game Competition 4th May to 30th June - Retro Strategy

Started by Matty, May 08, 2018, 10:44:21

Previous topic - Next topic

iWasAdam



What I'm trying to get you to think about is consistency about presentation.
lets take these quickly
1. the knight with the light saber - or is is a sausage ir whatever - without more information the user will make their own story
why would I choose that guy over the red devil. who is naked in flames?

step back - think of chess. how do expain how to play chess to someone who has never seen it before. it is no use in saying the pawn goes here and does that. What is a pawn? "did you say Prawn", etc :) why is is called a pawn, etc, etc

next the question mark
I know that putting it there is an easy thing to do - but it doesn't make sense in that there is no connection to deploy unit. why would I think that it would give me help about that - everything there is contained, etc,etc

lastly the UI style.
I'm not going to go into why one font is better than another, but the rounded brown box does not fit with the font, which does not fit with painterly style of drawing

I did a quick google to see if I could find some examples of games where the style matched the UI: :)


An artist you might get some inspiration from is Mark Rothko:

Qube

Quote from: iWasAdam on May 16, 2018, 05:59:16
maybe the innuendo was a bit much
And then you post an image with "Mr Dong"?.... I did have a lot more to say but I'll refrain for now :)
Mac Studio M1 Max ( 10 core CPU - 24 core GPU ), 32GB LPDDR5, 512GB SSD,
Beelink SER7 Mini Gaming PC, Ryzen 7 7840HS 8-Core 16-Thread 5.1GHz Processor, 32G DDR5 RAM 1T PCIe 4.0 SSD
MSI MEG 342C 34" QD-OLED Monitor

Until the next time.

iWasAdam

OH CRAP! yes you're right, I didn't even think of that. I wont remove it as it changes the context. but will refer to him as 'the knight' from now on. I apologies.

Matty I found this you might find really interesting as it sorta sums up style and computers in a really nice way :)

Derron

ctrl f5 is to tell your browser to refresh potentially cached data.

Edit: I totally missed posts of page 3 - this reply was meant for the last post on page 2 :-)


bye
Ron

Matty

Hi folks...development continues...did some more work this evening after work......

Changes include:

1. Better help - there is now an 'advisor' who offers advice should you click on him. I'm still working out the text, the font, the content, and so on but it's there and will tell you the details that you were asking about before (the various coloured boxes, the unit abilities and so on)

2. Gradually getting rid of the 'brown rounded corner buttons' and replacing with 'painted images' - taking a while - I've done three of them so far - changed the help, changed the help advisor background and changed the 'deploy' button in the middle of the screen during deployment.

The other changes and more are being worked on ...but time for me to go to bed. It's almost 11pm.

Thanks.




Derron

The last screen (mage explanation) exposes that you need to create some kind of "text container".

You could have the image with a brownish-bar below. This bar/area then can contain the text.
Also make sure that text is clearly readable (so get rid of white areas in that section - if you paint stuff).

Best is to have all elements properly layouted.

I tried to come up with some "classic" datasheet - of course you can have all this elements with hand-drawn borders too.

(my lines do not look that calm and nice in Krita...hmm)

Benefit of having individual elements: it is easier to do one or another again and again until they suit perfectly.

Elements you need:
- image
- name
- short description ("Lore")
- stats (attack, hp, ...)
- skills (could have additional tooltips if you do not explain them in the short description)

bye
Ron

Matty

Progressing....

Changed all ui buttons to have same style background and colour scheme.

Added help text at various locations throughout the game - you can click on the advisor multiple times or when you are deploying units it shows text like below:


iWasAdam

I know I can come across as negative - but that's not my intention.

So... Brilliant!
This all looks so much better and cleaner. The new mini icons really do you justice as you can see exactly what they are - the white knights have a sort of spacehulk thing going on which (imho) look very good :)

A thought for you:
it looks like you have 24 points to create your 'army', with each 'person' having a number of points cost. Why not show that cost next to each icon/person?

;) ;) ;)

Matty

Thanks Adam, it feels like I'm finally getting it to look like a proper game of sorts...I'm a lot happier with it myself...iterative process and all that...I know there's a few things wrong but your comments have helped - as have Derrons.

Yes - constructive criticism is useful and good - sometimes it gets to me though - it's part of the process of improving what I'm doing but it can have an initial reaction of annoyance at being criticised...but I know it's a good thing.

Derron

Quote from: iWasAdam on May 17, 2018, 12:37:29
A thought for you:
it looks like you have 24 points to create your 'army', with each 'person' having a number of points cost. Why not show that cost next to each icon/person?

Maybe this is why the units are "left aligned" rather then "centered" on the icons - maybe Matty already is on his way to add "move points" "hp" and "attack" to the right corners/side ?



@ drawings
The "space hulks" and their left and right "neighbours" have a "camera orientation" which is about 30°  - which fits way better than the "front view" the "magician" provides. The front view is ok if it was just the "unit icon". But as you want to use them on your tiles/game board too, I think the slightly "perspective view" makes things look better. Normally this also allows for slight overlaps to increase "plasticity".


@ Text background
The dude has some margin on the left (till "0px") while the semitransparent background has a margin of 0px (0px to gameWidth).
The text just lists simple values, values which might better be displayed in a way to allow rapid scanning with your eyes


Health: 10   Cost:    10
Attack: 10   Defense: 10

People learn "locations" pretty fast, and then they do not need to read "words" they just look at the values. And if you use "color codes" you could use such stuff pretty nicely in "combat texts" etc. (-10 in red for taken damage, -5 (5 blocked) with -5 in red, and "5 blocked" in the defense color ...). It should not become as colorful as a childrens playground but colors could help you to abbreviate texts, make things easier to recognize ....
Eg. you only have 3 attack types (melee, ranged, magic) - you could give each of them a color - and use this color on tiles giving bonus to such attacks. Ranged = green like forests, melee = brownish like ground and magic gets some fairy-colors ;-)).


@ "Back" button
You did not center the text. Dunno what programs you use for doing this stuff but proper alignment pleases the eyes! Many programs allow you to create a textbox with specific dimensions: just layout the whole thing so it perfectly wraps the button (without the dropshadow!). Then in this textbox just align the text horizontally centered (vertically only works for "Uppercase" as "g" or "p" have parts below the baseline leading to a vertical alignment different to other chars. so "back" does align differently than "previous").


@ GUI
you can improve step by step - so most often you would not use a simple-color-background but add some "subtle texture", decals, borders ... all the tiny things to make stuff look cool, interesting, "integrated".


Hope you do not just work on the gfx style - people here most often like good gameplay rather polished stuff without a game behind ;)


bye
Ron

Matty

I'll get to the rest later but regarding alignment/back button etc:

I'm using paint.net - no gui rendering ability - everything is hand drawn with a wacom tablet and mouse...using simple paint commands, layers and so on...I don't have the ability to even set a grid in this program and snap to grid points..I have to do it all by eye.

I probably really should use a good tool for this...but I'm using what I've currently got and know how to do...so all the centreing stuff that is off is due to my inadequate visual / hand eye coordination.

Derron

Layers are your friend: move them around to your needs until it looks properly aligned.

I like paint.net when doing some very simple stuff. Dislike Gimp as it does behave "odd" (if you are used to Photoshop) ...

If you like drawing with your wacom: become a friend of "krita" (it is open source - and free) - pretty good looking stuff was done with it.


bye
Ron

Matty

Now with set positions for stats and useful help on ability icons.

Note:taking a screenshot on the phone while hovering the cursor over something is hard!3 fingers needed on device at once!

Derron

You show the tooltip of a unit - but you do not visually inform the user which icon they are hovering.

A simple effect I am using in BlitzMax is:
Code (BlitzMax) Select

drawIcon()
if iconIsSelected
  SetBlend LightBlend
  SetAlpha GetAlpha()*0.25
  drawIcon()
  SetBlend AlphaBlend
  SetAlpha GetAlpha()*4
endif


That way the original image is used to "highlight" the hovered one - including rounded borders etc (which you wont get with a "DrawRect").
As IWasAdam already wrote: if it is a GUI it should behave as users expect GUI stuff to behave: normal, hover, clicked, disabled states (normal drawing, highlighted, darken a bit + offset 2x2 pixels, desaturate + tint in red when disabled/not allowed).


bye
Ron

Matty

Yeah...still on the way....it's on my list to do. (It was mentioned a while ago...still getting to it.