pixi.jsのSpriteで発生する画像ノイズの対処法

pixi.jsのspriteでは座標を移動させたときにノイズが発生することがあります。

上の画像の黒い線がノイズです。このノイズはマップのようにスプライトが並んで表示されているときに見えやすいです。

（※このノイズは低い解像度で作らないと出ない(見えない)のかもしれません。ほとんどのHTML5ゲームは私のような低解像度でゲームは作っていないです。

またjsonと併用するスプライトシートのやり方ですれば画像間に隙間を設けられるため出ないのかもしれません。私のような低解像度＆enchant.js風スプライトなやり方で作る方法だと出てしまうものだと思います。）

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

整数だけで移動処理をしていればこのノイズは全くでないんですが、小数点以下を含む数字を扱うとこのノイズが出てしまいます。小数点以下の数字が悪さをしているようです。

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

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

(ていうか解像度が高ければ小数点以下を使わなくても済むのかも？私のように低い解像度だと移動量が0.1とかでも10倍の解像度なら１でいいんだもね)

小数点以下を切り分けたり戻したりする

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

じゃぁ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;

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

あとがき

高い解像度でやればわからない可能性がありますが高い解像度で作ってるHTML５ゲームってなぜか逆にしょぼく見えるのは私だけでしょうか(^^;)

あと低解像度で作った方がブラウザの特性で勝手に画像がボケてよりレトロ感が出て良いんですよね。

まぁそんなのは個人の好みなので私みたいな個人開発者しかこんなことしてないかもしれないです(^^;)