AuthorTopic: Forest Strike  (Read 11819 times)

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Forest Strike

on: January 15, 2018, 10:19:23 am
Hi there,
I want to quickly introduce you to a game I am working on.


Forest strike is a 2D round-based strategy game in pixel-art style featuring animals as characters.
On gamedev.net, I write weekly Dev Blog entries, if you prefer to be up to date: https://www.gamedev.net/blogs/blog/2690-forest-strike-dev-blog/

Actually, I have a few questions regarding the design...

1. What do you think about the graphics? Here are a few examples:








2. This week I was changing the explosion "animation" quite a bit:
Old version:


New version:


Which one do you prefer?

Thank you for reading and please provide feedback.
BR Lukas

PS: I hope this is the right forum. :D

Offline yrizoud

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
    • View Profile

Re: Forest Strike

Reply #1 on: January 15, 2018, 01:14:33 pm
I find it very refreshing, visually. I don't have any strong opinion about the explosions, both work.
You may want to put a shadow under the characters and bombs (even just a solid ellipse), and also the scenery would probably benefit from having these walls cast a shadow on one side to give some depth.
There seems to be a strange scaling issue, for example on the first screenshot with a "hand" cursor it's evident that not all black pixels have the same size, even when the cursor moves. Similarly, the pixels at the tip of the foxes' ears change size during animation. You should really try to have all graphics at a resolution where you can scale them by an integer factor, (x2, x3 etc, not x2.5) otherwise it looks a bit weird.

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #2 on: January 15, 2018, 02:07:30 pm
Hi, thank you for your feedback.
I am going to do the shadow stuff this week (hopefully). It is bothering me for quite a while, that there is no shadow. Actually, I was not sure how I am going to implement it. (either by drawing the shadow for each sprite or by using a shader)
You're right, there are scaling issues. I somehow got accustomed to it, but it definitely should be fixed any time soon.
The only thing I don't see (yet), is the issue with the black pixels. For me it looks like they have the same size. You mean the pixels on the hand cursor, right?  ???

Offline yrizoud

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
    • View Profile

Re: Forest Strike

Reply #3 on: January 15, 2018, 02:35:18 pm
Honestly, a dark green ellipse is very likely to be the best shadow.
Yes I meand the hand cursor. Another example is in the title screen, it's quickly visible that the hearts of blue flower is taller than the bottom petal, while you drew them both "1 pixel high".

From my inaccurate calculation, you're drawing 24x24 tiles, but you display them at 107x80. This causes the visually unpretty sight of uneven pixels. You could try displaying tiles at 96x72 instead, it is the closest integer factor (400% horizontally, 300% vertically)

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #4 on: January 15, 2018, 02:56:24 pm
I'll try out a few different types of shadows.

Regarding the scaling issue, the "title screen" and the game have different resolutions.
The title screen, actually it was just a image drawn for social media aspects, was drawn on a 210x120 canvas (I guess) and scaled it to a width of 1024 with keeping the aspect ratio. I thought with scaling to this resolution, I won't end up with scaling issues (at least not visible). Now that I took another look, I saw a few issues. So, thank you :)

The game has a resolution of 288x288, which is exactly 24 (tile size) x 12 (amount of tiles in both ways). When recording, I was cropping the whole game to the relevant things, so the images do not have the same amount of pixels as the game itself. The game window, on the other side, has a resolution of 1024 x 1024.

Currently, I was not thinking about the resolution aspect that much, but I guess, I should change it a bit. Eventually, changing the game resolution (288x288) might be necessary as well, depending on the size of the window. Am I right with the last thought?

Offline yrizoud

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
    • View Profile

Re: Forest Strike

Reply #5 on: January 15, 2018, 03:59:53 pm
You should really set your mind on a specific in-game resolution as soon as possible, because you don't want to have to redraw all your graphics at a different size.
Be extra careful of things like fonts, because at low resolutions you don't have much choices. 6 pixels wide per character (including spacing) is very readable, but under that, the text gets very messy.

Consider how much screen space the elements take (are they small enough that the player can see many of them ? Large enough that the player differenciate and manipulate them easily?)
The game seems to scroll, so at least you don't HAVE to have the game window show complete tiles.
At the moment you are zooming the pixels 355.55%, in order to display exactly 12 tiles horizontally.
If you zoom 400% instead, player will see 10.6 tiles horizontally.
If you zoom 300% instead, player will see 14.2 tiles horizontally

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #6 on: January 16, 2018, 07:55:58 am
Yesterday I fixed the scaling problem of the game. Now, it definitely looks better, although I was accustomed to the "wrong" scaling. :D
@yrizoud: Your hint with showing 400% helped me fixing it.

Now I have to think about moving the camera, since not all tiles are visible. I think, I am going to implement a drag&drop functionality to move it.

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #7 on: January 21, 2018, 06:01:28 pm
Hi there,
I wrote another weekly Dev Blog. Be sure to check it out: https://www.gamedev.net/blogs/entry/2264339-forest-strike-dev-blog-4/
Here are a few images from the entry.



Please tell me what you think. :)

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #8 on: January 23, 2018, 10:08:25 pm
Here are two screenshots showing the shadow progress:


Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #9 on: January 30, 2018, 09:14:46 am
Here is a new GIF of the shadow process.

What do you think?

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Forest Strike

Reply #10 on: January 30, 2018, 03:11:46 pm
It reads more like smoke than a shadow, because it's adding with the shadows on and from the rocks and because it's entirely unaffected by the topology of the scene. The grey colour doesn't help either; hue-shift your shadows (including the ones cast by the rocks) towards blue or whatever the ambient colour of  the scene is meant to be. In addition, I don't think the soft look fits the style of the rest of the art, I think a solid shape would fit better.

If you render all the shadows to the same "layer" with full opacity, and then blend the whole layer onto the scene, you can avoid the adding. You can still have tiles and characters overlap shadows even if you render the shadow layer last, by erasing those shadow pixels blocked by other elements before you render it.
Faking 3D topology is much harder, but it can also be done in 2D like this, because all your major surfaces are either horizontal or vertical (it's fine if the characters are treated as "flat" because they're so thin and are probably usually moving anyway). If each tile has a "height" attribute, you can offset the shadow by on that tile upwards by some number of pixels based on the height of the tile (overriding any shadow rendered on that height already, since the walls, etc would obscure any ground-shadows behind them). Don't render shadows that overlap visible vertical components of tiles (this can be calculated at run-time or pre-processed), since the shadows are already drawn as part of the tile (or, alternatively, render the vertical areas as fully shaded at all times, regardless of whether there's a cloud above). Even if you only do this with tile-level precision without masking out the shapes of the tiles, it can look a lot better than just a flat cloud shape, especially in motion.

Personally though, I think the clouds are unnecessary, the scene looks plenty busy as it is.

Lastly, I'm not sure it's a good idea to let the cloud shadows overlap UI elements like tile highlighting.
« Last Edit: January 30, 2018, 03:13:23 pm by eishiya »

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #11 on: January 30, 2018, 04:50:48 pm
Thank you for the feedback!
I am drawing my shadow on a specific layer between the floor and the tiles / instances. I will try to hue-shift it to blue (or something like this).
As I am using GameMaker, I draw all the shadows (except the clouds) on a surface. After that, I draw the surface with an alpha of 0.35 on the specified layer (hopefully, I can hue-shift it right here). I was not sure if I should use the soft cloud shadow or the solid one. Booth of them looked good to me. But I will change it to the solid one.

Faking the 3D shadow is not that easy I guess. Sure, you may have the information, how high your object is, but how do you shift the shadow upwards?

My setup is this:
Every frame I draw the shadows with rgb(0,0,0) on a surface. The shadows of the characters is basically the character sprite with slight modifications (stretched). The shadows of the blocks is simply an additional sprite.
So I end up with a transparent canvas with black shadows drawn on it. I think at this point, there is no way I could shift the shadows (in this case the black pixels) upwards. Hopefully, I am wrong and there is a way ;)

Otherwise, I'll just let go of the "cloud shadow".

Lastly, I don't quite understand what you mean with "overlap UI elements". Could you please provide more information regarding this?

Offline yrizoud

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
    • View Profile

Re: Forest Strike

Reply #12 on: January 31, 2018, 10:15:24 am
eishiya is referring to the square that you display on a highlighted block/unit. On the screenshot with mice, this square seems to receive shadow from clouds, it probably shouldn't.

I have a suggestion about the title screen : you're reusing the letters that are normally drawn as carved/burned in grass, but they looks a bit odd when you display them unchanged over a landscape. It will probably look better if you keep a "block of grass" between the scenery and the letters, a bit like this :

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #13 on: January 31, 2018, 11:12:48 am
Now I understand. Yeah, it probably should be underneath the UI elements. I did not notice that at all. Thank you! :)
The casual shadow indeed is underneath.

I will add the block of grass to the title image. It truly looks weird. It's like: "Why is there dirt on the trees??"  :P

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Forest Strike

Reply #14 on: January 31, 2018, 02:58:44 pm
You need to draw the cloud shadow on the same surface as the other shadows if you want to avoid the shadows adding. If that means the mice would not be shadowed, I think that would be fine.

With the 3D effect, you can "shift" the shadow upward by drawing it N*tileheight pixels higher than the base position of the tile you're currently drawing, where N is how many pixels of visual height each unit of tile height corresponds to. So, you're not shifting what's already been drawn, but drawing in a different location. If you draw the cloud in one swoop rather than cycle by the tile, then that means you'd need to first break it up into segments corresponding to tiles it overlaps (which change from frame to frame as the cloud moves), then draw the segments. You might be able to achieve the same effect better with a shader that takes a heightmap or height array as a parameter, but I'm not familiar enough with those to tell you exactly how. I think if you were to use a pixel shader, you'd need to approach it a bit different, look at each pixel on the target surface, and choose the appropriate pixel from the cloud, based on the heightmap (i.e. sample the shadow from N*height lower in the cloud than you normally would), but I could be wrong.

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #15 on: February 06, 2018, 10:38:44 pm
Hi,
somehow I managed to get the fake 3D right regarding the shadows.

What do you think?
Explanation of what I did:
In GameMaker I used blending functions and surfaces to create that effect.
First, I had to draw all the objects, where the shadow of the clouds shall be projected on, on a specific surface - which I called shadow_surface_objects. Then I draw the cloud shadows on another surface - shadow_surface - with an y-offset of -10. The key to get the result was to find the right blend mode. Currently, this line does the magic: gpu_set_blendmode_ext(bm_dest_color, bm_one - bm_src_color);
By using this mode, the shadow_surface_objects is drawn above. Now, only the intersections between the objects and shadows are drawn.
« Last Edit: February 06, 2018, 10:44:20 pm by LukasIrzl »

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Forest Strike

Reply #16 on: February 07, 2018, 02:20:36 am
I think the offset should be higher, but you're definitely on the right track!

I also think the shadows should have a lower opacity. The shadow/light boundary currently has higher contrast than some of your grass-wall boundaries, even though the shadows are not a gameplay element.

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #17 on: February 07, 2018, 07:52:57 am
Yeah, there are still a few things to improve.
Instead of lowering the opacity of the shadows, I might change the shadows of the wall. Personally, I prefer the darker shadows.
There is also a difference regarding the contrast of the shadow for the stone blocks and the dark stone blocks. That has to be fixed as well.

Offline Hoogo

  • 0001
  • *
  • Posts: 81
  • Karma: +0/-0
    • View Profile

Re: Forest Strike

Reply #18 on: February 07, 2018, 08:48:35 am
The mice are goddam adorable!

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Forest Strike

Reply #19 on: February 07, 2018, 01:22:10 pm
The dark shadows look nicer, but they hurt the legibility of the scene. Legibility is more important, because it affects gameplay.

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #20 on: February 08, 2018, 07:41:14 am
That's a good point. I decided to lower the alpha of the shadows from .35 to .25. They still look nice, even though they are "brighter".

Btw: I added a screenshot of my menu a while ago (sorry for the german text, I forgot to switch to the english). What do you think about the menu buttons? The color is currently just white and red if the mouse is above. Is that enough or should I add a button behind the text? Maybe a brown button or something.

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Forest Strike

Reply #21 on: February 08, 2018, 01:45:24 pm
I think you should add buttons, yes. The text is hard to read.

I also think pure white and red are "off-theme", they don't really fit the look of the rest of the menu and the game. Red draws a lot of attention to itself, and I don't think you need that much attention-grabbing in this case, since the player will already be looking at the text/button by the time it turns red. It just needs to be clearly distinct from the white and from the background, but you don't need to go as far as red to achieve that.

Offline LukasIrzl

  • 0001
  • *
  • Posts: 20
  • Karma: +0/-0
    • lukasirzl
    • View Profile
    • Lukas Irzl

Re: Forest Strike

Reply #22 on: February 13, 2018, 09:21:06 pm
Thank you for the feedback. I added simple GUI buttons to the game. Looks like this:

I was not able to update the header image. Maybe, I am able to do it this week. As you can see, I'll have to reduce the height of the header image.

Additionally, I released a Pre-alpha version of the game this week. Get the version here: http://www.indiedb.com/games/forest-strike/downloads/forest-strike-pre-alpha-001

There is a Discord server for feedback and more frequent updates as well: https://discord.gg/JjVnztT
I would really appreciate it, if you join.