マップスクロールで起こるノイズの対処法

私の作ったテンプレートではタイルマップスクロール時にノイズが入ることがあります。

上の画像の黒い線がノイズです。

これはenchant.jsでも同様の症状がでることがあったの知っていたんですが、原因は小数にあります。

整数だけでスクロール処理をしていればこのノイズは全くでないんですが、小数点以下を含む数字を扱うとこのノイズが出てしまいます。

「じゃぁゲーム作れないじゃないか！！！」

なんて怒らないでください。対処法があります(‘ω’)ノ

小数点以下をなくせばいい

原因は小数点以下の数字が含まれていることにあるので、だったら小数点以下の数字をとっちゃえばいいじゃないのってことになります。

じゃぁMath.floorで丸め込んじゃえばいいのかっていうとそうでもありません。ただ丸め込むとマップスクロールがおかしくなってしまいます。

小数点以下は分けておく

丸め込むんじゃなくて小数点以下は別に一旦置いておいてマップを表示させて、次回計算時にこの小数点以下を戻して計算すれば誤差が出ずに奇麗にスクロールしてくれるようになります。

まずはマップのクラスに小数点以下を保存する変数を用意します。「余り」の英語がremainderだったのでそういう変数名にしました(^^;)

private remainderX = 0;
private remainderY = 0;

でマップ移動計算時にこの変数をマップの座標に加えるようにします。

this.x += this.remainderX;
this.y += this.remainderY;

で、マップの座標を計算し終わったら座標から小数点以下をremainderに保存して座標を整数だけにします。

const x = this.x | 0;
const y = this.y | 0;
this.remainderX = this.x - x;
this.remainderY = this.y - y;
this.x = x;
this.y = y;

これで表示時は座標が整数だけになって、計算時は少数点以下を戻して計算するのでズレが発生しません。

あとがき

スプライトシートとjsonファイルを作成する方のスプライトのやり方でマップを作ればノイズが出ないかもしれません。ただその方法でやるのはいろいろ大変そうであんまり現実的ではないんだよなぁ。。(いい方法あったら教えて！)