そして、あなたがあなたの写真を拡大したいと思うまで、すべては大丈夫です。 そして、この前に、完全に結合されたタイルが継ぎ目を取得し、スプライトのエッジに沿って奇妙な線が表示されることがわかります。
あなたはタイルを重ねようとしますが、縫い目はまだ残ります...そして、あなたはあなたの脳を悩まし始めます。
そして、それはすべて不運な透明ピクセルについてです！ 彼らにも色があることがわかりました。
これが起こっている理由を理解するには、GPUがテクスチャをスケーリングする方法を理解する必要があります。 彼はグラフ編集者がするようにそれをしません。 そして、ここでのポイントは透明性です。
わかりやすく、3Dゲームやテクスチャでは許されますが、完全に不透明なピクセルが完全に透明なピクセルに隣接している場合（ピクセルアートの場合に表示される可能性が非常に高い）スプライトに状況があると、アーティファクトが発生しますなど）。
透明度とPNGについて。
バグ状態が存在する青い正方形の画像があるとします-不透明なピクセルは完全に透明に隣接しています：
この画像は、カラーチャンネル（RGB）とアルファチャンネル（透明度）の2つのチャンネルで構成されています。 キャッチは、完全に透明なピクセルがまだカラーチャンネルで何らかの意味を持っているということです。 そして、この値がどうなるかは、PNGを圧縮したソフトウェアだけが知っています。 実際、これらの色は任意です。
上記の画像の状況では、次の図が簡単に判明します。
つまり 透明ピクセルは白になります。 しかし、以来 彼らは完全に透明です-私たちはこれを決して見ることはなく、すべてが大丈夫です。
透明性、GPUおよびスケーリング。
次に、グラフィックカードが透明度を使用してテクスチャをスケーリングする方法を見てみましょう。
この問題を簡素化するために、カラーチャンネルとアルファチャンネルを個別にスケーリングします。 たとえば、前述のテクスチャを80％スケーリングすると（どのスケールでもバグが表示されます）、次の図が表示されます。
ほら
GPUは、境界線の青いピクセルと透明な境界線を超えるピクセルを混合しました（アルファとは別にカラーチャネルをスケーリングし、透明であるかどうかは関係ないため）。 その結果、境界ピクセルは白と混ざり合い、完全に理解できない色になりました。
明らかに、このようなスプライトを暗くしようとすると、はっきりと継ぎ目が見えます。
そして、そのようなアーティファクトからスプライトが保存された理由は明らかだと思います。境界は徐々に透明に収束し、1から0に急激にジャンプしません。
どうやって戦うの？
それが何であるかを知ったので、私たちはそれをどう扱うかを知っています。 境界線に近い色にするには、境界線に隣接する透明ピクセルが必要です。 さらに、スプライトのマストスケールを2倍以上縮小する場合、幅が数ピクセルのイメージの「エッジング」に注意する必要があります。 しかし、それを行う方法は？
私が見つけた最も簡単な方法は、Photoshopで2番目のレイヤーを作成し、メインレイヤーの下に配置し、ぼかしでぼかし、透明度を1％に設定することです。 その結果、画像の周囲のピクセルはほとんど見えなくなります（透明度1％）が、境界線に近い色が保証されます。 もちろん、ブルー効果はすべてのスプライトに適しているわけではありません。 どこかで、これらの4つの（1％）レイヤーを作成できますが、それらをブラブせずに、単に異なる方向に移動します...
一般に、誰かがこの情報を役に立つと思うことを願っています。