HTML5 / JavaScriptゲームでタイルを使用して滑らかな照明遷移を作成する
タイル置換を使用してHTML5 / JavaScriptゲームに照明効果を実装しようとしています。私が今持っているのは一種の動作ですが、光源が動き回るので、トランジションは十分に滑らか/自然に見えません。これが私が今いるところです: 現在、背景マップに明るい/シャドウスペクトルのPNGタイルシートが適用されています。最も暗いタイルから完全に透明になっています。デフォルトでは、最も暗いタイルが起動時にレベル全体に描画され、他のすべてのレイヤーなどをカバーします。 各タイルの位置を計算し、そのx座標とy座標を配列に格納するために、所定のタイルサイズ(40 x 40ピクセル)を使用しています。 次に、配列の各位置に透明な40 x 40ピクセルの「グリッドブロック」エンティティを生成します 次に、使用しているエンジン(ImpactJS)により、光源エンティティからこのグリッドブロックエンティティのすべてのインスタンスまでの距離を計算できます。 次に、それらの各グリッドブロックタイルの下のタイルを適切な透明度のタイルに置き換えることができます。 現在、マップ上に生成されるグリッドブロックエンティティの各インスタンスで、次のような計算を行っています。 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 ); …