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

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

ノイズ

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

これは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ファイルを作成する方のスプライトのやり方でマップを作ればノイズが出ないかもしれません。ただその方法でやるのはいろいろ大変そうであんまり現実的ではないんだよなぁ。。(いい方法あったら教えて!)

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

enchant.jsでこんなのもできるのか?と試したテストゲーム。
あほげー。世紀末な感じの世界で熱い男たちの戦いの火ぶたが切って落とされる!?
同色で複数隣り合っているタイルをタッチするとそのタイルのところに他のタイルが集まります...
簡単な計算問題を制限時間内に何問解けるかな?頭の体操にどうぞ。

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記