はじめに
PixiJS でタイルマップを実装していると、タイルとタイルの間に細い線（隙間）が入ってしまうことがあります。本記事では、Angular + PixiJS で 2D ゲームを開発中に発生したこの問題の原因と解決方法を紹介します。
問題
PixiJS でタイルマップを表示したところ、以下のようにタイルとタイルの間に細い赤い線（背景色）が見えてしまいました。
タイルのサイズや配置に問題はなく、Tiled で作ったマップデータも正しいのに、なぜか隙間が生じてしまう状態でした。
解決方法
原因：サブピクセルレンダリング
タイルの隙間の原因は サブピクセルレンダリング です。
カメラ（app.stage）をプレイヤーに追従させる際、stage.x / stage.y に小数値が入ることがあります。たとえば画面幅が奇数（例：1537px）の場合、
this.app.stage.x = this.app.screen.width / 2 - this.x;
// 1537 / 2 = 768.5 → 小数になる！
stage 全体が 0.5px ずれると、GPU がタイルの境界を正確に描画できず、隙間部分に背景色が透けて見えてしまいます。
修正方法：Math.round() で座標を整数に丸める
カメラ追従の計算結果を Math.round() で整数に丸めるだけで解決します。
初期化時（initPixi()）：
// ❌ 修正前
this.app.stage.x = this.app.screen.width / 2 - this.x;
this.app.stage.y = this.app.screen.height / 2 - this.y;
// ✅ 修正後
this.app.stage.x = Math.round(this.app.screen.width / 2 - this.x);
this.app.stage.y = Math.round(this.app.screen.height / 2 - this.y);
毎フレームの更新処理（update()）：
初期化時だけ修正しても、毎フレーム呼ばれる update() で上書きされてしまうため、こちらも同様に修正が必要です。
// ❌ 修正前（update() 内）
this.app.stage.x = this.app.screen.width / 2 - this.x;
this.app.stage.y = this.app.screen.height / 2 - this.y;
// ✅ 修正後（update() 内）
this.app.stage.x = Math.round(this.app.screen.width / 2 - this.x);
this.app.stage.y = Math.round(this.app.screen.height / 2 - this.y);
初期化時だけ直して「消えない…」となるパターンが落とし穴です。両方を修正するのがポイントです。
おわりに
たった Math.round() を追加するだけで解決できる問題ですが、原因に気づくまでに時間がかかりがちです。PixiJS でカメラ追従を実装する場合は、最初から座標を整数に丸める習慣をつけておくと安心です。
同様の理由で、プレイヤーのスプライト座標も丸めておくとより安全です：
this.player.x = Math.round(this.x);
this.player.y = Math.round(this.y);
参考
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼
https://projisou.jp![対応していない形式のファイルです。]()