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

Matty

Worklog....

Started coding on 7th of May 2018.

5 Days Later (in spare time outside of work).....

Have a playable game for both single and two player (hotseat mode).

AI is reasonably challenging at times...it's not supposed to always win.

The game has a demo mode if you sit at the title screen for about 10 seconds it plays a demo version of the game by itself until you click the screen.

It's gradually coming together.

Still have a reasonable number of things to do.

It's getting there though.





Features:

2 Playable factions "Order" and "Chaos"

Each faction has support units like wizards, elite units and standard units (that are essential for victory!)

Each unit has a set of base statistics (as can be seen on separate webpage linked from game itself)

Play is turn based - players take turns deploying their armies first from a selection of units up to a particular points value.

Most units have special abilities such as fireballs, buffs, healings, regeneration, special unique abilities which will become apparent to the user through experimentation - and there are combinations of effects that work well together (such as the fiends supporting the balrogs and the liches draining the goblins)

There will be no sound or music. 

I am tempted to link it to an online database although the browser code is currently all playable offline just on the PC.

The game seems to be playable on my phone as well as my desktop.



Game:
http://www.mattiesgames.com/retrostrategy/

Bestiary:
http://www.mattiesgames.com/retrostrategy/help.html

iWasAdam

ok. looks like you've got the gameplay working. I can't judge this as there are no instructions/help of any kind.

Suggestion: think any player does not know anything at first - you will need some way to guide them

next up would be the presentation style.
- I liked the bestiary. but it serves no more information that having it on a piece of paper. think nice integration.
- You really need to do some investigation on what make a retro game look the way it does. currently I think people will not enjoy the style as it is not quite retro.
Suggestion:
Have a look at these for an idea of what retro look like - think lowres and pixels:










One really good thing for you to think about with retro graphics is this:
They are always constructed at the pixel resolution (or near) and worked at at the pixel level. You wan't just draw something big and then scale it down - it always looks wrong - in that pixel graphics use every pixel with minute detail on color and placement and how it all looks. limited palettes are used.

A good suggestion is to even think in terms of black and white. Would the graphics convert down to black and white - or even start in black and white and then be colored up?

Here's a good (quick and small) tutorial of pixel art techniques for you:
https://design.tutsplus.com/articles/learn-how-to-draw-hand-crafted-pixel-art-in-photoshop--psd-5284

Matty

Ok.
Hmm what is the best thing to do.

A few dot points:

1. My graphics aren't retro and I'm bot likely to change them easily with my level of graphical skill to look good.

2. On the negative side:I suppose my entry would be disqualified for not satisfying the retro theme sufficiently.

3. On the highly positive side:this competition has reawakened my game coding side-very happy about that indeed.  Very very happy.  I thought my game coding days were over because I could not motivate myself but the competition brought out my spark for doing this again.

So conclusion:I doubt I'll manage to satisfy the requirements but I've achieved something even better-a resurrected game coding spirit.

I'll keep working on it and submit it even if I don't quite fit everyone's idea of retro. 

Here are two more images from the game.  I found some suitable web google image reference art and painted my own versions of these.  Thinking of doing another like it for the title.




iWasAdam

no probs.

those two last pics look great - very impressionist in style.

the issues you have is that your 'painterly' style does not match with the presentation - stark font, strange choice of background. what you need to do is find a way to make everything look like there was a single thought behind it.

I've knocked up a way for you that might work:
- ditch the retro ethos and focus on the painterly style which you excel at.
- dont use computer graphics - use paint. so your boxes/windows, etc use a painterly style.

I know the above doesn't help, so I've knocked up a quick demo for you to 'see' what I mean.


I'll give you the 'recipe' next:
boxes use a painterly background as a mask. then drop shadow them
text is similarly (a nice classic bold font) with a drop shadow. The text can be png overlayed
any window will darken what it is on top of - this brings focus forward to the window - and gives a nice look to it.

Retro - dont think computer - think paint and impressionist. :)

Matty

Thanks Adam that's helpful.  Yes.  You are spot on there. Excellent. Typing on phone so short reply.

iWasAdam

One last 'possible' suggestion would be to add some 'texture' back into the painted images to make them look as if they are real paint and not smooth:
E.G


I used (just default settings):
1.  photoshop > filter > filter gallery > texturizer> canvas
2.  photoshop > filter > filter gallery > brush stokes > sprayed strokes
3.  photoshop > filter > filter gallery > texturizer> canvas
4.  used some dodge and burn to bring out some lights and darks - just adds a bit more detail

It does give you some creative way to approach things :)

Matty

Thanks again Adam for the ideas...I've been playing around with some more visuals for this part of the game - similar to your earlier image above. The filtered one you have directly above this I only just saw now...but here are some screenshots of how it's progressing (still got to work on the buttons and things....some of the graphics haven't changed yet...but it's getting there)








Derron

Compare your "border" with the one of Adam - which one does look more "painterly" ? I would prefer Adams.


Then there is this:

-> such images should have the same dimension


And this:

-> See how the background distracts from the icons, and that the icons are not "popping" out as they should ?

My suggestion is to desaturate the background (eg. to 25% - so a bit of color information is kept). Also add a slight (!) drop shadow around the icons so they pop out a bit more (and remove the shadow if "pushed down"). The shadow emphasizes the "far away and blurred"-background effect.


This desaturation should be done similar to the tiles: so do not make them fully gray but keep a bit of color information.


If you do not like the paintery-borders, maybe add a wooden border (like in paintings) - or make some wooden planks and add some "roll" effect to the corners of the images "pinned" on the wooden planks. That way the unit selection would not need this kind of background but "wooden planks" + "metal plate" + icons on the metal plate. Or so.


bye
Ron

Matty

Thanks Derron.  I'm improving at this aesthetic graphics quality...getting better...made some changes this morning before work.

Matty

Now....do I need a tutorial  (optional) - the 80s and 90s games I played had no such things!

Matty

Pictures

Derron

Last two screenshots: images still have different aspect ratios.

Just create a "empty" image (your mask) containing the border - and on the layer below, you have your chaos/order-image. Cutout as desired and both should have the same dimension.
Imho "chaos" needs something drawn left/right.

Now Order occupies 5 tiles (4 in the center + 0.5 on each side) while Chaos occupies a width of 4 tiles.



@ Drop shadows
The "unit selection popup" has a black drop shadow (as expected) but the shadow on the unit-icons is some "gray/grey". Why did you choose this color? use a slight drop shadow - colored black. with slight I am talking about some less dense alpha value (0.5 or below).
Also: the "length" of a shadow defines how much it is floating above the "below scenery". The icons should not float on the "paintery image" (background) but just be understood as "clickable icons" with the drop shadow helping to distinguish from the background.


I made a small example here:


Top left is some basic "default drop shadow"-example (offset X pixels, size X pixels).
Top right exposes some "popout drop shadow" (often seen in 10 years ago's lightboxes on websites)
Bottom left uses a mix of both: a softer drop shadow (size increased, keep a bit of an offset)
Bottom right uses a lighter shadow for the icons - its just to make them a bit "pop out". More a "not 2d" look than a "floating on the panel" style.


If you darken the background while such pop ups are open (only darken them by 10 percent or so - in BlitzMax this would be "setalpha GetAlpha()*0.1; SetColor 0,0,0; DrawRect(0,0,w,h)"), then I would use the top-right + bottom right - style.


If you plan to do it "retro" at the end, you will have to get rid of alpha-shadows as they were not that common ;-)
In that case your "popup" effect was most often done by adding decals to the popup-background (ornaments etc) - or things like "scrolls/torn-paper" effects. And if the backgrounds were desaturated your icons could get their emphasize by using a nother color.

BTW: good looking user interfaces is surely another huge task in a project - and you will never be finished with it.


bye
Ron

iWasAdam

mmm, just been looking at the latest version. hmmm.

Don't take this to heart, it's a light-hearted look at how it works to someone with no idea what is going on. Which isn't my fault.

ok... Questions?
1. good on the right chaos on the left. so why is the play top to bottom?
2. UI. I tried to suggest a way to harmonise the presentation style. The pop-ups and UI elements are just the same. Either do it one way and try and harmonise everything <- !And I do mean everything! Or, risk potential users being put off by jarring graphics. It's not rocket science, but it does take a little time and effort.
3. UI rather clicky. in that: here's a window to click to get to the next window to click to get to the next window, etc, etc. You could start to bring these windows into some more logic.
4. UI first there are windows then there are multiple windows (good/chaos). again look for the same standard throughout.
5. UI buttons - anything that is a button should behave like a button. E.G. if you hover with the mouse it lights up or something. similarly to being pressed.
6. Deploy - I can see there is the ? but it doesn't look like it has anything to do with the window?
7. Deploy help. See above about windows looking like they all belong, consistence, style, fonts, etc
8. Deploy help. select location,etc. The window is still live underneath. why can't I select a grey square? Remember your user will have NO IDEA about what they should do and why. WHY is the most important thing. WHY cant I.... no one said I couldn't..., etc
9. deploy window. Back on the right - possibly better on the left back is usually << and forward >>
10. Deploy unit. see buttons and user feedback
11. Deploy unit. assumptions of units - there aren't any. why choose one splodgy character over another splodgy thing? I like the knight with the huge 'dong', but I'm not sure why having an armoured sexual predator would be a good idea - maybe for the rape and pillage section? Same with naked red dude on fire - is he hot or what?

gameplay
ok. I'm completely lost here
1. I've got one dong dude with 2 hot dudes. and the other side now has added 10 things - a naked pole dancer, cyan dong on a stick guy, and some splodgy things of different colors - don't know what they are - possibly sex toys or lube?
2. There are some colored stats block things. I have no idea what they mean so I've made up some:
green is how much sex they want
red one is how horny they must be
light blue how much of a groove the've got going on
grey how much lube they are carrying

so I click a horny red dude and then have no idea. I'm really wanting to start the orgy and see everyone get it on, but just can seem to get it right - just like real-life I suppose?

Hopefully this will give you a better idea of how things might be changed to make things clearer. think of this as food for thought :)
P.S. I still want to see the dong on the stick guy doing his thang!

Matty

Writing on my phone...try pressing ctrl f5...re ui inconsistent sounds like the graphics are cached from before...unless you can show a picture?

Edit - additional - not sure what all the sexual innuendo is about in your post...seems a bit out there.

iWasAdam

maybe the innuendo was a bit much - but it was me trying to make paint about a user with no concept of what is going on - they will make up their own story to fit what they see  ;D

ctrl F5 - no you've lost me. is this some hidden magic command? Remember anything to do with system level stuff WILL be completely different for other systems. In the words of 'the it crowd' "Have you turned it off and on again..."