漫画で服が透ける眼鏡というアイテムがよくあります。Unityではスプライトマスクという標準機能があり、これにより服が透ける眼鏡を簡単にゲームのギミックに落とし込むことができます。
必要なモノ
①透けさせたいイラスト（今回は下記画像を使用します）
②透けた後のイラスト（全裸差分等）
③眼鏡の画像（透過が必要なためpng形式）
④眼鏡の画像のレンズの範囲を塗りつぶした画像（色は何でもよい。これもpng形式）
眼鏡で透けるギミック実装手順
１．まずはUnityの2Dプロジェクトを作成
２．新規作成 → 2Dオブジェクト → スプライト → 正方形 で準備した4つの画像全てのゲームオブジェクトを作成する。
３．空のオブジェクトを作成し、透ける画像と透けた後の画像を子オブジェクトにする。また、眼鏡のオブジェクトの子オブジェクトして眼鏡のレンズのオブジェクトを配置する。
４．各画像のSprite Rendererのレイヤー順序の値を 眼鏡のフレーム → 眼鏡のレンズ → 透けさせる画像 → 透けた後の画像 の順に設定する
例：
眼鏡のフレーム：4
眼鏡のレンズ：3
透けさせる画像：2
透けた後の画像：1
↓画面イメージ
５．眼鏡のレンズを選択し、インスペクターの「コンポーネントを追加」で「Sprite Mask」を追加する
６．追加した「Sprite Mask」のスプライトに眼鏡のレンズ画像を指定する。その後、眼鏡のレンズの「Sprite Renderer」をコンポーネント毎削除する。
７．透けさせたい画像の「Sprite Renderer」の「マスクインタラクション」を「外部マスクの可視化」にする
これで眼鏡のレンズの領域だけ透けさせたい画像が透けた状態になります。
眼鏡を自由に動かす（備考）
透けさせるのは上記手順で完了ですが、眼鏡をマウス操作で動かせるようにします。
１．「GlassesMove」というスクリプトを作成して、下記コードを貼り付けます。
using UnityEngine;
public class GlassesMove: MonoBehaviour
{
// 移動可能な範囲を指定
public Vector2 minBoundary; // 左下の制限
public Vector2 maxBoundary; // 右上の制限
private bool isDragging = false;
private Vector2 offset;
private Camera mainCamera;
private Collider2D objectCollider;
private void Start()
{
// メインカメラを取得
mainCamera = Camera.main;
// コライダーを取得
objectCollider = GetComponent<Collider2D>();
// コライダーがない場合はエラーログを表示
if (objectCollider == null)
{
Debug.LogError("オブジェクトにCollider2Dがアタッチされていません");
}
}
private void Update()
{
// コライダーがない場合は処理しない
if (objectCollider == null) return;
Vector2 mousePosition = mainCamera.ScreenToWorldPoint(Input.mousePosition);
// マウスボタンが押された時の処理
if (Input.GetMouseButtonDown(0))
{
// コライダーの範囲内にマウスがあるか確認
if (objectCollider.OverlapPoint(mousePosition))
{
isDragging = true;
// オブジェクトとマウスの位置の差分を記録
offset = (Vector2)transform.position - mousePosition;
}
}
// マウスボタンが離された時の処理
if (Input.GetMouseButtonUp(0))
{
isDragging = false;
}
// ドラッグ中の処理
if (isDragging)
{
// 新しい位置を計算
Vector2 newPosition = mousePosition + offset;
// 指定範囲内に制限
newPosition.x = Mathf.Clamp(newPosition.x, minBoundary.x, maxBoundary.x);
newPosition.y = Mathf.Clamp(newPosition.y, minBoundary.y, maxBoundary.y);
// 位置を更新（Z座標は維持）
transform.position = new Vector3(newPosition.x, newPosition.y, transform.position.z);
}
}
// ギズモで範囲を表示（エディタでの視覚化用）
private void OnDrawGizmosSelected()
{
// 移動可能範囲を視覚化
Gizmos.color = new Color(0, 1, 0, 0.3f); // 半透明の緑
Vector3 center = new Vector3(
(minBoundary.x + maxBoundary.x) / 2,
(minBoundary.y + maxBoundary.y) / 2,
0
);
Vector3 size = new Vector3(
maxBoundary.x - minBoundary.x,
maxBoundary.y - minBoundary.y,
0.1f
);
Gizmos.DrawCube(center, size);
// 範囲の枠線
Gizmos.color = Color.green;
Gizmos.DrawWireCube(center, size);
}
}２．眼鏡のフレームのゲームオブジェクトに作成した「GlassesMove」をアタッチします。
３．「コンポーネントの追加」から「Box Collider 2D」もアタッチします。
４．「GlassMove」のインスペクターでMin BoundaryとMax Boundaryを入力できるので眼鏡のフレームを動かせる領域を設定します。
（動かせる範囲が緑の領域で表示されるのでそれを見て動かせる範囲が問題ないか確認します。）
これで完了です。ゲームを起動するとマウスで眼鏡が動かせます。
（紹介用に作ったのものは準備ができたら後悔します。）
