User Tag List

Results 1 to 7 of 7

Thread: How to make 2D games look better by adding realism with a drop shadow

  1. #1
    Clicker Fusion 2.5Android Export Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    AftPeakTank's Avatar
    Join Date
    Apr 2013
    Location
    Greece
    Posts
    369
    Mentioned
    14 Post(s)
    Tagged
    0 Thread(s)

    How to make 2D games look better by adding realism with a drop shadow

    For those who are interested, I created a mini tutorial about 2d character shadowing with a small touch of realism.

    You can check it here

    This technique was used in Maniakos Mineras

  2. #2
    Clicker Fusion 2.5Android Export Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    AftPeakTank's Avatar
    Join Date
    Apr 2013
    Location
    Greece
    Posts
    369
    Mentioned
    14 Post(s)
    Tagged
    0 Thread(s)
    When I was young, I always wondered why some games seem more real to my eye and others not. Why some of them gave me a false impression of depth and solidity and others seemed like the characters were floating. It didnít take me long to understand that shadows were the trick.

    In this tutorial I present 2 easy implementations of shadows and I explain step by step how to implement my favorable.

    I hope you will find it useful.

  3. #3
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleUniversal Windows Platform Export Module

    Join Date
    May 2014
    Posts
    96
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Neat example. Very simple and to the point. Also, the look of your game gives me pleasant nostalgic feelings.

    I do have a couple of suggestions:

    Instead of using the RGB coefficient to make the shadow black, I would make the sprite itself black.

    For the transparency, I wouldn't do this on a per-object basis. I did this in an earlier game not knowing better. The result was that overlapping shadows would be darker than what one might want. Instead, put the shadows on their own layer and change the transparency of the entire layer. That way, you don't get those darker overlapping spots, and you don't have to worry about shadows casting over higher points.

  4. #4
    Clicker Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    Rayek's Avatar
    Join Date
    Feb 2017
    Posts
    56
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Even in simple tile games the addition of subtle shadows may improve the overall look and feel tremendously. I like the example given by Daniel Cook, from lostgarden.com:

    BlockRPGMockup-772331.jpg

    The trick is to add subtle shadows to indicate depth to otherwise very flat looking art:

    PlanetCuteShadowTest.jpg

  5. #5
    Clicker Fusion 2.5 Mac
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Fusion 2.5+ DLC (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Jan 2015
    Location
    Australia
    Posts
    158
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by raxabit View Post
    Instead, put the shadows on their own layer and change the transparency of the entire layer. That way, you don't get those darker overlapping spots, and you don't have to worry about shadows casting over higher points.
    Oh my god, this is genius, how have I not thought of this before

  6. #6
    Clicker Fusion 2.5Android Export Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    AftPeakTank's Avatar
    Join Date
    Apr 2013
    Location
    Greece
    Posts
    369
    Mentioned
    14 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by raxabit View Post
    Neat example. Very simple and to the point. Also, the look of your game gives me pleasant nostalgic feelings.

    I do have a couple of suggestions:

    Instead of using the RGB coefficient to make the shadow black, I would make the sprite itself black.

    For the transparency, I wouldn't do this on a per-object basis. I did this in an earlier game not knowing better. The result was that overlapping shadows would be darker than what one might want. Instead, put the shadows on their own layer and change the transparency of the entire layer. That way, you don't get those darker overlapping spots, and you don't have to worry about shadows casting over higher points.
    Ahhh, very nice suggestions.

    In fact, regarding the RGB coefficient, I would have to do this for each animation sequence and every frame in it. Too much work for me. One could also automate the whole process and use the same animation of the original active coding all the process.

    Now regarding the transparency, this is awesome. It never crossed my mind that this problem would appear. I will have to update the article and give you som ecredit then

    If you are ok with that ofc.

  7. #7
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleUniversal Windows Platform Export Module

    Join Date
    May 2014
    Posts
    96
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AftPeakTank View Post
    Ahhh, very nice suggestions.

    In fact, regarding the RGB coefficient, I would have to do this for each animation sequence and every frame in it. Too much work for me. One could also automate the whole process and use the same animation of the original active coding all the process.

    Now regarding the transparency, this is awesome. It never crossed my mind that this problem would appear. I will have to update the article and give you som ecredit then

    If you are ok with that ofc.
    If you have Photoshop, you could export your sheets, select the outside of the sprites, select inverse, delete the sprites, and paint bucket the selection. I don't know if solid color sprites are less taxing than doing the RGB coefficient, but it might be worth looking into. Anything to juice out some extra performance.

    Credit is fine, but credit it to Raxasoft Games.

Similar Threads

  1. [Request] Bevel + drop shadow
    By jobromedia in forum Shader Development
    Replies: 0
    Last Post: 4th December 2015, 10:07 PM
  2. Extras ? Extention ? Flash light ? Shadow drop ?
    By seifeldin in forum Fusion 2.5
    Replies: 3
    Last Post: 30th July 2014, 11:36 PM
  3. Variable height drop shadow problem
    By Shawn in forum Multimedia Fusion 2 - Technical Support
    Replies: 16
    Last Post: 27th September 2012, 03:33 PM
  4. Drop Shadow
    By Looki in forum Shaders
    Replies: 0
    Last Post: 11th November 2010, 08:52 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •