Is there a way to avoid this lighting effect using tile-maps in Phaser?

user_13214334 0
Viewed 49

Is there a way to get smooth gradient from the lighting?

I'm creating a survival game using PhaserJs 3. I'm using the LightsManager and a tileset I modified from one of the example tilesets included in the examples.

Currently the tile grid is visible because of how the lighting is working with the tiles.

enter image description here

If possible, I would like to have the lighting be smooth similar to the picture below:

enter image description here

My grass tile is 32x32:

enter image description here

and the normal map is the following image

enter image description here

which was generated using this normal map generator site.


 var config = {
        type: Phaser.WEBGL,
        width: 800,
        height: 600,
        pixelArt: true,
        backgroundColor: '#000000',
        scene: {
            preload: preload,
            create: create,
            update: update,
        },
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 0, x:0 },
                debug: false
            }
        },
    };

var light;
var layer;

var game = new Phaser.Game(config);

function preload ()
    {
        this.load.image('tiles', ['assets/tilemap.png','assets/tilemap_n.png']);

        ...
    }

function create ()
    {

        var level = [ // The grass tile is #29 in the tileset
            [29,29,29,29,29,29],
            [29,29,29,29,29,29],
            [29,29,29,29,29,29],
            [29,29,29,29,29,29],
            [29,29,29,29,29,29],
            [29,29,29,29,29,29]]

        var map = this.make.tilemap({ data: level, tileWidth: 32, tileHeight: 32 });

        var tiles = map.addTilesetImage('tiles');
        layer = map.createStaticLayer(0, tiles, 0, 0).setScale(2)
        layer.setPipeline('Light2D');

        light = this.lights.addLight(390,223.3, 150).setIntensity(.8);
    }
phaser-framework lighting
1 Answers

I'm not sure if this is the best (or most performant) way, but you could use this plugin to create a post pipeline blur.

here a working demo of this plugin: https://codepen.io/rexrainbow/pen/zYzzYVw

Basically you would have to load the plugin, in preload:

   function preload (){
       ...
       this.load.plugin('rexkawaseblurpipelineplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexkawaseblurpipelineplugin.min.js', true);      
   }

And apply the plugin in to the specific camera, or gameobject:

function create (){
    var postFxPlugin = this.plugins.get('rexkawaseblurpipelineplugin');
    var postFxPipeline = postFxPlugin.add(this.cameras.main, {
        blur: 1,
        quality: 3
    });
    ...
}

Or you could fake, the gradient with multiple lights and may be add a specific ambientColor:

light1 = this.lights.addLight(390,300, 150, 0xffffff, .80);
light2 = this.lights.addLight(390,300, 250, 0xffffff, .75);
light3 = this.lights.addLight(390,300, 350, 0xffffff, .70);
this.lights.enable().setAmbientColor(0x555555);
user_16792860
Related