概要

ゲームでのメッセージ背景の表示などで使えそうなテクニックになります。

結論として、上のような2つのフチ付きの画像を下のように綺麗に重ねる事ができるようになります。(↓はGIF画像です。クリックで動きます)

ポイント

ポイントは画像をAとBのように「背景」と「フチ」に分解して利用することです。

A

B

方法

① 始めに A の上に B を重ねて表示します。(これを C とします)

② この C を A と B で挟み込むことで、フチ付きの画像を綺麗に重ねることを実現できます。
まずは、C よりも上に背景となる A を重ねます。

③ 次に、C よりも下にフチである B を重ねます。

④ これで、フチ付きの画像を綺麗に重ねることができました。