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

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

ノイズ

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

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

どのゲームで遊ぶ?

スマホ専用対戦ピンポンゲーム。タッチだけのイライラ操作が逆に楽しい?
障害物を避けながらただただ上を目指すゲームです。オンラインランキング機能付き
部屋に侵入してきた蚊と戦うカジュアルゲームです。現実同様好き放題飛び回る蚊をうまく叩い...
タイミングを狙って射撃するカジュアルゲーム。熱いストーリー付き。

コメント欄

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

コメントを残す

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

ゲームタグ一覧

ゲーム開発書籍(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発