I have a webgl based 2.5D platformer game, and I would like to add a simple blob shadow under the character to help the player with the platforming.

How is this normally done?
As you can see below, I do not need to worry about sloped terrain if that matters.

enter image description here

  • \$\begingroup\$ For the sloped terrain, just get the normal of the raycast and perform a LookAt operation to it for the shadow mesh. \$\endgroup\$
    – Nick
    Jun 14 '12 at 7:42

The Basics

Create a plane. Give it a shadow decal texture. Attach it to your character per the scene graph. Cast a ray from the underside of your character, check where (if anywhere) it intersects with your platforms, and push your shadow plane down accordingly to that vertical level (usually positive y-axis) where the platform top is. This will work, but if your character is near a plaform edge, his shadow will go off into empty space.

Beyond the Basics

So what about when your character is eg. standing on the edge of the platform, or if he is directly over a "step" between two platforms? In that case you need a way to split that shadow plane over one or more platforms. There's a question that needs to be answered first, here: Will your platforms ever be situated differently along the z axis, as well as x and y (as in your screenshot) i.e. will your world be true 3D rather than pseudo-3D? This fundamentally affects the logic you can use for shadow clipping (and everything else, too).

Geometric clipping

Create your full plane mesh with blob shadow decal on it. If your shadow is over a breach or edge, you'll need a single mesh for each platform that the shadow will fall onto -- you'll need to do multiple raycasts, one from each corner of your shadow plane, to determine this. For each platform the shadow falls over, clip that platform's shadow plane, or clip the texture on that plane -- whichever is easiest in the 3D API you're working in -- so that it looks the shadow doesn't "lie into empty space" off the edge of that platform. The pro here is its more accurate to do things this way; the cons here are that (a) it could get a little messy if the shadow could be split over platforms in both x and y rather than just x; (b) you won't be able to have a silhouette shadow (but that wasn't one of your requirements, anyway :)

If your game logic is 2D, this can be greatly simplified to line math, i.e. checking range overlaps.

The pro here is that you don't need to fiddle with mesh vertices. The con is that you are creating many individual plane meshes which may impact performance. You can merge them into one mesh though, by creating a single plane mesh matching that cellular outline.

Grid-based clipping

Considering the potential splitting scenario, this can make things easier. Pick a resolution for your grid. Cast a ray for each cell in the grid, and create a miniature shadow plane at each location, in this way building up the character's entire shadow. Another benefit to this is that you could (with a bit of further effort to determine your characters silhouette from below) have a pretty accurate silhouette shadow rather than just a blob shadow. But that's up to you. Assuming your character doesn't move along the z axis, only x and y, you won't even need a grid, you'd only need strips of your original blob decal. I'm sure this will make sense if you give it some thought -- subdivision in this case, is only required along the x-axis.

The pros here are this approach lends itself to both splitting your shadow across platforms in numerous dimensions, and that you can have proper silhouette shadows. The con is that you are "rasterising" your shadow, resolution is a trade-off between good looks and performance. But considering you were willing to go for a blob shadow, if I were you I might opt for this approach.

Considering everything appears to be arranged orthogonally along your world axes, both these approaches will work well. If you were to implement ramps etc., you should still be able to tilt your shadow planes, but if this is likely to be the case, I would opt for the geometric approach as it will be easier to maintain your sanity under those circumstances. However if using platforms placed arbitrarily in all 3 dimensions, and provided these all lie flat (0 degrees to horizon) I would definitely opt for the grid-based approach.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.