All geek questions in one place

Creating smooth transitions of lighting using tiles in an HTML5 / JavaScript game

I am trying to implement a lighting effect in an HTML5 / JavaScript game using tile replacement. What I have now is work, but the transitions do not look smooth / natural as the light source moves. Here where I am now:

  • Right now, I have a background map that uses PNG tiles with a light / shadow spectrum, ranging from the darkest tile to completely transparent. By default, the darkest tile is drawn at the entire level at startup, covering all other layers, etc.
  • I use predefined tile sizes (40 x 40 pixels) to calculate the position of each tile and store its x and y coordinates in an array.
  • Then I create a transparent "grid block" object with a size of 40 x 40 pixels at each position in the array
  • The engine I use ([ImpactJS] [1]) allows me to calculate the distance from the light source object to each instance of this mesh block object.
  • Then I can replace the tile under each of these tiles of the grid blocks with a tile of the corresponding transparency.

I am currently doing calculations like this in every instance of the grid block object that is generated on the map:

var dist = this.distanceTo( ig.game.player ); var percentage = 100 * dist / 960; if (percentage < 2) { // Spawns tile 64 of the shadow spectrum tilesheet at the specified position ig.game.backgroundMaps[2].setTile( this.pos.x, this.pos.y, 64 ); } else if (percentage < 4) { ig.game.backgroundMaps[2].setTile( this.pos.x, this.pos.y, 63 ); } else if (percentage < 6) { ig.game.backgroundMaps[2].setTile( this.pos.x, this.pos.y, 62 ); }

(sorry for the weird distance, I still haven't got the code insert here)

The problem is that, as I said, this type of calculation does not make the light source very natural. Switching the tiles looks too sharp, while ideally they will fade smoothly and gradually using spectrum tiles (I copied a tile from another game that does this, so I know that this is not a problem with the shades of the tile. I just don’t sure how another game does it)). I think that maybe my method of using percent to switch tiles can be replaced by a better / more dynamic proximity formula that would allow smoother transitions? Does anyone have any ideas on what I can do to improve the visual effects here, or is there a better way to calculate proximity with the information I collect on each plate?

+4
source share
1 answer
 var size = 32; var a = [size]; for (i = 0; i < size; i++) { a[i] = [size]; for (y = 0; y < size; y++) { a[i][y] = 1; } } function display(arr) { h = ""; for (y = 0; y < size; y++) { for (x = 0; x < size; x++) { h += "<span style='background-color:rgba(255,255,255," + (arr[x][y] / 10) + ")'></span>"; if (x == size - 1) { h += "<br/>"; } } } $("#h").html(h); } function LightSource(x, y, l) { this.x = x; this.y = y; this.l = l; } var ls = []; ls.push(new LightSource(6, 6, 4)); ls.push(new LightSource(2, 2, 3)); ls.push(new LightSource(9, 9, 5)); ls.push(new LightSource(20, 14, 8)); ls.push(new LightSource(20, 19, 8)); for (z = 0; z < ls.length; z++) { for (x = 0; x < size; x++) { for (y = 0; y < size; y++) { xd = x - ls[z].x; yd = y - ls[z].y; dist = Math.sqrt(xd * xd + yd * yd); if (ls[z].l - dist > 0) { a[x][y] += ((10 - a[x][y]) / 10) * (ls[z].l - dist); } } } } display(a);​

https://gamedev.stackexchange.com/questions/23454/grid-cell-based-light-system

http://jsfiddle.net/ZmPqL/

http://jsfiddle.net/vCgeM/

0
source

Source: https://habr.com/ru/post/1403600/

More articles:


All Articles