回答編集履歴

枠線が細くなる問題について追記

2018/06/03 22:01

投稿

Bongo

スコア10807

test CHANGED Viewed

@@ -241,3 +241,253 @@
 }
 ```
+### 枠線が細く見えることについて追記
+確かに傾き量を大きくすると、枠線が細く見えてしまうのは気になりますね。
+なんとかして9スライスの区切り位置をずらしてやる必要があるかと思います。あまりエレガントではないですが、ずらし機能を追加してみました。
+元のスプライトは9つの四角形が並んだ36個の頂点からなり、これがGetUIVertexStreamを通った後は一つの四角形が2つの三角形になって頂点数は54個になるようです。このうち、コード中の`SliceOffsetV0Indices`に示した18頂点が下側のスライス区切り位置に、`SliceOffsetV1Indices`に示した18頂点が上側のスライス区切り位置に相当するようなので、これらを見た目がよくなるようY座標を調節できるようにしてみました。
+私のコードはスキュー行列方式のままですが、ご質問者さんの方式でも使える方法かと思います。
+SkewedImage改変版
+```C#
+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改変版
+```C#
+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();
+            }
+        }
+    }
+}
+```
+動かした様子
+![プレビュー](272972b5862c893efe1d3ff3b9a33841.gif)

GetUIVertexStream版コードを追記

2018/06/03 22:01

投稿

Bongo

スコア10807

test CHANGED Viewed

@@ -147,3 +147,97 @@
 ※ご質問者さんのおっしゃる「台形」というのは、ご提示の図を見て[平行四辺形](https://ja.wikipedia.org/wiki/%E5%B9%B3%E8%A1%8C%E5%9B%9B%E8%BE%BA%E5%BD%A2)のことだろうと勝手に解釈してしまいましたが、任意の[台形](https://ja.wikipedia.org/wiki/%E5%8F%B0%E5%BD%A2)（平行でない対辺があるかもしれない）でないとまずかったでしょうか?
+### 追記
+どうやらGetUIVertexStreamを使っても問題なさそうでした。計算量・メモリ消費量は少し増えそうですが（わずかな増加なので大したことはないでしょう）、こっちの方がまともなやり方のように思います。
+```C#
+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);
+    }
+}
+```

誤字を修正

2018/06/02 21:10

投稿

Bongo

スコア10807

test CHANGED Viewed

@@ -146,4 +146,4 @@
-※ご質問者さんのおっしゃる「台形」というのは、ご提示の図を見て[平行四辺形](https://ja.wikipedia.org/wiki/%E5%B9%B3%E8%A1%8C%E5%9B%9B%E8%BE%BA%E5%BD%A2)のことだろうと勝手に解釈してしまいましたが、任意の[台形](https://ja.wikipedia.org/wiki/%E5%8F%B0%E5%BD%A2)（並行でない対辺があるかもしれない）でないとまずかったでしょうか?
+※ご質問者さんのおっしゃる「台形」というのは、ご提示の図を見て[平行四辺形](https://ja.wikipedia.org/wiki/%E5%B9%B3%E8%A1%8C%E5%9B%9B%E8%BE%BA%E5%BD%A2)のことだろうと勝手に解釈してしまいましたが、任意の[台形](https://ja.wikipedia.org/wiki/%E5%8F%B0%E5%BD%A2)（平行でない対辺があるかもしれない）でないとまずかったでしょうか?