Tile-based Shader Plugin for Impact.js

 
2 Kudos
Don't
move!
tile-shader
Great atmosphere, don’t you think?

This plugin is based on the tile based shader by Trezsoft with some modifications that I needed for my game.

Demo: http://www.ntaso.com/tile-shader/

Github: https://github.com/ntaso/impact-tile-shader

First of all, I like the tile-based shader approach, because it looks better in some games. The approach of Impact++ for example looks too smooth for pixel-style games. Compare this with a medieval-style tileset and you know immediately what I mean:

Not for all games: Very smooth
Impact++ Shader is not for all games: It’s very smooth

Improvements

  • The shader supports multiple entities
  • Each entity can have its own lighting options (innerRadius and outerRadius). Compare the sizes of the torch lightings above. The left one has a size of 5, the right one of 3.
  • Line of sight works for multiple entities
  • Improved the shading steps for small light sources (see screenshot below)
  • No extra shading layer required. It uses the collision map for line of sight shading. However, you can provide a shading layer if you want.
  • Fixed some bugs with scrolling maps and the camera plugin
Before: Rough edges, because shader steps were linear.
Before: Rough edges, because shader steps were linear.
improved-shader-steps
Improved steps in shading.

Possible bugs:

  • Might not work properly if the layer you want to shade has a different distance than 1. But from my experience, Impact doesn’t work anyways if the main level doesn’t have a distance of 1. So this is probably a non-issue.
  • Sometimes, the shader doesn’t start right away when the game loads. It seems to be random whether it is activated or not from the start and probably has something to do with the level. If you don’t see any shades, you have to trigger the shader in another way (e. g. with a timer) by setting tileShader.forceDrawNextFrame = true

How to Use the Tile-based Shader Plugin

Download the code from GitHub.

In main.js require:

'plugins.tile-shader'

Set up one and only one TileShader:

tileShader: null,
...
init: function() {
    ...
    // load the level before here
    this.tileShader = new TileShader(this.tileSet1);
    // set a dark mood (0-10)
    this.tileShader.ambientLight = 8;
    // enable line of sight shading
    this.tileShader.losShade = true;
    ...
    // add your entity that you want to have as a light source
    this.tileShader.addEntity(torches[0]);
    ...
},
draw: function() {
    this.parent();
    this.tileShader.draw();
    ...
}

Generally speaking, you have to add entities to the shader and remove them if they become obsolete. It depends a bit on your game where you wanna do it. However, you can access the tileShader from anywhere within the game like so:

ig.game.tileShader.addEntity(entity);
// or remove:
ig.game.tileShader.removeEntity(entity);

There are several parameters you can tweak. See the demo and the following notes.

General Notes

  • The tileset has 10 shades. Thus, innerRadius, outerRadius, ambientLight etc. can be >= 0 and <=10. 0 means that no tile will be overlaid. 10 is darkest.
  • If you set tileShader.shadeCircle = false, the shade is completely flat. You can then set the lightness of the shade by setting tileShader.innerShade. If you have shadeCircle enabled, innerShade doesn’t do anything.
  • innerRadius must be smaller than outerRadius. If innerRadius == outerRadius, you won’t see any light. Most of the time, it looks best if innerRadius=0, but you can make a light source appear a bit brighter if you set it to 1 or 2.
  • The shading effect depends a bit on the ambientLight parameter. Set ambientLight to 8–10 for a dramatic mood.
  • The tile shader looks better with darker and moody tiles. In my lab-game, the shader looks kind of dirty (see GIF below).
  • The shader has a lot of draw calls. Like 600 or so. This was the same in the original plugin and I didn’t try to reduce them. However, if your light sources don’t move, they are hardly re-drawn and even if they move and you have 600 draws, a modern computer manages them quite fine. I’m just a bit worried about mobile devices. Might require additional tweaking.
  • Line of sight looks pretty cool in some cases, see this GIF:

line-of-sight-shading

 

Demo: http://www.ntaso.com/tile-shader/

Github: https://github.com/ntaso/impact-tile-shader

The GitHub code also contains the demo that should work right out of the box, if you put your impact-folder in lib/.

Let me know if you have any questions or need help.

Leave a Reply

Your email address will not be published. Required fields are marked *