AuthorTopic: Forest Strike  (Read 11816 times)

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.