2. 程式人生 > >Unity3d-UGUI特效之Image的Skew變形、傾斜效果

Unity3d-UGUI特效之Image的Skew變形、傾斜效果

阿新 • • 發佈：2019-01-23

這次在專案中，做動畫時，想要多UI的圖片做傾斜動畫，比如進場有一定的斜度，然後又變回原來的樣子。於是在網上搜索有關Image變形或傾斜的做法，後面找到根據文件發現可以通過繼承Image來做一些修改，關鍵是在Image渲染之後，我們拿到頂點座標，對座標做一定的偏移，就可以達到目的了。

先來看看效果：


看著效果還不錯，看程式碼：

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

[DisallowMultipleComponent]
[RequireComponent(typeof(RectTransform))]
[RequireComponent(typeof(CanvasRenderer))]
[AddComponentMenu("UI/UISkewImage (UI)", 99)]
[ExecuteInEditMode]
public class UISkewImage : Image {
	[SerializeField]
	private Vector3 offsetLeftButtom = Vector3.zero;
	public Vector3 OffsetLeftButtom{
		get{return offsetLeftButtom;}
		set{
			offsetLeftButtom = value;
			SetAllDirty();
		}
	}
	[SerializeField]
	private Vector3 offsetRightButtom = Vector3.zero;
	public Vector3 OffsetRightButtom{
		get{return offsetRightButtom;}
		set{
			offsetRightButtom = value;
			SetAllDirty();
		}
	}
	[SerializeField]
	private Vector3 offsetLeftTop = Vector3.zero;
	public Vector3 OffsetLeftTop{
		get{return offsetLeftTop;}
		set{
			offsetLeftTop = value;
			SetAllDirty();
		}
	}
	[SerializeField]
	private Vector3 offsetRightTop = Vector3.zero;
	public Vector3 OffsetRightTop{
		get{return offsetRightTop;}
		set{
			offsetRightTop = value;
			SetAllDirty();
		}
	}
	Vector3 GetOffsetVector(int i){
		if (i == 0){
			return offsetLeftButtom;
		}else if (i == 1){
			return offsetLeftTop;
		}else if (i == 2){
			return offsetRightTop;
		}else {
			return offsetRightButtom;
		}
	}
	protected override void OnPopulateMesh(VertexHelper toFill){
		base.OnPopulateMesh(toFill);
		int count = toFill.currentVertCount;
		for(int i=0;i<count;i++){
			UIVertex vertex = new UIVertex();
			toFill.PopulateUIVertex(ref vertex, i);
			// Debug.Log(i.ToString() + ": " + oldPosition[i].ToString());
			vertex.position += GetOffsetVector(i);
			toFill.SetUIVertex(vertex, i);
		}
	}
}

上面四個Offset分別對應四個頂點，如果要想豐富它，我覺得還是用一個外掛好了，哈哈~數學不好，不知道怎麼算頂點和三角面。

在上面程式碼中，雖然引數加了，但是自己定義的屬性，沒法顯示在Inspector上面，因為我們直接繼承了Image類，Image有一個ImageEditor的編輯器類，裡面並沒有把我們的引數顯示出來，所以我們還需要寫一個類，繼承ImageEditor，然後在這個類裡面，把我們自己定義的類顯示在面板上，看截圖：


這樣就可以在編輯器裡面直接操作了，編輯器類在這裡：

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

[CustomEditor(typeof(UISkewImage), true)]
[CanEditMultipleObjects]
public class UISkewImageEditor: ImageEditor {
	public override void OnInspectorGUI(){
		base.OnInspectorGUI();

		UISkewImage uiSkewImage = (UISkewImage)target;
		EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		if (GUILayout.Button("重置", GUILayout.Width(40))){
			uiSkewImage.OffsetLeftTop = Vector3.zero;
		}
		uiSkewImage.OffsetLeftTop = EditorGUILayout.Vector3Field("左上", uiSkewImage.OffsetLeftTop, GUILayout.ExpandWidth(true));
		EditorGUILayout.EndHorizontal();

		EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		if (GUILayout.Button("重置", GUILayout.Width(40))){
			uiSkewImage.OffsetRightTop = Vector3.zero;
		}
		uiSkewImage.OffsetRightTop = EditorGUILayout.Vector3Field("右上", uiSkewImage.OffsetRightTop, GUILayout.ExpandWidth(true));
		EditorGUILayout.EndHorizontal();

		EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		if (GUILayout.Button("重置", GUILayout.Width(40))){
			uiSkewImage.OffsetLeftButtom = Vector3.zero;
		}
		uiSkewImage.OffsetLeftButtom = EditorGUILayout.Vector3Field("左下", uiSkewImage.OffsetLeftButtom, GUILayout.ExpandWidth(true));
		EditorGUILayout.EndHorizontal();

		EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		if (GUILayout.Button("重置", GUILayout.Width(40))){
			uiSkewImage.OffsetRightButtom = Vector3.zero;
		}
		uiSkewImage.OffsetRightButtom = EditorGUILayout.Vector3Field("右下", uiSkewImage.OffsetRightButtom, GUILayout.ExpandWidth(true));
		EditorGUILayout.EndHorizontal();

		if (GUI.changed){
			EditorUtility.SetDirty(uiSkewImage);
		}
	}
}

到這裡，基本上是可以用了，但是為了能夠在任何時候都可以直接建立它，就和你在某個UI物體下面右鍵建立Image一樣，我又寫了一個編輯器類，可以直接建立SkewImage，這樣用起來就方便啦。程式碼如下：

using UnityEngine;
using UnityEngine.UI;
using UnityEditor;
using UnityEngine.EventSystems;

public class UICustomCreator {
	[MenuItem("GameObject/UI/UICustom/SkewImage", false, 0)]
	static void CreateUICustomSkewImageGuiObject(MenuCommand command){
		Canvas canvas = CreateCanvas();
		GameObject go = CreateUISkewImage(command, canvas);
		CreateEventSystem();
		Selection.activeGameObject = go;
	}
	// Create the UISkewImage Object
	static GameObject CreateUISkewImage(MenuCommand command, Canvas canvas){
		GameObject go = new GameObject("UISkewImage");
		RectTransform goRectTransform = go.AddComponent<RectTransform>();
		Undo.RegisterCreatedObjectUndo((Object)go, "Create " + go.name);
		// Check if object is being create with left or right click
		GameObject contextObject = command.context as GameObject;
		if (contextObject == null) {
			goRectTransform.sizeDelta = new Vector2(100f, 100f);
			GameObjectUtility.SetParentAndAlign(go, canvas.gameObject);
		}else {
			goRectTransform.sizeDelta = new Vector2(100f, 100f);
			GameObjectUtility.SetParentAndAlign(go, contextObject);
		}
		UISkewImage image = go.AddComponent<UISkewImage>();
		image.OffsetLeftTop = Vector3.zero;
		image.OffsetRightTop = Vector3.zero;
		image.OffsetLeftButtom = Vector3.zero;
		image.OffsetRightButtom = Vector3.zero;
		image.raycastTarget = true;
		return go;
	}
	// Check if there is a Canvas in the scene
	static Canvas CreateCanvas(){
		Canvas canvas = Object.FindObjectOfType<Canvas>();
		if (canvas == null)
		{
			// Create new Canvas since none exists in the scene.
			GameObject canvasObject = new GameObject("Canvas");
			canvas = canvasObject.AddComponent<Canvas>();
			canvas.renderMode = RenderMode.ScreenSpaceOverlay;
			canvas.gameObject.AddComponent<CanvasScaler>();
			// Add a Graphic Raycaster Component as well
			canvas.gameObject.AddComponent<GraphicRaycaster>();
			Undo.RegisterCreatedObjectUndo(canvasObject, "Create " + canvasObject.name);
		}
		return canvas;
	}
	// Check if an event system already exists in the scene
	static void CreateEventSystem(){
		if (!Object.FindObjectOfType<EventSystem>())
		{
			GameObject eventObject = new GameObject("EventSystem", typeof(EventSystem));
			eventObject.AddComponent<StandaloneInputModule>();
			#if UNITY_5_3_OR_NEWER
				// Nothing
			#else
				eventObject.AddComponent<TouchInputModule>();
			#endif
			Undo.RegisterCreatedObjectUndo(eventObject, "Create " + eventObject.name);
		}
	}
}

這樣就可以咯，注意，Editor類一定要放在Assets/.../Editor/的子目錄裡面，中間省略是隨意哪個目錄，但是最終必須是Editor，否則是不會起作用的。

看效果：


看到了麼，超級方便！

再來兩個截圖：


到這裡就結束了嗎？還沒有，我後面做動畫時，發現我改變自定義的值，卻不能像其他已有引數一樣，直接在Animation編輯器中顯示這個引數，這就有點頭疼了。因為這樣沒法在編輯器調整數值，還是一個個的手動在Animation面板中新增引數，然後還要在這裡調整數值，實在是太麻煩了。於是去Unity官網提過的UI原始碼看他們原始碼是怎麼做到的，這裡有UGUI的原始碼，可以參考哦：Unity UGUI 原始碼

通過我對方嘗試，終於成功了，只需要改改ImageEditor類就可以了，修改後的類如下：

[CustomEditor(typeof(UISkewImage), true)]
[CanEditMultipleObjects]
public class UISkewImageEditor: ImageEditor {
	SerializedProperty m_OffsetLeftTop;
	SerializedProperty m_OffsetRightTop;
	SerializedProperty m_OffsetLeftButtom;
	SerializedProperty m_OffsetRightButtom;
	GUIContent m_LTContent;
	GUIContent m_RTContent;
	GUIContent m_LBContent;
	GUIContent m_RBContent;
	protected override void OnEnable()
	{
		base.OnEnable();
		m_OffsetLeftTop = serializedObject.FindProperty("offsetLeftTop");
		m_OffsetRightTop = serializedObject.FindProperty("offsetRightTop");
		m_OffsetLeftButtom = serializedObject.FindProperty("offsetLeftButtom");
		m_OffsetRightButtom = serializedObject.FindProperty("offsetRightButtom");
		m_LTContent = new GUIContent("左上");
		m_RTContent = new GUIContent("右上");
		m_LBContent = new GUIContent("左下");
		m_RBContent = new GUIContent("右下");
	}
	public override void OnInspectorGUI(){
		base.OnInspectorGUI();
		serializedObject.Update();
		EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		if (GUILayout.Button("重置", GUILayout.Width(40))){
			m_OffsetLeftTop.vector3Value = Vector3.zero;
		}
		EditorGUILayout.PropertyField(m_OffsetLeftTop, m_LTContent);
		EditorGUILayout.EndHorizontal();

		EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		if (GUILayout.Button("重置", GUILayout.Width(40))){
			m_OffsetRightTop.vector3Value = Vector3.zero;
		}
		EditorGUILayout.PropertyField(m_OffsetRightTop, m_RTContent);
		EditorGUILayout.EndHorizontal();

		EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		if (GUILayout.Button("重置", GUILayout.Width(40))){
			m_OffsetLeftButtom.vector3Value = Vector3.zero;
		}
		EditorGUILayout.PropertyField(m_OffsetLeftButtom, m_LBContent);
		EditorGUILayout.EndHorizontal();

		EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		if (GUILayout.Button("重置", GUILayout.Width(40))){
			m_OffsetRightButtom.vector3Value = Vector3.zero;
		}
		EditorGUILayout.PropertyField(m_OffsetRightButtom, m_RBContent);
		EditorGUILayout.EndHorizontal();
		
		serializedObject.ApplyModifiedProperties();

		// UISkewImage uiSkewImage = (UISkewImage)target;
		// EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		// if (GUILayout.Button("重置", GUILayout.Width(40))){
		// 	uiSkewImage.OffsetLeftTop = Vector3.zero;
		// }
		// uiSkewImage.OffsetLeftTop = EditorGUILayout.Vector3Field("左上", uiSkewImage.OffsetLeftTop, GUILayout.ExpandWidth(true));
		// EditorGUILayout.EndHorizontal();

		// EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		// if (GUILayout.Button("重置", GUILayout.Width(40))){
		// 	uiSkewImage.OffsetRightTop = Vector3.zero;
		// }
		// uiSkewImage.OffsetRightTop = EditorGUILayout.Vector3Field("右上", uiSkewImage.OffsetRightTop, GUILayout.ExpandWidth(true));
		// EditorGUILayout.EndHorizontal();

		// EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		// if (GUILayout.Button("重置", GUILayout.Width(40))){
		// 	uiSkewImage.OffsetLeftButtom = Vector3.zero;
		// }
		// uiSkewImage.OffsetLeftButtom = EditorGUILayout.Vector3Field("左下", uiSkewImage.OffsetLeftButtom, GUILayout.ExpandWidth(true));
		// EditorGUILayout.EndHorizontal();

		// EditorGUILayout.BeginHorizontal(GUILayout.ExpandWidth(true));
		// if (GUILayout.Button("重置", GUILayout.Width(40))){
		// 	uiSkewImage.OffsetRightButtom = Vector3.zero;
		// }
		// uiSkewImage.OffsetRightButtom = EditorGUILayout.Vector3Field("右下", uiSkewImage.OffsetRightButtom, GUILayout.ExpandWidth(true));
		// EditorGUILayout.EndHorizontal();

		// if (GUI.changed){
		// 	EditorUtility.SetDirty(uiSkewImage);
		// }
	}
}
主要是那個
serializedObject.Update();serializedObject.ApplyModifiedProperties();這樣關鍵，會自動加入到動畫系統裡面去，看截圖：


一開始是白色的，只要在Animation面板開啟錄製模式，我在這裡修改任何一個引數，就會變紅，就像Unity自身的引數一樣！可以開心的調動畫啦~哈哈

相關推薦

Unity3d-UGUI特效之Image的Skew變形、傾斜效果

這次在專案中，做動畫時，想要多UI的圖片做傾斜動畫，比如進場有一定的斜度，然後又變回原來的樣子。於是在網上搜索有關Image變形或傾斜的做法，後面找到根據文件發現可以通過繼承Image來做一些修改，關鍵是在Image渲染之後，我們拿到頂點座標，對座標做一定的偏移，就可以達到目

[Unity3D]Unity3D遊戲開發之滑鼠旋轉、縮放實現3D物品展示

各位朋友，大家好，我是秦元培，歡迎大家關注我的博主，我的部落格地址是blog.csdn.net/qinyuanpei。最近博主重點研究了攝像機旋轉、縮放等問題，那麼今天為大家分享的是一個在3D展示中比較常用的功能，即通過滑鼠右鍵實現旋轉、滑鼠滾輪實現縮放、滑鼠中鍵實現平移

在CSS3中，可以利用transform功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理

for skew 文字 values alt 實例 垂直 -o 移動 CSS3中的變形處理(transform)屬 transform的功能分類 1.旋轉 transform:rotate(45deg); 該語句使div元素順時針旋轉45度。deg是CSS 3的“V

Unity3d UGUI插件之TSTableView

為我 http 狀態改變 可能 alt 除了 復用 高度 dict 　　TSTableView是Tacticsoft工作室開發的一款適用於UGUI的列表(Table)插件，設計靈感來源於iOS/Mac的UITableView，提供高復用、高性能的列表，其主要特點是： 　　采

Unity3D — — UGUI之RectTransform

unity3 rect com etc unit ans pix gui DPoS Mask.GetComponent<RectTransform>().anchoredPosition（子物體） = hotKey_image.rectTransform.anc

CSS 小結筆記之變形、過渡與動畫

transition-delay 延遲時間，單位為s或ms <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

CSS3中的變形處理——transform功能（旋轉、縮放、傾斜、移動）

1 transform屬性 在CSS3中，可以利用transform功能實現文字或影象的旋轉、縮放、傾斜、移動這4中型別的變形處理。 （1）瀏覽器支援 到目前為止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上瀏覽器支援該屬性。  2

[Unity3D]Unity3D遊戲開發之刀光劍影特效的實現

        我實在不明白有的人為什麼不喜歡武俠/仙俠類遊戲，或許是由於武俠/仙俠類遊戲身上被永遠烙上的國產標籤吧！博主最近在玩一部叫做《雨血》的遊戲，博主不禁感慨：在這樣一個流星蝴蝶不再閃爍、網遊成風、國產雙劍後續創新不足的後國產時代，居然還能夠有這樣一部再次讓博主熱血沸

Unity3D---UGUI---Button相關、點選、按下、擡起、長按事件

一、先介紹一下Inspector面板裡的東西 Button裡一共有兩個指令碼。 image.png Image（Script） 這個跟Image裡是一樣的 Button（Script） Interactable（互動）：Button是否可以點

轉載 雨鬆MOMO 2014年07月16日 於 雨鬆MOMO程式研究院 發表 Unity3D研究院之Time.timeScale、遊戲暫停（七十四）

專案裡面一直在用Time.timeScale來做遊戲的 1倍 2倍整體加速，今天我仔細看了一下Time.timeScale才發現之前我理解錯了一些東西。 Time.timeScale可以控制Update 和LateUpdate 的執行速度，舉個例子說明一下。

【轉】【UNITY3D 遊戲開發之七】C# 中的委託、事件、匿名函式、Lambda 表示式

"委託是一個類，它定義了方法的型別，使得可以將方法當作另一個方法的引數來進行傳遞，這種將方法動態地賦給引數的做法，可以避免在程式中大量使用If-Else(Switch)語句，同時使得程式具有更好的可擴充套件性。" from: http://www.himigame.com/

UGUI研究院之UI粒子特效自適應縮放（二十二）

我們UI自適應採用的是Canvas Scaler 設定 Expand模式。 那麼UI可以很好的自適應螢幕，可是粒子特效就會出問題所以寫下了這個指令碼來自適應UI的粒子特效。 比如技能圖示的特效光圈。 當螢幕縮放後，UI變小了，可是特效出問題了。

Unity3D之Material(材質、著色器、紋理)

常用 器） 物體 sha metal 顏色 需求 unity3d 偏移 Material（材質）：物體的材質是指：“色彩”、“紋理”、“光滑度”、“透明度”、“反射率”、“折射率”、“發光度”等.................. Shader（著色器）：專門用來渲染3D圖

unity3D學習之音訊播放 、實時變聲簡化版-audio菜鳥筆記5

using SoundTouch; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using System.IO; #if SOUNDTOUCH_INT

html5＜canvas操作畫素之反相、窗簾、模糊特效＞

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="utf-8">         <style>             canvas{               

R數據可視化----ggplot2之標度、坐標軸和圖例詳解

abs 調整 所有 不同的 size n) 默認 表達 idt 標度控制著數據到圖形屬性的映射，當有需要時，ggplot2會自動添加一個默認的標度。我們確實可以在不了解標度運行原理的情況下畫出許多圖形，但理解標度並學會如何操縱它們則將賦予我們對圖形更強的控制能力。 每一種圖

構建之法三、四、五章總結

創業 安排 便是 為什麽 軟件 構建 似的 讓我 生活 趁著五一小短假期間閱讀了這三章，讓我感覺想要成為一名軟件工程師的路還要很長，在我面前就出現了一條分叉路:即是成為一名個人能力優異但不顧及團隊成員理解與否的程序員還是個人能力一般但會結合團隊人員的理解能力去編程的程序員，

shell之（）、{}

shell1 一串命令的執行[[email protected]/* */ log]# (a=2;echo $a)2[[email protected]/* */ log]# { a=2;echo $a;} #註意格式的不同，左邊有空格，最右邊以分號結尾22 ()和{}中括號裏面

後端程序員之路 52、A Tour of Go-2

run arrays primes var auto 程序 pointer ase tex # flowcontrol - for - for i := 0; i < 10; i++ { - for ; sum < 1000;

jQuery-DOM操作之復制、替換、包裹節點

code 操作 所有 喜歡 傳遞 pen 傳遞參數 含義 新元素 1、復制節點 clone() $(function(){ $(‘ul li‘).click(function() { $(this).clone().