どうも、名古屋スタジオでエンジニアをやっていますアーロンです！
今回は下のシンプルな画像を使ってartifactの発生と解消について説明します。
（下画像は見易くするために拡大表示していますが、赤線の実際の太さは1pxです）
このシンプルなSpriteにアニメーションを付けると、期待とは異なるレンダリングが行われることがあります。
以下の動画を見てみてください！
下の3つは期待通りに滑らかにアニメーションしています。
一方で、上の3つは...なんだか美しくないですね。
上のSpriteで発生しているギザギザは「artifact」と呼ばれます。
動画を止めて確認してみます。
右側の3°回転した画像が最もartifactを確認し易いため、それについて説明してみます。
拡大して見てみましょう。
内部の四角形は問題ありませんが、外部の四角形はartifactが発生しています。
でも心配ありません！
四角形の周りに透明の1ピクセルを入れると・・・
欲しかった見た目になります（右側の画像を見てみてください！）。
ポイント：なぜこんな事が起きてるのか？
四角形の外側のピクセルと背景のピクセルをブレンドする際に以下の違いがあるからです。
左の画像（透明1ピクセルなし）：レンダリングエンジンは赤色と赤色を混ぜて赤色をレンダリングする
右の画像（透明1ピクセルあり）：赤色と透明を混ぜて半透明の赤色をレンダリングする
例えば、スプライトを右に半ピクセルを動かすと、元の右1pxと元の左1pxの中間色をレンダリングします。
透明1pxの有無に関わらず内部の四角形は問題なくレンダリングされていた理由は、赤色と白色をブレンドしていたためです。
画像の作り方を工夫することで期待したレンダリング結果を得ることができる！というトリックの紹介でした。