uGUIのImageを9sliceを維持したまま平行四辺形にしたい

Question

実現したいこと

音ゲーのスライドノーツのようなデザインを実現したい。
一枚の正方形の画像から、9sliceして引き延ばせるようにし、台形に頂点を変形して表示したいです。
>有名音ゲーのスライドについての記事

バンドリ！ガルパのプレイ画面

試したこと

ブログ等を参考に、Graphicsを継承したクラスを作成してOnPopulateMeshをオーバーライドして台形にすることはできましたが、外側の枠の部分は引き延ばさない方法がわかりませんでした。
>[Unity5.3]UGUIの画像を変形させる

Imageを継承したクラスを作成して同様のことをしようとし、公式のリポジトリ等を見ましたが、必要そうな関数がprivateであったりとしてそのようなことは想定されていないのかと判断しました。
>Unity Technologies/Unity/UI/Image

うまく表示する方法を探しています。

補足情報

Unity2017 3.0f3

Answer 1

Imageを継承したカスタムコンポーネントを作り、OnPopulateMesh内でImageが作ったメッシュ頂点をさらに変形してやればいけるのでは、と思いました...が、おっしゃる通りすでにVertexHelperに追加されている頂点を変形させようにも、既存の頂点を取得する方法が用意されていないようです（GetUIVertexStreamは求めるものとは何だか違うようです）。

ちょっと不本意ではありますが、VertexHelperの頂点の位置を格納しているm_Positionsに直接アクセスして書き換えてみました。

本来のImageコンポーネントを削除し、代わりにこちらをアタッチして...

using System.Collections.Generic;
using System.Reflection;
using UnityEngine;
using UnityEngine.UI;

public class SkewedImage : Image
{
    public Vector2 Skew; // 水平・垂直スキューのタンジェント...たとえば(0, 1)とすると、X成分の増加に傾き1で比例してYも増加する→X軸が45°傾く

    protected override void OnPopulateMesh(VertexHelper toFill)
    {
        // 本来のImageの頂点を作成させる
        base.OnPopulateMesh(toFill);

        // Imageが作成した頂点を(むりやり)取得
        var positionsInfo = typeof(VertexHelper).GetField(
            "m_Positions",
            BindingFlags.Instance | BindingFlags.NonPublic);
        var positions = positionsInfo.GetValue(toFill) as List<Vector3>;
        var positionCount = positions == null ? 0 : positions.Count;

        // スキュー変換行列を作成
        var skewMatrix = Matrix4x4.identity;
        skewMatrix.m01 = this.Skew.x;
        skewMatrix.m10 = this.Skew.y;

        // 全頂点にスキュー変換を適用
        for (var i = 0; i < positionCount; i++)
        {
            positions[i] = skewMatrix.MultiplyPoint(positions[i]);
        }
    }
}

Imageコンポーネントは独自のエディターを使っているので、こちらもカスタムエディターを用意しEditorフォルダに入れておき...

using UnityEditor;
using UnityEditor.UI;

[CustomEditor(typeof(SkewedImage), true)]
[CanEditMultipleObjects]
public class SkewedImageEditor : ImageEditor
{
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI(); // まず本来のImage用エディターを表示する
        var targetSkewedImage = this.target as SkewedImage;
        if (targetSkewedImage != null)
        {
            var prevSkew = targetSkewedImage.Skew; // 編集前のスキュー
            var newSkew = EditorGUILayout.Vector2Field("Skew", prevSkew); // 編集後のスキュー
            if (newSkew != prevSkew) // 値の編集が行われたならば...
            {
                targetSkewedImage.Skew = newSkew; // スキューを新しい値に更新し...
                targetSkewedImage.SetVerticesDirty(); // メッシュの再生成が必要なことを知らせる
            }
        }
    }
}

これで操作してみると、下図のような感じになりました。

プライベートフィールドへの直接アクセスをせずにやるとなると、自前で9スライス機能を持つコンポーネントを作ることになるでしょうかね。
Imageのコードを改造する手もあるかもしれませんが、Unity Technologiesの公開しているコードは自由に改造していいわけではないらしいので、そちらは控えておいた方がよさそうです。

※ご質問者さんのおっしゃる「台形」というのは、ご提示の図を見て平行四辺形のことだろうと勝手に解釈してしまいましたが、任意の台形（平行でない対辺があるかもしれない）でないとまずかったでしょうか?

追記

どうやらGetUIVertexStreamを使っても問題なさそうでした。計算量・メモリ消費量は少し増えそうですが（わずかな増加なので大したことはないでしょう）、こっちの方がまともなやり方のように思います。

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SkewedImage : Image
{
    public Vector2 Skew; // 水平・垂直スキューのタンジェント...たとえば(0, 1)とすると、X成分の増加に傾き1で比例してYも増加する→X軸が45°傾く

    private List<UIVertex> vertices;

    protected override void OnPopulateMesh(VertexHelper toFill)
    {
        // 本来のImageの頂点を作成させる
        base.OnPopulateMesh(toFill);

        // Imageが作成した頂点をまともな方法で取得
        // どうやらメッシュがインデックス付きからインデックスなしに変わってしまう?
        // UI用オブジェクトなら、インデックスなしメッシュでもさほど頂点数は増えないだろうと期待する
        if (this.vertices == null)
        {
            this.vertices = new List<UIVertex>();
        }
        toFill.GetUIVertexStream(this.vertices);
        var vertexCount = this.vertices.Count;

        // スキュー変換行列を作成
        var skewMatrix = Matrix4x4.identity;
        skewMatrix.m01 = this.Skew.x;
        skewMatrix.m10 = this.Skew.y;

        // スキュー変換適用後の頂点でメッシュを置き換える
        // せっかくImageが作ったメッシュを破棄してしまっている気がするが、こちらの方が正当なやり方かもしれない
        for (var i = 0; i < vertexCount; i++)
        {
            var v = this.vertices[i];
            v.position = skewMatrix.MultiplyPoint3x4(v.position); // 平行四辺形変形ならMultiplyPoint3x4で対応可能なので、こっちを使った方が少し高速?
            this.vertices[i] = v;
        }
        toFill.Clear();
        toFill.AddUIVertexTriangleStream(this.vertices);
    }
}

枠線が細く見えることについて追記

確かに傾き量を大きくすると、枠線が細く見えてしまうのは気になりますね。
なんとかして9スライスの区切り位置をずらしてやる必要があるかと思います。あまりエレガントではないですが、ずらし機能を追加してみました。

元のスプライトは9つの四角形が並んだ36個の頂点からなり、これがGetUIVertexStreamを通った後は一つの四角形が2つの三角形になって頂点数は54個になるようです。このうち、コード中のSliceOffsetV0Indicesに示した18頂点が下側のスライス区切り位置に、SliceOffsetV1Indicesに示した18頂点が上側のスライス区切り位置に相当するようなので、これらを見た目がよくなるようY座標を調節できるようにしてみました。

私のコードはスキュー行列方式のままですが、ご質問者さんの方式でも使える方法かと思います。

SkewedImage改変版

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SkewedImage : Image
{
    // スライス区切り位置に相当する頂点のインデックスの表
    private static readonly int[] SliceOffsetV0Indices =
    {
         1,  2,  3,  6, 10, 11,
        19, 20, 21, 24, 28, 29,
        37, 38, 39, 42, 46, 47
    };
    private static readonly int[] SliceOffsetV1Indices =
    {
         7,  8,  9, 12, 16, 17,
        25, 26, 27, 30, 34, 35,
        43, 44, 45, 48, 52, 53
    };
    
    public Vector2 Skew;

    // スライス区切り座標のずらし量
    public Vector2 SliceOffsetV;

    private List<UIVertex> vertices;

    protected override void OnPopulateMesh(VertexHelper toFill)
    {
        base.OnPopulateMesh(toFill);
        if (this.vertices == null)
        {
            this.vertices = new List<UIVertex>();
        }
        toFill.GetUIVertexStream(this.vertices);
        var vertexCount = this.vertices.Count;
        var skewMatrix = Matrix4x4.identity;
        skewMatrix.m01 = this.Skew.x;
        skewMatrix.m10 = this.Skew.y;

        // スライス区切りインデックス表を参照するためのインデックス
        var sV0 = 0;
        var sV1 = 0;

        for (var i = 0; i < vertexCount; i++)
        {
            var v = this.vertices[i];
            v.position = skewMatrix.MultiplyPoint3x4(v.position);

            // iがスライス区切りインデックス表に載っていれば、Y座標をずらす
            if (i == SliceOffsetV0Indices[sV0])
            {
                // 第1のスライス区切り位置をずらす
                v.position.y += this.SliceOffsetV.x;
                sV0 = Mathf.Min(sV0 + 1, SliceOffsetV0Indices.Length - 1);
            }
            else if (i == SliceOffsetV1Indices[sV1])
            {
                // 第2のスライス区切り位置をずらす
                v.position.y += this.SliceOffsetV.y;
                sV1 = Mathf.Min(sV1 + 1, SliceOffsetV1Indices.Length - 1);
            }

            this.vertices[i] = v;
        }

        toFill.Clear();
        toFill.AddUIVertexTriangleStream(this.vertices);
    }
}

SkewedImageEditor改変版

using UnityEditor;
using UnityEditor.UI;
using UnityEngine;

[CustomEditor(typeof(SkewedImage), true)]
[CanEditMultipleObjects]
public class SkewedImageEditor : ImageEditor
{
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();
        var targetSkewedImage = this.target as SkewedImage;
        if (targetSkewedImage != null)
        {
            var prevSkew = targetSkewedImage.Skew;
            var newSkew = EditorGUILayout.Vector2Field("Skew", prevSkew);
            var dirty = false;
            if (newSkew != prevSkew)
            {
                targetSkewedImage.Skew = newSkew;
                dirty = true;
            }
            var prevSliceOffsetV = targetSkewedImage.SliceOffsetV;
            var newSliceOffsetV = EditorGUILayout.Vector2Field("Vertical Slice Offset", prevSliceOffsetV);
            if (newSliceOffsetV != prevSliceOffsetV)
            {
                targetSkewedImage.SliceOffsetV = newSliceOffsetV;
                dirty = true;
            }
            if (dirty)
            {
                targetSkewedImage.SetVerticesDirty();
            }
        }
    }
}

動かした様子

Comments

[proelisoft]

コード、画像付きの大変丁寧な回答でとてもわかりやすく、感謝しております。
今回は台形ではなく平行四辺形で実装する予定です。
base.OnPopulateMesh(toFill); で一旦頂点を生成した後、座標を行列で変換ということですね、なるほどです。Graphics系や行列の知識が整理できました。ありがとうございます。
スキュー変換行列は傾ける基準点が中央なのとn倍で考える必要がありそうなので、今回は右側にある頂点をずらすという考え方でやってみます。
for (var i = 0; i < vertexCount; i++) {
var v = this.vertices [i];
if (0 < v.position.x) {
v.position = new Vector3 (v.position.x, v.position.y + 50, v.position.z);
}
this.vertices [i] = v;
}

[proelisoft]

傾けるほど枠の線が細くなり違和感が出るのが課題ではあります
https://drive.google.com/open?id=18VX4RjqEd3O5O0zPHAhuiqshdN49nbcO

[proelisoft]

追記を参考に組み直したところ、綺麗に表示することができました！本当にありがとうございます！