[tutorial] How To Make A Realistic Shadow Like In Mr. Jump

Discussion in 'Gameplay' started by Danlespect, Apr 15, 2018.

  1. Danlespect

    Danlespect Avid Boxer

    Joined:
    Jan 21, 2017
    Messages:
    132
    Likes Received:
    77
    How To Make a Realistic Shadow Like in Mr. Jump?
    Before everything, here is the result:


    Here are two methods to make this shadow:
    -The first one is only usable with a dark background and horyzontal platforms but is smooth, easy to make, and works with unlimited platforms (like ground on earth).
    -The second one is only usable with limited platforms (like small islands as in this game) but works with all rotated platforms, and all backgrounds.

    METHOD 1:
    1. Use a dark background.

    2. Make a Shadow.png file with the same color as the background (but choose a shadow shape).

    3. Import your Shadow in Buildbox and reduce its opacity.

    4. Place it under the character, in the Start Scene, and set its linear velocity in order to make it follow the character.

    The most important thing in this method is the LAYERS.

    5. First, you have to duplicate the shadow in the Start Scene and place the different copies at different highs.
    Each shadow/copy correspond to each platform's high in the game. (=If all your platforms have the same high, you need only one shadow.)

    6. In my game, I put water, so I also need to copy a shadow for the water's high.

    Once you set your different shadows and their highs, it looks like this (I used a white backgroung in order to show the shadows):
    [​IMG]

    You probably figured out that when a shadow is in front of the background, it's invisible (because of the color).

    7. Now we have to add a new object to the game, I call it "Position Z". It will be used to position correctly the layers in order to display only one shadow at the same time.

    Note: In the scenes, set it as a decoration and keep it away from the Gameplay, the player mustn't see it. (you can also set its opacity to 0).

    8. Rank the shadows per their highs. -> The higher shadow has to be in front of all others shadows.

    9. Now you can basically put the platforms in front of the shadows that are not as high as them.
    It looks now like this:
    [​IMG]

    10. You're done on the Start Scene. The problem is that in the others scenes you'll have more or less objects, which means that the position of the layers will be different.

    Therefore, we need to add the "Position Z" objects in the others scenes in order to keep the good layer position for each platform:
    When you test a scene, if a shadow is displayed in front of a platform higher than the shadow, it means you have to add "Position Z" objects under the platforms in order get
    the platform in front of the shadows that are not as high as it.

    Here is an example:
    [​IMG]

    After this, you're done. :)

    But as you can see, there is two problems with this methods: We have to use a dark background and only horizontal and fixed platforms.
    This is why I'll show you a second method that complete the lacks of the first one.
    ----------------------------------------------------------------------------------------------------------------------------------
    METHOD 2:
    1. Make an animation frame by frame (png) of a shadow that pass in front of the top of a platform. (Quite long. Keep in mind that more frames = smoother effect.)
    [​IMG]

    2. Create a new game object with the frame 1 of your animation as default animation.

    3. Set the collider of the object like this:
    [​IMG]

    4. Add an advanced move that plays the shadow animation you made when the object collides a character (and choose the right animation speed in order to
    give the shadow the same speed as the character):
    [​IMG]

    5. Put your object in front of the platforms and you're done!

    BUT

    If you have non-horizontal platforms, you need to:
    6. Duplicate the object (reimport it in Buildbox) with the same advanced move.

    7. Rotate the default animation and the shadow animation of the object.

    8. Set the collider of the object like this:
    [​IMG]

    9. Add this rotated object in the front of the rotated platforms and you're totally done. :)

    This method works very well and allows you to use a different background and rotated platforms, but you have to make a lot of frames in order to get a smooth result.

    As you can see, this method only works with limited platform, because your animation has a limited size.
    So what I did is combining those two methods to get the result I have in my small game Hexajump (not released).

    Thank you for reading this tutorial, I hope it helps.

    Good luck to us all!

    Dan.
     
    Last edited: Apr 15, 2018
    AppNasty, AndyG, Xoctrebla and 3 others like this.
  2. wesam_badr

    wesam_badr Miniboss Boxer

    Joined:
    Oct 10, 2015
    Messages:
    1,065
    Likes Received:
    479
    nice tricks thanks for the tutorial
     
    Danlespect likes this.
  3. Rebel Studios

    Rebel Studios Avid Boxer

    Joined:
    Sep 25, 2015
    Messages:
    466
    Likes Received:
    280
    WHOA!!! Big thanks for the tutorial mate!! Best of luck to your game :)
     
    Danlespect likes this.
  4. Bilz636

    Bilz636 Avid Boxer

    Joined:
    Oct 5, 2015
    Messages:
    313
    Likes Received:
    182
    Can't we just use component "ghost jump" for the shadow? hmm just thinking
     
  5. VectologyGames

    VectologyGames Serious Boxer

    Joined:
    Oct 5, 2015
    Messages:
    529
    Likes Received:
    473
    The juice is not worth the squeeze.
     
    yenomeerf likes this.

Share This Page