From b2b86adccd70f46e417c6732a866d9c94f71fe1e Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 31 Oct 2022 15:58:42 +0100 Subject: [PATCH 01/53] Added BezierEasing to allow Custom Easing Function Bezier Easing allows you to define any Easing Function possible by defining 4 Cubic Bezier points this implementation is based on and ported from how browsers implent the CSS cubic-bezier easing function added a cache to avoid recomputing the same easing function everytime --- CommunityEntity.UI.BezierEasing.cs | 137 +++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 CommunityEntity.UI.BezierEasing.cs diff --git a/CommunityEntity.UI.BezierEasing.cs b/CommunityEntity.UI.BezierEasing.cs new file mode 100644 index 0000000..60861c8 --- /dev/null +++ b/CommunityEntity.UI.BezierEasing.cs @@ -0,0 +1,137 @@ +using UnityEngine; +using System; +using System.Collections; +using System.Collections.Generic; +using System.Linq; +using Facepunch.Extend; +using System.IO; + +#if CLIENT + +public partial class NuCommunityEntity +{ + + public class BezierEasing { + // this basically is the same process that Browsers use for their CSS easing, allowing you to define any possible easing value with 4 bezier points + // had to port this from a javascript version + + public static Dictionary cache = new Dictionary(); + public static int NewItts = 4; + public static float NewMinSlope = 0.001f; + public static float SubDivPrec = 0.0000001f; + public static float SubDivItts = 10; + + public float mX1 = 0f; + public float mY1 = 0f; + public float mX2 = 1f; + public float mY2 = 1f; + public float[] mSampleValues; + + public static int kSplineTableSize = 11; + public static float kSampleStepSize = 1.0f / (kSplineTableSize - 1.0f); + bool _precomputed = false; + + + + public static float Ease(float X1, float Y1, float X2, float Y2, float time){ + string key = $"{X1}{Y1}{X2}{Y2}"; + if(!cache.ContainsKey(key)){ + cache[key] = new BezierEasing(X1, Y1, X2, Y2); + } + return cache[key].GetPosition(time); + } + + + + float A (float aA1, float aA2) { return 1.0f - 3.0f * aA2 + 3.0f * aA1; } + float B (float aA1, float aA2) { return 3.0f * aA2 - 6.0f * aA1; } + float C (float aA1) { return 3.0f * aA1; } + + // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. + public float calcBezier (float aT, float aA1, float aA2) { + return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT; + } + + // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. + public float getSlope (float aT, float aA1, float aA2) { + return 3.0f * A(aA1, aA2)*aT*aT + 2.0f * B(aA1, aA2) * aT + C(aA1); + } + + public float binarySubdivide (float aX, float aA, float aB) { + float currentX, currentT, i = 0f; + do { + currentT = aA + (aB - aA) / 2.0f; + currentX = calcBezier(currentT, mX1, mX2) - aX; + if (currentX > 0.0f) { + aB = currentT; + } else { + aA = currentT; + } + } while (Math.Abs(currentX) > SubDivPrec && ++i < SubDivItts); + return currentT; + } + + public BezierEasing (float X1, float Y1, float X2, float Y2) { + mX1 = X1; + mY1 = Y1; + mX2 = X2; + mY2 = Y2; + mSampleValues = new float[kSplineTableSize]; + } + + void calcSampleValues () { + for (var i = 0; i < kSplineTableSize; ++i) { + mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); + } + } + + float getTForX (float aX) { + float intervalStart = 0.0f; + int currentSample = 1; + int lastSample = kSplineTableSize - 1; + + for (; currentSample != lastSample && mSampleValues[currentSample] <= aX; ++currentSample) { + intervalStart += kSampleStepSize; + } + --currentSample; + + float dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample+1] - mSampleValues[currentSample]); + float guessForT = intervalStart + dist * kSampleStepSize; + float initialSlope = getSlope(guessForT, mX1, mX2); + if (initialSlope >= NewMinSlope) { + return newtonRaphsonIterate(aX, guessForT); + } else if (initialSlope == 0.0f) { + return guessForT; + } else { + return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize); + } + } + + void precompute() { + _precomputed = true; + if (mX1 != mY1 || mX2 != mY2) + calcSampleValues(); + } + + public float GetPosition(float aX) { + if (!_precomputed) precompute(); + if (mX1 == mY1 && mX2 == mY2) return aX; // linear + if (aX == 0f) return 0f; + if (aX == 1f) return 1f; + return calcBezier(getTForX(aX), mY1, mY2); + } + + float newtonRaphsonIterate (float aX, float aGuessT) { + for (var i = 0; i < NewItts; ++i) { + float currentSlope = getSlope(aGuessT, mX1, mX2); + if (currentSlope == 0.0f) return aGuessT; + var currentX = calcBezier(aGuessT, mX1, mX2) - aX; + aGuessT -= currentX / currentSlope; + } + return aGuessT; + } + } + +} + +#endif From 2f08c9d328bfdf23d36a9e8ee3da956323996442 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 31 Oct 2022 15:59:43 +0100 Subject: [PATCH 02/53] Fixed Class name --- CommunityEntity.UI.BezierEasing.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CommunityEntity.UI.BezierEasing.cs b/CommunityEntity.UI.BezierEasing.cs index 60861c8..ec4b121 100644 --- a/CommunityEntity.UI.BezierEasing.cs +++ b/CommunityEntity.UI.BezierEasing.cs @@ -8,7 +8,7 @@ #if CLIENT -public partial class NuCommunityEntity +public partial class CommunityEntity { public class BezierEasing { From c3693980e88d1973109298ff79f5f5203cde7289 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 31 Oct 2022 16:06:04 +0100 Subject: [PATCH 03/53] Added a MouseListener Component This Component Lets the Animation Component Listen to Clicks & Hover Events Multiple Animations Can Listen to the same MouseListener --- CommunityEntity.UI.MouseListener.cs | 84 +++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 CommunityEntity.UI.MouseListener.cs diff --git a/CommunityEntity.UI.MouseListener.cs b/CommunityEntity.UI.MouseListener.cs new file mode 100644 index 0000000..d82623c --- /dev/null +++ b/CommunityEntity.UI.MouseListener.cs @@ -0,0 +1,84 @@ + +using UnityEngine; +using UnityEngine.EventSystems; +using System; +using System.Collections; +using System.Collections.Generic; +using System.Linq; +using Facepunch.Extend; +using System.IO; + +#if CLIENT + + +public partial class CommunityEntity +{ + + public class MouseListener : UIBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerClickHandler { + + public static List pendingListeners = new List(); + + public Action onEnter; + public Action onExit; + public Action onClick; + + public virtual void OnPointerClick(PointerEventData eventData) + { + if(onClick != null) onClick(); + // Manually Bubble it up + ExecuteEvents.ExecuteHierarchy(transform.parent.gameObject, eventData, ExecuteEvents.pointerClickHandler); + } + + public virtual void OnPointerEnter(PointerEventData eventData) + { + if(onEnter != null) onEnter(); + // Manually Bubble it up + ExecuteEvents.ExecuteHierarchy(transform.parent.gameObject, eventData, ExecuteEvents.pointerEnterHandler); + } + + public virtual void OnPointerExit(PointerEventData eventData) + { + if(onEnter != null) onExit(); + // Manually Bubble it up + ExecuteEvents.ExecuteHierarchy(transform.parent.gameObject, eventData, ExecuteEvents.pointerExitHandler); + } + } + public void ScheduleMouseListener(string name, Animation anim){ + anim.mouseTarget = name; + if(!MouseListener.pendingListeners.Contains(anim)) MouseListener.pendingListeners.Add(anim); + } + + public void ApplyMouseListeners(){ + foreach(var anim in MouseListener.pendingListeners){ + if(string.IsNullOrEmpty(anim.mouseTarget)) continue; + ApplyMouseListener(anim.mouseTarget, anim); + } + MouseListener.pendingListeners.Clear(); + } + public void ApplyMouseListener(string name, Animation anim){ + GameObject hObj = FindPanel(name); + if(!hObj) return; + + var c = hObj.GetComponent(); + if(!c) c = hObj.AddComponent(); + + c.onEnter += new Action(anim.OnHoverEnter); + c.onExit += new Action(anim.OnHoverExit); + c.onClick += new Action(anim.OnClick); + + } + public void RemoveMouseListener(string name, Animation anim){ + GameObject hObj = FindPanel(name); + if(!hObj) return; + + var c = hObj.GetComponent(); + if(!c) return; + + c.onEnter -= new Action(anim.OnHoverEnter); + c.onExit -= new Action(anim.OnHoverExit); + c.onClick -= new Action(anim.OnClick); + + anim.mouseTarget = ""; + } +} +#endif From d2754b0ef9f43250af2e5196a0e90df445355554 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 31 Oct 2022 16:13:16 +0100 Subject: [PATCH 04/53] Add the Animation Component This Component Drives Animations, it has alot of features. see it here => https://streamable.com/696gos by default this Component Supports: 8 Types of Animation, Custom Easing Functions 4 Distinct Triggers [OnClick, OnHoverEnter, OnHoverExit, OnDestroy], delay, repeat & repeatDelay This Component also Allows Adding Animations Afterwards via RPC Calls --- CommunityEntity.UI.Animation.cs | 561 ++++++++++++++++++++++++++++++++ 1 file changed, 561 insertions(+) create mode 100644 CommunityEntity.UI.Animation.cs diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs new file mode 100644 index 0000000..9ebd120 --- /dev/null +++ b/CommunityEntity.UI.Animation.cs @@ -0,0 +1,561 @@ +using Object = UnityEngine.Object; +using UnityEngine; +using System; +using System.Collections; +using System.Collections.Generic; +using System.Linq; +using Facepunch.Extend; +using System.IO; + +#if CLIENT + +public partial class CommunityEntity +{ + public class Animation : FacepunchBehaviour + { + public Dictionary> properties = new Dictionary>(){ + ["Generic"] = new List(), + ["OnDestroy"] = new List(), + ["OnHoverEnter"] = new List(), + ["OnHoverExit"] = new List(), + ["OnClick"] = new List(), + }; + + public string mouseTarget = ""; + + public UnityEngine.UI.Graphic cachedGraphic; + public RectTransform cachedRect; + public bool shouldRaycast = false; + + public bool isHidden = false; + public bool isKilled = false; + + public bool ValidCondition(string condition) => properties.ContainsKey(condition); + + public void StartAnimation(){ + CacheGraphicComponent(); + StartByCondition("Generic"); + } + public void StartByCondition(string condition){ + if(!ValidCondition(condition)) return; + foreach(var prop in properties[condition]){ + StartProperty(prop); + } + } + public void StartProperty(AnimationProperty prop){ + prop.anim = this; + prop.routine = StartCoroutine(prop.Animate()); + } + + public void StopByCondition(string condition){ + if(!ValidCondition(condition)) return; + foreach(var prop in properties[condition]){ + if(prop.routine != null) StopCoroutine(prop.routine); + } + } + + public void Kill(bool destroyed = false) + { + isKilled = true; + // stop all conditions except onDestroy + StopByCondition("Generic"); + StopByCondition("OnHoverEnter"); + StopByCondition("OnHoverExit"); + float killDelay = 0f; + // out early if the game object allready got destroyed + if(destroyed) return; + + foreach(var prop in properties["OnDestroy"]) + { + float totalDelay = prop.duration + prop.delay; + if(killDelay < totalDelay) killDelay = totalDelay; + StartProperty(prop); + } + + Invoke(new Action(() => Object.Destroy(gameObject)), killDelay + 0.05f); + } + private void OnDestroy(){ + if(!isKilled) Kill(true); + } + + public void CacheGraphicComponent(){ + cachedGraphic = gameObject.GetComponent(); + cachedRect = gameObject.GetComponent(); + shouldRaycast = (cachedGraphic != null ? cachedGraphic.raycastTarget : false); + } + public void DisableGraphic(float delay = 0f){ + var a = new Action(() => { + cachedGraphic.canvasRenderer.cullTransparentMesh = true; + isHidden = true; + cachedGraphic.raycastTarget = false; + }); + if(delay <= 0f) a(); + else Invoke(a, delay); + } + public void EnableGraphic(float delay = 0f){ + var a = new Action(() => { + cachedGraphic.canvasRenderer.cullTransparentMesh = false; + isHidden = false; + if(shouldRaycast) cachedGraphic.raycastTarget = true; + }); + if(delay <= 0f) a(); + else Invoke(a, delay); + } + + public void OnHoverEnter(){ + if(isKilled) return; + StopByCondition("OnHoverExit"); + StartByCondition("OnHoverEnter"); + } + public void OnHoverExit(){ + if(isKilled) return; + + StopByCondition("OnHoverEnter"); + StartByCondition("OnHoverExit"); + } + public void OnClick(){ + if(isKilled) return; + + StopByCondition("OnClick"); + StartByCondition("OnClick"); + } + } + + public class AnimationProperty : UnityEngine.Object + { + public float duration = 0f; + public float delay = 0f; + public int repeat = 0; + public float repeatDelay = 0f; + public string easing = "linear"; + public string type; + public string from; + public string to; + + public Animation anim; + + public Coroutine routine; + + public int completedRounds = 0; + + public IEnumerator Animate() + { + if(delay > 0f) yield return new WaitForSeconds(delay); + + do + { + yield return AnimateProperty(); + completedRounds++; + if(repeatDelay > 0f) yield return new WaitForSeconds(repeatDelay); + else yield return null; + } + while(repeat < 0 || (repeat > 0 && completedRounds <= repeat)); + } + + public IEnumerator AnimateProperty() + { + if(from == null) from = ""; + if(!string.IsNullOrEmpty(to)) + switch(type){ + case "Opacity": + { + if(!anim.cachedGraphic) break; + float fromOpacity; + float toOpacity; + + // we need a valid toOpacity + if(!float.TryParse(to, out toOpacity)) break; + // unlike the toOpacity, a from value is optional. if we omit a from value the crossfade will instead use the current alpha + float.TryParse(from, out fromOpacity); + // disable TCulling if the toOpacity or FromOpacity are Higher than 0f, if the fromOpacity check was ommited this wouldnt trigger if its an animation from > 0 to 0 + if(anim.isHidden && toOpacity > 0f || (!string.IsNullOrEmpty(from) && fromOpacity > 0f)) + anim.EnableGraphic(0f); + + + if(!string.IsNullOrEmpty(from)) anim.cachedGraphic.canvasRenderer.SetAlpha(fromOpacity); + // calling this wont actually start a tween, but it will stop any running color or alpha tweens, this is vital for stopping any potential fadeIns & Outs (otherwise the the tween and our own Animation will intersect) + anim.cachedGraphic.CrossFadeAlpha(anim.cachedGraphic.canvasRenderer.GetAlpha(), 0f, true); + + if(!anim.isHidden && toOpacity <= 0f) anim.DisableGraphic(duration); + return ChangeAlpha(toOpacity, duration, easing); + } + case "Color": + { + if(!anim.cachedGraphic) break; + Color fromColor = ColorEx.Parse(from); + Color toColor = ColorEx.Parse(to); + + //dont use the from color if the from value was ommited + bool useFrom = !string.IsNullOrEmpty(from); + if(anim.isHidden && toColor.a > 0f || (useFrom && fromColor.a > 0f)) + anim.EnableGraphic(0f); + + if(useFrom) anim.cachedGraphic.canvasRenderer.SetColor(fromColor); + + // Same as with alpha, stopping any tweens + anim.cachedGraphic.CrossFadeColor(anim.cachedGraphic.canvasRenderer.GetColor(), 0f, true, true); + + if(!anim.isHidden && toColor.a <= 0f) anim.DisableGraphic(duration); + return ChangeColor(toColor, duration, easing); + } + case "Scale": + { + Vector2 fromVec = Vector2Ex.Parse(from); + Vector2 toVec = Vector2Ex.Parse(to); + + //dont use the from Vector if the from value was ommited + bool useFrom = !string.IsNullOrEmpty(from); + + if(useFrom && anim.cachedRect) anim.cachedRect.localScale = new Vector3(fromVec.x, fromVec.y, 1f); + + return Scale(toVec, duration, easing); + } + case "Translate": + { + Vector2 toVec = Vector2Ex.Parse(to); + Vector2 fromVec = Vector2Ex.Parse(from); + + if(!string.IsNullOrEmpty(from)) TranslateInstantly(fromVec); + + return Translate(toVec, duration, easing); + } + case "TranslatePX": + { + Vector2 toVec = Vector2Ex.Parse(to); + Vector2 fromVec = Vector2Ex.Parse(from); + + if(!string.IsNullOrEmpty(from)) TranslatePXInstantly(fromVec); + + return TranslatePX(toVec, duration, easing); + } + case "Rotate": + { + Vector3 fromVec = Vector3Ex.Parse(from); + Vector3 toVec = Vector3Ex.Parse(to); + + //dont use the from Vector if the from value was ommited + bool useFrom = !string.IsNullOrEmpty(from); + + if(useFrom && anim.cachedRect) anim.cachedRect.rotation = Quaternion.Euler(fromVec); + return Rotate(toVec, duration, easing); + } + case "MoveTo": + { + // ColorEx is basically a Vector4 with extra steps + Color toCol = ColorEx.Parse(to); + Vector4 toVec = new Vector4(toCol.r, toCol.g, toCol.b, toCol.a); + + + if(!string.IsNullOrEmpty(from)){ + Color fromCol = ColorEx.Parse(from); + Vector4 fromVec = new Vector4(fromCol.r, fromCol.g, fromCol.b, fromCol.a); + // immediately move to the from vector + MoveToInstantly(fromVec); + } + + return MoveTo(toVec, duration, easing); + } + case "MoveToPX": + { + // ColorEx is basically a Vector4 with extra steps + Color toCol = ColorEx.Parse(to); + Vector4 toVec = new Vector4(toCol.r, toCol.g, toCol.b, toCol.a); + + + if(!string.IsNullOrEmpty(from)){ + Color fromCol = ColorEx.Parse(from); + Vector4 fromVec = new Vector4(fromCol.r, fromCol.g, fromCol.b, fromCol.a); + // immediately move to the from vector + MoveToPXInstantly(fromVec); + } + + return MoveToPX(toVec, duration, easing); + } + } + // Return an empty enumerator so the coroutine continues normally + return new System.Object[0].GetEnumerator(); + } + + // absolute + public IEnumerator ChangeAlpha(float toOpacity, float duration, string easing){ + float time = 0f; + float old = anim.cachedGraphic.canvasRenderer.GetAlpha(); + while(time < duration){ + float opacity = Mathf.LerpUnclamped(old, toOpacity, Ease(easing, time / duration)); + anim.cachedGraphic.canvasRenderer.SetAlpha(opacity); + time += Time.deltaTime; + yield return null; + } + anim.cachedGraphic.canvasRenderer.SetAlpha(toOpacity); + } + // absolute + public IEnumerator ChangeColor(Color toColor, float duration, string easing){ + float time = 0f; + Color old = anim.cachedGraphic.canvasRenderer.GetColor(); + while(time < duration){ + Color col = Color.LerpUnclamped(old, toColor, Ease(easing, time / duration)); + anim.cachedGraphic.canvasRenderer.SetColor(col); + time += Time.deltaTime; + yield return null; + } + anim.cachedGraphic.canvasRenderer.SetColor(toColor); + } + + // absolute + public IEnumerator Scale(Vector2 scale, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Vector2 old = new Vector2(rt.localScale.x, rt.localScale.y); + Vector2 goal = new Vector2(scale.x, scale.y); + Vector2 current; + while(time < duration){ + current = Vector2.LerpUnclamped(old, goal, Ease(easing, time / duration)); + rt.localScale = new Vector3(current.x, current.y, 0f); + + time += Time.deltaTime; + yield return null; + } + rt.localScale = new Vector3(scale.x, scale.y, 0f); + } + // absolute + public IEnumerator Rotate(Vector3 rotation, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Quaternion old = rt.rotation; + Quaternion goal = Quaternion.Euler(rotation); + while(time < duration){ + rt.rotation = Quaternion.LerpUnclamped(old, goal, Ease(easing, time / duration)); + + time += Time.deltaTime; + yield return null; + } + rt.rotation = goal; + } + + // relative + public IEnumerator Translate(Vector2 to, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); + Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); + Vector4 last = old; + Vector4 current; + while(time < duration){ + current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); + Vector4 diff = current - last; + rt.anchorMin += new Vector2(diff.x, diff.y); + rt.anchorMax += new Vector2(diff.z, diff.w); + + last = current; + time += Time.deltaTime; + yield return null; + } + current = goal - last; + rt.anchorMin += new Vector2(current.x, current.y); + rt.anchorMax += new Vector2(current.z, current.w); + } + // Because Translate with duration = 0 wouldnt work unless it was returned to the coroutine + public void TranslateInstantly(Vector2 to){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) return; + Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); + Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); + Vector4 current = goal - old; + rt.anchorMin += new Vector2(current.x, current.y); + rt.anchorMax += new Vector2(current.z, current.w); + } + + // relative + public IEnumerator TranslatePX(Vector2 to, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); + Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); + Vector4 last = old; + Vector4 current; + while(time < duration){ + current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); + Vector4 diff = current - last; + rt.offsetMin += new Vector2(diff.x, diff.y); + rt.offsetMax += new Vector2(diff.z, diff.w); + + last = current; + time += Time.deltaTime; + yield return null; + } + current = goal - last; + rt.offsetMin += new Vector2(current.x, current.y); + rt.offsetMax += new Vector2(current.z, current.w); + } + // Because TranslatePX with duration = 0 wouldnt work unless it was returned to the coroutine + public void TranslatePXInstantly(Vector2 to){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) return; + Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); + Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); + Vector4 current = goal - old; + rt.offsetMin += new Vector2(current.x, current.y); + rt.offsetMax += new Vector2(current.z, current.w); + } + + // relative + public IEnumerator MoveTo(Vector4 to, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); + Vector4 goal = to; + Vector4 last = old; + Vector4 current; + while(time < duration){ + current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); + Vector4 diff = current - last; + rt.anchorMin += new Vector2(diff.x, diff.y); + rt.anchorMax += new Vector2(diff.z, diff.w); + + last = current; + time += Time.deltaTime; + yield return null; + } + current = goal - last; + rt.anchorMin += new Vector2(current.x, current.y); + rt.anchorMax += new Vector2(current.z, current.w); + } + // Because MoveTo with duration = 0 wouldnt work unless it was returned to the coroutine + public void MoveToInstantly(Vector4 to){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) return; + Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); + Vector4 current = to - old; + rt.anchorMin += new Vector2(current.x, current.y); + rt.anchorMax += new Vector2(current.z, current.w); + } + + // relative + public IEnumerator MoveToPX(Vector4 to, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); + Vector4 goal = to; + Vector4 last = old; + Vector4 current; + while(time < duration){ + current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); + Vector4 diff = current - last; + rt.offsetMin += new Vector2(diff.x, diff.y); + rt.offsetMax += new Vector2(diff.z, diff.w); + + last = current; + time += Time.deltaTime; + yield return null; + } + current = goal - last; + rt.offsetMin += new Vector2(current.x, current.y); + rt.offsetMax += new Vector2(current.z, current.w); + } + // Because MoveToPX with duration = 0 wouldnt work unless it was returned to the coroutine + public void MoveToPXInstantly(Vector4 to){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) return; + Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); + Vector4 current = to - old; + rt.offsetMin += new Vector2(current.x, current.y); + rt.offsetMax += new Vector2(current.z, current.w); + } + + + public float Ease(string type, float input){ + switch(type){ + case "Linear": return input; + case "EaseIn": return input * input; + case "EaseOut": return 1f - ((1f - input) * (1f - input)); + case "EaseInOut": return Mathf.Lerp(input * input, 1f - ((1f - input) * (1f - input)), input); + default: // Custom Easing + { + var split = type.Split(' '); + float X1, Y1, X2, Y2; + if(split.Length < 4) return input; + if( + !float.TryParse(split[0], out X1) || !float.TryParse(split[1], out Y1) || + !float.TryParse(split[2], out X2) || !float.TryParse(split[3], out Y2) + ) return input; + + return BezierEasing.Ease(X1, Y1, X2, Y2, input); + } + } + } + } + + [RPC_Client] + public void AddAnimation( RPCMessage msg ) + { + string str = msg.read.StringRaw(); + + if (string.IsNullOrEmpty(str)) return; + + var json = JSON.Array.Parse( str ); + if (json == null) return; + + foreach (var value in json){ + var obj = value.Obj; + var panel = obj.GetString("name", "Overlay"); + + GameObject go; + if (string.IsNullOrEmpty(panel) || !UiDict.TryGetValue(panel, out go)) + return; + + Animation anim = go.GetComponent(); + + string mouseTarget = ""; + if(obj.ContainsKey("mouseTarget") && anim){ + mouseTarget = obj.GetString("mouseTarget", ""); + + // Remove the existing animation's Enter/Exit Actions from the mouseListener, assuming its different from the current target + if(anim && !string.IsNullOrEmpty(anim.mouseTarget) && !string.IsNullOrEmpty(mouseTarget) && anim.mouseTarget != mouseTarget) + RemoveMouseListener(anim.mouseTarget, anim); + } + if(!anim){ + anim = go.AddComponent(); + anim.CacheGraphicComponent(); + } + + // Apply new mouse target if its valid & different than the existing target + if(!string.IsNullOrEmpty(mouseTarget) && anim.mouseTarget != mouseTarget) + ScheduleMouseListener(mouseTarget, anim); + + foreach(var prop in obj.GetArray("properties")) + { + var propobj = prop.Obj; + var condition = propobj.GetString("condition", "Generic"); + + if(!anim.ValidCondition(condition)) condition = "Generic"; + var animprop = new AnimationProperty{ + duration = propobj.GetFloat("duration", 0f), + delay = propobj.GetFloat("delay", 0f), + repeat = propobj.GetInt("repeat", 0), + repeatDelay = propobj.GetFloat("repeatDelay", 0f), + easing = propobj.GetString("easing", "Linear"), + type = propobj.GetString("type", null), + from = propobj.GetString("from", null), + to = propobj.GetString("to", null) + }; + anim.properties[condition].Add(animprop); + + if(condition == "Generic") anim.StartProperty(animprop); + } + break; + } + ApplyMouseListeners(); + } +} + +#endif From cd23e8da05815648102578629c6504829e8403bb Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 31 Oct 2022 16:40:17 +0100 Subject: [PATCH 05/53] Added Animation, RectMask & Mask Components Added Integration for the Animation, RectMask2D & Mask Components, also added option to attach a sub canvas to panels to optimize animations & reduce redraws the idea is that something that gets constantly animated will dirty the canvas every frame, it wont dirty parent canvases though, putting heavily animated components into their own canvas reduces redraws for the entire UI which may improve performance --- CommunityEntity.UI.cs | 58 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index 25bdc9f..7cb9354 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -80,12 +80,24 @@ public void AddUI( RPCMessage msg ) { CreateComponents( go, component.Obj ); } + + Animation anim = go.GetComponent(); + if(anim){ + if(anim.properties.Count == 0) GameObject.Destroy(anim); + else anim.StartAnimation(); + } + if ( json.ContainsKey( "addCanvas" ) ) + { + go.AddComponent(); + go.AddComponent(); + } if ( json.ContainsKey( "fadeOut" ) ) { go.AddComponent().duration = json.GetFloat( "fadeOut", 0 ); } } + ApplyMouseListeners(); } private GameObject FindPanel( string name ) @@ -321,6 +333,46 @@ private void CreateComponents( GameObject go, JSON.Object obj ) go.AddComponent(); break; } + case "UnityEngine.UI.RectMask2D": + { + go.AddComponent(); + break; + } + case "UnityEngine.UI.Mask": + { + var c = go.AddComponent(); + c.showMaskGraphic = obj.GetBoolean("showMaskGraphic", true); + break; + } + case "Animation": + { + // Ensure there's only ever one Animation Component per gameObject, adding onto their existing Properties if one allready exists + Animation anim = go.GetComponent(); + if(!anim) anim = go.AddComponent(); + + string mouseTarget = obj.GetString("mouseTarget", ""); + if(!string.IsNullOrEmpty(mouseTarget) && anim.mouseTarget == "") // only ever apply a single mouse listener + ScheduleMouseListener(mouseTarget, anim); + + foreach(var prop in obj.GetArray("properties")) + { + var propobj = prop.Obj; + var condition = propobj.GetString("condition", "Generic"); + + if(!anim.ValidCondition(condition)) condition = "Generic"; + anim.properties[condition].Add(new AnimationProperty{ + duration = propobj.GetFloat("duration", 0f), + delay = propobj.GetFloat("delay", 0f), + repeat = propobj.GetInt("repeat", 0), + repeatDelay = propobj.GetFloat("repeatDelay", 0f), + easing = propobj.GetString("easing", "Linear"), + type = propobj.GetString("type", null), + from = propobj.GetString("from", ""), + to = propobj.GetString("to", null) + }); + } + break; + } } } @@ -387,7 +439,11 @@ private void DestroyPanel( string pnlName ) return; var fadeOut = panel.GetComponent(); - if ( fadeOut ) + if(animation && animation.HasForCondition("OnDestroy")) + { + animation.Kill(); + } + else if ( fadeOut ) { fadeOut.FadeOutAndDestroy(); } From 5d2e043ea60da1a6e0a7eb187defcd20b6f226bc Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 31 Oct 2022 16:40:51 +0100 Subject: [PATCH 06/53] Added HasForCondition --- CommunityEntity.UI.Animation.cs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 9ebd120..d75b260 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -32,6 +32,8 @@ public class Animation : FacepunchBehaviour public bool ValidCondition(string condition) => properties.ContainsKey(condition); + public bool HasForCondition(string condition) => ValidCondition(condition) && properties[condition].Count > 0; + public void StartAnimation(){ CacheGraphicComponent(); StartByCondition("Generic"); From e3820e124d31002c57b06d05e21a59f353930307 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 31 Oct 2022 17:28:26 +0100 Subject: [PATCH 07/53] Uploaded Animation Test (Feature Showcase) & AnimationExample (usecase demo) --- AnimationExample.json | 1384 +++++++++++++++++++++++++++ AnimationTest.json | 2121 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 3505 insertions(+) create mode 100644 AnimationExample.json create mode 100644 AnimationTest.json diff --git a/AnimationExample.json b/AnimationExample.json new file mode 100644 index 0000000..08e5c33 --- /dev/null +++ b/AnimationExample.json @@ -0,0 +1,1384 @@ +[ + { + "name": "UI", + "parent":"Overlay", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"NeedsCursor" + } + ] + }, + { + "name": "Background", + "parent":"UI", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Image1", + "parent":"Background", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/OyleW8R.png", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"Animation", + "properties": [ + { + "condition" : "Generic", + "type": "Opacity", + "to": "0", + "duration": 0, + "delay": 0 + }, + { + "condition" : "Generic", + "type": "Opacity", + "to": "0.7", + "duration": 2.5, + "delay": 0.5, + "repeat": -1, + "repeatDelay": 5.0, + }, + { + "condition" : "Generic", + "type": "Opacity", + "to": "0.0", + "duration": 2.5, + "delay": 4.5, + "repeat": -1, + "repeatDelay": 5.0, + }, + { + "condition" : "Generic", + "type": "Scale", + "to": "1.45 1.45", + "duration": 0.05, + "delay": 0.0, + "repeat": 0 + }, + { + "condition" : "Generic", + "type": "Translate", + "to": "-0.2 -0.1", + "duration": 0.0, + "delay": 0.1, + "repeat": 0 + }, + { + "condition" : "Generic", + "type": "Translate", + "to": "-0.4 -0.2", + "duration": 0, + "delay": 7.0, + "repeat": -1, + "repeatDelay": 7.5, + }, + { + "condition" : "Generic", + "type": "Translate", + "to": "0.4 0.2", + "duration": 7.0, + "delay": 0.5, + "repeat": -1, + "repeatDelay": 0.5, + }, + { + "condition" : "Generic", + "type": "Rotate", + "to": "0 0 0", + "duration": 0, + "delay": 7.0, + "repeat": -1, + "repeatDelay": 7.5, + }, + { + "condition" : "Generic", + "type": "Rotate", + "to": "0 0 30", + "duration": 7.0, + "delay": 0.5, + "repeat": -1, + "repeatDelay": 0.5, + } + ] + } + ] + }, + { + "name": "Image2", + "parent":"Background", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/3WE54zp.png", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"Animation", + "properties": [ + { + "condition" : "Generic", + "type": "Opacity", + "to": "0", + "duration": 0, + "delay": 0 + }, + { + "condition" : "Generic", + "type": "Opacity", + "to": "0.7", + "duration": 2.5, + "delay": 1.0, + "repeat": -1, + "repeatDelay": 12.0, + }, + { + "condition" : "Generic", + "type": "Opacity", + "to": "0.0", + "duration": 2.5, + "delay": 10.5, + "repeat": -1, + "repeatDelay": 12.0, + }, + { + "condition" : "Generic", + "type": "Scale", + "to": "1.25 1.25", + "duration": 0.05, + "delay": 0.0, + "repeat": 0 + }, + { + "condition" : "Generic", + "type": "Translate", + "to": "-0.1 -0.1", + "duration": 0.0, + "delay": 0.1, + "repeat": 0 + }, + { + "condition" : "Generic", + "type": "Translate", + "to": "-0.2 -0.2", + "duration": 0, + "delay": 14.5, + "repeat": -1, + "repeatDelay": 14.5, + }, + { + "condition" : "Generic", + "type": "Translate", + "to": "0.2 0.2", + "duration": 14.0, + "delay": 0.5, + "repeat": -1, + "repeatDelay": 0.5, + }, + ] + } + ] + }, + { + "name": "Image3", + "parent":"Background", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/dnw34TV.png", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"Animation", + "properties": [ + { + "condition" : "Generic", + "type": "Opacity", + "to": "0", + "duration": 0, + "delay": 0 + }, + { + "condition" : "Generic", + "type": "Opacity", + "to": "0.7", + "duration": 2.5, + "delay": 3.5, + "repeat": -1, + "repeatDelay": 9.0, + }, + { + "condition" : "Generic", + "type": "Opacity", + "to": "0.0", + "duration": 2.5, + "delay": 10.0, + "repeat": -1, + "repeatDelay": 9.0, + } + ] + } + ] + }, + { + "name": "Image4", + "parent":"Background", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/GTjhKO6.png", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"Animation", + "properties": [ + { + "condition" : "Generic", + "type": "Opacity", + "to": "0", + "duration": 0, + "delay": 0 + }, + { + "condition" : "Generic", + "type": "Opacity", + "to": "0.7", + "duration": 2.5, + "delay": 2.5, + "repeat": -1, + "repeatDelay": 5.0, + }, + { + "condition" : "Generic", + "type": "Opacity", + "to": "0.0", + "duration": 2.5, + "delay": 6.5, + "repeat": -1, + "repeatDelay": 5.0, + }, + { + "condition" : "Generic", + "type": "Scale", + "to": "1.45 1.45", + "duration": 0.05, + "delay": 0.0, + "repeat": 0 + }, + { + "condition" : "Generic", + "type": "Translate", + "to": "-0.2 -0.1", + "duration": 0.0, + "delay": 0.1, + "repeat": 0 + }, + { + "condition" : "Generic", + "type": "Translate", + "to": "-0.4 -0.2", + "duration": 0, + "delay": 9.0, + "repeat": -1, + "repeatDelay": 7.5, + }, + { + "condition" : "Generic", + "type": "Translate", + "to": "0.4 0.2", + "duration": 7.0, + "delay": 2.5, + "repeat": -1, + "repeatDelay": 0.5, + }, + { + "condition" : "Generic", + "type": "Rotate", + "to": "0 0 0", + "duration": 0, + "delay": 9.0, + "repeat": -1, + "repeatDelay": 7.5, + }, + { + "condition" : "Generic", + "type": "Rotate", + "to": "0 0 30", + "duration": 14.5, + "delay": 2.5, + "repeat": -1, + "repeatDelay": 0.5, + } + ] + } + ] + }, + { + "parent": "UI", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Choose your Class", + "fontSize":44, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.75", + "anchormax": "0.93 0.95" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Cards", + "parent":"UI", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.07 0.1", + "anchormax": "0.93 0.9" + }, + { + "type": "Animation", + "properties": [ + { + "type": "MoveTo", + "to": "1.07 1.1 1.93 1.9" + }, + { + "type": "MoveTo", + "delay": 1.4, + "to": "0.07 0.1 0.93 0.9" + } + ] + } + ] + }, + { + "name": "Card1", + "parent":"Cards", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0", + "anchormax": "0.5 0", + "offsetmin": "-572 40", + "offsetmax": "-100 472" + }, + { + "type": "Animation", + "mouseTarget": "CardBody1", + "properties": [ + { + "type": "Rotate", + "to": "3 10 10" + }, + { + "type": "Translate", + "to": "-0.02 -0.2" + }, + { + "type": "Rotate", + "delay": 2.0, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "0 0 0" + }, + { + "type": "Translate", + "to": "0.02 0.2", + "delay": 2.0, + "duration": 0.7, + "easing": ".06 .77 .3 .94" + }, + { + "type": "Scale", + "delay": 2.0, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "1.1 1.1" + }, + { + "type": "Scale", + "delay": 2.53, + "duration": 0.38, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "condition": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.06 1.06" + }, + { + "condition": "OnHoverEnter", + "type": "Rotate", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "0 0 3" + }, + { + "condition": "OnHoverExit", + "type": "Scale", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "condition": "OnHoverExit", + "type": "Rotate", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "0 0 0" + } + ] + } + ] + }, + { + "name": "CardBackground1", + "parent":"Card1", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 2.0, + "duration": 0.4, + "to": "1.0" + }, + { + "type": "Opacity", + "delay": 2.5, + "duration": 2.0, + "to": "0.2", + "repeat": -1, + "repeatDelay": 3.0 + }, + { + "type": "Opacity", + "delay": 4.5, + "duration": 3.0, + "to": "1.0", + "repeat": -1, + "repeatDelay": 3.0 + } + ] + } + ] + }, + { + "name": "CardBackgroundHover1", + "parent":"Card1", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "mouseTarget": "CardBody1", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "2.0" + }, + { + "condition": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + }, + ] + } + ] + }, + { + "name": "CardBody1", + "parent":"Card1", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.5 0.5", + "offsetmin": "-149 -184", + "offsetmax": "149 184" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/NHO2yEy.png" + }, + { + "type": "UnityEngine.UI.Mask" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 2.0, + "duration": 0.6, + "to": "1.0" + } + ] + } + ] + }, + { + "name": "CardBodyHover1", + "parent":"CardBody1", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "color": "0.1 0.075 0 0.3" + }, + { + "type": "Animation", + "mouseTarget": "CardBody1", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.0" + }, + { + "condition": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + } + ] + } + ] + }, + { + "name": "CardBodyText1", + "parent":"CardBody1", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "UnityEngine.UI.Text", + "text": "Assasin", + "fontSize":44, + "align": "MiddleCenter" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.08", + "distance": "2 2" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.04", + "distance": "4 4" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.02", + "distance": "6 6" + }, + { + "type": "Animation", + "mouseTarget": "CardBody1", + "properties": [ + { + "condition": "OnHoverEnter", + "type": "MoveTo", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0.3 -1 1.3 1", + "to": "0 0 1 1" + }, + { + "condition": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0 0", + "to": "1.1 1.1" + }, + { + "condition": "OnHoverExit", + "type": "MoveTo", + "delay": 0.1, + "duration": 0.2, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "Card2", + "parent":"Cards", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0", + "anchormax": "0.5 0", + "offsetmin": "-236 40", + "offsetmax": "236 472" + }, + { + "type": "Animation", + "mouseTarget": "CardBody2", + "properties": [ + { + "type": "Rotate", + "to": "3 10 10" + }, + { + "type": "Translate", + "to": "-0.02 -0.2" + }, + { + "type": "Rotate", + "delay": 2.5, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "0 0 0" + }, + { + "type": "Translate", + "to": "0.02 0.2", + "delay": 2.5, + "duration": 0.7, + "easing": ".06 .77 .3 .94" + }, + { + "type": "Scale", + "delay": 2.5, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "1.1 1.1" + }, + { + "type": "Scale", + "delay": 3.03, + "duration": 0.38, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "condition": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.06 1.06" + }, + { + "condition": "OnHoverEnter", + "type": "Rotate", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "0 0 3" + }, + { + "condition": "OnHoverExit", + "type": "Scale", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "condition": "OnHoverExit", + "type": "Rotate", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "0 0 0" + } + ] + } + ] + }, + { + "name": "CardBackground2", + "parent":"Card2", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 2.5, + "duration": 0.4, + "to": "1.0" + }, + { + "type": "Opacity", + "delay": 3.0, + "duration": 2.0, + "to": "0.2", + "repeat": -1, + "repeatDelay": 3.0 + }, + { + "type": "Opacity", + "delay": 5.0, + "duration": 3.0, + "to": "1.0", + "repeat": -1, + "repeatDelay": 3.0 + } + ] + } + ] + }, + { + "name": "CardBackgroundHover2", + "parent":"Card2", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "mouseTarget": "CardBody2", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "2.0" + }, + { + "condition": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + }, + ] + } + ] + }, + { + "name": "CardBody2", + "parent":"Card2", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.5 0.5", + "offsetmin": "-149 -184", + "offsetmax": "149 184" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/Rgw0z8R.png" + }, + { + "type": "UnityEngine.UI.Mask" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 2.5, + "duration": 0.6, + "to": "1.0" + } + ] + } + ] + }, + { + "name": "CardBodyHover2", + "parent":"CardBody2", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "color": "0.1 0.075 0 0.3" + }, + { + "type": "Animation", + "mouseTarget": "CardBody2", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.0" + }, + { + "condition": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + } + ] + } + ] + }, + { + "name": "CardBodyText2", + "parent":"CardBody2", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "UnityEngine.UI.Text", + "text": "Sniper", + "fontSize":44, + "align": "MiddleCenter" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.08", + "distance": "2 2" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.04", + "distance": "4 4" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.02", + "distance": "6 6" + }, + { + "type": "Animation", + "mouseTarget": "CardBody2", + "properties": [ + { + "condition": "OnHoverEnter", + "type": "MoveTo", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0.3 -1 1.3 1", + "to": "0 0 1 1" + }, + { + "condition": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0 0", + "to": "1.1 1.1" + }, + { + "condition": "OnHoverExit", + "type": "MoveTo", + "delay": 0.1, + "duration": 0.2, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "Card3", + "parent":"Cards", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0", + "anchormax": "0.5 0", + "offsetmin": "100 40", + "offsetmax": "572 472" + }, + { + "type": "Animation", + "mouseTarget": "CardBody3", + "properties": [ + { + "type": "Rotate", + "to": "3 10 10" + }, + { + "type": "Translate", + "to": "-0.02 -0.2" + }, + { + "type": "Rotate", + "delay": 3.0, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "0 0 0" + }, + { + "type": "Translate", + "to": "0.02 0.2", + "delay": 3.0, + "duration": 0.7, + "easing": ".06 .77 .3 .94" + }, + { + "type": "Scale", + "delay": 3.0, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "1.1 1.1" + }, + { + "type": "Scale", + "delay": 3.53, + "duration": 0.38, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "condition": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.06 1.06" + }, + { + "condition": "OnHoverEnter", + "type": "Rotate", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "0 0 3" + }, + { + "condition": "OnHoverExit", + "type": "Scale", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "condition": "OnHoverExit", + "type": "Rotate", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "0 0 0" + } + ] + } + ] + }, + { + "name": "CardBackground3", + "parent":"Card3", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 3.0, + "duration": 0.4, + "to": "1.0" + }, + { + "type": "Opacity", + "delay": 3.5, + "duration": 2.0, + "to": "0.2", + "repeat": -1, + "repeatDelay": 3.0 + }, + { + "type": "Opacity", + "delay": 5.5, + "duration": 3.0, + "to": "1.0", + "repeat": -1, + "repeatDelay": 3.0 + } + ] + } + ] + }, + { + "name": "CardBackgroundHover3", + "parent":"Card3", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "mouseTarget": "CardBody3", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "2.0" + }, + { + "condition": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + }, + ] + } + ] + }, + { + "name": "CardBody3", + "parent":"Card3", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.5 0.5", + "offsetmin": "-149 -184", + "offsetmax": "149 184" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/XGAEmHd.png" + }, + { + "type": "UnityEngine.UI.Mask" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 3.0, + "duration": 0.6, + "to": "1.0" + } + ] + } + ] + }, + { + "name": "CardBodyHover3", + "parent":"CardBody3", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "color": "0.1 0.075 0 0.3" + }, + { + "type": "Animation", + "mouseTarget": "CardBody3", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.0" + }, + { + "condition": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + } + ] + } + ] + }, + { + "name": "CardBodyText3", + "parent":"CardBody3", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "UnityEngine.UI.Text", + "text": "Tank", + "fontSize":44, + "align": "MiddleCenter" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.08", + "distance": "2 2" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.04", + "distance": "4 4" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.02", + "distance": "6 6" + }, + { + "type": "Animation", + "mouseTarget": "CardBody3", + "properties": [ + { + "condition": "OnHoverEnter", + "type": "MoveTo", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0.3 -1 1.3 1", + "to": "0 0 1 1" + }, + { + "condition": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0 0", + "to": "1.1 1.1" + }, + { + "condition": "OnHoverExit", + "type": "MoveTo", + "delay": 0.1, + "duration": 0.2, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "Button88", + "parent": "UI", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"UI", + "command":"cui.endtest", + "color": "0.9 0.8 0.3 0.02" + }, + { + "type":"RectTransform", + "anchormin": "0.0 0.0", + "anchormax": "0.1 0.07" + } + ] + }, + { + "parent": "Button88", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Kill UI", + "fontSize":16, + "align": "MiddleCenter" + } + ] + } +] diff --git a/AnimationTest.json b/AnimationTest.json new file mode 100644 index 0000000..9be8b95 --- /dev/null +++ b/AnimationTest.json @@ -0,0 +1,2121 @@ +[ + { + "name": "UI", + "parent":"Overlay", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.1 0.1 0.1 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"NeedsCursor" + } + ] + }, + { + "name": "Slide0", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"NeedsCursor" + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"A Feature Test Case", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Animation Changes Values", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -30", + "offsetmax": "0 0" + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Over Time...", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -60", + "offsetmax": "0 -30" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "0", + "to": "1" + }, + { + "type": "Opacity", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0" + }, + ] + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"But there's More this Component can do", + "color": "1 1 1 0.8", + "fontSize":40, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -150", + "offsetmax": "0 -90" + } + ] + }, + { + "name": "Slide0_Kill", + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide0", + "color": "0.9 0.8 0.3 0.12" + }, + { + "type":"RectTransform", + "anchormin": "0.9 0.0", + "anchormax": "1 0.07" + } + ] + }, + { + "parent": "Slide0_Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Begin", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Slide1", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.15 0.05 0.05 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Slide0_Kill", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnClick", + "type": "MoveTo", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "0 0 1 1" + }, + { + "condition": "OnClick", + "type": "Opacity", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "1" + } + ] + } + ] + }, + { + "name": "Slide1_Kill", + "parent": "Slide1", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide1", + "color": "0.9 0.8 0.3 0.12" + }, + { + "type":"RectTransform", + "anchormin": "0.9 0.0", + "anchormax": "1 0.07" + } + ] + }, + { + "parent": "Slide1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Can Change Different Values", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "parent": "Slide1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Like Opacity", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -30", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "mouseTarget": "Slide0_Kill", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnClick", + "type": "Opacity", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "0", + "to": "1" + }, + { + "condition": "OnClick", + "type": "Opacity", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0" + }, + ] + } + ] + }, + { + "parent": "Slide1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"And Color", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -60", + "offsetmax": "0 -30" + }, + { + "type": "Animation", + "mouseTarget": "Slide0_Kill", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnClick", + "type": "Color", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "1 0.2 0.2 1", + "to": "0.2 1 0.2 1" + }, + { + "condition": "OnClick", + "type": "Color", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0.2 0.2 1 1" + }, + ] + } + ] + }, + { + "name": "Slide1_Block1", + "parent":"Slide1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.4", + "anchormax": "0.25 0.6", + }, + { + "type": "Animation", + "mouseTarget": "Slide0_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Scale", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "1 1", + "to": "1.5 1.5" + }, + { + "condition": "OnClick", + "type": "Scale", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "1 1" + }, + ] + } + ] + }, + { + "parent": "Slide1_Block1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Or Scale", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide1_Block2", + "parent":"Slide1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.4 0.4", + "anchormax": "0.55 0.6", + }, + { + "type": "Animation", + "mouseTarget": "Slide0_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Rotate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "0 0 45", + "to": "0 0 -45" + }, + { + "condition": "OnClick", + "type": "Rotate", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0 0 45" + }, + ] + } + ] + }, + { + "parent": "Slide1_Block2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Or Rotation", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide1_Block3", + "parent":"Slide1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.4", + "anchormax": "0.85 0.6", + }, + { + "type": "Animation", + "mouseTarget": "Slide0_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0 -0.3" + }, + { + "condition": "OnClick", + "type": "Translate", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0 0.3" + }, + ] + } + ] + }, + { + "parent": "Slide1_Block3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"And Movement", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "parent": "Slide1_Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Next Page", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Slide2", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.15 0.05 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Slide1_Kill", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnClick", + "type": "MoveTo", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "0 0 1 1" + }, + { + "condition": "OnClick", + "type": "Opacity", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Can Happen..", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Slide2_Block1", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.5", + "anchormax": "0.25 0.7", + }, + { + "type": "Animation", + "mouseTarget": "Slide1_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Opacity", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "0.5", + "to": "1" + }, + { + "condition": "OnClick", + "type": "Opacity", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0.5" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"By Themselves", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block2", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.5", + "anchormax": "0.45 0.7", + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Block2", + "properties": [ + { + "condition": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.5, + "to": "1.2 1.2" + }, + { + "condition": "OnHoverExit", + "type": "Rotate", + "delay": 0, + "duration": 0.5, + "to": "0 0 180" + }, + { + "condition": "OnHoverExit", + "type": "Scale", + "delay": 0, + "duration": 0.5, + "to": "1 1" + }, + { + "condition": "OnHoverExit", + "type": "Rotate", + "delay": 0.51, + "duration": 0, + "to": "0 0 0" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"On Hover", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block3", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.65 0.7", + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Block3", + "properties": [ + { + "condition": "OnClick", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "to": "1.2 1.2" + }, + { + "condition": "OnClick", + "type": "Scale", + "delay": 0.5, + "duration": 0.2, + "to": "1 1" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"On Click", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block4", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.5", + "anchormax": "0.85 0.7", + }, + { + "type": "Animation", + "properties": [ + { + "condition": "OnDestroy", + "type": "Translate", + "delay": 0, + "duration": 0.5, + "to": "1 0" + }, + { + "condition": "OnDestroy", + "type": "Opacity", + "delay": 0, + "duration": 0.5, + "to": "0" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block4", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"OnDestroy", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block4Kill", + "parent": "Slide2_Block4", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide2_Block4", + "color": "0.9 0.3 0.3 0.42" + }, + { + "type":"RectTransform", + "anchormin": "0 0.0", + "anchormax": "1 0.3" + } + ] + }, + { + "parent": "Slide2_Block4Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Kill me", + "fontSize":12, + "align": "MiddleCenter" + } + ] + }, + { + "parent": "Slide2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"They Can be Combined", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.25", + "anchormax": "0.93 0.45" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Slide2_Block5", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.2", + "anchormax": "0.25 0.4", + }, + { + "type": "Animation", + "mouseTarget": "Slide1_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Color", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "0.35 0.65 0.45 1.0", + "to": "0.45 0.35 0.65 1.0" + }, + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "-0.15 0", + "to": "0.15 0" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block5", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"At The Same Time", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block6", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.2", + "anchormax": "0.45 0.4", + }, + { + "type": "Animation", + "mouseTarget": "Slide1_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 0.4, + "repeat": -1, + "repeatDelay": 1.6, + "to": "0.15 0" + }, + { + "condition": "OnClick", + "type": "Translate", + "delay": 0.4, + "duration": 0.4, + "repeat": -1, + "repeatDelay": 1.6, + "to": "0 -0.15" + }, + { + "condition": "OnClick", + "type": "Translate", + "delay": 0.8, + "duration": 0.4, + "repeat": -1, + "repeatDelay": 1.6, + "to": "-0.15 0" + }, + { + "condition": "OnClick", + "type": "Translate", + "delay": 1.2, + "duration": 0.4, + "repeat": -1, + "repeatDelay": 1.6, + "to": "0 0.15" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block6", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Or Staggered With Delays", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block7", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.6 0.2", + "anchormax": "0.75 0.4", + }, + { + "type": "Animation", + "mouseTarget": "Slide1_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Color", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0, + "from": "0.35 0.65 0.45 1.0", + "to": "0.45 0.35 0.65 1.0" + }, + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 0.75, + "repeat": -1, + "repeatDelay": 0.75, + "to": "0.15 0" + }, + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 0.75, + "repeat": -1, + "repeatDelay": 0.75, + "easing": "EaseIn", + "to": "0 -0.15" + }, + { + "condition": "OnClick", + "type": "Translate", + "delay": 0.75, + "duration": 0.75, + "repeat": -1, + "repeatDelay": 0.75, + "to": "-0.15 0" + }, + { + "condition": "OnClick", + "type": "Translate", + "delay": 0.75, + "duration": 0.75, + "repeat": -1, + "repeatDelay": 0.75, + "easing": "EaseIn", + "to": "0 0.15" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block7", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Or Both", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Kill", + "parent": "Slide2", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide2", + "color": "0.9 0.8 0.3 0.12" + }, + { + "type":"RectTransform", + "anchormin": "0.9 0.0", + "anchormax": "1 0.07" + } + ] + }, + { + "parent": "Slide2_Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Next Page", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Slide3", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.15 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Kill", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnClick", + "type": "MoveTo", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "0 0 1 1" + }, + { + "condition": "OnClick", + "type": "Opacity", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Can use Easing functions", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Slide3_Block1", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.7", + "anchormax": "0.3 0.7", + "offsetmin": "-25 -25", + "offsetmax": "25 25", + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Easing: Linear", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.7", + "anchormax": "0.1 0.7", + "offsetmin": "25 25", + "offsetmax": "275 75", + } + ] + }, + { + "name": "Slide3_Block2", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.7", + "anchormax": "0.3 0.7", + "offsetmin": "-25 -125", + "offsetmax": "25 -75", + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "EaseIn", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Easing: EaseIn", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.7", + "anchormax": "0.1 0.7", + "offsetmin": "25 -75", + "offsetmax": "275 -25", + } + ] + }, + { + "name": "Slide3_Block3", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.7", + "anchormax": "0.3 0.7", + "offsetmin": "-25 -225", + "offsetmax": "25 -175", + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "EaseOut", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Easing: EaseOut", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.7", + "anchormax": "0.1 0.7", + "offsetmin": "25 -175", + "offsetmax": "275 -125", + } + ] + }, + { + "name": "Slide3_Block4", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.7", + "anchormax": "0.3 0.7", + "offsetmin": "-25 -325", + "offsetmax": "25 -275", + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "EaseInOut", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Easing: EaseInOut", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.7", + "anchormax": "0.1 0.7", + "offsetmin": "25 -275", + "offsetmax": "275 -225", + } + ] + }, + { + "name": "Slide3_Block5", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.7", + "anchormax": "0.7 0.7", + "offsetmin": "-25 -25", + "offsetmax": "25 25", + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "0.5 0.5 0.5 0.5", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Cubic Bezier: 0.5 0.5 0.5 0.5", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.7", + "anchormax": "0.5 0.7", + "offsetmin": "25 25", + "offsetmax": "275 75", + } + ] + }, + { + "name": "Slide3_Block6", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.7", + "anchormax": "0.7 0.7", + "offsetmin": "-25 -125", + "offsetmax": "25 -75", + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "0.3 -1 0.7 1.5", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Cubic-Bezier: 0.3 -1 0.7 1.5", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.7", + "anchormax": "0.5 0.7", + "offsetmin": "25 -75", + "offsetmax": "275 -25", + } + ] + }, + { + "name": "Slide3_Block7", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.7", + "anchormax": "0.7 0.7", + "offsetmin": "-25 -225", + "offsetmax": "25 -175", + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "0 1.5 0.7 0.4", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Cubic-Bezier: 0 1.5 0.7 0.4", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.7", + "anchormax": "0.5 0.7", + "offsetmin": "25 -175", + "offsetmax": "275 -125", + } + ] + }, + { + "name": "Slide3_Block8", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.7", + "anchormax": "0.7 0.7", + "offsetmin": "-25 -325", + "offsetmax": "25 -275", + }, + { + "type": "Animation", + "mouseTarget": "Slide2_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "0 1.45 0.6 1", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Cubic-Bezier: 0 1.45 0.6 1", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.7", + "anchormax": "0.5 0.7", + "offsetmin": "25 -275", + "offsetmax": "275 -225", + } + ] + }, + { + "name": "Slide3_Kill", + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide3", + "color": "0.9 0.8 0.3 0.12" + }, + { + "type":"RectTransform", + "anchormin": "0.9 0.0", + "anchormax": "1 0.07" + } + ] + }, + { + "parent": "Slide3_Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Next Page", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Slide4", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.01 0.01 0.01 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Slide3_Kill", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "condition": "OnClick", + "type": "MoveTo", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "0 0 1 1" + }, + { + "condition": "OnClick", + "type": "Opacity", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide4", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Brings A Few unrelated but useful additions", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Slide4_Block1", + "parent":"Slide4", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.3", + "anchormax": "0.4 0.7" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "Animation", + "mouseTarget": "Slide4_Block1", + "properties": [ + { + "condition": "OnClick", + "type": "Rotate", + "delay": 0, + "duration": 1.5, + "from": "0 0 180", + "to": "0 0 0" + } + ] + } + ] + }, + { + "parent": "Slide4_Block1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"RectMask2D is a more performant way to mask objects but... [Hover me]", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0.3", + "anchormax": "1 1", + } + ] + }, + { + "name": "Slide4_Block1Moving", + "parent":"Slide4_Block1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.15 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "-0.1 0.03", + "anchormax": "0 0.13" + }, + { + "type": "Animation", + "mouseTarget": "Slide3_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "from": "-0.1 0.03 0 0.13", + "to": "1.0 0.03 1.1 0.13" + } + ] + } + ] + }, + { + "name": "Slide4_Block1Sub", + "parent":"Slide4_Block1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 0.7", + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "Animation", + "mouseTarget": "Slide4_Block1", + "properties": [ + { + "condition": "OnHoverEnter", + "type": "MoveTo", + "delay": 0, + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "condition": "OnHoverExit", + "type": "MoveTo", + "delay": 0, + "duration": 0.5, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "parent": "Slide4_Block1Sub", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"But it Breaks when Using Rotation [ClickMe]", + "color": "1 1 1 0.8", + "fontSize":30, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1", + } + ] + }, + { + "name": "Slide4_Block2", + "parent":"Slide4", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.3", + "anchormax": "0.8 0.7" + }, + { + "type": "UnityEngine.UI.Mask" + }, + { + "type": "Animation", + "mouseTarget": "Slide4_Block2", + "properties": [ + { + "condition": "OnClick", + "type": "Rotate", + "delay": 0, + "duration": 1.5, + "from": "0 0 180", + "to": "0 0 0" + } + ] + } + ] + }, + { + "parent": "Slide4_Block2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Mask is a Bit less efficient but more reliable [HoverMe]", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0.3", + "anchormax": "1 1", + } + ] + }, + { + "name": "Slide4_Block2Moving", + "parent":"Slide4_Block2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.15 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "-0.1 0.03", + "anchormax": "0 0.13" + }, + { + "type": "Animation", + "mouseTarget": "Slide3_Kill", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "from": "-0.1 0.03 0 0.13", + "to": "1.0 0.03 1.1 0.13" + } + ] + } + ] + }, + { + "name": "Slide4_Block2Sub", + "parent":"Slide4_Block2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 0.7", + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "UnityEngine.UI.Mask" + }, + { + "type": "Animation", + "mouseTarget": "Slide4_Block2", + "properties": [ + { + "condition": "OnHoverEnter", + "type": "MoveTo", + "delay": 0, + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "condition": "OnHoverExit", + "type": "MoveTo", + "delay": 0, + "duration": 0.5, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "parent": "Slide4_Block2Sub", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"It Doesnt Break on Rotation [ClickMe]", + "color": "1 1 1 0.8", + "fontSize":30, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1", + } + ] + }, + { + "name": "Slide4_Kill", + "parent": "Slide4", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide4", + "color": "0.9 0.8 0.3 0.12" + }, + { + "type":"RectTransform", + "anchormin": "0.9 0.0", + "anchormax": "1 0.07" + } + ] + }, + { + "parent": "Slide4_Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Done", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "parent": "UI", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Animation", + "fontSize":44, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.81", + "anchormax": "0.93 1" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Button88", + "parent": "UI", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"UI", + "command":"cui.endtest", + "color": "0.9 0.8 0.3 0.02" + }, + { + "type":"RectTransform", + "anchormin": "0.0 0.0", + "anchormax": "0.1 0.07" + } + ] + }, + { + "parent": "Button88", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Kill UI", + "fontSize":16, + "align": "MiddleCenter" + } + ] + } +] From a0ea130a4e348c21f1dfcb25b913cf9c417d1010 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Fri, 11 Nov 2022 05:53:01 +0100 Subject: [PATCH 08/53] Implement IMouseListener in Animation behaviour see next commit --- CommunityEntity.UI.Animation.cs | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index d75b260..1a6e4c0 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -11,7 +11,7 @@ public partial class CommunityEntity { - public class Animation : FacepunchBehaviour + public class Animation : FacepunchBehaviour, IMouseReceiver { public Dictionary> properties = new Dictionary>(){ ["Generic"] = new List(), @@ -21,7 +21,12 @@ public class Animation : FacepunchBehaviour ["OnClick"] = new List(), }; - public string mouseTarget = ""; + public string _mouseTarget = ""; + + public string mouseTarget{ + get => _mouseTarget; + set => _mouseTarget = value; + } public UnityEngine.UI.Graphic cachedGraphic; public RectTransform cachedRect; From dd756d3839320f2d7badbf3a8f0fdebe77c30d2a Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Fri, 11 Nov 2022 05:55:30 +0100 Subject: [PATCH 09/53] Abstract receivers into an interface abstracting receivers into an interface so i can the MouseListener for other classes --- CommunityEntity.UI.MouseListener.cs | 48 +++++++++++++++++++---------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/CommunityEntity.UI.MouseListener.cs b/CommunityEntity.UI.MouseListener.cs index d82623c..f726e7c 100644 --- a/CommunityEntity.UI.MouseListener.cs +++ b/CommunityEntity.UI.MouseListener.cs @@ -16,7 +16,7 @@ public partial class CommunityEntity public class MouseListener : UIBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerClickHandler { - public static List pendingListeners = new List(); + public static List pendingListeners = new List(); public Action onEnter; public Action onExit; @@ -43,42 +43,58 @@ public virtual void OnPointerExit(PointerEventData eventData) ExecuteEvents.ExecuteHierarchy(transform.parent.gameObject, eventData, ExecuteEvents.pointerExitHandler); } } - public void ScheduleMouseListener(string name, Animation anim){ - anim.mouseTarget = name; - if(!MouseListener.pendingListeners.Contains(anim)) MouseListener.pendingListeners.Add(anim); + + public interface IMouseReceiver{ + + string mouseTarget { + get; + set; + } + + void OnHoverEnter(); + + void OnHoverExit(); + + void OnClick(); + } + + + public void ScheduleMouseListener(string name, IMouseReceiver receiver){ + receiver.mouseTarget = name; + if(!MouseListener.pendingListeners.Contains(receiver)) MouseListener.pendingListeners.Add(receiver); } public void ApplyMouseListeners(){ - foreach(var anim in MouseListener.pendingListeners){ - if(string.IsNullOrEmpty(anim.mouseTarget)) continue; - ApplyMouseListener(anim.mouseTarget, anim); + foreach(var receiver in MouseListener.pendingListeners){ + if(string.IsNullOrEmpty(receiver.mouseTarget)) continue; + ApplyMouseListener(receiver.mouseTarget, receiver); } MouseListener.pendingListeners.Clear(); } - public void ApplyMouseListener(string name, Animation anim){ + public void ApplyMouseListener(string name, IMouseReceiver receiver){ GameObject hObj = FindPanel(name); if(!hObj) return; var c = hObj.GetComponent(); if(!c) c = hObj.AddComponent(); - c.onEnter += new Action(anim.OnHoverEnter); - c.onExit += new Action(anim.OnHoverExit); - c.onClick += new Action(anim.OnClick); + c.onEnter += new Action(receiver.OnHoverEnter); + c.onExit += new Action(receiver.OnHoverExit); + c.onClick += new Action(receiver.OnClick); } - public void RemoveMouseListener(string name, Animation anim){ + public void RemoveMouseListener(string name, IMouseReceiver receiver){ GameObject hObj = FindPanel(name); if(!hObj) return; var c = hObj.GetComponent(); if(!c) return; - c.onEnter -= new Action(anim.OnHoverEnter); - c.onExit -= new Action(anim.OnHoverExit); - c.onClick -= new Action(anim.OnClick); + c.onEnter -= new Action(receiver.OnHoverEnter); + c.onExit -= new Action(receiver.OnHoverExit); + c.onClick -= new Action(receiver.OnClick); - anim.mouseTarget = ""; + receiver.mouseTarget = ""; } } #endif From 978c186097f4f1806448df70ae87bf6a187c04c6 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 21 Nov 2022 21:10:29 +0100 Subject: [PATCH 10/53] Refactor Code to support multiple Animation Components Refactor Code to support multiple Animations Changes to how animations are created, allows for adding multiple components if they have different mouseTargets --- CommunityEntity.UI.MouseListener.cs | 2 +- CommunityEntity.UI.cs | 43 +++++++++++++++++++---------- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/CommunityEntity.UI.MouseListener.cs b/CommunityEntity.UI.MouseListener.cs index f726e7c..c6b2221 100644 --- a/CommunityEntity.UI.MouseListener.cs +++ b/CommunityEntity.UI.MouseListener.cs @@ -38,7 +38,7 @@ public virtual void OnPointerEnter(PointerEventData eventData) public virtual void OnPointerExit(PointerEventData eventData) { - if(onEnter != null) onExit(); + if(onExit != null) onExit(); // Manually Bubble it up ExecuteEvents.ExecuteHierarchy(transform.parent.gameObject, eventData, ExecuteEvents.pointerExitHandler); } diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index 80ff0cf..8415cae 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -86,12 +86,13 @@ public void AddUI( RPCMessage msg ) { CreateComponents( go, component.Obj ); } - - Animation anim = go.GetComponent(); - if(anim){ - if(anim.properties.Count == 0) GameObject.Destroy(anim); - else anim.StartAnimation(); - } + + Animation[] animations = go.GetComponents(); + if(animations.Length > 0){ + for(var i = 0; i < animations.Length; i++){ + animations[i].StartAnimation(); + } + } if ( json.ContainsKey( "addCanvas" ) ) { go.AddComponent(); @@ -351,14 +352,23 @@ private void CreateComponents( GameObject go, JSON.Object obj ) break; } case "Animation": - { - // Ensure there's only ever one Animation Component per gameObject, adding onto their existing Properties if one allready exists - Animation anim = go.GetComponent(); - if(!anim) anim = go.AddComponent(); - + { + Animation anim = null; + Animation[] animations = go.GetComponents(); string mouseTarget = obj.GetString("mouseTarget", ""); - if(!string.IsNullOrEmpty(mouseTarget) && anim.mouseTarget == "") // only ever apply a single mouse listener - ScheduleMouseListener(mouseTarget, anim); + if(animations.Length == 0){ + // do nothing + } else if(!string.IsNullOrEmpty(mouseTarget)){ + // find an existing animation component with the same mouse target, if not create one + anim = animations.FirstOrDefault((animation) => animation.mouseTarget == mouseTarget); + }else{ + anim = animations[0]; + } + + if(anim == null){ + anim = go.AddComponent(); + if(!string.IsNullOrEmpty(mouseTarget)) ScheduleMouseListener(mouseTarget, anim); + } foreach(var prop in obj.GetArray("properties")) { @@ -445,10 +455,13 @@ private void DestroyPanel( string pnlName ) if ( !panel ) return; + Animation[] animations = panel.GetComponents(); var fadeOut = panel.GetComponent(); - if(animation && animation.HasForCondition("OnDestroy")) + if(animations.Length > 0) { - animation.Kill(); + for(var i = 0; i < animations.Length; i++){ + if(animations[i].HasForCondition("OnDestroy")) animations[i].Kill(); + } } else if ( fadeOut ) { From 88a245f96a636b9668883f8aad5cb868f34b7c69 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 21 Nov 2022 21:49:31 +0100 Subject: [PATCH 11/53] Adjusted RPC call behaviour Adjusted RPC call behaviour to follow the same code that the AddUI code does, it will attempt to add animations to existing components if a matching mouseTarget exists --- CommunityEntity.UI.Animation.cs | 82 ++++++++++++++++----------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 1a6e4c0..41bf914 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -519,47 +519,47 @@ public void AddAnimation( RPCMessage msg ) GameObject go; if (string.IsNullOrEmpty(panel) || !UiDict.TryGetValue(panel, out go)) return; - - Animation anim = go.GetComponent(); - - string mouseTarget = ""; - if(obj.ContainsKey("mouseTarget") && anim){ - mouseTarget = obj.GetString("mouseTarget", ""); - - // Remove the existing animation's Enter/Exit Actions from the mouseListener, assuming its different from the current target - if(anim && !string.IsNullOrEmpty(anim.mouseTarget) && !string.IsNullOrEmpty(mouseTarget) && anim.mouseTarget != mouseTarget) - RemoveMouseListener(anim.mouseTarget, anim); - } - if(!anim){ - anim = go.AddComponent(); - anim.CacheGraphicComponent(); - } - - // Apply new mouse target if its valid & different than the existing target - if(!string.IsNullOrEmpty(mouseTarget) && anim.mouseTarget != mouseTarget) - ScheduleMouseListener(mouseTarget, anim); - - foreach(var prop in obj.GetArray("properties")) - { - var propobj = prop.Obj; - var condition = propobj.GetString("condition", "Generic"); - - if(!anim.ValidCondition(condition)) condition = "Generic"; - var animprop = new AnimationProperty{ - duration = propobj.GetFloat("duration", 0f), - delay = propobj.GetFloat("delay", 0f), - repeat = propobj.GetInt("repeat", 0), - repeatDelay = propobj.GetFloat("repeatDelay", 0f), - easing = propobj.GetString("easing", "Linear"), - type = propobj.GetString("type", null), - from = propobj.GetString("from", null), - to = propobj.GetString("to", null) - }; - anim.properties[condition].Add(animprop); - - if(condition == "Generic") anim.StartProperty(animprop); - } - break; + + Animation anim = null; + Animation[] animations = go.GetComponents(); + + string mouseTarget = obj.GetString("mouseTarget", ""); + if(animations.Length == 0){ + // do nothing + } else if(!string.IsNullOrEmpty(mouseTarget)){ + // find an existing animation component with the same mouse target, if not create one + anim = animations.FirstOrDefault((animation) => animation.mouseTarget == mouseTarget); + }else{ + anim = animations[0]; + } + + if(anim == null){ + anim = go.AddComponent(); + anim.CacheGraphicComponent(); + if(!string.IsNullOrEmpty(mouseTarget)) ScheduleMouseListener(mouseTarget, anim); + } + + foreach(var prop in obj.GetArray("properties")) + { + var propobj = prop.Obj; + var condition = propobj.GetString("condition", "Generic"); + + if(!anim.ValidCondition(condition)) condition = "Generic"; + var animprop = new AnimationProperty{ + duration = propobj.GetFloat("duration", 0f), + delay = propobj.GetFloat("delay", 0f), + repeat = propobj.GetInt("repeat", 0), + repeatDelay = propobj.GetFloat("repeatDelay", 0f), + easing = propobj.GetString("easing", "Linear"), + type = propobj.GetString("type", null), + from = propobj.GetString("from", null), + to = propobj.GetString("to", null) + }; + anim.properties[condition].Add(animprop); + + if(condition == "Generic") anim.StartProperty(animprop); + } + break; } ApplyMouseListeners(); } From 2b2bac3084365fe46a101070d0898fa853bc2ff2 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 23 Nov 2022 02:11:30 +0100 Subject: [PATCH 12/53] test recreation for the latest test the last dropdown example does require the scrollview pull request, though it should still show up without it present --- MultipleAnimationTest.json | 2571 ++++++++++++++++++++++++++++++++++++ 1 file changed, 2571 insertions(+) create mode 100644 MultipleAnimationTest.json diff --git a/MultipleAnimationTest.json b/MultipleAnimationTest.json new file mode 100644 index 0000000..97e3512 --- /dev/null +++ b/MultipleAnimationTest.json @@ -0,0 +1,2571 @@ +[ + { + "name": "UI", + "parent":"Overlay", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"NeedsCursor" + } + ] + }, + { + "name": "Slide0", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 0.0", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1", + "offsetmin": "0 0", + "offsetmax": "0 -60" + }, + { + "type":"NeedsCursor" + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Using Multiple Animations with different mouseTargets", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 0.5, + "duration": 0.5, + "from": "0", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"lets us listen to multiple mouseTargets, Opening up things", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -30", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 1.0, + "duration": 0.5, + "from": "0", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Like Tabs", + "color": "1 1 1 0.8", + "fontSize":50, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -170", + "offsetmax": "0 -90" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 1.5, + "duration": 0.5, + "from": "0", + "to": "1" + } + ] + } + ] + }, + { + "name": "TabBar", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 20", + "offsetmax": "0 80" + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "properties": [ + { + "type": "MoveToPX", + "delay": 1.5, + "easing": "0 1.45 0.6 1", + "duration": 0.5, + "to": "0 -60 0 0" + } + ] + } + ] + }, + { + "name": "Tab_Button1", + "parent":"TabBar", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1", + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.4", + "distance": "1 0" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "0.33 1", + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button1", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 1.0" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + } + ] + } + ] + }, + { + "parent": "Tab_Button1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Details", + "color": "1 1 1 1", + "fontSize":24, + "align": "MiddleCenter" + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button1", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 1.0" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + } + ] + } + ] + }, + { + "name": "Tab_Button2", + "parent":"TabBar", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1", + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.4", + "distance": "1 0" + }, + { + "type":"RectTransform", + "anchormin": "0.33 0", + "anchormax": "0.66 1", + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button2", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 1.0" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + } + ] + } + ] + }, + { + "parent": "Tab_Button2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Modals", + "color": "1 1 1 1", + "fontSize":24, + "align": "MiddleCenter" + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button2", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 1.0" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + } + ] + } + ] + }, + { + "name": "Tab_Button3", + "parent":"TabBar", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1", + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.4", + "distance": "1 0" + }, + { + "type":"RectTransform", + "anchormin": "0.66 0", + "anchormax": "1 1", + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button3", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 1.0" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + } + ] + } + ] + }, + { + "parent": "Tab_Button3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Dropdowns", + "color": "1 1 1 1", + "fontSize":24, + "align": "MiddleCenter" + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button3", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 1.0" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + } + ] + } + ] + }, + { + "name": "Tab_Highlight", + "parent":"TabBar", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 0", + "offsetmin": "0 0", + "offsetmax": "0 3" + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button1", + "properties": [ + { + "type": "Color", + "duration": 0, + "to": "0.4 0.4 0.4 1" + }, + { + "condition": "OnClick", + "type": "Color", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.25 0.8 0.35 1" + }, + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0 0 0.33 0" + }, + ] + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button2", + "properties": [ + { + "condition": "OnClick", + "type": "Color", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.25 0.8 0.35 1" + }, + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.33 0 0.66 0" + }, + ] + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button3", + "properties": [ + { + "condition": "OnClick", + "type": "Color", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.25 0.8 0.35 1" + }, + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.66 0 1 0" + }, + ] + } + ] + }, + { + "name": "Tabs", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.08 0.08 0.08 0.0", + }, + { + "type":"RectTransform", + "anchormin": "1 0", + "anchormax": "2 1", + "offsetmin": "0 0", + "offsetmax": "0 -60" + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "TabBar", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + } + ] + } + ] + }, + { + "name": "Tab1", + "parent":"Tabs", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button1", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button2", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "-1 0 0 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button3", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "-1 0 0 1" + } + ] + } + ] + }, + { + "parent": "Tab1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"this subtle change lets us react to mouse events on different panels, which is great for creating more complex UI behaviours completely without server interaction required", + "color": "1 1 1 0.9", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -70", + "offsetmax": "0 0" + } + ] + }, + { + "parent": "Tab1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"for example, we can make a tab system that cohesively swipes from right to left depending on which tab the user last selected, and even have a material-style tab indicator that smoothly swipes between the tabs", + "color": "1 1 1 0.7", + "fontSize":18, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.8", + "anchormax": "0.9 0.8", + "offsetmin": "0 -160", + "offsetmax": "0 -80" + } + ] + }, + { + "parent": "Tab1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"aside from tabs we can create Modals & dropdowns with great UX", + "color": "1 1 1 0.7", + "fontSize":18, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.8", + "anchormax": "0.9 0.8", + "offsetmin": "0 -240", + "offsetmax": "0 -160" + } + ] + }, + { + "name": "Tab2", + "parent":"Tabs", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + }, + { + "type":"RectTransform", + "anchormin": "1 0", + "anchormax": "2 1", + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button2", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button1", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "1 0 2 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button3", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "-1 0 0 1" + } + ] + } + ] + }, + { + "parent": "Tab2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Click the button below to open a modal", + "color": "1 1 1 0.9", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -70", + "offsetmax": "0 0" + } + ] + }, + { + "name": "ModalButton", + "parent": "Tab2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.5 0.5", + "offsetmin": "-50 -20", + "offsetmax": "50 20" + }, + { + "type": "Animation", + "mouseTarget": "ModalButton", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "parent": "ModalButton", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Open Modal", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Tab3", + "parent":"Tabs", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + }, + { + "type":"RectTransform", + "anchormin": "1 0", + "anchormax": "2 1", + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button3", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button1", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "1 0 2 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "Tab_Button2", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "1 0 2 1" + } + ] + } + ] + }, + { + "name": "Tab3_Section1", + "parent":"Tab3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "0.33 1", + } + ] + }, + { + "name": "DropDown1_Button", + "parent": "Tab3_Section1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "0 -20", + "offsetmax": "0 20" + }, + { + "type": "Animation", + "mouseTarget": "DropDown1_Button", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "parent": "DropDown1_Button", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Select Option", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown1_Parent", + "parent":"Tab3_Section1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 0.0", + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0", + }, + { + "type": "Animation", + "mouseTarget": "DropDown1_Button", + "properties": [ + + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0, + "to": "0 0 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown1_Parent", + "properties": [ + + { + "condition": "OnClick", + "type": "MoveTo", + "delay": 0.3, + "duration": 0, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "DropDown1_Container", + "parent": "DropDown1_Parent", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.02 0.02 0.02 0.8" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "2 -20", + "offsetmax": "-2 -20" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "Animation", + "mouseTarget": "DropDown1_Button", + "properties": [ + { + "condition": "OnClick", + "type": "MoveToPX", + "easing": "0 1.15 0.6 1", + "duration": 0.3, + "to": "2 -220 -2 -20" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown1_Parent", + "properties": [ + { + "condition": "OnClick", + "type": "MoveToPX", + "easing": "0 0.85 0.6 1", + "duration": 0.3, + "to": "2 -20 -2 -20" + } + ] + } + ] + }, + { + "name": "DropDown1_Option1", + "parent": "DropDown1_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -40", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "mouseTarget": "DropDown1_Option1", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Selecting an Option Closes the Dropdown", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown1_Option2", + "parent": "DropDown1_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -80", + "offsetmax": "0 -40" + }, + { + "type": "Animation", + "mouseTarget": "DropDown1_Option2", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Option 2", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown1_Option3", + "parent": "DropDown1_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -120", + "offsetmax": "0 -80" + }, + { + "type": "Animation", + "mouseTarget": "DropDown1_Option3", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Dont choose me", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown1_Option4", + "parent": "DropDown1_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -160", + "offsetmax": "0 -120" + }, + { + "type": "Animation", + "mouseTarget": "DropDown1_Option4", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option4", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Choose me", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown1_Option5", + "parent": "DropDown1_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -200", + "offsetmax": "0 -160" + }, + { + "type": "Animation", + "mouseTarget": "DropDown1_Option5", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option5", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"i'm just filler", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Tab3_Section2", + "parent":"Tab3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.06 0.06 0.06 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.33 0", + "anchormax": "0.66 1", + } + ] + }, + { + "name": "DropDown2_Button", + "parent": "Tab3_Section2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "0 -20", + "offsetmax": "0 20" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "Animation", + "mouseTarget": "DropDown2_Button", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "name": "DropDown2_ButtonExpand", + "parent": "DropDown2_Button", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "Animation", + "mouseTarget": "DropDown2_ButtonExpand", + "properties": [ + + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 -1 1 0" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown2_ButtonCollapse", + "properties": [ + + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 0 1 1" + } + ] + } + ] + }, + { + "parent": "DropDown2_ButtonExpand", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Expand", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown2_ButtonCollapse", + "parent": "DropDown2_Button", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 2" + }, + { + "type": "Animation", + "mouseTarget": "DropDown2_ButtonExpand", + "properties": [ + + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 0 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown2_ButtonCollapse", + "properties": [ + + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 1 1 2" + } + ] + } + ] + }, + { + "parent": "DropDown2_ButtonCollapse", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Collapse", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown2_Container", + "parent": "Tab3_Section2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.02 0.02 0.02 0.8" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "2 -20", + "offsetmax": "-2 -20" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "Animation", + "mouseTarget": "DropDown2_ButtonExpand", + "properties": [ + { + "condition": "OnClick", + "type": "MoveToPX", + "easing": "0 1.15 0.6 1", + "duration": 0.3, + "to": "2 -320 -2 -20" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown2_ButtonCollapse", + "properties": [ + { + "condition": "OnClick", + "type": "MoveToPX", + "easing": "0 0.85 0.6 1", + "duration": 0.3, + "to": "2 -20 -2 -20" + } + ] + } + ] + }, + { + "name": "DropDown2_TextContainer", + "parent": "DropDown2_Container", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.05 1", + "anchormax": "0.95 1", + "offsetmin": "0 -300", + "offsetmax": "0 0" + } + ] + }, + { + "parent": "DropDown2_TextContainer", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"unlike the first dropdown, this dropdown can only be closed by clicking the Collapse button. the Expand/Collapse button illustrates that this also lets us somewhat track state right in the UI, which allows us to create simple conditionals like checkboxes without requiring any AddUI/Destroy calls from the server", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Tab3_Section3", + "parent":"Tab3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.66 0", + "anchormax": "1 1", + } + ] + }, + { + "name": "DropDown3_Button", + "parent": "Tab3_Section3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "0 -20", + "offsetmax": "0 20" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Button", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "parent": "DropDown3_Button", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Select Option", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown3_Parent", + "parent":"Tab3_Section3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 0.0", + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0", + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Button", + "properties": [ + + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0, + "to": "0 0 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Parent", + "properties": [ + + { + "condition": "OnClick", + "type": "MoveTo", + "delay": 0.3, + "duration": 0, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "DropDown3_Container", + "parent":"Tab3_Section3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.02 0.02 0.02 0.8" + }, + { + "type":"UnityEngine.UI.ScrollView", + "vertical": true, + "horizontal": false, + "movementType": "Clamped", + "inertia": false, + "contentTransform": { + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -280", + "offsetmax": "0 0" + }, + "scrollSensitivity": 15.0 + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "2 -20", + "offsetmax": "-2 -20" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Button", + "properties": [ + { + "condition": "OnClick", + "type": "MoveToPX", + "easing": "0 1.15 0.6 1", + "duration": 0.3, + "to": "2 -220 -2 -20" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Parent", + "properties": [ + { + "condition": "OnClick", + "type": "MoveToPX", + "easing": "0 0.85 0.6 1", + "duration": 0.3, + "to": "2 -20 -2 -20" + } + ] + } + ] + }, + { + "name": "DropDown3_Option1", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -40", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option1", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Selecting an Option wont close the Dropdown", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown3_Option1Selected", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 0.1" + }, + { + "type":"RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -40", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option1", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option1Selected", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option2", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -80", + "offsetmax": "0 -40" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option2", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"You Can Select Me", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown3_Option2Selected", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 0.1" + }, + { + "type":"RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -80", + "offsetmax": "0 -40" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option2", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option2Selected", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option3", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -120", + "offsetmax": "0 -80" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option3", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Or Me!", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown3_Option3Selected", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 0.1" + }, + { + "type":"RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -120", + "offsetmax": "0 -80" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option3", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option3Selected", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option4", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -160", + "offsetmax": "0 -120" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.15 0.35 0.2 0.1" + }, + ] + } + ] + }, + { + "parent": "DropDown3_Option4", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Not me Though", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown3_Option5", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -200", + "offsetmax": "0 -160" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option5", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option5", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"i'm just filler", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown3_Option5Selected", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 0.1" + }, + { + "type":"RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -200", + "offsetmax": "0 -160" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option5", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option5Selected", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option6", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -240", + "offsetmax": "0 -200" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option6", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option6", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"i'm just filler", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown3_Option6Selected", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 0.1" + }, + { + "type":"RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -240", + "offsetmax": "0 -200" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option6", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option6Selected", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option7", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -280", + "offsetmax": "0 -240" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option7", + "properties": [ + { + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option7", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"i'm just filler", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "DropDown3_Option7Selected", + "parent": "DropDown3_Container", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 0.1" + }, + { + "type":"RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -280", + "offsetmax": "0 -240" + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option7", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option7Selected", + "properties": [ + { + "condition": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "ModalParent", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1", + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type":"NeedsCursor" + }, + { + "type": "Animation", + "mouseTarget": "ModalButton", + "properties": [ + { + "condition": "OnClick", + "type": "Color", + "easing": "0 1.15 0.6 1", + "duration": 0, + "to": "0.05 0.05 0.05 0.0" + }, + { + "condition": "OnClick", + "type": "Color", + "easing": "0 1.15 0.6 1", + "delay": 0.5, + "duration": 0.5, + "from": "0.05 0.05 0.05 0.0", + "to": "0.05 0.05 0.05 0.98" + }, + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "ModalCloseButton", + "properties": [ + { + "condition": "OnClick", + "type": "Color", + "easing": "0 1.15 0.6 1", + "duration": 0.2, + "to": "0.05 0.05 0.05 0.0" + }, + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "delay": 0.2, + "duration": 0.5, + "to": "0 -1 1 0" + } + ] + }, + { + "type": "Animation", + "mouseTarget": "ModalBackdrop", + "properties": [ + { + "condition": "OnClick", + "type": "Color", + "easing": "0 1.15 0.6 1", + "duration": 0.2, + "to": "0.05 0.05 0.05 0.0" + }, + { + "condition": "OnClick", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "delay": 0.2, + "duration": 0.5, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "ModalBackdrop", + "parent":"ModalParent", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 0", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Modal", + "parent":"ModalParent", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.08 0.08 0.08 1", + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type":"RectTransform", + "anchormin": "0.2 0.2", + "anchormax": "0.8 0.8" + }, + { + "type":"NeedsCursor" + } + ] + }, + { + "name": "ModalCloseButton", + "parent": "Modal", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "1 1 1 1" + }, + { + "type":"RectTransform", + "anchormin": "1 1", + "anchormax": "1 1", + "offsetmin": "-60 -25", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "mouseTarget": "ModalButton", + "properties": [ + { + "type": "Color", + "duration": 0, + "to": "0.3 0.65 0.35 0.4" + }, + { + "condition": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.6" + }, + { + "condition": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.4" + } + ] + } + ] + }, + { + "parent": "ModalCloseButton", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Close", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "parent": "Modal", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Re-Usable Modals without any server interaction required", + "color": "1 1 1 0.8", + "fontSize":24, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -30", + "offsetmax": "0 0" + } + ] + }, + { + "parent": "Modal", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"to Close this modal you can click outside of it on the backdrop or use the dedicated close button", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -120", + "offsetmax": "0 -40" + } + ] + }, + { + "name": "Button88", + "parent": "UI", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"UI", + "command":"cui.endtest", + "color": "0.9 0.8 0.3 0.52" + }, + { + "type":"RectTransform", + "anchormin": "0.0 0.0", + "anchormax": "0.1 0.07" + } + ] + }, + { + "parent": "Button88", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Kill UI", + "fontSize":16, + "align": "MiddleCenter" + } + ] + } +] From 6768b67c2188f611c595b43fbadbcd113a11ea5e Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 28 Nov 2022 11:00:47 +0100 Subject: [PATCH 13/53] Renaming, Refactoring based on Jake's Feedback Changed Condition Naming to Trigger as it makes more sense, Changing the default "Generic" to "OnCreate" to get more consistent nameing Added Ability to Remove Properties, automatically remove "OnCreate" Properties after they are over Remove Properties if they fail due to bad arguements, log a message stating which type of animation failed Changes based on Jake's Review: - added a bunch of comments to methods - added clarification to the BezierEasing class that its ported from a Javascript version of Gecko's CSS implementation - added a BezierPoints Struct which is just a collection of the 4 points to be used in the cache lookup, reducing string allocations - Seperated IMouseReceiver Interface into own File - Removed uneccesary new Action() calls --- CommunityEntity.UI.Animation.cs | 1062 ++++++++++++++------------ CommunityEntity.UI.BezierEasing.cs | 81 +- CommunityEntity.UI.IMouseReceiver.cs | 22 + CommunityEntity.UI.MouseListener.cs | 26 +- 4 files changed, 638 insertions(+), 553 deletions(-) create mode 100644 CommunityEntity.UI.IMouseReceiver.cs diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 41bf914..464c76d 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -11,498 +11,550 @@ public partial class CommunityEntity { - public class Animation : FacepunchBehaviour, IMouseReceiver - { - public Dictionary> properties = new Dictionary>(){ - ["Generic"] = new List(), - ["OnDestroy"] = new List(), - ["OnHoverEnter"] = new List(), - ["OnHoverExit"] = new List(), - ["OnClick"] = new List(), - }; - - public string _mouseTarget = ""; - - public string mouseTarget{ - get => _mouseTarget; - set => _mouseTarget = value; - } - - public UnityEngine.UI.Graphic cachedGraphic; - public RectTransform cachedRect; - public bool shouldRaycast = false; - - public bool isHidden = false; - public bool isKilled = false; - - public bool ValidCondition(string condition) => properties.ContainsKey(condition); - - public bool HasForCondition(string condition) => ValidCondition(condition) && properties[condition].Count > 0; - - public void StartAnimation(){ - CacheGraphicComponent(); - StartByCondition("Generic"); - } - public void StartByCondition(string condition){ - if(!ValidCondition(condition)) return; - foreach(var prop in properties[condition]){ - StartProperty(prop); - } - } - public void StartProperty(AnimationProperty prop){ - prop.anim = this; - prop.routine = StartCoroutine(prop.Animate()); - } - - public void StopByCondition(string condition){ - if(!ValidCondition(condition)) return; - foreach(var prop in properties[condition]){ - if(prop.routine != null) StopCoroutine(prop.routine); - } - } - - public void Kill(bool destroyed = false) - { - isKilled = true; - // stop all conditions except onDestroy - StopByCondition("Generic"); - StopByCondition("OnHoverEnter"); - StopByCondition("OnHoverExit"); - float killDelay = 0f; - // out early if the game object allready got destroyed - if(destroyed) return; - - foreach(var prop in properties["OnDestroy"]) - { - float totalDelay = prop.duration + prop.delay; - if(killDelay < totalDelay) killDelay = totalDelay; - StartProperty(prop); - } - - Invoke(new Action(() => Object.Destroy(gameObject)), killDelay + 0.05f); - } - private void OnDestroy(){ - if(!isKilled) Kill(true); - } - - public void CacheGraphicComponent(){ - cachedGraphic = gameObject.GetComponent(); - cachedRect = gameObject.GetComponent(); - shouldRaycast = (cachedGraphic != null ? cachedGraphic.raycastTarget : false); - } - public void DisableGraphic(float delay = 0f){ - var a = new Action(() => { - cachedGraphic.canvasRenderer.cullTransparentMesh = true; - isHidden = true; - cachedGraphic.raycastTarget = false; - }); - if(delay <= 0f) a(); - else Invoke(a, delay); - } - public void EnableGraphic(float delay = 0f){ - var a = new Action(() => { - cachedGraphic.canvasRenderer.cullTransparentMesh = false; - isHidden = false; - if(shouldRaycast) cachedGraphic.raycastTarget = true; - }); - if(delay <= 0f) a(); - else Invoke(a, delay); - } - - public void OnHoverEnter(){ - if(isKilled) return; - StopByCondition("OnHoverExit"); - StartByCondition("OnHoverEnter"); - } - public void OnHoverExit(){ - if(isKilled) return; - - StopByCondition("OnHoverEnter"); - StartByCondition("OnHoverExit"); - } - public void OnClick(){ - if(isKilled) return; - - StopByCondition("OnClick"); - StartByCondition("OnClick"); - } - } - - public class AnimationProperty : UnityEngine.Object - { - public float duration = 0f; - public float delay = 0f; - public int repeat = 0; - public float repeatDelay = 0f; - public string easing = "linear"; - public string type; - public string from; - public string to; - - public Animation anim; - - public Coroutine routine; - - public int completedRounds = 0; - - public IEnumerator Animate() - { - if(delay > 0f) yield return new WaitForSeconds(delay); - - do - { - yield return AnimateProperty(); - completedRounds++; - if(repeatDelay > 0f) yield return new WaitForSeconds(repeatDelay); - else yield return null; - } - while(repeat < 0 || (repeat > 0 && completedRounds <= repeat)); - } - - public IEnumerator AnimateProperty() - { - if(from == null) from = ""; - if(!string.IsNullOrEmpty(to)) - switch(type){ - case "Opacity": - { - if(!anim.cachedGraphic) break; - float fromOpacity; - float toOpacity; - - // we need a valid toOpacity - if(!float.TryParse(to, out toOpacity)) break; - // unlike the toOpacity, a from value is optional. if we omit a from value the crossfade will instead use the current alpha - float.TryParse(from, out fromOpacity); - // disable TCulling if the toOpacity or FromOpacity are Higher than 0f, if the fromOpacity check was ommited this wouldnt trigger if its an animation from > 0 to 0 - if(anim.isHidden && toOpacity > 0f || (!string.IsNullOrEmpty(from) && fromOpacity > 0f)) - anim.EnableGraphic(0f); - - - if(!string.IsNullOrEmpty(from)) anim.cachedGraphic.canvasRenderer.SetAlpha(fromOpacity); - // calling this wont actually start a tween, but it will stop any running color or alpha tweens, this is vital for stopping any potential fadeIns & Outs (otherwise the the tween and our own Animation will intersect) - anim.cachedGraphic.CrossFadeAlpha(anim.cachedGraphic.canvasRenderer.GetAlpha(), 0f, true); - - if(!anim.isHidden && toOpacity <= 0f) anim.DisableGraphic(duration); - return ChangeAlpha(toOpacity, duration, easing); - } - case "Color": - { - if(!anim.cachedGraphic) break; - Color fromColor = ColorEx.Parse(from); - Color toColor = ColorEx.Parse(to); - - //dont use the from color if the from value was ommited - bool useFrom = !string.IsNullOrEmpty(from); - if(anim.isHidden && toColor.a > 0f || (useFrom && fromColor.a > 0f)) - anim.EnableGraphic(0f); - - if(useFrom) anim.cachedGraphic.canvasRenderer.SetColor(fromColor); - - // Same as with alpha, stopping any tweens - anim.cachedGraphic.CrossFadeColor(anim.cachedGraphic.canvasRenderer.GetColor(), 0f, true, true); - - if(!anim.isHidden && toColor.a <= 0f) anim.DisableGraphic(duration); - return ChangeColor(toColor, duration, easing); - } - case "Scale": - { - Vector2 fromVec = Vector2Ex.Parse(from); - Vector2 toVec = Vector2Ex.Parse(to); - - //dont use the from Vector if the from value was ommited - bool useFrom = !string.IsNullOrEmpty(from); - - if(useFrom && anim.cachedRect) anim.cachedRect.localScale = new Vector3(fromVec.x, fromVec.y, 1f); - - return Scale(toVec, duration, easing); - } - case "Translate": - { - Vector2 toVec = Vector2Ex.Parse(to); - Vector2 fromVec = Vector2Ex.Parse(from); - - if(!string.IsNullOrEmpty(from)) TranslateInstantly(fromVec); - - return Translate(toVec, duration, easing); - } - case "TranslatePX": - { - Vector2 toVec = Vector2Ex.Parse(to); - Vector2 fromVec = Vector2Ex.Parse(from); - - if(!string.IsNullOrEmpty(from)) TranslatePXInstantly(fromVec); - - return TranslatePX(toVec, duration, easing); - } - case "Rotate": - { - Vector3 fromVec = Vector3Ex.Parse(from); - Vector3 toVec = Vector3Ex.Parse(to); - - //dont use the from Vector if the from value was ommited - bool useFrom = !string.IsNullOrEmpty(from); - - if(useFrom && anim.cachedRect) anim.cachedRect.rotation = Quaternion.Euler(fromVec); - return Rotate(toVec, duration, easing); - } - case "MoveTo": - { - // ColorEx is basically a Vector4 with extra steps - Color toCol = ColorEx.Parse(to); - Vector4 toVec = new Vector4(toCol.r, toCol.g, toCol.b, toCol.a); - - - if(!string.IsNullOrEmpty(from)){ - Color fromCol = ColorEx.Parse(from); - Vector4 fromVec = new Vector4(fromCol.r, fromCol.g, fromCol.b, fromCol.a); - // immediately move to the from vector - MoveToInstantly(fromVec); - } - - return MoveTo(toVec, duration, easing); - } - case "MoveToPX": - { - // ColorEx is basically a Vector4 with extra steps - Color toCol = ColorEx.Parse(to); - Vector4 toVec = new Vector4(toCol.r, toCol.g, toCol.b, toCol.a); - - - if(!string.IsNullOrEmpty(from)){ - Color fromCol = ColorEx.Parse(from); - Vector4 fromVec = new Vector4(fromCol.r, fromCol.g, fromCol.b, fromCol.a); - // immediately move to the from vector - MoveToPXInstantly(fromVec); - } - - return MoveToPX(toVec, duration, easing); - } - } - // Return an empty enumerator so the coroutine continues normally - return new System.Object[0].GetEnumerator(); - } - - // absolute - public IEnumerator ChangeAlpha(float toOpacity, float duration, string easing){ - float time = 0f; - float old = anim.cachedGraphic.canvasRenderer.GetAlpha(); - while(time < duration){ - float opacity = Mathf.LerpUnclamped(old, toOpacity, Ease(easing, time / duration)); - anim.cachedGraphic.canvasRenderer.SetAlpha(opacity); - time += Time.deltaTime; - yield return null; - } - anim.cachedGraphic.canvasRenderer.SetAlpha(toOpacity); - } - // absolute - public IEnumerator ChangeColor(Color toColor, float duration, string easing){ - float time = 0f; - Color old = anim.cachedGraphic.canvasRenderer.GetColor(); - while(time < duration){ - Color col = Color.LerpUnclamped(old, toColor, Ease(easing, time / duration)); - anim.cachedGraphic.canvasRenderer.SetColor(col); - time += Time.deltaTime; - yield return null; - } - anim.cachedGraphic.canvasRenderer.SetColor(toColor); - } - - // absolute - public IEnumerator Scale(Vector2 scale, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Vector2 old = new Vector2(rt.localScale.x, rt.localScale.y); - Vector2 goal = new Vector2(scale.x, scale.y); - Vector2 current; - while(time < duration){ - current = Vector2.LerpUnclamped(old, goal, Ease(easing, time / duration)); - rt.localScale = new Vector3(current.x, current.y, 0f); - - time += Time.deltaTime; - yield return null; - } - rt.localScale = new Vector3(scale.x, scale.y, 0f); - } - // absolute - public IEnumerator Rotate(Vector3 rotation, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Quaternion old = rt.rotation; - Quaternion goal = Quaternion.Euler(rotation); - while(time < duration){ - rt.rotation = Quaternion.LerpUnclamped(old, goal, Ease(easing, time / duration)); - - time += Time.deltaTime; - yield return null; - } - rt.rotation = goal; - } - - // relative - public IEnumerator Translate(Vector2 to, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); - Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); - Vector4 last = old; - Vector4 current; - while(time < duration){ - current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); - Vector4 diff = current - last; - rt.anchorMin += new Vector2(diff.x, diff.y); - rt.anchorMax += new Vector2(diff.z, diff.w); - - last = current; - time += Time.deltaTime; - yield return null; - } - current = goal - last; - rt.anchorMin += new Vector2(current.x, current.y); - rt.anchorMax += new Vector2(current.z, current.w); - } - // Because Translate with duration = 0 wouldnt work unless it was returned to the coroutine - public void TranslateInstantly(Vector2 to){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) return; - Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); - Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); - Vector4 current = goal - old; - rt.anchorMin += new Vector2(current.x, current.y); - rt.anchorMax += new Vector2(current.z, current.w); - } - - // relative - public IEnumerator TranslatePX(Vector2 to, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); - Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); - Vector4 last = old; - Vector4 current; - while(time < duration){ - current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); - Vector4 diff = current - last; - rt.offsetMin += new Vector2(diff.x, diff.y); - rt.offsetMax += new Vector2(diff.z, diff.w); - - last = current; - time += Time.deltaTime; - yield return null; - } - current = goal - last; - rt.offsetMin += new Vector2(current.x, current.y); - rt.offsetMax += new Vector2(current.z, current.w); - } - // Because TranslatePX with duration = 0 wouldnt work unless it was returned to the coroutine - public void TranslatePXInstantly(Vector2 to){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) return; - Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); - Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); - Vector4 current = goal - old; - rt.offsetMin += new Vector2(current.x, current.y); - rt.offsetMax += new Vector2(current.z, current.w); - } - - // relative - public IEnumerator MoveTo(Vector4 to, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); - Vector4 goal = to; - Vector4 last = old; - Vector4 current; - while(time < duration){ - current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); - Vector4 diff = current - last; - rt.anchorMin += new Vector2(diff.x, diff.y); - rt.anchorMax += new Vector2(diff.z, diff.w); - - last = current; - time += Time.deltaTime; - yield return null; - } - current = goal - last; - rt.anchorMin += new Vector2(current.x, current.y); - rt.anchorMax += new Vector2(current.z, current.w); - } - // Because MoveTo with duration = 0 wouldnt work unless it was returned to the coroutine - public void MoveToInstantly(Vector4 to){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) return; - Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); - Vector4 current = to - old; - rt.anchorMin += new Vector2(current.x, current.y); - rt.anchorMax += new Vector2(current.z, current.w); - } - - // relative - public IEnumerator MoveToPX(Vector4 to, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); - Vector4 goal = to; - Vector4 last = old; - Vector4 current; - while(time < duration){ - current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); - Vector4 diff = current - last; - rt.offsetMin += new Vector2(diff.x, diff.y); - rt.offsetMax += new Vector2(diff.z, diff.w); - - last = current; - time += Time.deltaTime; - yield return null; - } - current = goal - last; - rt.offsetMin += new Vector2(current.x, current.y); - rt.offsetMax += new Vector2(current.z, current.w); - } - // Because MoveToPX with duration = 0 wouldnt work unless it was returned to the coroutine - public void MoveToPXInstantly(Vector4 to){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) return; - Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); - Vector4 current = to - old; - rt.offsetMin += new Vector2(current.x, current.y); - rt.offsetMax += new Vector2(current.z, current.w); - } - - - public float Ease(string type, float input){ - switch(type){ - case "Linear": return input; - case "EaseIn": return input * input; - case "EaseOut": return 1f - ((1f - input) * (1f - input)); - case "EaseInOut": return Mathf.Lerp(input * input, 1f - ((1f - input) * (1f - input)), input); - default: // Custom Easing - { - var split = type.Split(' '); - float X1, Y1, X2, Y2; - if(split.Length < 4) return input; - if( - !float.TryParse(split[0], out X1) || !float.TryParse(split[1], out Y1) || - !float.TryParse(split[2], out X2) || !float.TryParse(split[3], out Y2) - ) return input; - - return BezierEasing.Ease(X1, Y1, X2, Y2, input); - } - } - } - } - - [RPC_Client] + public class Animation : FacepunchBehaviour, IMouseReceiver + { + // properties by trigger + public Dictionary> properties = new Dictionary>(){ + ["OnCreate"] = new List(), + ["OnDestroy"] = new List(), + ["OnHoverEnter"] = new List(), + ["OnHoverExit"] = new List(), + ["OnClick"] = new List() + }; + + public string _mouseTarget = ""; + + public string mouseTarget{ + get => _mouseTarget; + set => _mouseTarget = value; + } + + public UnityEngine.UI.Graphic cachedGraphic; + public RectTransform cachedRect; + public bool shouldRaycast = false; + + public bool isHidden = false; + public bool isKilled = false; + + public bool ValidTrigger(string trigger) => properties.ContainsKey(trigger); + + public bool HasForTrigger(string trigger) => ValidTrigger(trigger) && properties[trigger].Count > 0; + + public void StartAnimation(){ + CacheGraphicComponent(); + StartByTrigger("OnCreate"); + } + + public void StartByTrigger(string trigger){ + if(!ValidTrigger(trigger)) return; + foreach(var prop in properties[trigger]){ + StartProperty(prop); + } + } + + public void StartProperty(AnimationProperty prop){ + prop.anim = this; + prop.routine = StartCoroutine(prop.Animate()); + } + + public void StopByTrigger(string trigger){ + if(!ValidTrigger(trigger)) return; + foreach(var prop in properties[trigger]){ + if(prop.routine != null) StopCoroutine(prop.routine); + } + } + + // this method handles 2 things: + // stop any currently running animations and + // if the object isnt allready destroyed, trigger the OnDestroy animation and kill the gameobject afterwards + public void Kill(bool destroyed = false) + { + isKilled = true; + // stop all triggers except onDestroy + StopByTrigger("OnCreate"); + StopByTrigger("OnHoverEnter"); + StopByTrigger("OnHoverExit"); + float killDelay = 0f; + // out early if the game object allready got destroyed + if(destroyed) return; + + foreach(var prop in properties["OnDestroy"]) + { + float totalDelay = prop.duration + prop.delay; + if(killDelay < totalDelay) killDelay = totalDelay; + StartProperty(prop); + } + + Invoke(new Action(() => Object.Destroy(gameObject)), killDelay + 0.05f); + } + + private void OnDestroy(){ + if(!isKilled) Kill(true); + } + + public void CacheGraphicComponent(){ + cachedGraphic = gameObject.GetComponent(); + cachedRect = gameObject.GetComponent(); + shouldRaycast = (cachedGraphic != null ? cachedGraphic.raycastTarget : false); + } + + // used with opacity & color animations, this hides the graphic and prevents it from blocking mouse interactions + public void DisableGraphic(float delay = 0f){ + var a = new Action(() => { + cachedGraphic.canvasRenderer.cullTransparentMesh = true; + isHidden = true; + cachedGraphic.raycastTarget = false; + }); + if(delay <= 0f) a(); + else Invoke(a, delay); + } + + // does the oposite + public void EnableGraphic(float delay = 0f){ + var a = new Action(() => { + cachedGraphic.canvasRenderer.cullTransparentMesh = false; + isHidden = false; + if(shouldRaycast) cachedGraphic.raycastTarget = true; + }); + if(delay <= 0f) a(); + else Invoke(a, delay); + } + + public void OnHoverEnter(){ + if(isKilled) return; + StopByTrigger("OnHoverExit"); + StartByTrigger("OnHoverEnter"); + } + + public void OnHoverExit(){ + if(isKilled) return; + StopByTrigger("OnHoverEnter"); + StartByTrigger("OnHoverExit"); + } + + public void OnClick(){ + if(isKilled) return; + StopByTrigger("OnClick"); + StartByTrigger("OnClick"); + } + + public void RemoveProperty(AnimationProperty property){ + if(string.IsNullOrEmpty(property.trigger) || !ValidTrigger(property.trigger)) + return; + + properties[property.trigger].Remove(property); + } + } + + public class AnimationProperty : UnityEngine.Object + { + public float duration = 0f; + public float delay = 0f; + public int repeat = 0; + public float repeatDelay = 0f; + public string easing = "linear"; + public string type; + public string from; + public string to; + public string trigger; + + public Animation anim; + + public Coroutine routine; + + public int completedRounds = 0; + + // Launches the animation, keeping track of loops if its set to repeat + public IEnumerator Animate() + { + if(from == null) from = ""; + if(string.IsNullOrEmpty(to)){ + Debug.LogWarning($"Animation for {anim.gameObject.name} failed to execute - invalid \"to\" value"); + anim.RemoveProperty(this); + yield break; + } + + // initial delay + if(delay > 0f) yield return new WaitForSeconds(delay); + + do + { + yield return AnimateProperty(); + completedRounds++; + if(repeatDelay > 0f) yield return new WaitForSeconds(repeatDelay); + else yield return null; + } + while(repeat < 0 || (repeat > 0 && completedRounds <= repeat)); + + // this animation wont get triggered again, so remove it + if(trigger == "OnCreate") + anim.RemoveProperty(this); + } + + // Parses the from & to values and Launches the individual animation + // adding new animations can be achieved by adding cases to the switch statement + public IEnumerator AnimateProperty() + { + switch(type){ + case "Opacity": + { + if(!anim.cachedGraphic) break; + float fromOpacity; + float toOpacity; + + // we need a valid toOpacity + if(!float.TryParse(to, out toOpacity)) break; + // unlike the toOpacity, a from value is optional. if we omit a from value the crossfade will instead use the current alpha + float.TryParse(from, out fromOpacity); + // disable TCulling if the toOpacity or FromOpacity are Higher than 0f, if the fromOpacity check was ommited this wouldnt trigger if its an animation from > 0 to 0 + if(anim.isHidden && toOpacity > 0f || (!string.IsNullOrEmpty(from) && fromOpacity > 0f)) + anim.EnableGraphic(0f); + + if(!string.IsNullOrEmpty(from)) anim.cachedGraphic.canvasRenderer.SetAlpha(fromOpacity); + // calling this wont actually start a tween, but it will stop any running color or alpha tweens, this is vital for stopping any potential fadeIns & Outs (otherwise the the tween and our own Animation will intersect) + anim.cachedGraphic.CrossFadeAlpha(anim.cachedGraphic.canvasRenderer.GetAlpha(), 0f, true); + + if(!anim.isHidden && toOpacity <= 0f) anim.DisableGraphic(duration); + return ChangeAlpha(toOpacity, duration, easing); + } + case "Color": + { + if(!anim.cachedGraphic) break; + Color fromColor = ColorEx.Parse(from); + Color toColor = ColorEx.Parse(to); + + //dont use the from color if the from value was ommited + bool useFrom = !string.IsNullOrEmpty(from); + if(anim.isHidden && toColor.a > 0f || (useFrom && fromColor.a > 0f)) + anim.EnableGraphic(0f); + + if(useFrom) anim.cachedGraphic.canvasRenderer.SetColor(fromColor); + + // Same as with alpha, stopping any tweens + anim.cachedGraphic.CrossFadeColor(anim.cachedGraphic.canvasRenderer.GetColor(), 0f, true, true); + + if(!anim.isHidden && toColor.a <= 0f) anim.DisableGraphic(duration); + return ChangeColor(toColor, duration, easing); + } + case "Scale": + { + Vector2 fromVec = Vector2Ex.Parse(from); + Vector2 toVec = Vector2Ex.Parse(to); + + //dont use the from Vector if the from value was ommited + bool useFrom = !string.IsNullOrEmpty(from); + + if(useFrom && anim.cachedRect) anim.cachedRect.localScale = new Vector3(fromVec.x, fromVec.y, 1f); + + return Scale(toVec, duration, easing); + } + case "Translate": + { + Vector2 toVec = Vector2Ex.Parse(to); + Vector2 fromVec = Vector2Ex.Parse(from); + + if(!string.IsNullOrEmpty(from)) TranslateInstantly(fromVec); + + return Translate(toVec, duration, easing); + } + case "TranslatePX": + { + Vector2 toVec = Vector2Ex.Parse(to); + Vector2 fromVec = Vector2Ex.Parse(from); + + if(!string.IsNullOrEmpty(from)) TranslatePXInstantly(fromVec); + + return TranslatePX(toVec, duration, easing); + } + case "Rotate": + { + Vector3 fromVec = Vector3Ex.Parse(from); + Vector3 toVec = Vector3Ex.Parse(to); + + //dont use the from Vector if the from value was ommited + bool useFrom = !string.IsNullOrEmpty(from); + + if(useFrom && anim.cachedRect) anim.cachedRect.rotation = Quaternion.Euler(fromVec); + return Rotate(toVec, duration, easing); + } + case "MoveTo": + { + // ColorEx is basically a Vector4 with extra steps + Color toCol = ColorEx.Parse(to); + Vector4 toVec = new Vector4(toCol.r, toCol.g, toCol.b, toCol.a); + + + if(!string.IsNullOrEmpty(from)){ + Color fromCol = ColorEx.Parse(from); + Vector4 fromVec = new Vector4(fromCol.r, fromCol.g, fromCol.b, fromCol.a); + // immediately move to the from vector + MoveToInstantly(fromVec); + } + + return MoveTo(toVec, duration, easing); + } + case "MoveToPX": + { + // ColorEx is basically a Vector4 with extra steps + Color toCol = ColorEx.Parse(to); + Vector4 toVec = new Vector4(toCol.r, toCol.g, toCol.b, toCol.a); + + + if(!string.IsNullOrEmpty(from)){ + Color fromCol = ColorEx.Parse(from); + Vector4 fromVec = new Vector4(fromCol.r, fromCol.g, fromCol.b, fromCol.a); + // immediately move to the from vector + MoveToPXInstantly(fromVec); + } + + return MoveToPX(toVec, duration, easing); + } + } + + // remove this animation property of there is no valid case or the selected case fails + Debug.LogWarning($"Animation for {anim.gameObject.name} failed to execute - invalid values for animation of type {type}"); + anim.RemoveProperty(this); + repeat = 0; // ensure the animation wont repeat + // Return an empty enumerator so the coroutine finishes + return new System.Object[0].GetEnumerator(); + } + + // Changes the alpha of the current canvasRenderer + // NOTE: this uses the canvasRenderer's SetAlpha Property which might cause some unexpected behaviour + // this is because it acts as a multiplier multiplying the graphic's color with the canvasRenderer's Alpha + // if we have an image with a color of 0.5 0.5 0.5 0.5, the opacity wont go above 0.5 even if we try to change it to 1 with an animation + // when changing this to set the graphic's color directly it resulted in terrible performance + // type: ABSOLUTE, meaning it cant be affected by other alpha or color changing animations and will get to its goal opacity + public IEnumerator ChangeAlpha(float toOpacity, float duration, string easing){ + float time = 0f; + float old = anim.cachedGraphic.canvasRenderer.GetAlpha(); + while(time < duration){ + float opacity = Mathf.LerpUnclamped(old, toOpacity, Ease(easing, time / duration)); + anim.cachedGraphic.canvasRenderer.SetAlpha(opacity); + time += Time.deltaTime; + yield return null; + } + anim.cachedGraphic.canvasRenderer.SetAlpha(toOpacity); + } + + // Changes the color of the current canvasRenderer, same Note Applies as with the ChangeAlpha Function, except each channel is multiplied seperately + // type: ABSOLUTE, meaning it cant be affected by other alpha or color changing animations and will get to its goal opacity + public IEnumerator ChangeColor(Color toColor, float duration, string easing){ + float time = 0f; + Color old = anim.cachedGraphic.canvasRenderer.GetColor(); + while(time < duration){ + Color col = Color.LerpUnclamped(old, toColor, Ease(easing, time / duration)); + anim.cachedGraphic.canvasRenderer.SetColor(col); + time += Time.deltaTime; + yield return null; + } + anim.cachedGraphic.canvasRenderer.SetColor(toColor); + } + + // type: ABSOLUTE, meaning it cant be affected by other Scale animations and will reach its target scale + public IEnumerator Scale(Vector2 scale, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Vector2 old = new Vector2(rt.localScale.x, rt.localScale.y); + Vector2 goal = new Vector2(scale.x, scale.y); + Vector2 current; + while(time < duration){ + current = Vector2.LerpUnclamped(old, goal, Ease(easing, time / duration)); + rt.localScale = new Vector3(current.x, current.y, 0f); + + time += Time.deltaTime; + yield return null; + } + rt.localScale = new Vector3(scale.x, scale.y, 0f); + } + + // type: ABSOLUTE, meaning it cant be affected by other Rotation animations and will reach its target scale + // TIP: since we are using vector3s, rotating more than 180deg requires 2 (probably 3) seperate animations + public IEnumerator Rotate(Vector3 rotation, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Quaternion old = rt.rotation; + Quaternion goal = Quaternion.Euler(rotation); + while(time < duration){ + rt.rotation = Quaternion.LerpUnclamped(old, goal, Ease(easing, time / duration)); + + time += Time.deltaTime; + yield return null; + } + rt.rotation = goal; + } + + // type: RELATIVE, meaning other Translate and MoveTo Animations can affect the destination + public IEnumerator Translate(Vector2 to, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); + Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); + Vector4 last = old; + Vector4 current; + while(time < duration){ + current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); + Vector4 diff = current - last; + rt.anchorMin += new Vector2(diff.x, diff.y); + rt.anchorMax += new Vector2(diff.z, diff.w); + + last = current; + time += Time.deltaTime; + yield return null; + } + current = goal - last; + rt.anchorMin += new Vector2(current.x, current.y); + rt.anchorMax += new Vector2(current.z, current.w); + } + // Because Translate with duration = 0 wouldnt work unless it was returned to the coroutine + public void TranslateInstantly(Vector2 to){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) return; + Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); + Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); + Vector4 current = goal - old; + rt.anchorMin += new Vector2(current.x, current.y); + rt.anchorMax += new Vector2(current.z, current.w); + } + + // type: RELATIVE, meaning other TranslatePX and MoveToPX Animations can affect the destination + // NOTE: {Type} and {Type}PX Animations are independent of eachother + public IEnumerator TranslatePX(Vector2 to, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); + Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); + Vector4 last = old; + Vector4 current; + while(time < duration){ + current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); + Vector4 diff = current - last; + rt.offsetMin += new Vector2(diff.x, diff.y); + rt.offsetMax += new Vector2(diff.z, diff.w); + + last = current; + time += Time.deltaTime; + yield return null; + } + current = goal - last; + rt.offsetMin += new Vector2(current.x, current.y); + rt.offsetMax += new Vector2(current.z, current.w); + } + // Because TranslatePX with duration = 0 wouldnt work unless it was returned to the coroutine + public void TranslatePXInstantly(Vector2 to){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) return; + Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); + Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); + Vector4 current = goal - old; + rt.offsetMin += new Vector2(current.x, current.y); + rt.offsetMax += new Vector2(current.z, current.w); + } + + // type: RELATIVE, meaning other Translate and MoveTo Animations may cause this to not arrive at its destination + // NOTE: MoveTo may seem like it can achieve the same effect as Scale and Translate + // but Translate is an easy way to do relative movement, while using a Scale animation has a different effect from changing anchor values + public IEnumerator MoveTo(Vector4 to, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); + Vector4 goal = to; + Vector4 last = old; + Vector4 current; + while(time < duration){ + current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); + Vector4 diff = current - last; + rt.anchorMin += new Vector2(diff.x, diff.y); + rt.anchorMax += new Vector2(diff.z, diff.w); + + last = current; + time += Time.deltaTime; + yield return null; + } + current = goal - last; + rt.anchorMin += new Vector2(current.x, current.y); + rt.anchorMax += new Vector2(current.z, current.w); + } + // Because MoveTo with duration = 0 wouldnt work unless it was returned to the coroutine + public void MoveToInstantly(Vector4 to){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) return; + Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); + Vector4 current = to - old; + rt.anchorMin += new Vector2(current.x, current.y); + rt.anchorMax += new Vector2(current.z, current.w); + } + + // type: RELATIVE, meaning other TranslatePX and MoveToPX Animations may cause this to not arrive at its destination + public IEnumerator MoveToPX(Vector4 to, float duration, string easing){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) yield break; + Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); + Vector4 goal = to; + Vector4 last = old; + Vector4 current; + while(time < duration){ + current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); + Vector4 diff = current - last; + rt.offsetMin += new Vector2(diff.x, diff.y); + rt.offsetMax += new Vector2(diff.z, diff.w); + + last = current; + time += Time.deltaTime; + yield return null; + } + current = goal - last; + rt.offsetMin += new Vector2(current.x, current.y); + rt.offsetMax += new Vector2(current.z, current.w); + } + // Because MoveToPX with duration = 0 wouldnt work unless it was returned to the coroutine + public void MoveToPXInstantly(Vector4 to){ + float time = 0f; + var rt = anim.cachedRect; + if(!rt) return; + Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); + Vector4 current = to - old; + rt.offsetMin += new Vector2(current.x, current.y); + rt.offsetMax += new Vector2(current.z, current.w); + } + + // manipulates a the input based on a preset easing function or a custom Bezier curve + // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve + // NOTE: the return value is unclamped as this allowes bezier curves with under- and overshoot to work + public float Ease(string type, float input){ + switch(type){ + case "Linear": return input; + case "EaseIn": return input * input; + case "EaseOut": return 1f - ((1f - input) * (1f - input)); + case "EaseInOut": return Mathf.Lerp(input * input, 1f - ((1f - input) * (1f - input)), input); + default: // Custom Easing + { + var split = type.Split(' '); + float X1, Y1, X2, Y2; + if(split.Length < 4) return input; + if( + !float.TryParse(split[0], out X1) || !float.TryParse(split[1], out Y1) || + !float.TryParse(split[2], out X2) || !float.TryParse(split[3], out Y2) + ) return input; + + return BezierEasing.Ease(X1, Y1, X2, Y2, input); + } + } + } + } + + // RPC function to Add Animations to existing objects + // accepts the same json object that the CreateComponents function does + [RPC_Client] public void AddAnimation( RPCMessage msg ) { string str = msg.read.StringRaw(); @@ -519,10 +571,10 @@ public void AddAnimation( RPCMessage msg ) GameObject go; if (string.IsNullOrEmpty(panel) || !UiDict.TryGetValue(panel, out go)) return; - + Animation anim = null; Animation[] animations = go.GetComponents(); - + string mouseTarget = obj.GetString("mouseTarget", ""); if(animations.Length == 0){ // do nothing @@ -532,19 +584,20 @@ public void AddAnimation( RPCMessage msg ) }else{ anim = animations[0]; } - + if(anim == null){ anim = go.AddComponent(); anim.CacheGraphicComponent(); if(!string.IsNullOrEmpty(mouseTarget)) ScheduleMouseListener(mouseTarget, anim); } - + + foreach(var prop in obj.GetArray("properties")) { var propobj = prop.Obj; - var condition = propobj.GetString("condition", "Generic"); - - if(!anim.ValidCondition(condition)) condition = "Generic"; + var trigger = propobj.GetString("trigger", "OnCreate"); + + if(!anim.ValidTrigger(trigger)) trigger = "OnCreate"; var animprop = new AnimationProperty{ duration = propobj.GetFloat("duration", 0f), delay = propobj.GetFloat("delay", 0f), @@ -553,15 +606,16 @@ public void AddAnimation( RPCMessage msg ) easing = propobj.GetString("easing", "Linear"), type = propobj.GetString("type", null), from = propobj.GetString("from", null), - to = propobj.GetString("to", null) + to = propobj.GetString("to", null), + trigger = trigger }; - anim.properties[condition].Add(animprop); - - if(condition == "Generic") anim.StartProperty(animprop); + anim.properties[trigger].Add(animprop); + + if(trigger == "OnCreate") anim.StartProperty(animprop); } break; } - ApplyMouseListeners(); + ApplyMouseListeners(); } } diff --git a/CommunityEntity.UI.BezierEasing.cs b/CommunityEntity.UI.BezierEasing.cs index ec4b121..661d276 100644 --- a/CommunityEntity.UI.BezierEasing.cs +++ b/CommunityEntity.UI.BezierEasing.cs @@ -13,9 +13,12 @@ public partial class CommunityEntity public class BezierEasing { // this basically is the same process that Browsers use for their CSS easing, allowing you to define any possible easing value with 4 bezier points - // had to port this from a javascript version + // NOTE: this is a C# version of the javascript library at https://github.com/gre/bezier-easing, i simply rewrote it to be in C# Syntax and added a Static helper method - public static Dictionary cache = new Dictionary(); + public static Dictionary cache = new Dictionary(); + + // these values modify the accuracy & performance of the curve's evaluation + // while these are the values used in the javascript library you may find better values that produce good enough results with better performance public static int NewItts = 4; public static float NewMinSlope = 0.001f; public static float SubDivPrec = 0.0000001f; @@ -32,36 +35,45 @@ public class BezierEasing { bool _precomputed = false; - + // Helper function that caches BezierEasing Instances. supplying 4 points & time between 0 & 1 generates the curve & caches it, returning the value for time public static float Ease(float X1, float Y1, float X2, float Y2, float time){ - string key = $"{X1}{Y1}{X2}{Y2}"; + var key = new BezierPoints(X1, Y1, X2, Y2); if(!cache.ContainsKey(key)){ cache[key] = new BezierEasing(X1, Y1, X2, Y2); } return cache[key].GetPosition(time); } + public BezierEasing (float X1, float Y1, float X2, float Y2) { + mX1 = X1; + mY1 = Y1; + mX2 = X2; + mY2 = Y2; + mSampleValues = new float[kSplineTableSize]; + } + // the following 3 functions are a single math formula split up into 3 steps for clarity float A (float aA1, float aA2) { return 1.0f - 3.0f * aA2 + 3.0f * aA1; } float B (float aA1, float aA2) { return 3.0f * aA2 - 6.0f * aA1; } float C (float aA1) { return 3.0f * aA1; } // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. - public float calcBezier (float aT, float aA1, float aA2) { + public float CalcBezier (float aT, float aA1, float aA2) { return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT; } // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. - public float getSlope (float aT, float aA1, float aA2) { + public float GetSlope (float aT, float aA1, float aA2) { return 3.0f * A(aA1, aA2)*aT*aT + 2.0f * B(aA1, aA2) * aT + C(aA1); } - public float binarySubdivide (float aX, float aA, float aB) { + // performs a dichometric search to find the most accurate value between 2 precalculated points within SubDivItts loops + public float BinarySubdivide (float aX, float aA, float aB) { float currentX, currentT, i = 0f; do { currentT = aA + (aB - aA) / 2.0f; - currentX = calcBezier(currentT, mX1, mX2) - aX; + currentX = CalcBezier(currentT, mX1, mX2) - aX; if (currentX > 0.0f) { aB = currentT; } else { @@ -71,21 +83,15 @@ public float binarySubdivide (float aX, float aA, float aB) { return currentT; } - public BezierEasing (float X1, float Y1, float X2, float Y2) { - mX1 = X1; - mY1 = Y1; - mX2 = X2; - mY2 = Y2; - mSampleValues = new float[kSplineTableSize]; - } - - void calcSampleValues () { + // pre-calculates a set amount of points to be used within the BinarySubdivide function + void CalcSampleValues () { for (var i = 0; i < kSplineTableSize; ++i) { - mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); + mSampleValues[i] = CalcBezier(i * kSampleStepSize, mX1, mX2); } } - float getTForX (float aX) { + // finds the surrounding pre-calculated points for x and returns the closest value, uses NewtonRaphson's method for faster computation if the slope is above a set threshold, otherwhise falls back to a binary search + float GetTForX (float aX) { float intervalStart = 0.0f; int currentSample = 1; int lastSample = kSplineTableSize - 1; @@ -97,39 +103,56 @@ float getTForX (float aX) { float dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample+1] - mSampleValues[currentSample]); float guessForT = intervalStart + dist * kSampleStepSize; - float initialSlope = getSlope(guessForT, mX1, mX2); + float initialSlope = GetSlope(guessForT, mX1, mX2); if (initialSlope >= NewMinSlope) { - return newtonRaphsonIterate(aX, guessForT); + return NewtonRaphsonIterate(aX, guessForT); } else if (initialSlope == 0.0f) { return guessForT; } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize); + return BinarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize); } } - void precompute() { + void PreCompute() { _precomputed = true; if (mX1 != mY1 || mX2 != mY2) - calcSampleValues(); + CalcSampleValues(); } + // returns the value on the curve for X public float GetPosition(float aX) { - if (!_precomputed) precompute(); + if (!_precomputed) PreCompute(); if (mX1 == mY1 && mX2 == mY2) return aX; // linear if (aX == 0f) return 0f; if (aX == 1f) return 1f; - return calcBezier(getTForX(aX), mY1, mY2); + return CalcBezier(GetTForX(aX), mY1, mY2); } - float newtonRaphsonIterate (float aX, float aGuessT) { + // approximates the value for X using the Newton-Raphson Method + float NewtonRaphsonIterate (float aX, float aGuessT) { for (var i = 0; i < NewItts; ++i) { - float currentSlope = getSlope(aGuessT, mX1, mX2); + float currentSlope = GetSlope(aGuessT, mX1, mX2); if (currentSlope == 0.0f) return aGuessT; - var currentX = calcBezier(aGuessT, mX1, mX2) - aX; + var currentX = CalcBezier(aGuessT, mX1, mX2) - aX; aGuessT -= currentX / currentSlope; } return aGuessT; } + + // used as a key for the cache + public struct BezierPoints{ + public float P1; + public float P2; + public float P3; + public float P4; + + public BezierPoints(float X1, float Y1, float X2, float Y2){ + P1 = X1; + P2 = Y1; + P3 = X2; + P4 = Y2; + } + } } } diff --git a/CommunityEntity.UI.IMouseReceiver.cs b/CommunityEntity.UI.IMouseReceiver.cs new file mode 100644 index 0000000..c6f03bc --- /dev/null +++ b/CommunityEntity.UI.IMouseReceiver.cs @@ -0,0 +1,22 @@ +#if CLIENT + + +public partial class CommunityEntity +{ + + public interface IMouseReceiver{ + + string mouseTarget { + get; + set; + } + + void OnHoverEnter(); + + void OnHoverExit(); + + void OnClick(); + } +} + +#endif diff --git a/CommunityEntity.UI.MouseListener.cs b/CommunityEntity.UI.MouseListener.cs index c6b2221..e3e2fa7 100644 --- a/CommunityEntity.UI.MouseListener.cs +++ b/CommunityEntity.UI.MouseListener.cs @@ -44,20 +44,6 @@ public virtual void OnPointerExit(PointerEventData eventData) } } - public interface IMouseReceiver{ - - string mouseTarget { - get; - set; - } - - void OnHoverEnter(); - - void OnHoverExit(); - - void OnClick(); - } - public void ScheduleMouseListener(string name, IMouseReceiver receiver){ receiver.mouseTarget = name; @@ -78,9 +64,9 @@ public void ApplyMouseListener(string name, IMouseReceiver receiver){ var c = hObj.GetComponent(); if(!c) c = hObj.AddComponent(); - c.onEnter += new Action(receiver.OnHoverEnter); - c.onExit += new Action(receiver.OnHoverExit); - c.onClick += new Action(receiver.OnClick); + c.onEnter += receiver.OnHoverEnter; + c.onExit += receiver.OnHoverExit; + c.onClick += receiver.OnClick; } public void RemoveMouseListener(string name, IMouseReceiver receiver){ @@ -90,9 +76,9 @@ public void RemoveMouseListener(string name, IMouseReceiver receiver){ var c = hObj.GetComponent(); if(!c) return; - c.onEnter -= new Action(receiver.OnHoverEnter); - c.onExit -= new Action(receiver.OnHoverExit); - c.onClick -= new Action(receiver.OnClick); + c.onEnter -= receiver.OnHoverEnter; + c.onExit -= receiver.OnHoverExit; + c.onClick -= receiver.OnClick; receiver.mouseTarget = ""; } From 0abb224918ccaba1187c5fcbd5ebfa587bd61982 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Thu, 1 Dec 2022 19:31:47 +0100 Subject: [PATCH 14/53] changed condition to trigger changed condition to trigger in example files --- AnimationExample.json | 124 ++++++++++++------------ AnimationTest.json | 110 +++++++++++----------- CommunityEntity.UI.cs | 13 +-- MultipleAnimationTest.json | 188 ++++++++++++++++++------------------- 4 files changed, 218 insertions(+), 217 deletions(-) diff --git a/AnimationExample.json b/AnimationExample.json index 08e5c33..34796d0 100644 --- a/AnimationExample.json +++ b/AnimationExample.json @@ -37,7 +37,7 @@ [ { "type":"UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/OyleW8R.png", + "url": "https://images.wallpapersden.com/image/download/futuristic-dark-hexagon-10k_bG5oa22UmZqaraWkpJRmZWdpZa1qbGtl.jpg", }, { "type":"RectTransform", @@ -48,14 +48,14 @@ "type":"Animation", "properties": [ { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0", "duration": 0, "delay": 0 }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0.7", "duration": 2.5, @@ -64,7 +64,7 @@ "repeatDelay": 5.0, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0.0", "duration": 2.5, @@ -73,7 +73,7 @@ "repeatDelay": 5.0, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Scale", "to": "1.45 1.45", "duration": 0.05, @@ -81,7 +81,7 @@ "repeat": 0 }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Translate", "to": "-0.2 -0.1", "duration": 0.0, @@ -89,7 +89,7 @@ "repeat": 0 }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Translate", "to": "-0.4 -0.2", "duration": 0, @@ -98,7 +98,7 @@ "repeatDelay": 7.5, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Translate", "to": "0.4 0.2", "duration": 7.0, @@ -107,7 +107,7 @@ "repeatDelay": 0.5, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Rotate", "to": "0 0 0", "duration": 0, @@ -116,7 +116,7 @@ "repeatDelay": 7.5, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Rotate", "to": "0 0 30", "duration": 7.0, @@ -146,14 +146,14 @@ "type":"Animation", "properties": [ { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0", "duration": 0, "delay": 0 }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0.7", "duration": 2.5, @@ -162,7 +162,7 @@ "repeatDelay": 12.0, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0.0", "duration": 2.5, @@ -171,7 +171,7 @@ "repeatDelay": 12.0, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Scale", "to": "1.25 1.25", "duration": 0.05, @@ -179,7 +179,7 @@ "repeat": 0 }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Translate", "to": "-0.1 -0.1", "duration": 0.0, @@ -187,7 +187,7 @@ "repeat": 0 }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Translate", "to": "-0.2 -0.2", "duration": 0, @@ -196,7 +196,7 @@ "repeatDelay": 14.5, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Translate", "to": "0.2 0.2", "duration": 14.0, @@ -226,14 +226,14 @@ "type":"Animation", "properties": [ { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0", "duration": 0, "delay": 0 }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0.7", "duration": 2.5, @@ -242,7 +242,7 @@ "repeatDelay": 9.0, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0.0", "duration": 2.5, @@ -272,14 +272,14 @@ "type":"Animation", "properties": [ { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0", "duration": 0, "delay": 0 }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0.7", "duration": 2.5, @@ -288,7 +288,7 @@ "repeatDelay": 5.0, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Opacity", "to": "0.0", "duration": 2.5, @@ -297,7 +297,7 @@ "repeatDelay": 5.0, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Scale", "to": "1.45 1.45", "duration": 0.05, @@ -305,7 +305,7 @@ "repeat": 0 }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Translate", "to": "-0.2 -0.1", "duration": 0.0, @@ -313,7 +313,7 @@ "repeat": 0 }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Translate", "to": "-0.4 -0.2", "duration": 0, @@ -322,7 +322,7 @@ "repeatDelay": 7.5, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Translate", "to": "0.4 0.2", "duration": 7.0, @@ -331,7 +331,7 @@ "repeatDelay": 0.5, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Rotate", "to": "0 0 0", "duration": 0, @@ -340,7 +340,7 @@ "repeatDelay": 7.5, }, { - "condition" : "Generic", + "trigger" : "OnCreate", "type": "Rotate", "to": "0 0 30", "duration": 14.5, @@ -453,7 +453,7 @@ "to": "1 1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Scale", "delay": 0, "duration": 0.2, @@ -461,7 +461,7 @@ "to": "1.06 1.06" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Rotate", "delay": 0, "duration": 0.2, @@ -469,7 +469,7 @@ "to": "0 0 3" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Scale", "delay": 0.1, "duration": 0.2, @@ -477,7 +477,7 @@ "to": "1 1" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Rotate", "delay": 0.1, "duration": 0.2, @@ -558,7 +558,7 @@ "to": "0.0" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Opacity", "delay": 0, "duration": 0.2, @@ -566,7 +566,7 @@ "to": "2.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Opacity", "delay": 0.1, "duration": 0.2, @@ -635,7 +635,7 @@ "to": "0.0" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Opacity", "delay": 0, "duration": 0.2, @@ -643,7 +643,7 @@ "to": "1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Opacity", "delay": 0.1, "duration": 0.2, @@ -689,7 +689,7 @@ "mouseTarget": "CardBody1", "properties": [ { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "MoveTo", "delay": 0, "duration": 0.2, @@ -698,7 +698,7 @@ "to": "0 0 1 1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Scale", "delay": 0, "duration": 0.2, @@ -707,7 +707,7 @@ "to": "1.1 1.1" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "MoveTo", "delay": 0.1, "duration": 0.2, @@ -770,7 +770,7 @@ "to": "1 1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Scale", "delay": 0, "duration": 0.2, @@ -778,7 +778,7 @@ "to": "1.06 1.06" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Rotate", "delay": 0, "duration": 0.2, @@ -786,7 +786,7 @@ "to": "0 0 3" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Scale", "delay": 0.1, "duration": 0.2, @@ -794,7 +794,7 @@ "to": "1 1" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Rotate", "delay": 0.1, "duration": 0.2, @@ -875,7 +875,7 @@ "to": "0.0" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Opacity", "delay": 0, "duration": 0.2, @@ -883,7 +883,7 @@ "to": "2.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Opacity", "delay": 0.1, "duration": 0.2, @@ -952,7 +952,7 @@ "to": "0.0" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Opacity", "delay": 0, "duration": 0.2, @@ -960,7 +960,7 @@ "to": "1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Opacity", "delay": 0.1, "duration": 0.2, @@ -1006,7 +1006,7 @@ "mouseTarget": "CardBody2", "properties": [ { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "MoveTo", "delay": 0, "duration": 0.2, @@ -1015,7 +1015,7 @@ "to": "0 0 1 1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Scale", "delay": 0, "duration": 0.2, @@ -1024,7 +1024,7 @@ "to": "1.1 1.1" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "MoveTo", "delay": 0.1, "duration": 0.2, @@ -1087,7 +1087,7 @@ "to": "1 1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Scale", "delay": 0, "duration": 0.2, @@ -1095,7 +1095,7 @@ "to": "1.06 1.06" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Rotate", "delay": 0, "duration": 0.2, @@ -1103,7 +1103,7 @@ "to": "0 0 3" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Scale", "delay": 0.1, "duration": 0.2, @@ -1111,7 +1111,7 @@ "to": "1 1" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Rotate", "delay": 0.1, "duration": 0.2, @@ -1192,7 +1192,7 @@ "to": "0.0" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Opacity", "delay": 0, "duration": 0.2, @@ -1200,7 +1200,7 @@ "to": "2.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Opacity", "delay": 0.1, "duration": 0.2, @@ -1269,7 +1269,7 @@ "to": "0.0" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Opacity", "delay": 0, "duration": 0.2, @@ -1277,7 +1277,7 @@ "to": "1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Opacity", "delay": 0.1, "duration": 0.2, @@ -1323,7 +1323,7 @@ "mouseTarget": "CardBody3", "properties": [ { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "MoveTo", "delay": 0, "duration": 0.2, @@ -1332,7 +1332,7 @@ "to": "0 0 1 1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Scale", "delay": 0, "duration": 0.2, @@ -1341,7 +1341,7 @@ "to": "1.1 1.1" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "MoveTo", "delay": 0.1, "duration": 0.2, diff --git a/AnimationTest.json b/AnimationTest.json index 9be8b95..7d2c7fd 100644 --- a/AnimationTest.json +++ b/AnimationTest.json @@ -201,7 +201,7 @@ "to": "0.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "delay": 0.2, "duration": 0.5, @@ -209,7 +209,7 @@ "to": "0 0 1 1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Opacity", "delay": 0.2, "duration": 0.5, @@ -287,7 +287,7 @@ "to": "0.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Opacity", "delay": 0, "duration": 1.5, @@ -297,7 +297,7 @@ "to": "1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Opacity", "delay": 1.5, "duration": 1.5, @@ -336,7 +336,7 @@ "to": "0.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "delay": 0, "duration": 1.5, @@ -346,7 +346,7 @@ "to": "0.2 1 0.2 1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "delay": 1.5, "duration": 1.5, @@ -377,7 +377,7 @@ "mouseTarget": "Slide0_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Scale", "delay": 0, "duration": 1.5, @@ -387,7 +387,7 @@ "to": "1.5 1.5" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Scale", "delay": 1.5, "duration": 1.5, @@ -436,7 +436,7 @@ "mouseTarget": "Slide0_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Rotate", "delay": 0, "duration": 1.5, @@ -446,7 +446,7 @@ "to": "0 0 -45" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Rotate", "delay": 1.5, "duration": 1.5, @@ -495,7 +495,7 @@ "mouseTarget": "Slide0_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 1.5, @@ -504,7 +504,7 @@ "to": "0 -0.3" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 1.5, "duration": 1.5, @@ -572,7 +572,7 @@ "to": "0.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "delay": 0.2, "duration": 0.5, @@ -580,7 +580,7 @@ "to": "0 0 1 1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Opacity", "delay": 0.2, "duration": 0.5, @@ -633,7 +633,7 @@ "mouseTarget": "Slide1_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Opacity", "delay": 0, "duration": 1.5, @@ -643,7 +643,7 @@ "to": "1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Opacity", "delay": 1.5, "duration": 1.5, @@ -692,28 +692,28 @@ "mouseTarget": "Slide2_Block2", "properties": [ { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Scale", "delay": 0, "duration": 0.5, "to": "1.2 1.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Rotate", "delay": 0, "duration": 0.5, "to": "0 0 180" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Scale", "delay": 0, "duration": 0.5, "to": "1 1" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Rotate", "delay": 0.51, "duration": 0, @@ -760,14 +760,14 @@ "mouseTarget": "Slide2_Block3", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Scale", "delay": 0, "duration": 0.2, "to": "1.2 1.2" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Scale", "delay": 0.5, "duration": 0.2, @@ -813,14 +813,14 @@ "type": "Animation", "properties": [ { - "condition": "OnDestroy", + "trigger": "OnDestroy", "type": "Translate", "delay": 0, "duration": 0.5, "to": "1 0" }, { - "condition": "OnDestroy", + "trigger": "OnDestroy", "type": "Opacity", "delay": 0, "duration": 0.5, @@ -919,7 +919,7 @@ "mouseTarget": "Slide1_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "delay": 0, "duration": 1.5, @@ -929,7 +929,7 @@ "to": "0.45 0.35 0.65 1.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 1.5, @@ -979,7 +979,7 @@ "mouseTarget": "Slide1_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 0.4, @@ -988,7 +988,7 @@ "to": "0.15 0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0.4, "duration": 0.4, @@ -997,7 +997,7 @@ "to": "0 -0.15" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0.8, "duration": 0.4, @@ -1006,7 +1006,7 @@ "to": "-0.15 0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 1.2, "duration": 0.4, @@ -1055,7 +1055,7 @@ "mouseTarget": "Slide1_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "delay": 0, "duration": 1.5, @@ -1065,7 +1065,7 @@ "to": "0.45 0.35 0.65 1.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 0.75, @@ -1074,7 +1074,7 @@ "to": "0.15 0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 0.75, @@ -1084,7 +1084,7 @@ "to": "0 -0.15" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0.75, "duration": 0.75, @@ -1093,7 +1093,7 @@ "to": "-0.15 0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0.75, "duration": 0.75, @@ -1179,7 +1179,7 @@ "to": "0.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "delay": 0.2, "duration": 0.5, @@ -1187,7 +1187,7 @@ "to": "0 0 1 1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Opacity", "delay": 0.2, "duration": 0.5, @@ -1242,7 +1242,7 @@ "mouseTarget": "Slide2_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1296,7 +1296,7 @@ "mouseTarget": "Slide2_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1351,7 +1351,7 @@ "mouseTarget": "Slide2_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1406,7 +1406,7 @@ "mouseTarget": "Slide2_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1461,7 +1461,7 @@ "mouseTarget": "Slide2_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1516,7 +1516,7 @@ "mouseTarget": "Slide2_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1571,7 +1571,7 @@ "mouseTarget": "Slide2_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1626,7 +1626,7 @@ "mouseTarget": "Slide2_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1715,7 +1715,7 @@ "to": "0.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "delay": 0.2, "duration": 0.5, @@ -1723,7 +1723,7 @@ "to": "0 0 1 1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Opacity", "delay": 0.2, "duration": 0.5, @@ -1779,7 +1779,7 @@ "mouseTarget": "Slide4_Block1", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Rotate", "delay": 0, "duration": 1.5, @@ -1827,7 +1827,7 @@ "mouseTarget": "Slide3_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "delay": 0, "duration": 1.5, @@ -1862,14 +1862,14 @@ "mouseTarget": "Slide4_Block1", "properties": [ { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "MoveTo", "delay": 0, "duration": 0.5, "to": "0 0 1 1" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "MoveTo", "delay": 0, "duration": 0.5, @@ -1919,7 +1919,7 @@ "mouseTarget": "Slide4_Block2", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Rotate", "delay": 0, "duration": 1.5, @@ -1967,7 +1967,7 @@ "mouseTarget": "Slide3_Kill", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "delay": 0, "duration": 1.5, @@ -2002,14 +2002,14 @@ "mouseTarget": "Slide4_Block2", "properties": [ { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "MoveTo", "delay": 0, "duration": 0.5, "to": "0 0 1 1" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "MoveTo", "delay": 0, "duration": 0.5, diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index 8415cae..411c061 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -373,10 +373,10 @@ private void CreateComponents( GameObject go, JSON.Object obj ) foreach(var prop in obj.GetArray("properties")) { var propobj = prop.Obj; - var condition = propobj.GetString("condition", "Generic"); - - if(!anim.ValidCondition(condition)) condition = "Generic"; - anim.properties[condition].Add(new AnimationProperty{ + var trigger = propobj.GetString("trigger", "OnCreate"); + + if(!anim.ValidTrigger(trigger)) trigger = "OnCreate"; + anim.properties[trigger].Add(new AnimationProperty{ duration = propobj.GetFloat("duration", 0f), delay = propobj.GetFloat("delay", 0f), repeat = propobj.GetInt("repeat", 0), @@ -384,7 +384,8 @@ private void CreateComponents( GameObject go, JSON.Object obj ) easing = propobj.GetString("easing", "Linear"), type = propobj.GetString("type", null), from = propobj.GetString("from", ""), - to = propobj.GetString("to", null) + to = propobj.GetString("to", null), + trigger = trigger }); } break; @@ -460,7 +461,7 @@ private void DestroyPanel( string pnlName ) if(animations.Length > 0) { for(var i = 0; i < animations.Length; i++){ - if(animations[i].HasForCondition("OnDestroy")) animations[i].Kill(); + if(animations[i].HasForTrigger("OnDestroy")) animations[i].Kill(); } } else if ( fadeOut ) diff --git a/MultipleAnimationTest.json b/MultipleAnimationTest.json index 97e3512..41a513c 100644 --- a/MultipleAnimationTest.json +++ b/MultipleAnimationTest.json @@ -215,13 +215,13 @@ "to": "0.15 0.15 0.15 0.8" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.15 0.15 0.15 1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.15 0.15 0.15 0.8" @@ -251,13 +251,13 @@ "to": "0.2 0.7 0.35 0.8" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.2 0.7 0.35 1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.2 0.7 0.35 0.8" @@ -298,13 +298,13 @@ "to": "0.15 0.15 0.15 0.8" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.15 0.15 0.15 1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.15 0.15 0.15 0.8" @@ -334,13 +334,13 @@ "to": "0.2 0.7 0.35 0.8" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.2 0.7 0.35 1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.2 0.7 0.35 0.8" @@ -381,13 +381,13 @@ "to": "0.15 0.15 0.15 0.8" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.15 0.15 0.15 1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.15 0.15 0.15 0.8" @@ -417,13 +417,13 @@ "to": "0.2 0.7 0.35 0.8" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.2 0.7 0.35 1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.2 0.7 0.35 0.8" @@ -461,14 +461,14 @@ "to": "0.4 0.4 0.4 1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "duration": 0.3, "easing": "0 1.15 0.6 1", "to": "0.25 0.8 0.35 1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.3, "easing": "0 1.15 0.6 1", @@ -481,14 +481,14 @@ "mouseTarget": "Tab_Button2", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "duration": 0.3, "easing": "0 1.15 0.6 1", "to": "0.25 0.8 0.35 1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.3, "easing": "0 1.15 0.6 1", @@ -501,14 +501,14 @@ "mouseTarget": "Tab_Button3", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "duration": 0.3, "easing": "0 1.15 0.6 1", "to": "0.25 0.8 0.35 1" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.3, "easing": "0 1.15 0.6 1", @@ -542,7 +542,7 @@ "mouseTarget": "TabBar", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -574,7 +574,7 @@ "mouseTarget": "Tab_Button1", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -587,7 +587,7 @@ "mouseTarget": "Tab_Button2", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -600,7 +600,7 @@ "mouseTarget": "Tab_Button3", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -692,7 +692,7 @@ "mouseTarget": "Tab_Button2", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -705,7 +705,7 @@ "mouseTarget": "Tab_Button1", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -718,7 +718,7 @@ "mouseTarget": "Tab_Button3", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -774,13 +774,13 @@ "to": "0.3 0.65 0.35 0.8" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.8" @@ -823,7 +823,7 @@ "mouseTarget": "Tab_Button3", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -836,7 +836,7 @@ "mouseTarget": "Tab_Button1", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -849,7 +849,7 @@ "mouseTarget": "Tab_Button2", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -901,13 +901,13 @@ "to": "0.3 0.65 0.35 0.8" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.8" @@ -948,7 +948,7 @@ "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0, "to": "0 0 1 1" @@ -961,7 +961,7 @@ "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "delay": 0.3, "duration": 0, @@ -1000,7 +1000,7 @@ "mouseTarget": "DropDown1_Button", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveToPX", "easing": "0 1.15 0.6 1", "duration": 0.3, @@ -1013,7 +1013,7 @@ "mouseTarget": "DropDown1_Parent", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveToPX", "easing": "0 0.85 0.6 1", "duration": 0.3, @@ -1049,13 +1049,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -1102,13 +1102,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -1155,13 +1155,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -1208,13 +1208,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -1261,13 +1261,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -1333,13 +1333,13 @@ "to": "0.3 0.65 0.35 0.8" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.8" @@ -1364,7 +1364,7 @@ "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.3, "easing": "0 0.75 0.6 1", @@ -1378,7 +1378,7 @@ "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.3, "easing": "0 0.75 0.6 1", @@ -1416,7 +1416,7 @@ "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.3, "easing": "0 0.75 0.6 1", @@ -1430,7 +1430,7 @@ "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.3, "easing": "0 0.75 0.6 1", @@ -1481,7 +1481,7 @@ "mouseTarget": "DropDown2_ButtonExpand", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveToPX", "easing": "0 1.15 0.6 1", "duration": 0.3, @@ -1494,7 +1494,7 @@ "mouseTarget": "DropDown2_ButtonCollapse", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveToPX", "easing": "0 0.85 0.6 1", "duration": 0.3, @@ -1524,7 +1524,7 @@ [ { "type":"UnityEngine.UI.Text", - "text":"unlike the first dropdown, this dropdown can only be closed by clicking the Collapse button. the Expand/Collapse button illustrates that this also lets us somewhat track state right in the UI, which allows us to create simple conditionals like checkboxes without requiring any AddUI/Destroy calls from the server", + "text":"unlike the first dropdown, this dropdown can only be closed by clicking the Collapse button. the Expand/Collapse button illustrates that this also lets us somewhat track state right in the UI, which allows us to create simple triggerals like checkboxes without requiring any AddUI/Destroy calls from the server", "fontSize":16, "align": "MiddleCenter" } @@ -1572,13 +1572,13 @@ "to": "0.3 0.65 0.35 0.8" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 1.0" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.8" @@ -1619,7 +1619,7 @@ "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0, "to": "0 0 1 1" @@ -1632,7 +1632,7 @@ "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "delay": 0.3, "duration": 0, @@ -1682,7 +1682,7 @@ "mouseTarget": "DropDown3_Button", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveToPX", "easing": "0 1.15 0.6 1", "duration": 0.3, @@ -1695,7 +1695,7 @@ "mouseTarget": "DropDown3_Parent", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveToPX", "easing": "0 0.85 0.6 1", "duration": 0.3, @@ -1731,13 +1731,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -1779,7 +1779,7 @@ "mouseTarget": "DropDown3_Option1", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" @@ -1791,7 +1791,7 @@ "mouseTarget": "DropDown3_Option1Selected", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "1 1 2 1" @@ -1826,13 +1826,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -1874,7 +1874,7 @@ "mouseTarget": "DropDown3_Option2", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" @@ -1886,7 +1886,7 @@ "mouseTarget": "DropDown3_Option2Selected", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "1 1 2 1" @@ -1921,13 +1921,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -1969,7 +1969,7 @@ "mouseTarget": "DropDown3_Option3", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" @@ -1981,7 +1981,7 @@ "mouseTarget": "DropDown3_Option3Selected", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "1 1 2 1" @@ -2056,13 +2056,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -2104,7 +2104,7 @@ "mouseTarget": "DropDown3_Option5", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" @@ -2116,7 +2116,7 @@ "mouseTarget": "DropDown3_Option5Selected", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "1 1 2 1" @@ -2151,13 +2151,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -2199,7 +2199,7 @@ "mouseTarget": "DropDown3_Option6", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" @@ -2211,7 +2211,7 @@ "mouseTarget": "DropDown3_Option6Selected", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "1 1 2 1" @@ -2246,13 +2246,13 @@ "to": "0.3 0.65 0.35 0.1" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.2" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.1" @@ -2294,7 +2294,7 @@ "mouseTarget": "DropDown3_Option7", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" @@ -2306,7 +2306,7 @@ "mouseTarget": "DropDown3_Option7Selected", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "duration": 0.1, "to": "1 1 2 1" @@ -2337,14 +2337,14 @@ "mouseTarget": "ModalButton", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "easing": "0 1.15 0.6 1", "duration": 0, "to": "0.05 0.05 0.05 0.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "easing": "0 1.15 0.6 1", "delay": 0.5, @@ -2353,7 +2353,7 @@ "to": "0.05 0.05 0.05 0.98" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -2366,14 +2366,14 @@ "mouseTarget": "ModalCloseButton", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "easing": "0 1.15 0.6 1", "duration": 0.2, "to": "0.05 0.05 0.05 0.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "delay": 0.2, @@ -2387,14 +2387,14 @@ "mouseTarget": "ModalBackdrop", "properties": [ { - "condition": "OnClick", + "trigger": "OnClick", "type": "Color", "easing": "0 1.15 0.6 1", "duration": 0.2, "to": "0.05 0.05 0.05 0.0" }, { - "condition": "OnClick", + "trigger": "OnClick", "type": "MoveTo", "easing": "0 1.15 0.6 1", "delay": 0.2, @@ -2471,13 +2471,13 @@ "to": "0.3 0.65 0.35 0.4" }, { - "condition": "OnHoverEnter", + "trigger": "OnHoverEnter", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.6" }, { - "condition": "OnHoverExit", + "trigger": "OnHoverExit", "type": "Color", "duration": 0.1, "to": "0.3 0.65 0.35 0.4" From c36996edfdde3201acd307f7979d8d26c06a6bd4 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Sun, 18 Dec 2022 04:55:56 +0100 Subject: [PATCH 15/53] Refactoring Initialization Logic Moved Animation initialization to own function, RPC and AddUI case statement now mostly share the same init code --- CommunityEntity.UI.Animation.cs | 115 +++++++++++++++++--------------- CommunityEntity.UI.cs | 41 ++---------- 2 files changed, 66 insertions(+), 90 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 464c76d..2b6760e 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -338,7 +338,7 @@ public IEnumerator ChangeAlpha(float toOpacity, float duration, string easing){ } // Changes the color of the current canvasRenderer, same Note Applies as with the ChangeAlpha Function, except each channel is multiplied seperately - // type: ABSOLUTE, meaning it cant be affected by other alpha or color changing animations and will get to its goal opacity + // type: ABSOLUTE, meaning it cant be affected by other alpha or color changing animations and will get to its goal opacity & color public IEnumerator ChangeColor(Color toColor, float duration, string easing){ float time = 0f; Color old = anim.cachedGraphic.canvasRenderer.GetColor(); @@ -551,69 +551,78 @@ public float Ease(string type, float input){ } } } + + public Animation ParseAnimation(JSON.Object obj, GameObject go = null){ + // if no gameobject is given attempt to find a name property and find it that way + if(go == null){ + var panel = obj.GetString("name", null); + if (string.IsNullOrEmpty(panel) || !UiDict.TryGetValue(panel, out go)) + return null; + } + + Animation anim = null; + Animation[] animations = go.GetComponents(); + + string mouseTarget = obj.GetString("mouseTarget", ""); + if(animations.Length == 0){ + // do nothing + } else if(!string.IsNullOrEmpty(mouseTarget)){ + anim = animations.FirstOrDefault((animation) => animation.mouseTarget == mouseTarget); + }else{ + anim = animations[0]; + } + + // create a new animation component as no matching component existed + if(anim == null){ + anim = go.AddComponent(); + if(!string.IsNullOrEmpty(mouseTarget)) ScheduleMouseListener(mouseTarget, anim); + } + + foreach(var prop in obj.GetArray("properties")){ + ParseProperty(anim, prop.Obj); + } + return anim; + } + public AnimationProperty ParseProperty(Animation anim, JSON.Object propobj){ + var trigger = propobj.GetString("trigger", "OnCreate"); + + if(!anim.ValidTrigger(trigger)) trigger = "OnCreate"; + var animprop = new AnimationProperty{ + duration = propobj.GetFloat("duration", 0f), + delay = propobj.GetFloat("delay", 0f), + repeat = propobj.GetInt("repeat", 0), + repeatDelay = propobj.GetFloat("repeatDelay", 0f), + easing = propobj.GetString("easing", "Linear"), + type = propobj.GetString("type", null), + from = propobj.GetString("from", null), + to = propobj.GetString("to", null), + trigger = trigger + }; + anim.properties[trigger].Add(animprop); + // if the animation has a cachedGraphic it means StartAnimation has allready been called on it + // manually start the OnCreate Properties in this case + if(anim.cachedGraphic != null && trigger == "OnCreate") anim.StartProperty(animprop); + return animprop; + } + // RPC function to Add Animations to existing objects // accepts the same json object that the CreateComponents function does [RPC_Client] public void AddAnimation( RPCMessage msg ) { string str = msg.read.StringRaw(); - if (string.IsNullOrEmpty(str)) return; - + var json = JSON.Array.Parse( str ); if (json == null) return; - + foreach (var value in json){ - var obj = value.Obj; - var panel = obj.GetString("name", "Overlay"); - - GameObject go; - if (string.IsNullOrEmpty(panel) || !UiDict.TryGetValue(panel, out go)) - return; - - Animation anim = null; - Animation[] animations = go.GetComponents(); - - string mouseTarget = obj.GetString("mouseTarget", ""); - if(animations.Length == 0){ - // do nothing - } else if(!string.IsNullOrEmpty(mouseTarget)){ - // find an existing animation component with the same mouse target, if not create one - anim = animations.FirstOrDefault((animation) => animation.mouseTarget == mouseTarget); - }else{ - anim = animations[0]; - } - - if(anim == null){ - anim = go.AddComponent(); - anim.CacheGraphicComponent(); - if(!string.IsNullOrEmpty(mouseTarget)) ScheduleMouseListener(mouseTarget, anim); - } - - - foreach(var prop in obj.GetArray("properties")) - { - var propobj = prop.Obj; - var trigger = propobj.GetString("trigger", "OnCreate"); - - if(!anim.ValidTrigger(trigger)) trigger = "OnCreate"; - var animprop = new AnimationProperty{ - duration = propobj.GetFloat("duration", 0f), - delay = propobj.GetFloat("delay", 0f), - repeat = propobj.GetInt("repeat", 0), - repeatDelay = propobj.GetFloat("repeatDelay", 0f), - easing = propobj.GetString("easing", "Linear"), - type = propobj.GetString("type", null), - from = propobj.GetString("from", null), - to = propobj.GetString("to", null), - trigger = trigger - }; - anim.properties[trigger].Add(animprop); - - if(trigger == "OnCreate") anim.StartProperty(animprop); - } - break; + Animation anim = ParseAnimation(value.Obj); + // if it returns a valid animation that hasnt allready been started, start it + if(anim == null || anim.cachedGraphic != null) + continue; + anim.StartAnimation(); } ApplyMouseListeners(); } diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index 411c061..323a8b1 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -353,44 +353,11 @@ private void CreateComponents( GameObject go, JSON.Object obj ) } case "Animation": { - Animation anim = null; - Animation[] animations = go.GetComponents(); - string mouseTarget = obj.GetString("mouseTarget", ""); - if(animations.Length == 0){ - // do nothing - } else if(!string.IsNullOrEmpty(mouseTarget)){ - // find an existing animation component with the same mouse target, if not create one - anim = animations.FirstOrDefault((animation) => animation.mouseTarget == mouseTarget); - }else{ - anim = animations[0]; - } - - if(anim == null){ - anim = go.AddComponent(); - if(!string.IsNullOrEmpty(mouseTarget)) ScheduleMouseListener(mouseTarget, anim); - } - - foreach(var prop in obj.GetArray("properties")) - { - var propobj = prop.Obj; - var trigger = propobj.GetString("trigger", "OnCreate"); - - if(!anim.ValidTrigger(trigger)) trigger = "OnCreate"; - anim.properties[trigger].Add(new AnimationProperty{ - duration = propobj.GetFloat("duration", 0f), - delay = propobj.GetFloat("delay", 0f), - repeat = propobj.GetInt("repeat", 0), - repeatDelay = propobj.GetFloat("repeatDelay", 0f), - easing = propobj.GetString("easing", "Linear"), - type = propobj.GetString("type", null), - from = propobj.GetString("from", ""), - to = propobj.GetString("to", null), - trigger = trigger - }); - } + // Moved Setup to its own function in CommunityEntity.UI.Animation.cs + // now shares the code with the AddAnimation RPC function + ParseAnimation(obj, go); break; - } - } + } } private static T ParseEnum(string value, T defaultValue) From bbe0b902dc19713c0c14be4635e693bb41e8708c Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Sun, 25 Dec 2022 23:57:57 +0100 Subject: [PATCH 16/53] Major Refactor & Generalization this change removes alot of redundant code by switching to a dynamic vector & using an action to apply the values instead of having dedicated functions for each action before this, all animations used 1 or more floats as inputs, making use of Vector2, 3 & 4s or Color as needed. because of this they used the same code with minor tweaks causing a bunch of functions that did the same thing slightly differently. with this change all animations use this one system: - the property gets an AnimationValue that holds the from & to values as a Dynamic Vector (a List wrapper with some added functionality) - in the switch statement evaluating the animation's Type, the AnimationValue's apply action & initial value gets set depending on the type - the InterpolateValue Enumerator gets called which receives the AnimationValue, a duration and easing descriptor - this function applies the from value immediately if it exists, then interpolates over the duration & sets a final value at the end - all it needs to apply the value is call the AnimationValue's apply function, which gets set in the type's case not only does this remove the need for 12 similliar functions, it also creates easier extendability as it now only requires adding cases to the switch statement the interpolation logic will allways remain consistent, the DynamicVector class also means that any animations needing 5 or more floats wont need additional code for parsing & Lerping --- CommunityEntity.UI.Animation.cs | 589 ++++++++++++++++---------------- 1 file changed, 288 insertions(+), 301 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 2b6760e..07cf25d 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -47,8 +47,8 @@ public void StartAnimation(){ public void StartByTrigger(string trigger){ if(!ValidTrigger(trigger)) return; - foreach(var prop in properties[trigger]){ - StartProperty(prop); + for(int i = 0; i < properties[trigger].Count; i++){ + StartProperty(properties[trigger][i]); } } @@ -59,8 +59,8 @@ public void StartProperty(AnimationProperty prop){ public void StopByTrigger(string trigger){ if(!ValidTrigger(trigger)) return; - foreach(var prop in properties[trigger]){ - if(prop.routine != null) StopCoroutine(prop.routine); + for(int i = 0; i < properties[trigger].Count; i++){ + if(properties[trigger][i].routine != null) StopCoroutine(properties[trigger][i].routine); } } @@ -154,8 +154,7 @@ public class AnimationProperty : UnityEngine.Object public float repeatDelay = 0f; public string easing = "linear"; public string type; - public string from; - public string to; + public AnimationProperty.AnimationValue animValue; public string trigger; public Animation anim; @@ -167,12 +166,11 @@ public class AnimationProperty : UnityEngine.Object // Launches the animation, keeping track of loops if its set to repeat public IEnumerator Animate() { - if(from == null) from = ""; - if(string.IsNullOrEmpty(to)){ - Debug.LogWarning($"Animation for {anim.gameObject.name} failed to execute - invalid \"to\" value"); + if(animValue == null || animValue.to == null){ + Debug.LogWarning($"Animation of type {type} for {anim.gameObject.name} failed to execute - no to values provided"); anim.RemoveProperty(this); yield break; - } + } // initial delay if(delay > 0f) yield return new WaitForSeconds(delay); @@ -192,340 +190,172 @@ public IEnumerator Animate() } // Parses the from & to values and Launches the individual animation - // adding new animations can be achieved by adding cases to the switch statement + // Adding new animations can be achieved by Adding cases to the switch statement public IEnumerator AnimateProperty() { switch(type){ case "Opacity": { - if(!anim.cachedGraphic) break; - float fromOpacity; - float toOpacity; + // needs a reference to the graphic & atleast 1 value in the to value + if(!anim.cachedGraphic || animValue.to.Count < 1) break; - // we need a valid toOpacity - if(!float.TryParse(to, out toOpacity)) break; - // unlike the toOpacity, a from value is optional. if we omit a from value the crossfade will instead use the current alpha - float.TryParse(from, out fromOpacity); - // disable TCulling if the toOpacity or FromOpacity are Higher than 0f, if the fromOpacity check was ommited this wouldnt trigger if its an animation from > 0 to 0 - if(anim.isHidden && toOpacity > 0f || (!string.IsNullOrEmpty(from) && fromOpacity > 0f)) + // enables the graphic if: + // - the from value is higher than 0 or + // - the graphic is currently hidden but will go above 0 opacity during the animation + if((animValue.from != null && animValue.from.TryGet(0) > 0f) || anim.isHidden && animValue.to.TryGet(0) > 0f) anim.EnableGraphic(0f); - - if(!string.IsNullOrEmpty(from)) anim.cachedGraphic.canvasRenderer.SetAlpha(fromOpacity); + + animValue.initial = new DynamicVector(anim.cachedGraphic.canvasRenderer.GetAlpha()); + animValue.apply = (DynamicVector value) => { + anim.cachedGraphic.canvasRenderer.SetAlpha(value.TryGet(0)); + }; + // calling this wont actually start a tween, but it will stop any running color or alpha tweens, this is vital for stopping any potential fadeIns & Outs (otherwise the the tween and our own Animation will intersect) - anim.cachedGraphic.CrossFadeAlpha(anim.cachedGraphic.canvasRenderer.GetAlpha(), 0f, true); - - if(!anim.isHidden && toOpacity <= 0f) anim.DisableGraphic(duration); - return ChangeAlpha(toOpacity, duration, easing); + anim.cachedGraphic.CrossFadeAlpha(animValue.initial.TryGet(0), 0f, true); + + if(animValue.to.TryGet(0) <= 0f) anim.DisableGraphic(duration); + return InterpolateValue(animValue, duration, easing); } case "Color": { - if(!anim.cachedGraphic) break; - Color fromColor = ColorEx.Parse(from); - Color toColor = ColorEx.Parse(to); - - //dont use the from color if the from value was ommited - bool useFrom = !string.IsNullOrEmpty(from); - if(anim.isHidden && toColor.a > 0f || (useFrom && fromColor.a > 0f)) + // needs a reference to the graphic & atleast 4 values in the to value + if(!anim.cachedGraphic || animValue.to.Count < 4) break; + + // enables the graphic if: + // - the from color's alpha is higher than 0 or + // - the graphic is currently hidden but will go above 0 opacity during the animation + if((animValue.from != null && animValue.from.TryGet(3) > 0f) || anim.isHidden && animValue.to.TryGet(3) > 0f) anim.EnableGraphic(0f); - - if(useFrom) anim.cachedGraphic.canvasRenderer.SetColor(fromColor); - + + animValue.initial = new DynamicVector(anim.cachedGraphic.canvasRenderer.GetColor()); + animValue.apply = (DynamicVector value) => { + anim.cachedGraphic.canvasRenderer.SetColor(value.ToColor()); + }; + // Same as with alpha, stopping any tweens - anim.cachedGraphic.CrossFadeColor(anim.cachedGraphic.canvasRenderer.GetColor(), 0f, true, true); - - if(!anim.isHidden && toColor.a <= 0f) anim.DisableGraphic(duration); - return ChangeColor(toColor, duration, easing); + anim.cachedGraphic.CrossFadeColor(animValue.initial.ToColor(), 0f, true, true); + + if(animValue.to.TryGet(3) <= 0f) anim.DisableGraphic(duration); + return InterpolateValue(animValue, duration, easing); } case "Scale": { - Vector2 fromVec = Vector2Ex.Parse(from); - Vector2 toVec = Vector2Ex.Parse(to); - - //dont use the from Vector if the from value was ommited - bool useFrom = !string.IsNullOrEmpty(from); - - if(useFrom && anim.cachedRect) anim.cachedRect.localScale = new Vector3(fromVec.x, fromVec.y, 1f); - - return Scale(toVec, duration, easing); + // needs a reference to the rectTransform & atleast 2 values in the to value + if(!anim.cachedRect || animValue.to.Count < 2) break; + + if(!anim.cachedRect) break; + + animValue.initial = new DynamicVector(anim.cachedRect.localScale); + animValue.apply = (DynamicVector value) => { + // we convert to a Vector3 even though the DynamicVector only holds 2 floats + // this is fine because the z value will be set to 0f, which isnt used for the scale of rectTransforms + anim.cachedRect.localScale = value.ToVector3(); + }; + return InterpolateValue(animValue, duration, easing); } case "Translate": { - Vector2 toVec = Vector2Ex.Parse(to); - Vector2 fromVec = Vector2Ex.Parse(from); - - if(!string.IsNullOrEmpty(from)) TranslateInstantly(fromVec); - - return Translate(toVec, duration, easing); + // needs a reference to the rectTransform & atleast 2 values in the to value + if(!anim.cachedRect || animValue.to.Count < 2) break; + + animValue.initial = new DynamicVector(); + animValue.last = new DynamicVector(); + animValue.apply = (DynamicVector value) => { + DynamicVector diff = value - animValue.last; + anim.cachedRect.anchorMin += diff.ToVector2(); + anim.cachedRect.anchorMax += diff.ToVector2(); + animValue.last += diff; + }; + return InterpolateValue(animValue, duration, easing, false); } case "TranslatePX": { - Vector2 toVec = Vector2Ex.Parse(to); - Vector2 fromVec = Vector2Ex.Parse(from); - - if(!string.IsNullOrEmpty(from)) TranslatePXInstantly(fromVec); - - return TranslatePX(toVec, duration, easing); + // needs a reference to the rectTransform & atleast 4 values in the to value + if(!anim.cachedRect || animValue.to.Count < 4) break; + + animValue.initial = new DynamicVector(); + animValue.last = new DynamicVector(); + animValue.apply = (DynamicVector value) => { + DynamicVector diff = value - animValue.last; + anim.cachedRect.offsetMin += diff.ToVector2(0); + anim.cachedRect.offsetMax += diff.ToVector2(0); + animValue.last += diff; + }; + return InterpolateValue(animValue, duration, easing, false); } case "Rotate": { - Vector3 fromVec = Vector3Ex.Parse(from); - Vector3 toVec = Vector3Ex.Parse(to); - - //dont use the from Vector if the from value was ommited - bool useFrom = !string.IsNullOrEmpty(from); - - if(useFrom && anim.cachedRect) anim.cachedRect.rotation = Quaternion.Euler(fromVec); - return Rotate(toVec, duration, easing); + // needs a reference to the rectTransform & atleast 3 values in the to value + if(!anim.cachedRect || animValue.to.Count < 3) break; + + animValue.initial = new DynamicVector(anim.cachedRect.rotation.eulerAngles); + animValue.apply = (DynamicVector value) => { + anim.cachedRect.rotation = Quaternion.Euler(value.ToVector3()); + }; + return InterpolateValue(animValue, duration, easing); } case "MoveTo": { - // ColorEx is basically a Vector4 with extra steps - Color toCol = ColorEx.Parse(to); - Vector4 toVec = new Vector4(toCol.r, toCol.g, toCol.b, toCol.a); - - - if(!string.IsNullOrEmpty(from)){ - Color fromCol = ColorEx.Parse(from); - Vector4 fromVec = new Vector4(fromCol.r, fromCol.g, fromCol.b, fromCol.a); - // immediately move to the from vector - MoveToInstantly(fromVec); - } - - return MoveTo(toVec, duration, easing); + if(!anim.cachedRect) break; + + animValue.initial = new DynamicVector(); + animValue.initial.Add(anim.cachedRect.anchorMin); + animValue.initial.Add(anim.cachedRect.anchorMax); + animValue.apply = (DynamicVector value) => { + anim.cachedRect.anchorMin = value.ToVector2(0); + anim.cachedRect.anchorMax = value.ToVector2(2); // skip the first 2 values + }; + return InterpolateValue(animValue, duration, easing); } case "MoveToPX": { - // ColorEx is basically a Vector4 with extra steps - Color toCol = ColorEx.Parse(to); - Vector4 toVec = new Vector4(toCol.r, toCol.g, toCol.b, toCol.a); - - - if(!string.IsNullOrEmpty(from)){ - Color fromCol = ColorEx.Parse(from); - Vector4 fromVec = new Vector4(fromCol.r, fromCol.g, fromCol.b, fromCol.a); - // immediately move to the from vector - MoveToPXInstantly(fromVec); - } - - return MoveToPX(toVec, duration, easing); + if(!anim.cachedRect) break; + + animValue.initial = new DynamicVector(); + animValue.initial.Add(anim.cachedRect.offsetMin); + animValue.initial.Add(anim.cachedRect.offsetMax); + animValue.apply = (DynamicVector value) => { + anim.cachedRect.offsetMin = value.ToVector2(0); + anim.cachedRect.offsetMax = value.ToVector2(2); // skip the first 2 values + }; + return InterpolateValue(animValue, duration, easing); } } - + // remove this animation property of there is no valid case or the selected case fails - Debug.LogWarning($"Animation for {anim.gameObject.name} failed to execute - invalid values for animation of type {type}"); + Debug.LogWarning($"Animation for {anim.gameObject.name} failed to execute - invalid to value [{animValue.to}] for animation of type {type}"); anim.RemoveProperty(this); repeat = 0; // ensure the animation wont repeat // Return an empty enumerator so the coroutine finishes return new System.Object[0].GetEnumerator(); - } - - // Changes the alpha of the current canvasRenderer - // NOTE: this uses the canvasRenderer's SetAlpha Property which might cause some unexpected behaviour - // this is because it acts as a multiplier multiplying the graphic's color with the canvasRenderer's Alpha - // if we have an image with a color of 0.5 0.5 0.5 0.5, the opacity wont go above 0.5 even if we try to change it to 1 with an animation - // when changing this to set the graphic's color directly it resulted in terrible performance - // type: ABSOLUTE, meaning it cant be affected by other alpha or color changing animations and will get to its goal opacity - public IEnumerator ChangeAlpha(float toOpacity, float duration, string easing){ - float time = 0f; - float old = anim.cachedGraphic.canvasRenderer.GetAlpha(); - while(time < duration){ - float opacity = Mathf.LerpUnclamped(old, toOpacity, Ease(easing, time / duration)); - anim.cachedGraphic.canvasRenderer.SetAlpha(opacity); - time += Time.deltaTime; - yield return null; - } - anim.cachedGraphic.canvasRenderer.SetAlpha(toOpacity); - } - - // Changes the color of the current canvasRenderer, same Note Applies as with the ChangeAlpha Function, except each channel is multiplied seperately - // type: ABSOLUTE, meaning it cant be affected by other alpha or color changing animations and will get to its goal opacity & color - public IEnumerator ChangeColor(Color toColor, float duration, string easing){ - float time = 0f; - Color old = anim.cachedGraphic.canvasRenderer.GetColor(); - while(time < duration){ - Color col = Color.LerpUnclamped(old, toColor, Ease(easing, time / duration)); - anim.cachedGraphic.canvasRenderer.SetColor(col); - time += Time.deltaTime; - yield return null; - } - anim.cachedGraphic.canvasRenderer.SetColor(toColor); - } - - // type: ABSOLUTE, meaning it cant be affected by other Scale animations and will reach its target scale - public IEnumerator Scale(Vector2 scale, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Vector2 old = new Vector2(rt.localScale.x, rt.localScale.y); - Vector2 goal = new Vector2(scale.x, scale.y); - Vector2 current; - while(time < duration){ - current = Vector2.LerpUnclamped(old, goal, Ease(easing, time / duration)); - rt.localScale = new Vector3(current.x, current.y, 0f); - - time += Time.deltaTime; - yield return null; - } - rt.localScale = new Vector3(scale.x, scale.y, 0f); - } - - // type: ABSOLUTE, meaning it cant be affected by other Rotation animations and will reach its target scale - // TIP: since we are using vector3s, rotating more than 180deg requires 2 (probably 3) seperate animations - public IEnumerator Rotate(Vector3 rotation, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Quaternion old = rt.rotation; - Quaternion goal = Quaternion.Euler(rotation); - while(time < duration){ - rt.rotation = Quaternion.LerpUnclamped(old, goal, Ease(easing, time / duration)); - - time += Time.deltaTime; - yield return null; - } - rt.rotation = goal; - } - - // type: RELATIVE, meaning other Translate and MoveTo Animations can affect the destination - public IEnumerator Translate(Vector2 to, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); - Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); - Vector4 last = old; - Vector4 current; - while(time < duration){ - current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); - Vector4 diff = current - last; - rt.anchorMin += new Vector2(diff.x, diff.y); - rt.anchorMax += new Vector2(diff.z, diff.w); - - last = current; - time += Time.deltaTime; - yield return null; - } - current = goal - last; - rt.anchorMin += new Vector2(current.x, current.y); - rt.anchorMax += new Vector2(current.z, current.w); - } - // Because Translate with duration = 0 wouldnt work unless it was returned to the coroutine - public void TranslateInstantly(Vector2 to){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) return; - Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); - Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); - Vector4 current = goal - old; - rt.anchorMin += new Vector2(current.x, current.y); - rt.anchorMax += new Vector2(current.z, current.w); - } - - // type: RELATIVE, meaning other TranslatePX and MoveToPX Animations can affect the destination - // NOTE: {Type} and {Type}PX Animations are independent of eachother - public IEnumerator TranslatePX(Vector2 to, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); - Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); - Vector4 last = old; - Vector4 current; - while(time < duration){ - current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); - Vector4 diff = current - last; - rt.offsetMin += new Vector2(diff.x, diff.y); - rt.offsetMax += new Vector2(diff.z, diff.w); - - last = current; - time += Time.deltaTime; - yield return null; - } - current = goal - last; - rt.offsetMin += new Vector2(current.x, current.y); - rt.offsetMax += new Vector2(current.z, current.w); - } - // Because TranslatePX with duration = 0 wouldnt work unless it was returned to the coroutine - public void TranslatePXInstantly(Vector2 to){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) return; - Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); - Vector4 goal = new Vector4(old.x + to.x, old.y + to.y, old.z + to.x, old.w + to.y); - Vector4 current = goal - old; - rt.offsetMin += new Vector2(current.x, current.y); - rt.offsetMax += new Vector2(current.z, current.w); - } - - // type: RELATIVE, meaning other Translate and MoveTo Animations may cause this to not arrive at its destination - // NOTE: MoveTo may seem like it can achieve the same effect as Scale and Translate - // but Translate is an easy way to do relative movement, while using a Scale animation has a different effect from changing anchor values - public IEnumerator MoveTo(Vector4 to, float duration, string easing){ + } + + // Interpolats an AnimationValue over the duration with the easing specified + // the absolute arguement specifies if the animation should be handled as a relative animation or an absolute animation + // absolute = false: the objects initial value gets used as a 0 point, with the from and to values being relative to the initial value + // absolute = true: the object's initial value does not get factored in and the from and to values are seen as absolute + public IEnumerator InterpolateValue(AnimationValue value, float duration, string easing, bool absolute = true){ float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); - Vector4 goal = to; - Vector4 last = old; - Vector4 current; - while(time < duration){ - current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); - Vector4 diff = current - last; - rt.anchorMin += new Vector2(diff.x, diff.y); - rt.anchorMax += new Vector2(diff.z, diff.w); - - last = current; - time += Time.deltaTime; - yield return null; + DynamicVector current; + DynamicVector start = value.from == null ? value.initial : (absolute ? value.from : value.initial + value.from); + + // Immediately apply the start value if present + if(value.from != null){ + value.apply(start); + value.initial = start; } - current = goal - last; - rt.anchorMin += new Vector2(current.x, current.y); - rt.anchorMax += new Vector2(current.z, current.w); - } - // Because MoveTo with duration = 0 wouldnt work unless it was returned to the coroutine - public void MoveToInstantly(Vector4 to){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) return; - Vector4 old = new Vector4(rt.anchorMin.x, rt.anchorMin.y, rt.anchorMax.x, rt.anchorMax.y); - Vector4 current = to - old; - rt.anchorMin += new Vector2(current.x, current.y); - rt.anchorMax += new Vector2(current.z, current.w); - } - - // type: RELATIVE, meaning other TranslatePX and MoveToPX Animations may cause this to not arrive at its destination - public IEnumerator MoveToPX(Vector4 to, float duration, string easing){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) yield break; - Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); - Vector4 goal = to; - Vector4 last = old; - Vector4 current; + DynamicVector end = (absolute ? value.to : value.initial + value.to); + while(time < duration){ - current = Vector4.LerpUnclamped(old, goal, Ease(easing, time / duration)); - Vector4 diff = current - last; - rt.offsetMin += new Vector2(diff.x, diff.y); - rt.offsetMax += new Vector2(diff.z, diff.w); - - last = current; + current = DynamicVector.LerpUnclamped(start, end, Ease(easing, time / duration)); + value.apply(current); time += Time.deltaTime; yield return null; } - current = goal - last; - rt.offsetMin += new Vector2(current.x, current.y); - rt.offsetMax += new Vector2(current.z, current.w); - } - // Because MoveToPX with duration = 0 wouldnt work unless it was returned to the coroutine - public void MoveToPXInstantly(Vector4 to){ - float time = 0f; - var rt = anim.cachedRect; - if(!rt) return; - Vector4 old = new Vector4(rt.offsetMin.x, rt.offsetMin.y, rt.offsetMax.x, rt.offsetMax.y); - Vector4 current = to - old; - rt.offsetMin += new Vector2(current.x, current.y); - rt.offsetMax += new Vector2(current.z, current.w); + value.apply(end); } + + // manipulates a the input based on a preset easing function or a custom Bezier curve // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve @@ -550,6 +380,162 @@ public float Ease(string type, float input){ } } } + + // Generalizes the values for an AnimationProperty + public class AnimationValue { + // gets set just before InterpolateValue is called + public DynamicVector initial; + // used for relative animations + public DynamicVector last; + // the from value can be optional + public DynamicVector from; + public DynamicVector to; + // gets called during interpolation with the arguement being the current value. + public Action apply; + + public AnimationValue(string sourceTo, string sourceFrom = null){ + this.from = ParseFromString(sourceFrom); + this.to = ParseFromString(sourceTo); + } + + public DynamicVector ParseFromString(string source){ + if(string.IsNullOrEmpty(source)) return null; + var split = source.Split(' '); + if(split.Length == 0) return null; + var values = new DynamicVector(); + for(int i = 0; i < split.Length; i++){ + float temp; + float.TryParse(split[i], out temp); + values.Add(temp); + } + return values; + } + } + + // Wraps a List of floats, Adding overloads for easily Adding and extracting Vector 2/3/4s & Colors + public class DynamicVector : List { + // using a single static instance because lerp results should get immediately applied to the property when ToVector/Color is called + private static DynamicVector lerpTemp = new DynamicVector(); + + public DynamicVector(){} + + public DynamicVector(Vector4 vec){ + this.Add(vec); + } + public DynamicVector(Color col){ + this.Add(col); + } + public DynamicVector(Vector3 vec){ + this.Add(vec); + } + public DynamicVector(Vector2 vec){ + this.Add(vec); + } + public DynamicVector(float num){ + this.Add(num); + } + + public void Add(Color col){ + base.Add(col.r); + base.Add(col.g); + base.Add(col.b); + base.Add(col.a); + } + + public void Add(Vector4 vec){ + base.Add(vec.x); + base.Add(vec.y); + base.Add(vec.z); + base.Add(vec.w); + } + + public void Add(Vector3 vec){ + base.Add(vec.x); + base.Add(vec.y); + base.Add(vec.z); + } + + public void Add(Vector2 vec){ + base.Add(vec.x); + base.Add(vec.y); + } + // the ToVectorX & ToColor Functions have an optional offset arguement that shifts the starting point of the list when turning it into the vector + public Vector4 ToVector4(int offset = 0){ + return new Vector4( + TryGet(offset), + TryGet(offset + 1), + TryGet(offset + 2), + TryGet(offset + 3) + ); + } + public Color ToColor(int offset = 0){ + return new Color( + TryGet(offset), + TryGet(offset + 1), + TryGet(offset + 2), + TryGet(offset + 3) + ); + } + public Vector3 ToVector3(int offset = 0){ + return new Vector3( + TryGet(offset), + TryGet(offset + 1), + TryGet(offset + 2) + ); + } + public Vector2 ToVector2(int offset = 0){ + return new Vector2( + TryGet(offset), + TryGet(offset + 1) + ); + } + public float TryGet(int index, float defaultValue = 0f){ + if(index < 0 || index >= this.Count) + return defaultValue; + return this[index]; + } + + public static DynamicVector Lerp(DynamicVector from, DynamicVector to, float t){ + t = Mathf.Clamp01(t); + return LerpUnclamped(from, to, t); + } + + public static DynamicVector LerpUnclamped(DynamicVector from, DynamicVector to, float t){ + lerpTemp.Clear(); + int HigherCount = (from.Count > to.Count ? from.Count : to.Count); + for(int i = 0; i < HigherCount; i++){ + lerpTemp.Add(from.TryGet(i) + (to.TryGet(i) - from.TryGet(i)) * t); + } + return lerpTemp; + } + + public static DynamicVector operator +(DynamicVector lhs, DynamicVector rhs){ + DynamicVector result = new DynamicVector(); + int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); + for(int i = 0; i < HigherCount; i++){ + result.Add(lhs.TryGet(i) + rhs.TryGet(i)); + } + return result; + } + + public static DynamicVector operator -(DynamicVector lhs, DynamicVector rhs){ + DynamicVector result = new DynamicVector(); + int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); + for(int i = 0; i < HigherCount; i++){ + result.Add(lhs.TryGet(i) - rhs.TryGet(i)); + } + return result; + } + + public override string ToString(){ + var sb = new StringBuilder(32); + for(int i = 0; i < this.Count; i++){ + sb.Append(this.TryGet(i)); + sb.Append(' '); + } + return sb.ToString(); + } + } } public Animation ParseAnimation(JSON.Object obj, GameObject go = null){ @@ -588,6 +574,8 @@ public AnimationProperty ParseProperty(Animation anim, JSON.Object propobj){ var trigger = propobj.GetString("trigger", "OnCreate"); if(!anim.ValidTrigger(trigger)) trigger = "OnCreate"; + string from = propobj.GetString("from", null); + string to = propobj.GetString("to", null); var animprop = new AnimationProperty{ duration = propobj.GetFloat("duration", 0f), delay = propobj.GetFloat("delay", 0f), @@ -595,8 +583,7 @@ public AnimationProperty ParseProperty(Animation anim, JSON.Object propobj){ repeatDelay = propobj.GetFloat("repeatDelay", 0f), easing = propobj.GetString("easing", "Linear"), type = propobj.GetString("type", null), - from = propobj.GetString("from", null), - to = propobj.GetString("to", null), + animValue = new AnimationProperty.AnimationValue(to, from), trigger = trigger }; anim.properties[trigger].Add(animprop); From d2f5bbf78bdacb37558a04ca73d20298d642a2f1 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 26 Dec 2022 17:04:51 +0100 Subject: [PATCH 17/53] Change to Structs (thanks @WheteThunger) Changing the DynamicVector & AnimationProperty to be structs instead of objects part of this came about thanks to a conversation i had with WhiteThunder, so he deserves a shoutout Fixed MoveTo & MoveToPX issues with the last commit the MoveTo & MoveToPX had a faulty apply function that was applying the lerped value directly, instead of using their difference fixed mssing using System.Text for the StringBuilder --- CommunityEntity.UI.Animation.cs | 324 ++++++++++++++++++-------------- 1 file changed, 183 insertions(+), 141 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 07cf25d..81854c2 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -4,6 +4,7 @@ using System.Collections; using System.Collections.Generic; using System.Linq; +using System.Text; using Facepunch.Extend; using System.IO; @@ -146,35 +147,39 @@ public void RemoveProperty(AnimationProperty property){ } } - public class AnimationProperty : UnityEngine.Object + public struct AnimationProperty { - public float duration = 0f; - public float delay = 0f; - public int repeat = 0; - public float repeatDelay = 0f; - public string easing = "linear"; + public float duration; + public float delay; + public int repeat; + public float repeatDelay; + public string easing; public string type; - public AnimationProperty.AnimationValue animValue; + public AnimationProperty.AnimationValue animValue; public string trigger; - + + public AnimationProperty(string easing = "linear") : this() { + easing = easing; + } + public Animation anim; - + public Coroutine routine; - - public int completedRounds = 0; - + + public int completedRounds; + // Launches the animation, keeping track of loops if its set to repeat public IEnumerator Animate() { - if(animValue == null || animValue.to == null){ - Debug.LogWarning($"Animation of type {type} for {anim.gameObject.name} failed to execute - no to values provided"); + if(animValue == null || animValue.to.Count == 0){ + Debug.LogWarning($"Animation of type {type} for {anim.gameObject.name} failed to execute - no from/to values provided"); anim.RemoveProperty(this); yield break; - } - + } + // initial delay if(delay > 0f) yield return new WaitForSeconds(delay); - + do { yield return AnimateProperty(); @@ -183,36 +188,38 @@ public IEnumerator Animate() else yield return null; } while(repeat < 0 || (repeat > 0 && completedRounds <= repeat)); - + // this animation wont get triggered again, so remove it if(trigger == "OnCreate") anim.RemoveProperty(this); } - + // Parses the from & to values and Launches the individual animation // Adding new animations can be achieved by Adding cases to the switch statement public IEnumerator AnimateProperty() { + // for use in lambdas, would otherwise trigger error CS1673 + var prop = this; switch(type){ case "Opacity": { // needs a reference to the graphic & atleast 1 value in the to value if(!anim.cachedGraphic || animValue.to.Count < 1) break; - + // enables the graphic if: - // - the from value is higher than 0 or + // - the from value is higher than 0 or // - the graphic is currently hidden but will go above 0 opacity during the animation - if((animValue.from != null && animValue.from.TryGet(0) > 0f) || anim.isHidden && animValue.to.TryGet(0) > 0f) + if((animValue.from.Count != 0 && animValue.from.TryGet(0) > 0f) || anim.isHidden && animValue.to.TryGet(0) > 0f) anim.EnableGraphic(0f); - + animValue.initial = new DynamicVector(anim.cachedGraphic.canvasRenderer.GetAlpha()); animValue.apply = (DynamicVector value) => { - anim.cachedGraphic.canvasRenderer.SetAlpha(value.TryGet(0)); + prop.anim.cachedGraphic.canvasRenderer.SetAlpha(value.TryGet(0)); }; - + // calling this wont actually start a tween, but it will stop any running color or alpha tweens, this is vital for stopping any potential fadeIns & Outs (otherwise the the tween and our own Animation will intersect) anim.cachedGraphic.CrossFadeAlpha(animValue.initial.TryGet(0), 0f, true); - + if(animValue.to.TryGet(0) <= 0f) anim.DisableGraphic(duration); return InterpolateValue(animValue, duration, easing); } @@ -220,21 +227,21 @@ public IEnumerator AnimateProperty() { // needs a reference to the graphic & atleast 4 values in the to value if(!anim.cachedGraphic || animValue.to.Count < 4) break; - + // enables the graphic if: - // - the from color's alpha is higher than 0 or + // - the from color's alpha is higher than 0 or // - the graphic is currently hidden but will go above 0 opacity during the animation - if((animValue.from != null && animValue.from.TryGet(3) > 0f) || anim.isHidden && animValue.to.TryGet(3) > 0f) + if((animValue.from.Count != 0 && animValue.from.TryGet(3) > 0f) || anim.isHidden && animValue.to.TryGet(3) > 0f) anim.EnableGraphic(0f); - + animValue.initial = new DynamicVector(anim.cachedGraphic.canvasRenderer.GetColor()); animValue.apply = (DynamicVector value) => { - anim.cachedGraphic.canvasRenderer.SetColor(value.ToColor()); + prop.anim.cachedGraphic.canvasRenderer.SetColor(value.ToColor()); }; - + // Same as with alpha, stopping any tweens anim.cachedGraphic.CrossFadeColor(animValue.initial.ToColor(), 0f, true, true); - + if(animValue.to.TryGet(3) <= 0f) anim.DisableGraphic(duration); return InterpolateValue(animValue, duration, easing); } @@ -242,14 +249,14 @@ public IEnumerator AnimateProperty() { // needs a reference to the rectTransform & atleast 2 values in the to value if(!anim.cachedRect || animValue.to.Count < 2) break; - + if(!anim.cachedRect) break; - + animValue.initial = new DynamicVector(anim.cachedRect.localScale); animValue.apply = (DynamicVector value) => { // we convert to a Vector3 even though the DynamicVector only holds 2 floats // this is fine because the z value will be set to 0f, which isnt used for the scale of rectTransforms - anim.cachedRect.localScale = value.ToVector3(); + prop.anim.cachedRect.localScale = value.ToVector3(); }; return InterpolateValue(animValue, duration, easing); } @@ -257,14 +264,14 @@ public IEnumerator AnimateProperty() { // needs a reference to the rectTransform & atleast 2 values in the to value if(!anim.cachedRect || animValue.to.Count < 2) break; - + animValue.initial = new DynamicVector(); animValue.last = new DynamicVector(); animValue.apply = (DynamicVector value) => { - DynamicVector diff = value - animValue.last; - anim.cachedRect.anchorMin += diff.ToVector2(); - anim.cachedRect.anchorMax += diff.ToVector2(); - animValue.last += diff; + DynamicVector diff = value - prop.animValue.last; + prop.anim.cachedRect.anchorMin += diff.ToVector2(); + prop.anim.cachedRect.anchorMax += diff.ToVector2(); + prop.animValue.last += diff; }; return InterpolateValue(animValue, duration, easing, false); } @@ -272,14 +279,14 @@ public IEnumerator AnimateProperty() { // needs a reference to the rectTransform & atleast 4 values in the to value if(!anim.cachedRect || animValue.to.Count < 4) break; - + animValue.initial = new DynamicVector(); animValue.last = new DynamicVector(); animValue.apply = (DynamicVector value) => { - DynamicVector diff = value - animValue.last; - anim.cachedRect.offsetMin += diff.ToVector2(0); - anim.cachedRect.offsetMax += diff.ToVector2(0); - animValue.last += diff; + DynamicVector diff = value - prop.animValue.last; + prop.anim.cachedRect.offsetMin += diff.ToVector2(0); + prop.anim.cachedRect.offsetMax += diff.ToVector2(0); + prop.animValue.last += diff; }; return InterpolateValue(animValue, duration, easing, false); } @@ -287,77 +294,54 @@ public IEnumerator AnimateProperty() { // needs a reference to the rectTransform & atleast 3 values in the to value if(!anim.cachedRect || animValue.to.Count < 3) break; - + animValue.initial = new DynamicVector(anim.cachedRect.rotation.eulerAngles); animValue.apply = (DynamicVector value) => { - anim.cachedRect.rotation = Quaternion.Euler(value.ToVector3()); + prop.anim.cachedRect.rotation = Quaternion.Euler(value.ToVector3()); }; - return InterpolateValue(animValue, duration, easing); + return InterpolateValue(animValue, duration, easing, true); } case "MoveTo": { if(!anim.cachedRect) break; - - animValue.initial = new DynamicVector(); - animValue.initial.Add(anim.cachedRect.anchorMin); + + animValue.initial = new DynamicVector(anim.cachedRect.anchorMin); animValue.initial.Add(anim.cachedRect.anchorMax); + animValue.last = animValue.initial + new DynamicVector(); animValue.apply = (DynamicVector value) => { - anim.cachedRect.anchorMin = value.ToVector2(0); - anim.cachedRect.anchorMax = value.ToVector2(2); // skip the first 2 values + DynamicVector diff = value - prop.animValue.last; + prop.anim.cachedRect.anchorMin += diff.ToVector2(0); + prop.anim.cachedRect.anchorMax += diff.ToVector2(2); // skip the first 2 values + prop.animValue.last += diff; }; return InterpolateValue(animValue, duration, easing); } case "MoveToPX": { if(!anim.cachedRect) break; - - animValue.initial = new DynamicVector(); - animValue.initial.Add(anim.cachedRect.offsetMin); + + animValue.initial = new DynamicVector(anim.cachedRect.offsetMin); animValue.initial.Add(anim.cachedRect.offsetMax); + animValue.last = animValue.initial + new DynamicVector(); animValue.apply = (DynamicVector value) => { - anim.cachedRect.offsetMin = value.ToVector2(0); - anim.cachedRect.offsetMax = value.ToVector2(2); // skip the first 2 values + DynamicVector diff = value - prop.animValue.last; + prop.anim.cachedRect.offsetMin += diff.ToVector2(0); + prop.anim.cachedRect.offsetMax += diff.ToVector2(2); // skip the first 2 values + prop.animValue.last += diff; }; return InterpolateValue(animValue, duration, easing); } } - + // remove this animation property of there is no valid case or the selected case fails Debug.LogWarning($"Animation for {anim.gameObject.name} failed to execute - invalid to value [{animValue.to}] for animation of type {type}"); anim.RemoveProperty(this); repeat = 0; // ensure the animation wont repeat // Return an empty enumerator so the coroutine finishes return new System.Object[0].GetEnumerator(); - } - - // Interpolats an AnimationValue over the duration with the easing specified - // the absolute arguement specifies if the animation should be handled as a relative animation or an absolute animation - // absolute = false: the objects initial value gets used as a 0 point, with the from and to values being relative to the initial value - // absolute = true: the object's initial value does not get factored in and the from and to values are seen as absolute - public IEnumerator InterpolateValue(AnimationValue value, float duration, string easing, bool absolute = true){ - float time = 0f; - DynamicVector current; - DynamicVector start = value.from == null ? value.initial : (absolute ? value.from : value.initial + value.from); - - // Immediately apply the start value if present - if(value.from != null){ - value.apply(start); - value.initial = start; - } - DynamicVector end = (absolute ? value.to : value.initial + value.to); - - while(time < duration){ - current = DynamicVector.LerpUnclamped(start, end, Ease(easing, time / duration)); - value.apply(current); - time += Time.deltaTime; - yield return null; - } - value.apply(end); } - - - // manipulates a the input based on a preset easing function or a custom Bezier curve + // manipulates the input based on a preset easing function or a custom Bezier curve // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve // NOTE: the return value is unclamped as this allowes bezier curves with under- and overshoot to work public float Ease(string type, float input){ @@ -380,7 +364,32 @@ public float Ease(string type, float input){ } } } - + + // Interpolats an AnimationValue over the duration with the easing specified + // the absolute arguement specifies if the animation should be handled as a relative animation or an absolute animation + // absolute = false: the objects initial value gets used as a 0 point, with the from and to values being relative to the initial value + // absolute = true: the object's initial value does not get factored in and the from and to values are seen as absolute + public IEnumerator InterpolateValue(AnimationValue value, float duration, string easing, bool absolute = true){ + float time = 0f; + DynamicVector current; + DynamicVector start = value.from.Count == 0 ? value.initial : (absolute ? value.from : value.initial + value.from); + + // Immediately apply the start value if present + if(value.from.Count != 0){ + value.apply(start); + value.initial = start; + } + DynamicVector end = (absolute ? value.to : value.initial + value.to); + + while(time < duration){ + current = DynamicVector.LerpUnclamped(start, end, Ease(easing, time / duration)); + value.apply(current); + time += Time.deltaTime; + yield return null; + } + value.apply(end); + } + // Generalizes the values for an AnimationProperty public class AnimationValue { // gets set just before InterpolateValue is called @@ -392,17 +401,16 @@ public class AnimationValue { public DynamicVector to; // gets called during interpolation with the arguement being the current value. public Action apply; - + public AnimationValue(string sourceTo, string sourceFrom = null){ this.from = ParseFromString(sourceFrom); this.to = ParseFromString(sourceTo); } - public DynamicVector ParseFromString(string source){ - if(string.IsNullOrEmpty(source)) return null; - var split = source.Split(' '); - if(split.Length == 0) return null; var values = new DynamicVector(); + if(string.IsNullOrEmpty(source)) return values; + var split = source.Split(' '); + if(split.Length == 0) return values; for(int i = 0; i < split.Length; i++){ float temp; float.TryParse(split[i], out temp); @@ -411,53 +419,79 @@ public DynamicVector ParseFromString(string source){ return values; } } - - // Wraps a List of floats, Adding overloads for easily Adding and extracting Vector 2/3/4s & Colors - public class DynamicVector : List { - // using a single static instance because lerp results should get immediately applied to the property when ToVector/Color is called - private static DynamicVector lerpTemp = new DynamicVector(); - - public DynamicVector(){} - - public DynamicVector(Vector4 vec){ - this.Add(vec); - } - public DynamicVector(Color col){ - this.Add(col); - } - public DynamicVector(Vector3 vec){ - this.Add(vec); - } - public DynamicVector(Vector2 vec){ - this.Add(vec); - } - public DynamicVector(float num){ - this.Add(num); + + // a struct that mimics Vector2/3/4/n, previously used a list to hold values, but lists dont work as structs + // turning this into a struct makes alot of sense, thanks for the insights @WhiteThunder + public struct DynamicVector { + + // need it to hold more than 4? add a _valueN and adjust the indexer & Clear method + private float _value0; + private float _value1; + private float _value2; + private float _value3; + + public int Count; + + public float this[int i]{ + get { + switch(i){ + case 0: return _value0; break; + case 1: return _value1; break; + case 2: return _value2; break; + case 3: return _value3; break; + default: throw new IndexOutOfRangeException(); + } + } + set { + switch(i){ + case 0: + _value0 = value; + break; + case 1: + _value1 = value; + break; + case 2: + _value2 = value; + break; + case 3: + _value3 = value; + break; + default: throw new IndexOutOfRangeException(); + } + } } - + + public DynamicVector(Vector4 vec) : this() => Add(vec); + public DynamicVector(Color col) : this() => Add(col); + public DynamicVector(Vector3 vec) : this() => Add(vec); + public DynamicVector(Vector2 vec) : this() => Add(vec); + public DynamicVector(float num) : this() => Add(num); + + public void Add(float num) => this[Count++] = num; + public void Add(Color col){ - base.Add(col.r); - base.Add(col.g); - base.Add(col.b); - base.Add(col.a); + Add(col.r); + Add(col.g); + Add(col.b); + Add(col.a); } - + public void Add(Vector4 vec){ - base.Add(vec.x); - base.Add(vec.y); - base.Add(vec.z); - base.Add(vec.w); + Add(vec.x); + Add(vec.y); + Add(vec.z); + Add(vec.w); } - + public void Add(Vector3 vec){ - base.Add(vec.x); - base.Add(vec.y); - base.Add(vec.z); + Add(vec.x); + Add(vec.y); + Add(vec.z); } - + public void Add(Vector2 vec){ - base.Add(vec.x); - base.Add(vec.y); + Add(vec.x); + Add(vec.y); } // the ToVectorX & ToColor Functions have an optional offset arguement that shifts the starting point of the list when turning it into the vector public Vector4 ToVector4(int offset = 0){ @@ -494,21 +528,29 @@ public float TryGet(int index, float defaultValue = 0f){ return defaultValue; return this[index]; } - + + public void Clear(){ + _value0 = 0f; + _value1 = 0f; + _value2 = 0f; + _value3 = 0f; + Count = 0; + } + public static DynamicVector Lerp(DynamicVector from, DynamicVector to, float t){ t = Mathf.Clamp01(t); return LerpUnclamped(from, to, t); } - + public static DynamicVector LerpUnclamped(DynamicVector from, DynamicVector to, float t){ - lerpTemp.Clear(); + DynamicVector result = new DynamicVector(); int HigherCount = (from.Count > to.Count ? from.Count : to.Count); for(int i = 0; i < HigherCount; i++){ - lerpTemp.Add(from.TryGet(i) + (to.TryGet(i) - from.TryGet(i)) * t); + result.Add(from.TryGet(i) + (to.TryGet(i) - from.TryGet(i)) * t); } - return lerpTemp; + return result; } - + public static DynamicVector operator +(DynamicVector lhs, DynamicVector rhs){ DynamicVector result = new DynamicVector(); int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); @@ -517,7 +559,7 @@ public static DynamicVector LerpUnclamped(DynamicVector from, DynamicVector to, } return result; } - + public static DynamicVector operator -(DynamicVector lhs, DynamicVector rhs){ DynamicVector result = new DynamicVector(); int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); @@ -526,7 +568,7 @@ public static DynamicVector LerpUnclamped(DynamicVector from, DynamicVector to, } return result; } - + public override string ToString(){ var sb = new StringBuilder(32); for(int i = 0; i < this.Count; i++){ From cf46eb6fbcc913e46668a9df3194529362d956b9 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Thu, 5 Jan 2023 10:14:24 +0100 Subject: [PATCH 18/53] move Examples to folder move example Files to Folder --- .../AnimationTest.json | 0 .../MultipleAnimationTest.json | 0 .../UsecaseExample.json | 2768 ++++++++--------- 3 files changed, 1384 insertions(+), 1384 deletions(-) rename AnimationTest.json => examples/AnimationTest.json (100%) rename MultipleAnimationTest.json => examples/MultipleAnimationTest.json (100%) rename AnimationExample.json => examples/UsecaseExample.json (96%) diff --git a/AnimationTest.json b/examples/AnimationTest.json similarity index 100% rename from AnimationTest.json rename to examples/AnimationTest.json diff --git a/MultipleAnimationTest.json b/examples/MultipleAnimationTest.json similarity index 100% rename from MultipleAnimationTest.json rename to examples/MultipleAnimationTest.json diff --git a/AnimationExample.json b/examples/UsecaseExample.json similarity index 96% rename from AnimationExample.json rename to examples/UsecaseExample.json index 34796d0..f2e0028 100644 --- a/AnimationExample.json +++ b/examples/UsecaseExample.json @@ -1,1384 +1,1384 @@ -[ - { - "name": "UI", - "parent":"Overlay", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 1.0", - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"NeedsCursor" - } - ] - }, - { - "name": "Background", - "parent":"UI", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Image1", - "parent":"Background", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "url": "https://images.wallpapersden.com/image/download/futuristic-dark-hexagon-10k_bG5oa22UmZqaraWkpJRmZWdpZa1qbGtl.jpg", - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"Animation", - "properties": [ - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0", - "duration": 0, - "delay": 0 - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.7", - "duration": 2.5, - "delay": 0.5, - "repeat": -1, - "repeatDelay": 5.0, - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.0", - "duration": 2.5, - "delay": 4.5, - "repeat": -1, - "repeatDelay": 5.0, - }, - { - "trigger" : "OnCreate", - "type": "Scale", - "to": "1.45 1.45", - "duration": 0.05, - "delay": 0.0, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.2 -0.1", - "duration": 0.0, - "delay": 0.1, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.4 -0.2", - "duration": 0, - "delay": 7.0, - "repeat": -1, - "repeatDelay": 7.5, - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "0.4 0.2", - "duration": 7.0, - "delay": 0.5, - "repeat": -1, - "repeatDelay": 0.5, - }, - { - "trigger" : "OnCreate", - "type": "Rotate", - "to": "0 0 0", - "duration": 0, - "delay": 7.0, - "repeat": -1, - "repeatDelay": 7.5, - }, - { - "trigger" : "OnCreate", - "type": "Rotate", - "to": "0 0 30", - "duration": 7.0, - "delay": 0.5, - "repeat": -1, - "repeatDelay": 0.5, - } - ] - } - ] - }, - { - "name": "Image2", - "parent":"Background", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/3WE54zp.png", - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"Animation", - "properties": [ - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0", - "duration": 0, - "delay": 0 - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.7", - "duration": 2.5, - "delay": 1.0, - "repeat": -1, - "repeatDelay": 12.0, - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.0", - "duration": 2.5, - "delay": 10.5, - "repeat": -1, - "repeatDelay": 12.0, - }, - { - "trigger" : "OnCreate", - "type": "Scale", - "to": "1.25 1.25", - "duration": 0.05, - "delay": 0.0, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.1 -0.1", - "duration": 0.0, - "delay": 0.1, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.2 -0.2", - "duration": 0, - "delay": 14.5, - "repeat": -1, - "repeatDelay": 14.5, - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "0.2 0.2", - "duration": 14.0, - "delay": 0.5, - "repeat": -1, - "repeatDelay": 0.5, - }, - ] - } - ] - }, - { - "name": "Image3", - "parent":"Background", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/dnw34TV.png", - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"Animation", - "properties": [ - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0", - "duration": 0, - "delay": 0 - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.7", - "duration": 2.5, - "delay": 3.5, - "repeat": -1, - "repeatDelay": 9.0, - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.0", - "duration": 2.5, - "delay": 10.0, - "repeat": -1, - "repeatDelay": 9.0, - } - ] - } - ] - }, - { - "name": "Image4", - "parent":"Background", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/GTjhKO6.png", - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"Animation", - "properties": [ - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0", - "duration": 0, - "delay": 0 - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.7", - "duration": 2.5, - "delay": 2.5, - "repeat": -1, - "repeatDelay": 5.0, - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.0", - "duration": 2.5, - "delay": 6.5, - "repeat": -1, - "repeatDelay": 5.0, - }, - { - "trigger" : "OnCreate", - "type": "Scale", - "to": "1.45 1.45", - "duration": 0.05, - "delay": 0.0, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.2 -0.1", - "duration": 0.0, - "delay": 0.1, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.4 -0.2", - "duration": 0, - "delay": 9.0, - "repeat": -1, - "repeatDelay": 7.5, - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "0.4 0.2", - "duration": 7.0, - "delay": 2.5, - "repeat": -1, - "repeatDelay": 0.5, - }, - { - "trigger" : "OnCreate", - "type": "Rotate", - "to": "0 0 0", - "duration": 0, - "delay": 9.0, - "repeat": -1, - "repeatDelay": 7.5, - }, - { - "trigger" : "OnCreate", - "type": "Rotate", - "to": "0 0 30", - "duration": 14.5, - "delay": 2.5, - "repeat": -1, - "repeatDelay": 0.5, - } - ] - } - ] - }, - { - "parent": "UI", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Choose your Class", - "fontSize":44, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.75", - "anchormax": "0.93 0.95" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - } - ] - }, - { - "name": "Cards", - "parent":"UI", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.07 0.1", - "anchormax": "0.93 0.9" - }, - { - "type": "Animation", - "properties": [ - { - "type": "MoveTo", - "to": "1.07 1.1 1.93 1.9" - }, - { - "type": "MoveTo", - "delay": 1.4, - "to": "0.07 0.1 0.93 0.9" - } - ] - } - ] - }, - { - "name": "Card1", - "parent":"Cards", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0", - "anchormax": "0.5 0", - "offsetmin": "-572 40", - "offsetmax": "-100 472" - }, - { - "type": "Animation", - "mouseTarget": "CardBody1", - "properties": [ - { - "type": "Rotate", - "to": "3 10 10" - }, - { - "type": "Translate", - "to": "-0.02 -0.2" - }, - { - "type": "Rotate", - "delay": 2.0, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "0 0 0" - }, - { - "type": "Translate", - "to": "0.02 0.2", - "delay": 2.0, - "duration": 0.7, - "easing": ".06 .77 .3 .94" - }, - { - "type": "Scale", - "delay": 2.0, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "1.1 1.1" - }, - { - "type": "Scale", - "delay": 2.53, - "duration": 0.38, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.06 1.06" - }, - { - "trigger": "OnHoverEnter", - "type": "Rotate", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "0 0 3" - }, - { - "trigger": "OnHoverExit", - "type": "Scale", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverExit", - "type": "Rotate", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "0 0 0" - } - ] - } - ] - }, - { - "name": "CardBackground1", - "parent":"Card1", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 2.0, - "duration": 0.4, - "to": "1.0" - }, - { - "type": "Opacity", - "delay": 2.5, - "duration": 2.0, - "to": "0.2", - "repeat": -1, - "repeatDelay": 3.0 - }, - { - "type": "Opacity", - "delay": 4.5, - "duration": 3.0, - "to": "1.0", - "repeat": -1, - "repeatDelay": 3.0 - } - ] - } - ] - }, - { - "name": "CardBackgroundHover1", - "parent":"Card1", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "mouseTarget": "CardBody1", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "2.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - }, - ] - } - ] - }, - { - "name": "CardBody1", - "parent":"Card1", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0.5", - "anchormax": "0.5 0.5", - "offsetmin": "-149 -184", - "offsetmax": "149 184" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/NHO2yEy.png" - }, - { - "type": "UnityEngine.UI.Mask" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 2.0, - "duration": 0.6, - "to": "1.0" - } - ] - } - ] - }, - { - "name": "CardBodyHover1", - "parent":"CardBody1", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "color": "0.1 0.075 0 0.3" - }, - { - "type": "Animation", - "mouseTarget": "CardBody1", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - } - ] - } - ] - }, - { - "name": "CardBodyText1", - "parent":"CardBody1", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "UnityEngine.UI.Text", - "text": "Assasin", - "fontSize":44, - "align": "MiddleCenter" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.08", - "distance": "2 2" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.04", - "distance": "4 4" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.02", - "distance": "6 6" - }, - { - "type": "Animation", - "mouseTarget": "CardBody1", - "properties": [ - { - "trigger": "OnHoverEnter", - "type": "MoveTo", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0.3 -1 1.3 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0 0", - "to": "1.1 1.1" - }, - { - "trigger": "OnHoverExit", - "type": "MoveTo", - "delay": 0.1, - "duration": 0.2, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "Card2", - "parent":"Cards", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0", - "anchormax": "0.5 0", - "offsetmin": "-236 40", - "offsetmax": "236 472" - }, - { - "type": "Animation", - "mouseTarget": "CardBody2", - "properties": [ - { - "type": "Rotate", - "to": "3 10 10" - }, - { - "type": "Translate", - "to": "-0.02 -0.2" - }, - { - "type": "Rotate", - "delay": 2.5, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "0 0 0" - }, - { - "type": "Translate", - "to": "0.02 0.2", - "delay": 2.5, - "duration": 0.7, - "easing": ".06 .77 .3 .94" - }, - { - "type": "Scale", - "delay": 2.5, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "1.1 1.1" - }, - { - "type": "Scale", - "delay": 3.03, - "duration": 0.38, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.06 1.06" - }, - { - "trigger": "OnHoverEnter", - "type": "Rotate", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "0 0 3" - }, - { - "trigger": "OnHoverExit", - "type": "Scale", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverExit", - "type": "Rotate", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "0 0 0" - } - ] - } - ] - }, - { - "name": "CardBackground2", - "parent":"Card2", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 2.5, - "duration": 0.4, - "to": "1.0" - }, - { - "type": "Opacity", - "delay": 3.0, - "duration": 2.0, - "to": "0.2", - "repeat": -1, - "repeatDelay": 3.0 - }, - { - "type": "Opacity", - "delay": 5.0, - "duration": 3.0, - "to": "1.0", - "repeat": -1, - "repeatDelay": 3.0 - } - ] - } - ] - }, - { - "name": "CardBackgroundHover2", - "parent":"Card2", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "mouseTarget": "CardBody2", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "2.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - }, - ] - } - ] - }, - { - "name": "CardBody2", - "parent":"Card2", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0.5", - "anchormax": "0.5 0.5", - "offsetmin": "-149 -184", - "offsetmax": "149 184" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/Rgw0z8R.png" - }, - { - "type": "UnityEngine.UI.Mask" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 2.5, - "duration": 0.6, - "to": "1.0" - } - ] - } - ] - }, - { - "name": "CardBodyHover2", - "parent":"CardBody2", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "color": "0.1 0.075 0 0.3" - }, - { - "type": "Animation", - "mouseTarget": "CardBody2", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - } - ] - } - ] - }, - { - "name": "CardBodyText2", - "parent":"CardBody2", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "UnityEngine.UI.Text", - "text": "Sniper", - "fontSize":44, - "align": "MiddleCenter" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.08", - "distance": "2 2" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.04", - "distance": "4 4" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.02", - "distance": "6 6" - }, - { - "type": "Animation", - "mouseTarget": "CardBody2", - "properties": [ - { - "trigger": "OnHoverEnter", - "type": "MoveTo", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0.3 -1 1.3 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0 0", - "to": "1.1 1.1" - }, - { - "trigger": "OnHoverExit", - "type": "MoveTo", - "delay": 0.1, - "duration": 0.2, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "Card3", - "parent":"Cards", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0", - "anchormax": "0.5 0", - "offsetmin": "100 40", - "offsetmax": "572 472" - }, - { - "type": "Animation", - "mouseTarget": "CardBody3", - "properties": [ - { - "type": "Rotate", - "to": "3 10 10" - }, - { - "type": "Translate", - "to": "-0.02 -0.2" - }, - { - "type": "Rotate", - "delay": 3.0, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "0 0 0" - }, - { - "type": "Translate", - "to": "0.02 0.2", - "delay": 3.0, - "duration": 0.7, - "easing": ".06 .77 .3 .94" - }, - { - "type": "Scale", - "delay": 3.0, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "1.1 1.1" - }, - { - "type": "Scale", - "delay": 3.53, - "duration": 0.38, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.06 1.06" - }, - { - "trigger": "OnHoverEnter", - "type": "Rotate", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "0 0 3" - }, - { - "trigger": "OnHoverExit", - "type": "Scale", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverExit", - "type": "Rotate", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "0 0 0" - } - ] - } - ] - }, - { - "name": "CardBackground3", - "parent":"Card3", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 3.0, - "duration": 0.4, - "to": "1.0" - }, - { - "type": "Opacity", - "delay": 3.5, - "duration": 2.0, - "to": "0.2", - "repeat": -1, - "repeatDelay": 3.0 - }, - { - "type": "Opacity", - "delay": 5.5, - "duration": 3.0, - "to": "1.0", - "repeat": -1, - "repeatDelay": 3.0 - } - ] - } - ] - }, - { - "name": "CardBackgroundHover3", - "parent":"Card3", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "mouseTarget": "CardBody3", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "2.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - }, - ] - } - ] - }, - { - "name": "CardBody3", - "parent":"Card3", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0.5", - "anchormax": "0.5 0.5", - "offsetmin": "-149 -184", - "offsetmax": "149 184" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/XGAEmHd.png" - }, - { - "type": "UnityEngine.UI.Mask" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 3.0, - "duration": 0.6, - "to": "1.0" - } - ] - } - ] - }, - { - "name": "CardBodyHover3", - "parent":"CardBody3", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "color": "0.1 0.075 0 0.3" - }, - { - "type": "Animation", - "mouseTarget": "CardBody3", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - } - ] - } - ] - }, - { - "name": "CardBodyText3", - "parent":"CardBody3", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "UnityEngine.UI.Text", - "text": "Tank", - "fontSize":44, - "align": "MiddleCenter" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.08", - "distance": "2 2" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.04", - "distance": "4 4" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.02", - "distance": "6 6" - }, - { - "type": "Animation", - "mouseTarget": "CardBody3", - "properties": [ - { - "trigger": "OnHoverEnter", - "type": "MoveTo", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0.3 -1 1.3 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0 0", - "to": "1.1 1.1" - }, - { - "trigger": "OnHoverExit", - "type": "MoveTo", - "delay": 0.1, - "duration": 0.2, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "Button88", - "parent": "UI", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"UI", - "command":"cui.endtest", - "color": "0.9 0.8 0.3 0.02" - }, - { - "type":"RectTransform", - "anchormin": "0.0 0.0", - "anchormax": "0.1 0.07" - } - ] - }, - { - "parent": "Button88", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Kill UI", - "fontSize":16, - "align": "MiddleCenter" - } - ] - } -] +[ + { + "name": "UI", + "parent":"Overlay", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"NeedsCursor" + } + ] + }, + { + "name": "Background", + "parent":"UI", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Image1", + "parent":"Background", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/3WE54zp.png", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"Animation", + "properties": [ + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0", + "duration": 0, + "delay": 0 + }, + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0.7", + "duration": 2.5, + "delay": 0.5, + "repeat": -1, + "repeatDelay": 5.0, + }, + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0.0", + "duration": 2.5, + "delay": 4.5, + "repeat": -1, + "repeatDelay": 5.0, + }, + { + "trigger" : "OnCreate", + "type": "Scale", + "to": "1.45 1.45", + "duration": 0.05, + "delay": 0.0, + "repeat": 0 + }, + { + "trigger" : "OnCreate", + "type": "Translate", + "to": "-0.2 -0.1", + "duration": 0.0, + "delay": 0.1, + "repeat": 0 + }, + { + "trigger" : "OnCreate", + "type": "Translate", + "to": "-0.4 -0.2", + "duration": 0, + "delay": 7.0, + "repeat": -1, + "repeatDelay": 7.5, + }, + { + "trigger" : "OnCreate", + "type": "Translate", + "to": "0.4 0.2", + "duration": 7.0, + "delay": 0.5, + "repeat": -1, + "repeatDelay": 0.5, + }, + { + "trigger" : "OnCreate", + "type": "Rotate", + "to": "0 0 0", + "duration": 0, + "delay": 7.0, + "repeat": -1, + "repeatDelay": 7.5, + }, + { + "trigger" : "OnCreate", + "type": "Rotate", + "to": "0 0 30", + "duration": 7.0, + "delay": 0.5, + "repeat": -1, + "repeatDelay": 0.5, + } + ] + } + ] + }, + { + "name": "Image2", + "parent":"Background", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/3WE54zp.png", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"Animation", + "properties": [ + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0", + "duration": 0, + "delay": 0 + }, + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0.7", + "duration": 2.5, + "delay": 1.0, + "repeat": -1, + "repeatDelay": 12.0, + }, + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0.0", + "duration": 2.5, + "delay": 10.5, + "repeat": -1, + "repeatDelay": 12.0, + }, + { + "trigger" : "OnCreate", + "type": "Scale", + "to": "1.25 1.25", + "duration": 0.05, + "delay": 0.0, + "repeat": 0 + }, + { + "trigger" : "OnCreate", + "type": "Translate", + "to": "-0.1 -0.1", + "duration": 0.0, + "delay": 0.1, + "repeat": 0 + }, + { + "trigger" : "OnCreate", + "type": "Translate", + "to": "-0.2 -0.2", + "duration": 0, + "delay": 14.5, + "repeat": -1, + "repeatDelay": 14.5, + }, + { + "trigger" : "OnCreate", + "type": "Translate", + "to": "0.2 0.2", + "duration": 14.0, + "delay": 0.5, + "repeat": -1, + "repeatDelay": 0.5, + }, + ] + } + ] + }, + { + "name": "Image3", + "parent":"Background", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/dnw34TV.png", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"Animation", + "properties": [ + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0", + "duration": 0, + "delay": 0 + }, + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0.7", + "duration": 2.5, + "delay": 3.5, + "repeat": -1, + "repeatDelay": 9.0, + }, + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0.0", + "duration": 2.5, + "delay": 10.0, + "repeat": -1, + "repeatDelay": 9.0, + } + ] + } + ] + }, + { + "name": "Image4", + "parent":"Background", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/GTjhKO6.png", + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"Animation", + "properties": [ + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0", + "duration": 0, + "delay": 0 + }, + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0.7", + "duration": 2.5, + "delay": 2.5, + "repeat": -1, + "repeatDelay": 5.0, + }, + { + "trigger" : "OnCreate", + "type": "Opacity", + "to": "0.0", + "duration": 2.5, + "delay": 6.5, + "repeat": -1, + "repeatDelay": 5.0, + }, + { + "trigger" : "OnCreate", + "type": "Scale", + "to": "1.45 1.45", + "duration": 0.05, + "delay": 0.0, + "repeat": 0 + }, + { + "trigger" : "OnCreate", + "type": "Translate", + "to": "-0.2 -0.1", + "duration": 0.0, + "delay": 0.1, + "repeat": 0 + }, + { + "trigger" : "OnCreate", + "type": "Translate", + "to": "-0.4 -0.2", + "duration": 0, + "delay": 9.0, + "repeat": -1, + "repeatDelay": 7.5, + }, + { + "trigger" : "OnCreate", + "type": "Translate", + "to": "0.4 0.2", + "duration": 7.0, + "delay": 2.5, + "repeat": -1, + "repeatDelay": 0.5, + }, + { + "trigger" : "OnCreate", + "type": "Rotate", + "to": "0 0 0", + "duration": 0, + "delay": 9.0, + "repeat": -1, + "repeatDelay": 7.5, + }, + { + "trigger" : "OnCreate", + "type": "Rotate", + "to": "0 0 30", + "duration": 14.5, + "delay": 2.5, + "repeat": -1, + "repeatDelay": 0.5, + } + ] + } + ] + }, + { + "parent": "UI", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Choose your Class", + "fontSize":44, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.75", + "anchormax": "0.93 0.95" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Cards", + "parent":"UI", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.07 0.1", + "anchormax": "0.93 0.9" + }, + { + "type": "Animation", + "properties": [ + { + "type": "MoveTo", + "to": "1.07 1.1 1.93 1.9" + }, + { + "type": "MoveTo", + "delay": 1.4, + "to": "0.07 0.1 0.93 0.9" + } + ] + } + ] + }, + { + "name": "Card1", + "parent":"Cards", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0", + "anchormax": "0.5 0", + "offsetmin": "-572 40", + "offsetmax": "-100 472" + }, + { + "type": "Animation", + "mouseTarget": "CardBody1", + "properties": [ + { + "type": "Rotate", + "to": "3 10 10" + }, + { + "type": "Translate", + "to": "-0.02 -0.2" + }, + { + "type": "Rotate", + "delay": 2.0, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "0 0 0" + }, + { + "type": "Translate", + "to": "0.02 0.2", + "delay": 2.0, + "duration": 0.7, + "easing": ".06 .77 .3 .94" + }, + { + "type": "Scale", + "delay": 2.0, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "1.1 1.1" + }, + { + "type": "Scale", + "delay": 2.53, + "duration": 0.38, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "trigger": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.06 1.06" + }, + { + "trigger": "OnHoverEnter", + "type": "Rotate", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "0 0 3" + }, + { + "trigger": "OnHoverExit", + "type": "Scale", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "trigger": "OnHoverExit", + "type": "Rotate", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "0 0 0" + } + ] + } + ] + }, + { + "name": "CardBackground1", + "parent":"Card1", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 2.0, + "duration": 0.4, + "to": "1.0" + }, + { + "type": "Opacity", + "delay": 2.5, + "duration": 2.0, + "to": "0.2", + "repeat": -1, + "repeatDelay": 3.0 + }, + { + "type": "Opacity", + "delay": 4.5, + "duration": 3.0, + "to": "1.0", + "repeat": -1, + "repeatDelay": 3.0 + } + ] + } + ] + }, + { + "name": "CardBackgroundHover1", + "parent":"Card1", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "mouseTarget": "CardBody1", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "2.0" + }, + { + "trigger": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + }, + ] + } + ] + }, + { + "name": "CardBody1", + "parent":"Card1", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.5 0.5", + "offsetmin": "-149 -184", + "offsetmax": "149 184" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/NHO2yEy.png" + }, + { + "type": "UnityEngine.UI.Mask" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 2.0, + "duration": 0.6, + "to": "1.0" + } + ] + } + ] + }, + { + "name": "CardBodyHover1", + "parent":"CardBody1", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "color": "0.1 0.075 0 0.3" + }, + { + "type": "Animation", + "mouseTarget": "CardBody1", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + } + ] + } + ] + }, + { + "name": "CardBodyText1", + "parent":"CardBody1", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "UnityEngine.UI.Text", + "text": "Assasin", + "fontSize":44, + "align": "MiddleCenter" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.08", + "distance": "2 2" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.04", + "distance": "4 4" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.02", + "distance": "6 6" + }, + { + "type": "Animation", + "mouseTarget": "CardBody1", + "properties": [ + { + "trigger": "OnHoverEnter", + "type": "MoveTo", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0.3 -1 1.3 1", + "to": "0 0 1 1" + }, + { + "trigger": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0 0", + "to": "1.1 1.1" + }, + { + "trigger": "OnHoverExit", + "type": "MoveTo", + "delay": 0.1, + "duration": 0.2, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "Card2", + "parent":"Cards", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0", + "anchormax": "0.5 0", + "offsetmin": "-236 40", + "offsetmax": "236 472" + }, + { + "type": "Animation", + "mouseTarget": "CardBody2", + "properties": [ + { + "type": "Rotate", + "to": "3 10 10" + }, + { + "type": "Translate", + "to": "-0.02 -0.2" + }, + { + "type": "Rotate", + "delay": 2.5, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "0 0 0" + }, + { + "type": "Translate", + "to": "0.02 0.2", + "delay": 2.5, + "duration": 0.7, + "easing": ".06 .77 .3 .94" + }, + { + "type": "Scale", + "delay": 2.5, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "1.1 1.1" + }, + { + "type": "Scale", + "delay": 3.03, + "duration": 0.38, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "trigger": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.06 1.06" + }, + { + "trigger": "OnHoverEnter", + "type": "Rotate", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "0 0 3" + }, + { + "trigger": "OnHoverExit", + "type": "Scale", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "trigger": "OnHoverExit", + "type": "Rotate", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "0 0 0" + } + ] + } + ] + }, + { + "name": "CardBackground2", + "parent":"Card2", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 2.5, + "duration": 0.4, + "to": "1.0" + }, + { + "type": "Opacity", + "delay": 3.0, + "duration": 2.0, + "to": "0.2", + "repeat": -1, + "repeatDelay": 3.0 + }, + { + "type": "Opacity", + "delay": 5.0, + "duration": 3.0, + "to": "1.0", + "repeat": -1, + "repeatDelay": 3.0 + } + ] + } + ] + }, + { + "name": "CardBackgroundHover2", + "parent":"Card2", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "mouseTarget": "CardBody2", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "2.0" + }, + { + "trigger": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + }, + ] + } + ] + }, + { + "name": "CardBody2", + "parent":"Card2", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.5 0.5", + "offsetmin": "-149 -184", + "offsetmax": "149 184" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/Rgw0z8R.png" + }, + { + "type": "UnityEngine.UI.Mask" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 2.5, + "duration": 0.6, + "to": "1.0" + } + ] + } + ] + }, + { + "name": "CardBodyHover2", + "parent":"CardBody2", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "color": "0.1 0.075 0 0.3" + }, + { + "type": "Animation", + "mouseTarget": "CardBody2", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + } + ] + } + ] + }, + { + "name": "CardBodyText2", + "parent":"CardBody2", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "UnityEngine.UI.Text", + "text": "Sniper", + "fontSize":44, + "align": "MiddleCenter" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.08", + "distance": "2 2" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.04", + "distance": "4 4" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.02", + "distance": "6 6" + }, + { + "type": "Animation", + "mouseTarget": "CardBody2", + "properties": [ + { + "trigger": "OnHoverEnter", + "type": "MoveTo", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0.3 -1 1.3 1", + "to": "0 0 1 1" + }, + { + "trigger": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0 0", + "to": "1.1 1.1" + }, + { + "trigger": "OnHoverExit", + "type": "MoveTo", + "delay": 0.1, + "duration": 0.2, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "Card3", + "parent":"Cards", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0", + "anchormax": "0.5 0", + "offsetmin": "100 40", + "offsetmax": "572 472" + }, + { + "type": "Animation", + "mouseTarget": "CardBody3", + "properties": [ + { + "type": "Rotate", + "to": "3 10 10" + }, + { + "type": "Translate", + "to": "-0.02 -0.2" + }, + { + "type": "Rotate", + "delay": 3.0, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "0 0 0" + }, + { + "type": "Translate", + "to": "0.02 0.2", + "delay": 3.0, + "duration": 0.7, + "easing": ".06 .77 .3 .94" + }, + { + "type": "Scale", + "delay": 3.0, + "duration": 0.6, + "easing": ".06 .77 .3 .94", + "to": "1.1 1.1" + }, + { + "type": "Scale", + "delay": 3.53, + "duration": 0.38, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "trigger": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.06 1.06" + }, + { + "trigger": "OnHoverEnter", + "type": "Rotate", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "0 0 3" + }, + { + "trigger": "OnHoverExit", + "type": "Scale", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "1 1" + }, + { + "trigger": "OnHoverExit", + "type": "Rotate", + "delay": 0.1, + "duration": 0.2, + "easing": "0.05 0.95 0.7 1", + "to": "0 0 0" + } + ] + } + ] + }, + { + "name": "CardBackground3", + "parent":"Card3", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 3.0, + "duration": 0.4, + "to": "1.0" + }, + { + "type": "Opacity", + "delay": 3.5, + "duration": 2.0, + "to": "0.2", + "repeat": -1, + "repeatDelay": 3.0 + }, + { + "type": "Opacity", + "delay": 5.5, + "duration": 3.0, + "to": "1.0", + "repeat": -1, + "repeatDelay": 3.0 + } + ] + } + ] + }, + { + "name": "CardBackgroundHover3", + "parent":"Card3", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/DH0Bn6c.png" + }, + { + "type": "Animation", + "mouseTarget": "CardBody3", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "2.0" + }, + { + "trigger": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + }, + ] + } + ] + }, + { + "name": "CardBody3", + "parent":"Card3", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.5 0.5", + "offsetmin": "-149 -184", + "offsetmax": "149 184" + }, + { + "type": "UnityEngine.UI.RawImage", + "url": "https://i.imgur.com/XGAEmHd.png" + }, + { + "type": "UnityEngine.UI.Mask" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 3.0, + "duration": 0.6, + "to": "1.0" + } + ] + } + ] + }, + { + "name": "CardBodyHover3", + "parent":"CardBody3", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "UnityEngine.UI.RawImage", + "color": "0.1 0.075 0 0.3" + }, + { + "type": "Animation", + "mouseTarget": "CardBody3", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnHoverEnter", + "type": "Opacity", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "to": "1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Opacity", + "delay": 0.1, + "duration": 0.2, + "to": "0" + } + ] + } + ] + }, + { + "name": "CardBodyText3", + "parent":"CardBody3", + "components": + [ + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "UnityEngine.UI.Text", + "text": "Tank", + "fontSize":44, + "align": "MiddleCenter" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.08", + "distance": "2 2" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.04", + "distance": "4 4" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.02", + "distance": "6 6" + }, + { + "type": "Animation", + "mouseTarget": "CardBody3", + "properties": [ + { + "trigger": "OnHoverEnter", + "type": "MoveTo", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0.3 -1 1.3 1", + "to": "0 0 1 1" + }, + { + "trigger": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "easing": "0 1.45 0.6 1", + "from": "0 0", + "to": "1.1 1.1" + }, + { + "trigger": "OnHoverExit", + "type": "MoveTo", + "delay": 0.1, + "duration": 0.2, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "Button88", + "parent": "UI", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"UI", + "command":"cui.endtest", + "color": "0.9 0.8 0.3 0.02" + }, + { + "type":"RectTransform", + "anchormin": "0.0 0.0", + "anchormax": "0.1 0.07" + } + ] + }, + { + "parent": "Button88", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Kill UI", + "fontSize":16, + "align": "MiddleCenter" + } + ] + } +] From d49f7f262823a8e1f96d7e9e897152a9b853cb2b Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Tue, 10 Jan 2023 07:10:13 +0100 Subject: [PATCH 19/53] Added DynamicVector Capacity Added Capacity value to DynamicVector Prevent adding values in ParseFromString if the capacity is reached, fixes throwing IndexOutOfRangeExceptions if the mod developer supplies too many floats --- CommunityEntity.UI.Animation.cs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 81854c2..67bd0e1 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -333,7 +333,7 @@ public IEnumerator AnimateProperty() } } - // remove this animation property of there is no valid case or the selected case fails + // remove this animation property if there is no valid case or the selected case fails Debug.LogWarning($"Animation for {anim.gameObject.name} failed to execute - invalid to value [{animValue.to}] for animation of type {type}"); anim.RemoveProperty(this); repeat = 0; // ensure the animation wont repeat @@ -415,13 +415,14 @@ public DynamicVector ParseFromString(string source){ float temp; float.TryParse(split[i], out temp); values.Add(temp); + if(values.Count == values.Capacity) break; } return values; } } // a struct that mimics Vector2/3/4/n, previously used a list to hold values, but lists dont work as structs - // turning this into a struct makes alot of sense, thanks for the insights @WhiteThunder + // turning this into a struct makes alot of sense, thanks for the insights @WheteThunger public struct DynamicVector { // need it to hold more than 4? add a _valueN and adjust the indexer & Clear method @@ -432,6 +433,8 @@ public struct DynamicVector { public int Count; + public int Capacity => 4; + public float this[int i]{ get { switch(i){ From 7f803e485f134c2624c888d39a3f95a6219c4c55 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Thu, 12 Jan 2023 10:47:05 +0100 Subject: [PATCH 20/53] Comments, Cleanup & Merging Enable/DisableGraphic Adding some Comments, fixed a few edgecases with looping animations that can be triggered multiple times (OnHover/Click) Merged the Enable & DisableGraphic functions into TryToggleGraphic, it will now just look at the graphic's alpha value & decide itself if the graphic should be activated or not --- CommunityEntity.UI.Animation.cs | 109 +++++++++++++++++++------------- 1 file changed, 65 insertions(+), 44 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 67bd0e1..a33caa5 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -99,27 +99,20 @@ public void CacheGraphicComponent(){ shouldRaycast = (cachedGraphic != null ? cachedGraphic.raycastTarget : false); } - // used with opacity & color animations, this hides the graphic and prevents it from blocking mouse interactions - public void DisableGraphic(float delay = 0f){ - var a = new Action(() => { - cachedGraphic.canvasRenderer.cullTransparentMesh = true; - isHidden = true; - cachedGraphic.raycastTarget = false; - }); - if(delay <= 0f) a(); - else Invoke(a, delay); - } - - // does the oposite - public void EnableGraphic(float delay = 0f){ + // used with opacity & color animations + // checks if the graphic's alpha is set to 0f & prevents it from intercepting mouse clicks & sets it to Hidden + public void TryToggleGraphic(float delay = 0f){ + if(cachedGraphic == null) return; + var a = new Action(() => { - cachedGraphic.canvasRenderer.cullTransparentMesh = false; - isHidden = false; - if(shouldRaycast) cachedGraphic.raycastTarget = true; + bool hidden = cachedGraphic.canvasRenderer.GetAlpha() > 0f; + cachedGraphic.canvasRenderer.cullTransparentMesh = !hidden; + isHidden = !hidden; + cachedGraphic.raycastTarget = hidden; }); if(delay <= 0f) a(); else Invoke(a, delay); - } + } public void OnHoverEnter(){ if(isKilled) return; @@ -171,6 +164,7 @@ public AnimationProperty(string easing = "linear") : this() { // Launches the animation, keeping track of loops if its set to repeat public IEnumerator Animate() { + completedRounds = 0; // reset completedRounds on restart if(animValue == null || animValue.to.Count == 0){ Debug.LogWarning($"Animation of type {type} for {anim.gameObject.name} failed to execute - no from/to values provided"); anim.RemoveProperty(this); @@ -205,14 +199,16 @@ public IEnumerator AnimateProperty() { // needs a reference to the graphic & atleast 1 value in the to value if(!anim.cachedGraphic || animValue.to.Count < 1) break; - - // enables the graphic if: - // - the from value is higher than 0 or + + // try to enable the graphic after 0.1 seconds if: + // - the from value is higher than 0 or // - the graphic is currently hidden but will go above 0 opacity during the animation if((animValue.from.Count != 0 && animValue.from.TryGet(0) > 0f) || anim.isHidden && animValue.to.TryGet(0) > 0f) - anim.EnableGraphic(0f); + anim.TryToggleGraphic(0.1f); animValue.initial = new DynamicVector(anim.cachedGraphic.canvasRenderer.GetAlpha()); + + // force applies the value, meaning Opacity & Color animations may clash when multiple are setting the opacity animValue.apply = (DynamicVector value) => { prop.anim.cachedGraphic.canvasRenderer.SetAlpha(value.TryGet(0)); }; @@ -221,20 +217,23 @@ public IEnumerator AnimateProperty() anim.cachedGraphic.CrossFadeAlpha(animValue.initial.TryGet(0), 0f, true); if(animValue.to.TryGet(0) <= 0f) anim.DisableGraphic(duration); + //Use Absolute mode for these Interpolations, as it wont need the initial opacity for any calculations return InterpolateValue(animValue, duration, easing); } case "Color": { // needs a reference to the graphic & atleast 4 values in the to value if(!anim.cachedGraphic || animValue.to.Count < 4) break; - + // enables the graphic if: - // - the from color's alpha is higher than 0 or + // - the from color's alpha is higher than 0 or // - the graphic is currently hidden but will go above 0 opacity during the animation if((animValue.from.Count != 0 && animValue.from.TryGet(3) > 0f) || anim.isHidden && animValue.to.TryGet(3) > 0f) - anim.EnableGraphic(0f); + anim.TryToggleGraphic(0.1f); animValue.initial = new DynamicVector(anim.cachedGraphic.canvasRenderer.GetColor()); + + // force applies the value, meaning Opacity & Color animations may clash when multiple are setting the opacity animValue.apply = (DynamicVector value) => { prop.anim.cachedGraphic.canvasRenderer.SetColor(value.ToColor()); }; @@ -243,7 +242,8 @@ public IEnumerator AnimateProperty() anim.cachedGraphic.CrossFadeColor(animValue.initial.ToColor(), 0f, true, true); if(animValue.to.TryGet(3) <= 0f) anim.DisableGraphic(duration); - return InterpolateValue(animValue, duration, easing); + //Use Absolute mode for these Interpolations, as it wont need the initial color for any calculations + return InterpolateValue(animValue, duration, easing, true); } case "Scale": { @@ -253,6 +253,8 @@ public IEnumerator AnimateProperty() if(!anim.cachedRect) break; animValue.initial = new DynamicVector(anim.cachedRect.localScale); + + // force applies the value, meaning multiple Scale animations running at the same time will clash animValue.apply = (DynamicVector value) => { // we convert to a Vector3 even though the DynamicVector only holds 2 floats // this is fine because the z value will be set to 0f, which isnt used for the scale of rectTransforms @@ -267,12 +269,16 @@ public IEnumerator AnimateProperty() animValue.initial = new DynamicVector(); animValue.last = new DynamicVector(); + + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position animValue.apply = (DynamicVector value) => { DynamicVector diff = value - prop.animValue.last; prop.anim.cachedRect.anchorMin += diff.ToVector2(); prop.anim.cachedRect.anchorMax += diff.ToVector2(); prop.animValue.last += diff; }; + + // Use Relative mode for these Interpolations, as it will take the initial position into account for the translation return InterpolateValue(animValue, duration, easing, false); } case "TranslatePX": @@ -282,12 +288,16 @@ public IEnumerator AnimateProperty() animValue.initial = new DynamicVector(); animValue.last = new DynamicVector(); + + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position animValue.apply = (DynamicVector value) => { DynamicVector diff = value - prop.animValue.last; prop.anim.cachedRect.offsetMin += diff.ToVector2(0); prop.anim.cachedRect.offsetMax += diff.ToVector2(0); prop.animValue.last += diff; }; + + // Use Relative mode for these Interpolations, as it will take the initial position into account for the translation return InterpolateValue(animValue, duration, easing, false); } case "Rotate": @@ -296,9 +306,13 @@ public IEnumerator AnimateProperty() if(!anim.cachedRect || animValue.to.Count < 3) break; animValue.initial = new DynamicVector(anim.cachedRect.rotation.eulerAngles); + + // force applies the value, meaning multiple Rotate animations running at the same time will clash animValue.apply = (DynamicVector value) => { prop.anim.cachedRect.rotation = Quaternion.Euler(value.ToVector3()); }; + + //Use Absolute mode for these Interpolations, as it wont need the initial rotation for any calculations return InterpolateValue(animValue, duration, easing, true); } case "MoveTo": @@ -307,14 +321,18 @@ public IEnumerator AnimateProperty() animValue.initial = new DynamicVector(anim.cachedRect.anchorMin); animValue.initial.Add(anim.cachedRect.anchorMax); - animValue.last = animValue.initial + new DynamicVector(); + animValue.last = animValue.initial; + + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position animValue.apply = (DynamicVector value) => { DynamicVector diff = value - prop.animValue.last; prop.anim.cachedRect.anchorMin += diff.ToVector2(0); prop.anim.cachedRect.anchorMax += diff.ToVector2(2); // skip the first 2 values prop.animValue.last += diff; }; - return InterpolateValue(animValue, duration, easing); + + //Use Absolute mode for these Interpolations, as the from & to values supplied are absolute values + return InterpolateValue(animValue, duration, easing, true); } case "MoveToPX": { @@ -322,14 +340,18 @@ public IEnumerator AnimateProperty() animValue.initial = new DynamicVector(anim.cachedRect.offsetMin); animValue.initial.Add(anim.cachedRect.offsetMax); - animValue.last = animValue.initial + new DynamicVector(); + animValue.last = animValue.initial; + + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position animValue.apply = (DynamicVector value) => { DynamicVector diff = value - prop.animValue.last; prop.anim.cachedRect.offsetMin += diff.ToVector2(0); prop.anim.cachedRect.offsetMax += diff.ToVector2(2); // skip the first 2 values prop.animValue.last += diff; }; - return InterpolateValue(animValue, duration, easing); + + //Use Absolute mode for these Interpolations, as the from & to values supplied are absolute values + return InterpolateValue(animValue, duration, easing, true); } } @@ -338,6 +360,7 @@ public IEnumerator AnimateProperty() anim.RemoveProperty(this); repeat = 0; // ensure the animation wont repeat // Return an empty enumerator so the coroutine finishes + // unsure if this could be a cached enumerator instead return new System.Object[0].GetEnumerator(); } @@ -365,8 +388,8 @@ public float Ease(string type, float input){ } } - // Interpolats an AnimationValue over the duration with the easing specified - // the absolute arguement specifies if the animation should be handled as a relative animation or an absolute animation + // Interpolates an AnimationValue over the duration with the easing specified + // the absolute arguement specifies if the animation value should be handled as a relative value or an absolute value // absolute = false: the objects initial value gets used as a 0 point, with the from and to values being relative to the initial value // absolute = true: the object's initial value does not get factored in and the from and to values are seen as absolute public IEnumerator InterpolateValue(AnimationValue value, float duration, string easing, bool absolute = true){ @@ -406,6 +429,7 @@ public AnimationValue(string sourceTo, string sourceFrom = null){ this.from = ParseFromString(sourceFrom); this.to = ParseFromString(sourceTo); } + // based on the VectorEx parse methods, but in a dynamic list style public DynamicVector ParseFromString(string source){ var values = new DynamicVector(); if(string.IsNullOrEmpty(source)) return values; @@ -423,9 +447,10 @@ public DynamicVector ParseFromString(string source){ // a struct that mimics Vector2/3/4/n, previously used a list to hold values, but lists dont work as structs // turning this into a struct makes alot of sense, thanks for the insights @WheteThunger + // its still styled as a list with the Add Methods to simplify working with it in animation code public struct DynamicVector { - // need it to hold more than 4? add a _valueN and adjust the indexer & Clear method + // need it to hold more than 4? add a _valueN and adjust the Capacity, indexer & Clear method private float _value0; private float _value1; private float _value2; @@ -447,23 +472,16 @@ public float this[int i]{ } set { switch(i){ - case 0: - _value0 = value; - break; - case 1: - _value1 = value; - break; - case 2: - _value2 = value; - break; - case 3: - _value3 = value; - break; + case 0: _value0 = value; break; + case 1: _value1 = value; break; + case 2: _value2 = value; break; + case 3: _value3 = value; break; default: throw new IndexOutOfRangeException(); } } } + // Constructors for common values that simply forward it to the respective Add function public DynamicVector(Vector4 vec) : this() => Add(vec); public DynamicVector(Color col) : this() => Add(col); public DynamicVector(Vector3 vec) : this() => Add(vec); @@ -497,6 +515,7 @@ public void Add(Vector2 vec){ Add(vec.y); } // the ToVectorX & ToColor Functions have an optional offset arguement that shifts the starting point of the list when turning it into the vector + // this is useful for easily splitting a Vector4 into 2 Vector2s, like during the MoveTo/PX where the from/to values are Vector4s but the end result needs to be split into AnchorMin and AnchorMax Vector2s public Vector4 ToVector4(int offset = 0){ return new Vector4( TryGet(offset), @@ -526,6 +545,7 @@ public Vector2 ToVector2(int offset = 0){ TryGet(offset + 1) ); } + // gets the float at the index if it exists, otherwise returns 0 public float TryGet(int index, float defaultValue = 0f){ if(index < 0 || index >= this.Count) return defaultValue; @@ -572,6 +592,7 @@ public static DynamicVector LerpUnclamped(DynamicVector from, DynamicVector to, return result; } + // using a string builder here due to the itteration approach public override string ToString(){ var sb = new StringBuilder(32); for(int i = 0; i < this.Count; i++){ From 00aa987f9f0d6eb8d902d4d8ce90f6911f8304f6 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 00:24:37 +0200 Subject: [PATCH 21/53] Removed Interface Removed MouseReceiver interface due to changes to the MouseListener --- CommunityEntity.UI.IMouseReceiver.cs | 22 ---------------------- 1 file changed, 22 deletions(-) delete mode 100644 CommunityEntity.UI.IMouseReceiver.cs diff --git a/CommunityEntity.UI.IMouseReceiver.cs b/CommunityEntity.UI.IMouseReceiver.cs deleted file mode 100644 index c6f03bc..0000000 --- a/CommunityEntity.UI.IMouseReceiver.cs +++ /dev/null @@ -1,22 +0,0 @@ -#if CLIENT - - -public partial class CommunityEntity -{ - - public interface IMouseReceiver{ - - string mouseTarget { - get; - set; - } - - void OnHoverEnter(); - - void OnHoverExit(); - - void OnClick(); - } -} - -#endif From 370f96348cac65ae936996d1d8792a06f2babe7c Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 00:26:59 +0200 Subject: [PATCH 22/53] Changed MouseListener to work without interface Changed how the MouseListener works to work without the interface. adjusted events to always supply the gameObject's name as an argument. --- CommunityEntity.UI.MouseListener.cs | 58 ++++++----------------------- 1 file changed, 11 insertions(+), 47 deletions(-) diff --git a/CommunityEntity.UI.MouseListener.cs b/CommunityEntity.UI.MouseListener.cs index e3e2fa7..444ea03 100644 --- a/CommunityEntity.UI.MouseListener.cs +++ b/CommunityEntity.UI.MouseListener.cs @@ -1,4 +1,4 @@ - +using Object = UnityEngine.Object; using UnityEngine; using UnityEngine.EventSystems; using System; @@ -16,71 +16,35 @@ public partial class CommunityEntity public class MouseListener : UIBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerClickHandler { - public static List pendingListeners = new List(); + public string name; + public Action onEnter; + public Action onExit; + public Action onClick; - public Action onEnter; - public Action onExit; - public Action onClick; + void Awake(){ + name = gameObject.name; + } public virtual void OnPointerClick(PointerEventData eventData) { - if(onClick != null) onClick(); + if(onClick != null) onClick(name); // Manually Bubble it up ExecuteEvents.ExecuteHierarchy(transform.parent.gameObject, eventData, ExecuteEvents.pointerClickHandler); } public virtual void OnPointerEnter(PointerEventData eventData) { - if(onEnter != null) onEnter(); + if(onEnter != null) onEnter(name); // Manually Bubble it up ExecuteEvents.ExecuteHierarchy(transform.parent.gameObject, eventData, ExecuteEvents.pointerEnterHandler); } public virtual void OnPointerExit(PointerEventData eventData) { - if(onExit != null) onExit(); + if(onExit != null) onExit(name); // Manually Bubble it up ExecuteEvents.ExecuteHierarchy(transform.parent.gameObject, eventData, ExecuteEvents.pointerExitHandler); } } - - - public void ScheduleMouseListener(string name, IMouseReceiver receiver){ - receiver.mouseTarget = name; - if(!MouseListener.pendingListeners.Contains(receiver)) MouseListener.pendingListeners.Add(receiver); - } - - public void ApplyMouseListeners(){ - foreach(var receiver in MouseListener.pendingListeners){ - if(string.IsNullOrEmpty(receiver.mouseTarget)) continue; - ApplyMouseListener(receiver.mouseTarget, receiver); - } - MouseListener.pendingListeners.Clear(); - } - public void ApplyMouseListener(string name, IMouseReceiver receiver){ - GameObject hObj = FindPanel(name); - if(!hObj) return; - - var c = hObj.GetComponent(); - if(!c) c = hObj.AddComponent(); - - c.onEnter += receiver.OnHoverEnter; - c.onExit += receiver.OnHoverExit; - c.onClick += receiver.OnClick; - - } - public void RemoveMouseListener(string name, IMouseReceiver receiver){ - GameObject hObj = FindPanel(name); - if(!hObj) return; - - var c = hObj.GetComponent(); - if(!c) return; - - c.onEnter -= receiver.OnHoverEnter; - c.onExit -= receiver.OnHoverExit; - c.onClick -= receiver.OnClick; - - receiver.mouseTarget = ""; - } } #endif From 5d055dfdd2a37d1b7e77bd95a0498a2b3a101bbb Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 00:29:28 +0200 Subject: [PATCH 23/53] Made a single Animation Component handle all animations on an object again changes to the MouseListener means that we no longer need multiple animation components on the same object to achieve complex trigger animations. each AnimationProperty can now be triggered by an individual target --- CommunityEntity.UI.Animation.cs | 1422 ++++++++++++++++++------------- 1 file changed, 813 insertions(+), 609 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index a33caa5..8c4c9d5 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -12,672 +12,876 @@ public partial class CommunityEntity { - public class Animation : FacepunchBehaviour, IMouseReceiver + public class Animation : FacepunchBehaviour { - // properties by trigger - public Dictionary> properties = new Dictionary>(){ - ["OnCreate"] = new List(), - ["OnDestroy"] = new List(), - ["OnHoverEnter"] = new List(), - ["OnHoverExit"] = new List(), - ["OnClick"] = new List() - }; - - public string _mouseTarget = ""; - - public string mouseTarget{ - get => _mouseTarget; - set => _mouseTarget = value; - } - - public UnityEngine.UI.Graphic cachedGraphic; - public RectTransform cachedRect; - public bool shouldRaycast = false; - - public bool isHidden = false; - public bool isKilled = false; - - public bool ValidTrigger(string trigger) => properties.ContainsKey(trigger); - - public bool HasForTrigger(string trigger) => ValidTrigger(trigger) && properties[trigger].Count > 0; - - public void StartAnimation(){ - CacheGraphicComponent(); - StartByTrigger("OnCreate"); - } - - public void StartByTrigger(string trigger){ - if(!ValidTrigger(trigger)) return; + + #region Fields + + public static List reusableList = new List(); + + public static IEnumerator emptyEnumerator = new System.Object[0].GetEnumerator(); + + // properties by trigger + public Dictionary> properties = new Dictionary>(){ + ["OnCreate"] = new List(), + ["OnDestroy"] = new List(), + ["OnHoverEnter"] = new List(), + ["OnHoverExit"] = new List(), + ["OnDrag"] = new List(), + ["OnDrop"] = new List(), + ["OnClick"] = new List(), + }; + + // a record of all Triggers handled + public List targets = new List(); + + // cached relevant components + public UnityEngine.UI.Graphic graphic; + public RectTransform rt; + public CanvasGroup group; + + // flags + public bool isHidden = false; + public bool isKilled = false; + public bool initialized = false; + + #endregion + + #region Core + + // sets up the Animation component, Attaching Triggers & starting Animations + public void Init(){ + CacheComponents(); + AttachTriggers(properties["OnHoverEnter"]); + AttachTriggers(properties["OnHoverExit"]); + AttachTriggers(properties["OnClick"]); + AttachTriggers(properties["OnDrag"]); + AttachTriggers(properties["OnDrop"]); + + StartByTrigger("OnCreate"); + initialized = true; + } + + public void StartProperty(AnimationProperty prop){ + prop.anim = this; + if(prop.routine == null) + prop.routine = StartCoroutine(prop.Animate()); + } + + public void RemoveProperty(AnimationProperty property){ + if(string.IsNullOrEmpty(property.trigger) || !ValidTrigger(property.trigger)) + return; + + properties[property.trigger].Remove(property); + } + + private void OnDestroy(){ + if(!isKilled) + Kill(true); + } + + public void Kill(bool destroyed = false) + { + // mark as killed & clean up + isKilled = true; + StopByTrigger("OnCreate"); + StopByTrigger("OnHoverEnter"); + StopByTrigger("OnHoverExit"); + StopByTrigger("OnDrag"); + StopByTrigger("OnDrop"); + + if(destroyed) + return; + + // determine duration of all OnDestroy durations to delay the actual destroying + float killDelay = 0f; + foreach(var prop in properties["OnDestroy"]) + { + float totalDelay = prop.duration + prop.delay; + if(killDelay < totalDelay) killDelay = totalDelay; + StartProperty(prop); + } + Invoke(new Action(() => Object.Destroy(gameObject)), killDelay + 0.05f); + } + + #endregion + + #region Trigger + + public bool ValidTrigger(string trigger) => properties.ContainsKey(trigger); + + public bool HasForTrigger(string trigger) => ValidTrigger(trigger) && properties[trigger].Count > 0; + + public void StartByTrigger(string trigger, string panel = null){ + if(!ValidTrigger(trigger)) + return; + for(int i = 0; i < properties[trigger].Count; i++){ + if(panel == null || properties[trigger][i].target == panel) + StartProperty(properties[trigger][i]); + } + } + + public void StopByTrigger(string trigger, string panel = null){ + if(!ValidTrigger(trigger)) + return; + for(int i = 0; i < properties[trigger].Count; i++){ - StartProperty(properties[trigger][i]); - } - } - - public void StartProperty(AnimationProperty prop){ - prop.anim = this; - prop.routine = StartCoroutine(prop.Animate()); + if(panel != null && properties[trigger][i].target != panel) + return; + + if(properties[trigger][i].routine != null) + StopCoroutine(properties[trigger][i].routine); + } + } + + // returns true if the trigger relies on a MouseListener component + public bool TriggerNeedsListener(string trigger){ + return trigger switch{ + "OnHoverEnter" => true, + "OnHoverExit" => true, + "OnClick" => true, + _ => false + }; } - - public void StopByTrigger(string trigger){ - if(!ValidTrigger(trigger)) return; - for(int i = 0; i < properties[trigger].Count; i++){ - if(properties[trigger][i].routine != null) StopCoroutine(properties[trigger][i].routine); + + // Attaches trigger events to any panels needed by the properties in the list + public void AttachTriggers(List properties){ + if(properties.Count == 0) + return; + + GameObject go; + for(int i = 0; i < properties.Count; i++){ + string target = properties[i].target; + if(target == null || targets.Contains(target)) + continue; + + if(target == this.gameObject.name) + go = this.gameObject; + else + go = CommunityEntity.ClientInstance.FindPanel(target); + + if(go == null) + continue; + + AttachTo(go, TriggerNeedsListener(properties[i].trigger)); + targets.Add(go.name); } } - - // this method handles 2 things: - // stop any currently running animations and - // if the object isnt allready destroyed, trigger the OnDestroy animation and kill the gameobject afterwards - public void Kill(bool destroyed = false) - { - isKilled = true; - // stop all triggers except onDestroy - StopByTrigger("OnCreate"); - StopByTrigger("OnHoverEnter"); - StopByTrigger("OnHoverExit"); - float killDelay = 0f; - // out early if the game object allready got destroyed - if(destroyed) return; - - foreach(var prop in properties["OnDestroy"]) - { - float totalDelay = prop.duration + prop.delay; - if(killDelay < totalDelay) killDelay = totalDelay; - StartProperty(prop); + + // attaches events to a Draggable & MouseListener if needed + private void AttachTo(GameObject go, bool addListener = false){ + if(go == null) + return; + + var listener = go.GetComponent(); + if(listener == null && addListener) + listener = go.AddComponent(); + + if(listener != null){ + listener.onEnter += this.OnHoverEnter; + listener.onExit += this.OnHoverExit; + listener.onClick += this.OnClick; } - - Invoke(new Action(() => Object.Destroy(gameObject)), killDelay + 0.05f); - } - - private void OnDestroy(){ - if(!isKilled) Kill(true); - } - - public void CacheGraphicComponent(){ - cachedGraphic = gameObject.GetComponent(); - cachedRect = gameObject.GetComponent(); - shouldRaycast = (cachedGraphic != null ? cachedGraphic.raycastTarget : false); + + var drag = go.GetComponent(); + if(drag == null) + return; + + drag.onDragCallback += this.OnDrag; + drag.onDropCallback += this.OnDrop; } - - // used with opacity & color animations - // checks if the graphic's alpha is set to 0f & prevents it from intercepting mouse clicks & sets it to Hidden - public void TryToggleGraphic(float delay = 0f){ - if(cachedGraphic == null) return; - - var a = new Action(() => { - bool hidden = cachedGraphic.canvasRenderer.GetAlpha() > 0f; - cachedGraphic.canvasRenderer.cullTransparentMesh = !hidden; - isHidden = !hidden; - cachedGraphic.raycastTarget = hidden; - }); - if(delay <= 0f) a(); - else Invoke(a, delay); + + // Events + public void OnDrag(string panel){ + if(isKilled) + return; + StopByTrigger("OnDrop", panel); + StartByTrigger("OnDrag"); } - - public void OnHoverEnter(){ - if(isKilled) return; - StopByTrigger("OnHoverExit"); - StartByTrigger("OnHoverEnter"); - } - - public void OnHoverExit(){ - if(isKilled) return; - StopByTrigger("OnHoverEnter"); - StartByTrigger("OnHoverExit"); - } - - public void OnClick(){ - if(isKilled) return; - StopByTrigger("OnClick"); - StartByTrigger("OnClick"); - } - - public void RemoveProperty(AnimationProperty property){ - if(string.IsNullOrEmpty(property.trigger) || !ValidTrigger(property.trigger)) + + public void OnDrop(string panel){ + if(isKilled) return; - - properties[property.trigger].Remove(property); - } - } - - public struct AnimationProperty - { - public float duration; - public float delay; - public int repeat; - public float repeatDelay; - public string easing; - public string type; - public AnimationProperty.AnimationValue animValue; - public string trigger; - - public AnimationProperty(string easing = "linear") : this() { - easing = easing; - } - public Animation anim; + StopByTrigger("OnDrag", panel); + StartByTrigger("OnDrop", panel); + } + + public void OnHoverEnter(string panel){ + if(isKilled) + return; + StopByTrigger("OnHoverExit", panel); + StartByTrigger("OnHoverEnter", panel); + } - public Coroutine routine; + public void OnHoverExit(string panel){ + if(isKilled) + return; - public int completedRounds; + StopByTrigger("OnHoverEnter", panel); + StartByTrigger("OnHoverExit", panel); + } - // Launches the animation, keeping track of loops if its set to repeat - public IEnumerator Animate() - { - completedRounds = 0; // reset completedRounds on restart - if(animValue == null || animValue.to.Count == 0){ - Debug.LogWarning($"Animation of type {type} for {anim.gameObject.name} failed to execute - no from/to values provided"); - anim.RemoveProperty(this); - yield break; - } + public void OnClick(string panel){ + if(isKilled) + return; - // initial delay - if(delay > 0f) yield return new WaitForSeconds(delay); + StopByTrigger("OnClick", panel); + StartByTrigger("OnClick", panel); + } - do - { - yield return AnimateProperty(); - completedRounds++; - if(repeatDelay > 0f) yield return new WaitForSeconds(repeatDelay); - else yield return null; - } - while(repeat < 0 || (repeat > 0 && completedRounds <= repeat)); + #endregion - // this animation wont get triggered again, so remove it - if(trigger == "OnCreate") - anim.RemoveProperty(this); - } + #region Helpers - // Parses the from & to values and Launches the individual animation - // Adding new animations can be achieved by Adding cases to the switch statement - public IEnumerator AnimateProperty() - { - // for use in lambdas, would otherwise trigger error CS1673 - var prop = this; - switch(type){ - case "Opacity": - { - // needs a reference to the graphic & atleast 1 value in the to value - if(!anim.cachedGraphic || animValue.to.Count < 1) break; - - // try to enable the graphic after 0.1 seconds if: - // - the from value is higher than 0 or - // - the graphic is currently hidden but will go above 0 opacity during the animation - if((animValue.from.Count != 0 && animValue.from.TryGet(0) > 0f) || anim.isHidden && animValue.to.TryGet(0) > 0f) - anim.TryToggleGraphic(0.1f); - - animValue.initial = new DynamicVector(anim.cachedGraphic.canvasRenderer.GetAlpha()); - - // force applies the value, meaning Opacity & Color animations may clash when multiple are setting the opacity - animValue.apply = (DynamicVector value) => { - prop.anim.cachedGraphic.canvasRenderer.SetAlpha(value.TryGet(0)); - }; - - // calling this wont actually start a tween, but it will stop any running color or alpha tweens, this is vital for stopping any potential fadeIns & Outs (otherwise the the tween and our own Animation will intersect) - anim.cachedGraphic.CrossFadeAlpha(animValue.initial.TryGet(0), 0f, true); - - if(animValue.to.TryGet(0) <= 0f) anim.DisableGraphic(duration); - //Use Absolute mode for these Interpolations, as it wont need the initial opacity for any calculations - return InterpolateValue(animValue, duration, easing); - } - case "Color": - { - // needs a reference to the graphic & atleast 4 values in the to value - if(!anim.cachedGraphic || animValue.to.Count < 4) break; - - // enables the graphic if: - // - the from color's alpha is higher than 0 or - // - the graphic is currently hidden but will go above 0 opacity during the animation - if((animValue.from.Count != 0 && animValue.from.TryGet(3) > 0f) || anim.isHidden && animValue.to.TryGet(3) > 0f) - anim.TryToggleGraphic(0.1f); - - animValue.initial = new DynamicVector(anim.cachedGraphic.canvasRenderer.GetColor()); - - // force applies the value, meaning Opacity & Color animations may clash when multiple are setting the opacity - animValue.apply = (DynamicVector value) => { - prop.anim.cachedGraphic.canvasRenderer.SetColor(value.ToColor()); - }; - - // Same as with alpha, stopping any tweens - anim.cachedGraphic.CrossFadeColor(animValue.initial.ToColor(), 0f, true, true); - - if(animValue.to.TryGet(3) <= 0f) anim.DisableGraphic(duration); - //Use Absolute mode for these Interpolations, as it wont need the initial color for any calculations - return InterpolateValue(animValue, duration, easing, true); - } - case "Scale": - { - // needs a reference to the rectTransform & atleast 2 values in the to value - if(!anim.cachedRect || animValue.to.Count < 2) break; - - if(!anim.cachedRect) break; - - animValue.initial = new DynamicVector(anim.cachedRect.localScale); - - // force applies the value, meaning multiple Scale animations running at the same time will clash - animValue.apply = (DynamicVector value) => { - // we convert to a Vector3 even though the DynamicVector only holds 2 floats - // this is fine because the z value will be set to 0f, which isnt used for the scale of rectTransforms - prop.anim.cachedRect.localScale = value.ToVector3(); - }; - return InterpolateValue(animValue, duration, easing); - } - case "Translate": - { - // needs a reference to the rectTransform & atleast 2 values in the to value - if(!anim.cachedRect || animValue.to.Count < 2) break; - - animValue.initial = new DynamicVector(); - animValue.last = new DynamicVector(); - - // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position - animValue.apply = (DynamicVector value) => { - DynamicVector diff = value - prop.animValue.last; - prop.anim.cachedRect.anchorMin += diff.ToVector2(); - prop.anim.cachedRect.anchorMax += diff.ToVector2(); - prop.animValue.last += diff; - }; - - // Use Relative mode for these Interpolations, as it will take the initial position into account for the translation - return InterpolateValue(animValue, duration, easing, false); - } - case "TranslatePX": - { - // needs a reference to the rectTransform & atleast 4 values in the to value - if(!anim.cachedRect || animValue.to.Count < 4) break; - - animValue.initial = new DynamicVector(); - animValue.last = new DynamicVector(); - - // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position - animValue.apply = (DynamicVector value) => { - DynamicVector diff = value - prop.animValue.last; - prop.anim.cachedRect.offsetMin += diff.ToVector2(0); - prop.anim.cachedRect.offsetMax += diff.ToVector2(0); - prop.animValue.last += diff; - }; - - // Use Relative mode for these Interpolations, as it will take the initial position into account for the translation - return InterpolateValue(animValue, duration, easing, false); - } - case "Rotate": - { - // needs a reference to the rectTransform & atleast 3 values in the to value - if(!anim.cachedRect || animValue.to.Count < 3) break; - - animValue.initial = new DynamicVector(anim.cachedRect.rotation.eulerAngles); - - // force applies the value, meaning multiple Rotate animations running at the same time will clash - animValue.apply = (DynamicVector value) => { - prop.anim.cachedRect.rotation = Quaternion.Euler(value.ToVector3()); - }; - - //Use Absolute mode for these Interpolations, as it wont need the initial rotation for any calculations - return InterpolateValue(animValue, duration, easing, true); - } - case "MoveTo": - { - if(!anim.cachedRect) break; - - animValue.initial = new DynamicVector(anim.cachedRect.anchorMin); - animValue.initial.Add(anim.cachedRect.anchorMax); - animValue.last = animValue.initial; - - // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position - animValue.apply = (DynamicVector value) => { - DynamicVector diff = value - prop.animValue.last; - prop.anim.cachedRect.anchorMin += diff.ToVector2(0); - prop.anim.cachedRect.anchorMax += diff.ToVector2(2); // skip the first 2 values - prop.animValue.last += diff; - }; - - //Use Absolute mode for these Interpolations, as the from & to values supplied are absolute values - return InterpolateValue(animValue, duration, easing, true); - } - case "MoveToPX": - { - if(!anim.cachedRect) break; - - animValue.initial = new DynamicVector(anim.cachedRect.offsetMin); - animValue.initial.Add(anim.cachedRect.offsetMax); - animValue.last = animValue.initial; - - // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position - animValue.apply = (DynamicVector value) => { - DynamicVector diff = value - prop.animValue.last; - prop.anim.cachedRect.offsetMin += diff.ToVector2(0); - prop.anim.cachedRect.offsetMax += diff.ToVector2(2); // skip the first 2 values - prop.animValue.last += diff; - }; - - //Use Absolute mode for these Interpolations, as the from & to values supplied are absolute values - return InterpolateValue(animValue, duration, easing, true); - } - } + public void CacheComponents(){ + graphic = gameObject.GetComponent(); + rt = gameObject.GetComponent(); + if(!group) + group = gameObject.GetComponent(); + } + + public void TryToggleGraphic(float delay = 0f){ + if(graphic == null) return; + + var a = new Action(() => { + bool visible = GetAlpha() > 0f; + if(group == null) + graphic.canvasRenderer.cullTransparentMesh = visible; + isHidden = !visible; + SetRaycasting(visible); + }); + if(delay <= 0f) a(); + else Invoke(a, delay); + } - // remove this animation property if there is no valid case or the selected case fails - Debug.LogWarning($"Animation for {anim.gameObject.name} failed to execute - invalid to value [{animValue.to}] for animation of type {type}"); - anim.RemoveProperty(this); - repeat = 0; // ensure the animation wont repeat - // Return an empty enumerator so the coroutine finishes - // unsure if this could be a cached enumerator instead - return new System.Object[0].GetEnumerator(); + public float GetAlpha(){ + if(group != null) + return group.alpha; + + return graphic.canvasRenderer.GetAlpha(); + } + // uses the canvasGroup if found, otherwise the graphic + public void SetAlpha(float alpha){ + if(group != null) + group.alpha = alpha; + else + graphic.canvasRenderer.SetAlpha(alpha); + } + // uses the canvasGroup if found, otherwise the graphic + public void SetRaycasting(bool wants){ + if(group != null) + group.blocksRaycasts = wants; + else + graphic.raycastTarget = wants; } - // manipulates the input based on a preset easing function or a custom Bezier curve - // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve - // NOTE: the return value is unclamped as this allowes bezier curves with under- and overshoot to work - public float Ease(string type, float input){ - switch(type){ - case "Linear": return input; - case "EaseIn": return input * input; - case "EaseOut": return 1f - ((1f - input) * (1f - input)); - case "EaseInOut": return Mathf.Lerp(input * input, 1f - ((1f - input) * (1f - input)), input); - default: // Custom Easing - { - var split = type.Split(' '); - float X1, Y1, X2, Y2; - if(split.Length < 4) return input; - if( - !float.TryParse(split[0], out X1) || !float.TryParse(split[1], out Y1) || - !float.TryParse(split[2], out X2) || !float.TryParse(split[3], out Y2) - ) return input; - - return BezierEasing.Ease(X1, Y1, X2, Y2, input); - } + // Compatability for old FadeIn method + public static void AddFadeIn(GameObject go, float duration, bool addCanvasGroup){ + if(duration == 0f) + return; + + var anim = go.GetComponent(); + if(anim == null) + anim = go.AddComponent(); + + var prop = new AnimationProperty(){ + animValue = new AnimationProperty.AnimationValue(){ + from = new AnimationProperty.DynamicVector(0f), + to = new AnimationProperty.DynamicVector(1f) + }, + type = "Opacity", + duration = duration + }; + + anim.properties["OnCreate"].Add(prop); + + if(anim.initialized){ + if(anim.group == null && addCanvasGroup) + anim.group = go.AddComponent(); + anim.StartProperty(prop); + } else if(addCanvasGroup) { + anim.group = go.GetComponent() ?? go.AddComponent(); } } - // Interpolates an AnimationValue over the duration with the easing specified - // the absolute arguement specifies if the animation value should be handled as a relative value or an absolute value - // absolute = false: the objects initial value gets used as a 0 point, with the from and to values being relative to the initial value - // absolute = true: the object's initial value does not get factored in and the from and to values are seen as absolute - public IEnumerator InterpolateValue(AnimationValue value, float duration, string easing, bool absolute = true){ - float time = 0f; - DynamicVector current; - DynamicVector start = value.from.Count == 0 ? value.initial : (absolute ? value.from : value.initial + value.from); - - // Immediately apply the start value if present - if(value.from.Count != 0){ - value.apply(start); - value.initial = start; - } - DynamicVector end = (absolute ? value.to : value.initial + value.to); + // Compatability for old FadeOut method + public static void AddFadeOut(GameObject go, float duration, bool addCanvasGroup){ + if(duration == 0f) + return; - while(time < duration){ - current = DynamicVector.LerpUnclamped(start, end, Ease(easing, time / duration)); - value.apply(current); - time += Time.deltaTime; - yield return null; + var anim = go.GetComponent(); + if(anim == null) + anim = go.AddComponent(); + + var prop = new AnimationProperty(){ + animValue = new AnimationProperty.AnimationValue(){ + to = new AnimationProperty.DynamicVector(0f) + }, + type = "Opacity", + duration = duration + }; + + anim.properties["OnDestroy"].Add(prop); + + if(anim.initialized){ + if(anim.group == null && addCanvasGroup) + anim.group = go.AddComponent(); + } else if(addCanvasGroup) { + anim.group = go.AddComponent(); } - value.apply(end); } - // Generalizes the values for an AnimationProperty - public class AnimationValue { - // gets set just before InterpolateValue is called - public DynamicVector initial; - // used for relative animations - public DynamicVector last; - // the from value can be optional - public DynamicVector from; - public DynamicVector to; - // gets called during interpolation with the arguement being the current value. - public Action apply; - - public AnimationValue(string sourceTo, string sourceFrom = null){ - this.from = ParseFromString(sourceFrom); - this.to = ParseFromString(sourceTo); - } - // based on the VectorEx parse methods, but in a dynamic list style - public DynamicVector ParseFromString(string source){ - var values = new DynamicVector(); - if(string.IsNullOrEmpty(source)) return values; - var split = source.Split(' '); - if(split.Length == 0) return values; - for(int i = 0; i < split.Length; i++){ - float temp; - float.TryParse(split[i], out temp); - values.Add(temp); - if(values.Count == values.Capacity) break; - } - return values; + public static void AddPendingAnim(Animation anim){ + reusableList.Add(anim); + } + + public static void InitPendingAnims(){ + for(int i = 0; i < reusableList.Count; i++){ + reusableList[i]?.Init(); } + reusableList.Clear(); } - // a struct that mimics Vector2/3/4/n, previously used a list to hold values, but lists dont work as structs - // turning this into a struct makes alot of sense, thanks for the insights @WheteThunger - // its still styled as a list with the Add Methods to simplify working with it in animation code - public struct DynamicVector { + #endregion + } - // need it to hold more than 4? add a _valueN and adjust the Capacity, indexer & Clear method - private float _value0; - private float _value1; - private float _value2; - private float _value3; + // this could be a class if the allocation is insignificant + public struct AnimationProperty + { + public float duration; + public float delay; + public int repeat; + public float repeatDelay; + public string easing; + public string type; + public AnimationProperty.AnimationValue animValue; + public string target; + public string trigger; + + public AnimationProperty(string easing = "linear") : this() { + easing = easing; + } - public int Count; + public Animation anim; - public int Capacity => 4; + public Coroutine routine; - public float this[int i]{ - get { - switch(i){ - case 0: return _value0; break; - case 1: return _value1; break; - case 2: return _value2; break; - case 3: return _value3; break; - default: throw new IndexOutOfRangeException(); - } - } - set { - switch(i){ - case 0: _value0 = value; break; - case 1: _value1 = value; break; - case 2: _value2 = value; break; - case 3: _value3 = value; break; - default: throw new IndexOutOfRangeException(); - } - } - } + public int completedRounds; - // Constructors for common values that simply forward it to the respective Add function - public DynamicVector(Vector4 vec) : this() => Add(vec); - public DynamicVector(Color col) : this() => Add(col); - public DynamicVector(Vector3 vec) : this() => Add(vec); - public DynamicVector(Vector2 vec) : this() => Add(vec); - public DynamicVector(float num) : this() => Add(num); + // Launches the animation, keeping track of loops if its set to repeat + public IEnumerator Animate() + { + completedRounds = 0; // reset completedRounds on restart + if(animValue == null || animValue.to.Count == 0){ + Debug.LogWarning($"Animation of type {type} for {anim.gameObject.name} failed to execute - no from/to values provided"); + anim.RemoveProperty(this); + yield break; + } + + // initial delay + if(delay > 0f) yield return new WaitForSeconds(delay); + + do + { + yield return AnimateProperty(); + completedRounds++; + if(repeatDelay > 0f) yield return new WaitForSeconds(repeatDelay); + else yield return null; + } + while(repeat < 0 || (repeat > 0 && completedRounds <= repeat)); + + // this animation wont get triggered again, so remove it + if(trigger == "OnCreate") + anim.RemoveProperty(this); + } - public void Add(float num) => this[Count++] = num; + // Parses the from & to values and Launches the individual animation + // Adding new animations can be achieved by Adding cases to the switch statement + public IEnumerator AnimateProperty() + { + // for use in lambdas, would otherwise trigger error CS1673 + var prop = this; + switch(type){ + case "Opacity": + { + // needs a reference to the graphic & atleast 1 value in the to value + if((!anim.graphic && !anim.group) || animValue.to.Count < 1) break; + + // try to enable the graphic after 0.1 seconds if: + // - the from value is higher than 0 or + // - the graphic is currently hidden but will go above 0 opacity during the animation + if((animValue.from.Count != 0 && animValue.from.TryGet(0) > 0f) || anim.isHidden && animValue.to.TryGet(0) > 0f) + anim.TryToggleGraphic(0.1f); + + animValue.initial = new DynamicVector(anim.graphic.canvasRenderer.GetAlpha()); + + // force applies the value, meaning Opacity & Color animations may clash when multiple are setting the opacity + animValue.apply = (DynamicVector value) => { + prop.anim.SetAlpha(value.TryGet(0)); + }; + + // disables the graphic at the end of the animation if the end opacity is 0 + if(animValue.to.TryGet(0) <= 0f) anim.TryToggleGraphic(duration); + + //Use Absolute mode for these Interpolations, as it wont need the initial color for any calculations + return InterpolateValue(animValue, duration, easing, true); + } + case "Color": + { + // needs a reference to the graphic & atleast 4 values in the to value + if(!anim.graphic || animValue.to.Count < 4) break; + + // enables the graphic if: + // - the from color's alpha is higher than 0 or + // - the graphic is currently hidden but will go above 0 opacity during the animation + if((animValue.from.Count != 0 && animValue.from.TryGet(3) > 0f) || anim.isHidden && animValue.to.TryGet(3) > 0f) + anim.TryToggleGraphic(0.1f); + + animValue.initial = new DynamicVector(anim.graphic.canvasRenderer.GetColor()); + + // force applies the value, meaning Opacity & Color animations may clash when multiple are setting the opacity + animValue.apply = (DynamicVector value) => { + prop.anim.graphic.canvasRenderer.SetColor(value.ToColor()); + }; + + if(animValue.to.TryGet(3) <= 0f) anim.TryToggleGraphic(duration); + + + //Use Absolute mode for these Interpolations, as it wont need the initial color for any calculations + return InterpolateValue(animValue, duration, easing); + } + case "Scale": + { + // needs a reference to the rectTransform & atleast 2 values in the to value + if(!anim.rt || animValue.to.Count < 2) break; + + if(!anim.rt) break; + + animValue.initial = new DynamicVector(anim.rt.localScale); + + // force applies the value, meaning multiple Scale animations running at the same time will clash + animValue.apply = (DynamicVector value) => { + // we convert to a Vector3 even though the DynamicVector only holds 2 floats + // this is fine because the z value will be set to 0f, which isnt used for the scale of rectTransforms + prop.anim.rt.localScale = value.ToVector3(); + }; + + //Use Absolute mode for these Interpolations, as it wont need the initial scale for any calculations + return InterpolateValue(animValue, duration, easing); + } + case "Translate": + { + // needs a reference to the rectTransform & atleast 2 values in the to value + if(!anim.rt || animValue.to.Count < 2) break; + + animValue.initial = new DynamicVector(); + animValue.last = new DynamicVector(); + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position + animValue.apply = (DynamicVector value) => { + DynamicVector diff = value - prop.animValue.last; + prop.anim.rt.anchorMin += diff.ToVector2(); + prop.anim.rt.anchorMax += diff.ToVector2(); + prop.animValue.last += diff; + }; + // Use Relative mode for these Interpolations, as it will take the initial position into account for the translation + return InterpolateValue(animValue, duration, easing, false); + } + case "TranslatePX": + { + // needs a reference to the rectTransform & atleast 4 values in the to value + if(!anim.rt || animValue.to.Count < 4) break; + + animValue.initial = new DynamicVector(); + animValue.last = new DynamicVector(); + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position + animValue.apply = (DynamicVector value) => { + DynamicVector diff = value - prop.animValue.last; + prop.anim.rt.offsetMin += diff.ToVector2(0); + prop.anim.rt.offsetMax += diff.ToVector2(0); + prop.animValue.last += diff; + }; + // Use Relative mode for these Interpolations, as it will take the initial position into account for the translation + return InterpolateValue(animValue, duration, easing, false); + } + case "Rotate": + { + // needs a reference to the rectTransform & atleast 3 values in the to value + if(!anim.rt || animValue.to.Count < 3) break; + + animValue.initial = new DynamicVector(anim.rt.rotation.eulerAngles); + // force applies the value, meaning multiple Rotate animations running at the same time will clash + animValue.apply = (DynamicVector value) => { + prop.anim.rt.rotation = Quaternion.Euler(value.ToVector3()); + }; + + //Use Absolute mode for these Interpolations, as it wont need the initial rotation for any calculations + return InterpolateValue(animValue, duration, easing, true); + } + case "MoveTo": + { + if(!anim.rt) break; + + animValue.initial = new DynamicVector(anim.rt.anchorMin); + animValue.initial.Add(anim.rt.anchorMax); + animValue.last = animValue.initial; + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position + animValue.apply = (DynamicVector value) => { + DynamicVector diff = value - prop.animValue.last; + prop.anim.rt.anchorMin += diff.ToVector2(0); + prop.anim.rt.anchorMax += diff.ToVector2(2); // skip the first 2 values + prop.animValue.last += diff; + }; + //Use Absolute mode for these Interpolations, as the from & to values supplied are absolute values + return InterpolateValue(animValue, duration, easing, true); + } + case "MoveToPX": + { + if(!anim.rt) break; + + animValue.initial = new DynamicVector(anim.rt.offsetMin); + animValue.initial.Add(anim.rt.offsetMax); + animValue.last = animValue.initial; + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position + animValue.apply = (DynamicVector value) => { + DynamicVector diff = value - prop.animValue.last; + prop.anim.rt.offsetMin += diff.ToVector2(0); + prop.anim.rt.offsetMax += diff.ToVector2(2); // skip the first 2 values + prop.animValue.last += diff; + }; + //Use Absolute mode for these Interpolations, as the from & to values supplied are absolute values + return InterpolateValue(animValue, duration, easing, true); + } + } + + // remove this animation property of there is no valid case or the selected case fails + Debug.LogWarning($"Animation has invalid values\ngameObject: {anim.gameObject.name}\nparent: {anim.transform.parent.gameObject.name}\ntype: {type}\nfrom value: \"{animValue.from}\"\nto value: \"{animValue.to}\"\ngraphic: {anim.graphic?.ToString() ?? "null"}\ncanvasGroup: {anim.group?.ToString() ?? "null"}"); + anim.RemoveProperty(this); + repeat = 0; // ensure the animation wont repeat + // Return an empty enumerator so the coroutine finishes + return Animation.emptyEnumerator; + } - public void Add(Color col){ - Add(col.r); - Add(col.g); - Add(col.b); - Add(col.a); - } + // manipulates the input based on a preset easing function or a custom Bezier curve + // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve + // NOTE: the return value is unclamped as this allowes bezier curves with under- and overshoot to work + public float Ease(string type, float input){ + switch(type){ + case "Linear": return input; + case "EaseIn": return input * input; + case "EaseOut": return 1f - ((1f - input) * (1f - input)); + case "EaseInOut": return Mathf.Lerp(input * input, 1f - ((1f - input) * (1f - input)), input); + default: // Custom Easing + { + var split = type.Split(' '); + float X1, Y1, X2, Y2; + if(split.Length < 4) return input; + if( + !float.TryParse(split[0], out X1) || !float.TryParse(split[1], out Y1) || + !float.TryParse(split[2], out X2) || !float.TryParse(split[3], out Y2) + ) return input; + + return BezierEasing.Ease(X1, Y1, X2, Y2, input); + } + } + } - public void Add(Vector4 vec){ - Add(vec.x); - Add(vec.y); - Add(vec.z); - Add(vec.w); - } + // Interpolats an AnimationValue over the duration with the easing specified + // the absolute arguement specifies if the animation should be handled as a relative animation or an absolute animation + // absolute = false: the objects initial value gets used as a 0 point, with the from and to values being relative to the initial value + // absolute = true: the object's initial value does not get factored in and the from and to values are seen as absolute + public IEnumerator InterpolateValue(AnimationValue value, float duration, string easing, bool absolute = true){ + float time = 0f; + DynamicVector current; + DynamicVector start = value.from.Count == 0 ? value.initial : (absolute ? value.from : value.initial + value.from); + + // Immediately apply the start value if present + if(value.from.Count != 0){ + value.apply(start); + value.initial = start; + } + DynamicVector end = (absolute ? value.to : value.initial + value.to); + + while(time < duration){ + current = DynamicVector.LerpUnclamped(start, end, Ease(easing, time / duration)); + value.apply(current); + time += Time.deltaTime; + yield return null; + } + value.apply(end); + } - public void Add(Vector3 vec){ - Add(vec.x); - Add(vec.y); - Add(vec.z); - } + // Generalizes the values for an AnimationProperty + public class AnimationValue { + // gets set just before InterpolateValue is called + public DynamicVector initial; + // used for relative animations + public DynamicVector last; + // the from value can be optional + public DynamicVector from; + public DynamicVector to; + // gets called during interpolation with the arguement being the current value. + public Action apply; + + public AnimationValue(){ + + } + + public AnimationValue(string sourceTo, string sourceFrom = null){ + this.from = ParseFromString(sourceFrom); + this.to = ParseFromString(sourceTo); + } + public DynamicVector ParseFromString(string source){ + var values = new DynamicVector(); + if(string.IsNullOrEmpty(source)) return values; + var split = source.Split(' '); + if(split.Length == 0) return values; + for(int i = 0; i < split.Length; i++){ + float temp; + if(float.TryParse(split[i], out temp)) + values.Add(temp); + if(values.Count == values.Capacity) break; + } + return values; + } + } - public void Add(Vector2 vec){ - Add(vec.x); - Add(vec.y); - } - // the ToVectorX & ToColor Functions have an optional offset arguement that shifts the starting point of the list when turning it into the vector - // this is useful for easily splitting a Vector4 into 2 Vector2s, like during the MoveTo/PX where the from/to values are Vector4s but the end result needs to be split into AnchorMin and AnchorMax Vector2s - public Vector4 ToVector4(int offset = 0){ - return new Vector4( - TryGet(offset), - TryGet(offset + 1), - TryGet(offset + 2), - TryGet(offset + 3) - ); - } - public Color ToColor(int offset = 0){ - return new Color( - TryGet(offset), - TryGet(offset + 1), - TryGet(offset + 2), - TryGet(offset + 3) - ); - } - public Vector3 ToVector3(int offset = 0){ - return new Vector3( - TryGet(offset), - TryGet(offset + 1), - TryGet(offset + 2) - ); - } - public Vector2 ToVector2(int offset = 0){ - return new Vector2( - TryGet(offset), - TryGet(offset + 1) - ); - } - // gets the float at the index if it exists, otherwise returns 0 - public float TryGet(int index, float defaultValue = 0f){ - if(index < 0 || index >= this.Count) - return defaultValue; - return this[index]; - } + // a struct that mimics Vector2/3/4/n, previously used a list to hold values, but lists dont work as structs + // turning this into a struct makes alot of sense, thanks for the insights @WhiteThunder + public struct DynamicVector { - public void Clear(){ - _value0 = 0f; - _value1 = 0f; - _value2 = 0f; - _value3 = 0f; - Count = 0; - } + // need it to hold more than 4? add a _valueN and adjust the Capacity, indexer & Clear method + private float _value0; + private float _value1; + private float _value2; + private float _value3; - public static DynamicVector Lerp(DynamicVector from, DynamicVector to, float t){ - t = Mathf.Clamp01(t); - return LerpUnclamped(from, to, t); - } + public int Count; - public static DynamicVector LerpUnclamped(DynamicVector from, DynamicVector to, float t){ - DynamicVector result = new DynamicVector(); - int HigherCount = (from.Count > to.Count ? from.Count : to.Count); - for(int i = 0; i < HigherCount; i++){ - result.Add(from.TryGet(i) + (to.TryGet(i) - from.TryGet(i)) * t); - } - return result; - } + public int Capacity => 4; - public static DynamicVector operator +(DynamicVector lhs, DynamicVector rhs){ - DynamicVector result = new DynamicVector(); - int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); - for(int i = 0; i < HigherCount; i++){ - result.Add(lhs.TryGet(i) + rhs.TryGet(i)); - } - return result; - } + public float this[int i]{ + get { + switch(i){ + case 0: return _value0; break; + case 1: return _value1; break; + case 2: return _value2; break; + case 3: return _value3; break; + default: throw new IndexOutOfRangeException(); + } + } + set { + switch(i){ + case 0: _value0 = value; break; + case 1: _value1 = value; break; + case 2: _value2 = value; break; + case 3: _value3 = value; break; + default: throw new IndexOutOfRangeException(); + } + } + } + public DynamicVector(Vector4 vec) : this() => Add(vec); + public DynamicVector(Color col) : this() => Add(col); + public DynamicVector(Vector3 vec) : this() => Add(vec); + public DynamicVector(Vector2 vec) : this() => Add(vec); + public DynamicVector(float num) : this() => Add(num); + + public void Add(float num) => this[Count++] = num; + + public void Add(Color col){ + Add(col.r); + Add(col.g); + Add(col.b); + Add(col.a); + } + + public void Add(Vector4 vec){ + Add(vec.x); + Add(vec.y); + Add(vec.z); + Add(vec.w); + } + + public void Add(Vector3 vec){ + Add(vec.x); + Add(vec.y); + Add(vec.z); + } + + public void Add(Vector2 vec){ + Add(vec.x); + Add(vec.y); + } + // the ToVectorX & ToColor Functions have an optional offset arguement that shifts the starting point of the list when turning it into the vector + public Vector4 ToVector4(int offset = 0){ + return new Vector4( + TryGet(offset), + TryGet(offset + 1), + TryGet(offset + 2), + TryGet(offset + 3) + ); + } + public Color ToColor(int offset = 0){ + return new Color( + TryGet(offset), + TryGet(offset + 1), + TryGet(offset + 2), + TryGet(offset + 3) + ); + } + public Vector3 ToVector3(int offset = 0){ + return new Vector3( + TryGet(offset), + TryGet(offset + 1), + TryGet(offset + 2) + ); + } + public Vector2 ToVector2(int offset = 0){ + return new Vector2( + TryGet(offset), + TryGet(offset + 1) + ); + } + public float TryGet(int index, float defaultValue = 0f){ + if(index < 0 || index >= this.Count) + return defaultValue; + return this[index]; + } + + public void Clear(){ + _value0 = 0f; + _value1 = 0f; + _value2 = 0f; + _value3 = 0f; + Count = 0; + } + + public static DynamicVector Lerp(DynamicVector from, DynamicVector to, float t){ + t = Mathf.Clamp01(t); + return LerpUnclamped(from, to, t); + } + + public static DynamicVector LerpUnclamped(DynamicVector from, DynamicVector to, float t){ + DynamicVector result = new DynamicVector(); + int HigherCount = (from.Count > to.Count ? from.Count : to.Count); + for(int i = 0; i < HigherCount; i++){ + result.Add(from.TryGet(i) + (to.TryGet(i) - from.TryGet(i)) * t); + } + return result; + } + + public static DynamicVector operator +(DynamicVector lhs, DynamicVector rhs){ + DynamicVector result = new DynamicVector(); + int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); + for(int i = 0; i < HigherCount; i++){ + result.Add(lhs.TryGet(i) + rhs.TryGet(i)); + } + return result; + } + + public static DynamicVector operator -(DynamicVector lhs, DynamicVector rhs){ + DynamicVector result = new DynamicVector(); + int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); + for(int i = 0; i < HigherCount; i++){ + result.Add(lhs.TryGet(i) - rhs.TryGet(i)); + } + return result; + } + + public override string ToString(){ + var sb = new StringBuilder(32); + for(int i = 0; i < this.Count; i++){ + sb.Append(this.TryGet(i)); + sb.Append(' '); + } + return sb.ToString(); + } + } + } - public static DynamicVector operator -(DynamicVector lhs, DynamicVector rhs){ - DynamicVector result = new DynamicVector(); - int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); - for(int i = 0; i < HigherCount; i++){ - result.Add(lhs.TryGet(i) - rhs.TryGet(i)); - } - return result; - } + public List reusablePropertyList = new List(); + + public Animation ParseAnimation(JSON.Object obj, GameObject go = null){ + // if no gameobject is given, attempt to find a name property and find it that way + if(go == null){ + var panel = obj.GetString("name", null); + if (string.IsNullOrEmpty(panel) || !UiDict.TryGetValue(panel, out go)) + return null; + } - // using a string builder here due to the itteration approach - public override string ToString(){ - var sb = new StringBuilder(32); - for(int i = 0; i < this.Count; i++){ - sb.Append(this.TryGet(i)); - sb.Append(' '); - } - return sb.ToString(); + Animation anim = go.GetComponent(); + // create a new animation component if no Animation existed + if(anim == null) + anim = go.AddComponent(); + + foreach(var prop in obj.GetArray("properties")){ + reusablePropertyList.Add(ParseProperty(anim, prop.Obj)); + } + + anim.AttachTriggers(reusablePropertyList); + reusablePropertyList.Clear(); + + // ensures a canvasGroup is added if needed, regardless of if its a new animation or an existing one + if(obj.GetBoolean("addCanvasGroup", false)){ + if(anim.initialized && anim.group == null){ + anim.group = go.AddComponent(); + } else { + anim.group = go.GetComponent() ?? go.AddComponent(); } + } - } - - public Animation ParseAnimation(JSON.Object obj, GameObject go = null){ - // if no gameobject is given attempt to find a name property and find it that way - if(go == null){ - var panel = obj.GetString("name", null); - if (string.IsNullOrEmpty(panel) || !UiDict.TryGetValue(panel, out go)) - return null; - } - - Animation anim = null; - Animation[] animations = go.GetComponents(); - - string mouseTarget = obj.GetString("mouseTarget", ""); - if(animations.Length == 0){ - // do nothing - } else if(!string.IsNullOrEmpty(mouseTarget)){ - anim = animations.FirstOrDefault((animation) => animation.mouseTarget == mouseTarget); - }else{ - anim = animations[0]; - } - - // create a new animation component as no matching component existed - if(anim == null){ - anim = go.AddComponent(); - if(!string.IsNullOrEmpty(mouseTarget)) ScheduleMouseListener(mouseTarget, anim); - } - - foreach(var prop in obj.GetArray("properties")){ - ParseProperty(anim, prop.Obj); - } - return anim; - } - public AnimationProperty ParseProperty(Animation anim, JSON.Object propobj){ - var trigger = propobj.GetString("trigger", "OnCreate"); - - if(!anim.ValidTrigger(trigger)) trigger = "OnCreate"; - string from = propobj.GetString("from", null); - string to = propobj.GetString("to", null); - var animprop = new AnimationProperty{ - duration = propobj.GetFloat("duration", 0f), - delay = propobj.GetFloat("delay", 0f), - repeat = propobj.GetInt("repeat", 0), - repeatDelay = propobj.GetFloat("repeatDelay", 0f), - easing = propobj.GetString("easing", "Linear"), - type = propobj.GetString("type", null), - animValue = new AnimationProperty.AnimationValue(to, from), - trigger = trigger - }; - anim.properties[trigger].Add(animprop); - // if the animation has a cachedGraphic it means StartAnimation has allready been called on it - // manually start the OnCreate Properties in this case - if(anim.cachedGraphic != null && trigger == "OnCreate") anim.StartProperty(animprop); - return animprop; + return anim; + } + + public AnimationProperty ParseProperty(Animation anim, JSON.Object obj){ + var trigger = obj.GetString("trigger", "OnCreate"); + + if(!anim.ValidTrigger(trigger)) + trigger = "OnCreate"; + string from = obj.GetString("from", null); + string to = obj.GetString("to", null); + var animprop = new AnimationProperty{ + duration = obj.GetFloat("duration", 0f), + delay = obj.GetFloat("delay", 0f), + repeat = obj.GetInt("repeat", 0), + repeatDelay = obj.GetFloat("repeatDelay", 0f), + easing = obj.GetString("easing", "Linear"), + target = obj.GetString("target", anim.gameObject.name), + type = obj.GetString("type", null), + animValue = new AnimationProperty.AnimationValue(to, from), + trigger = trigger + }; + anim.properties[trigger].Add(animprop); + + // if the animation has a graphic it means Start has allready been called on it + // manually start the OnCreate Properties in this case + if(anim.initialized && trigger == "OnCreate") + anim.StartProperty(animprop); + return animprop; } - - // RPC function to Add Animations to existing objects - // accepts the same json object that the CreateComponents function does - [RPC_Client] + + // RPC function to Add Animations to existing objects + // accepts the same json object that the CreateComponents function does + [RPC_Client] public void AddAnimation( RPCMessage msg ) { string str = msg.read.StringRaw(); - if (string.IsNullOrEmpty(str)) return; - + + if (string.IsNullOrEmpty(str)) + return; + var json = JSON.Array.Parse( str ); - if (json == null) return; - + if (json == null) + return; + foreach (var value in json){ Animation anim = ParseAnimation(value.Obj); - // if it returns a valid animation that hasnt allready been started, start it - if(anim == null || anim.cachedGraphic != null) - continue; - anim.StartAnimation(); + // if it returns a valid animation that hasnt allready been started, start it + if(anim == null || anim.initialized) + continue; + anim.Init(); } - ApplyMouseListeners(); } } From 4a64bc415d079986245e8e3a4de0e806294dfc48 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 00:35:31 +0200 Subject: [PATCH 24/53] Removed Support for Multiple Animation Components, Removed Support to have multiple animation components on a panel as this is no longer needed. removed old FadeOut & FadeIn Methods & use functions Supplied by the animation Component this allows us to add canvasGroup support to these methods --- CommunityEntity.UI.cs | 44 +++++++++++++------------------------------ 1 file changed, 13 insertions(+), 31 deletions(-) diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index d916ae9..bbb6c37 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -106,24 +106,20 @@ public void AddUI( RPCMessage msg ) CreateComponents( go, component.Obj, allowUpdate ); } - Animation[] animations = go.GetComponents(); - if(animations.Length > 0){ - for(var i = 0; i < animations.Length; i++){ - animations[i].StartAnimation(); - } - } + if ( json.ContainsKey( "fadeOut" ) ) + Animation.AddFadeIn(go, json.GetFloat( "fadeOut", 0 ), json.GetBoolean( "fadeAsGroup", false )); + + var anim = go.GetComponent(); + if(anim != null) + Animation.AddPendingAnim(anim); + if ( json.ContainsKey( "addCanvas" ) ) { go.AddComponent(); go.AddComponent(); } - - if ( json.ContainsKey( "fadeOut" ) ) - { - go.AddComponent().duration = json.GetFloat( "fadeOut", 0 ); - } } - ApplyMouseListeners(); + Animation.InitPendingAnims(); } private GameObject FindPanel( string name ) @@ -468,10 +464,7 @@ private static T ParseEnum( string value, T defaultValue ) private void GraphicComponentCreated( UnityEngine.UI.Graphic c, JSON.Object obj ) { if ( obj.ContainsKey( "fadeIn" ) ) - { - c.canvasRenderer.SetAlpha( 0f ); - c.CrossFadeAlpha( 1f, obj.GetFloat( "fadeIn", 0 ), true ); - } + Animation.AddFadeIn(c.gameObject, obj.GetFloat( "fadeIn", 0 ), obj.GetBoolean( "fadeAsGroup", false )); } private IEnumerator LoadTextureFromWWW( UnityEngine.UI.RawImage c, string p ) @@ -521,22 +514,11 @@ private void DestroyPanel( string pnlName ) if ( !panel ) return; - Animation[] animations = panel.GetComponents(); - var fadeOut = panel.GetComponent(); - if(animations.Length > 0) - { - for(var i = 0; i < animations.Length; i++){ - if(animations[i].HasForTrigger("OnDestroy")) animations[i].Kill(); - } - } - else if ( fadeOut ) - { - fadeOut.FadeOutAndDestroy(); - } + Animation animation = panel.GetComponent(); + if(animation != null && animation.HasForTrigger("OnDestroy")) + animation.Kill(); else - { - Object.Destroy( panel ); - } + GameObject.Destroy( panel ); } } From 12093811dbad60dfe0d230070443700e359b7f97 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 00:36:48 +0200 Subject: [PATCH 25/53] Remove old FadeOut Component this is now handled by the Animation Component to add support for fading out via CanvasGroups --- CommunityEntity.UI.FadeOut.cs | 34 ---------------------------------- 1 file changed, 34 deletions(-) delete mode 100644 CommunityEntity.UI.FadeOut.cs diff --git a/CommunityEntity.UI.FadeOut.cs b/CommunityEntity.UI.FadeOut.cs deleted file mode 100644 index e480934..0000000 --- a/CommunityEntity.UI.FadeOut.cs +++ /dev/null @@ -1,34 +0,0 @@ -using UnityEngine; -using System.Collections; -using System.Collections.Generic; -using System.Linq; -using Facepunch.Extend; -using System.IO; - -#if CLIENT - -public partial class CommunityEntity -{ - - private class FadeOut : MonoBehaviour - { - public float duration; - - public void FadeOutAndDestroy() - { - Invoke( "Kill", duration + .1f ); - foreach ( var c in gameObject.GetComponents() ) - { - c.CrossFadeAlpha( 0f, duration, false ); - } - } - - public void Kill() - { - Destroy( gameObject ); - } - } - -} - -#endif \ No newline at end of file From c7c100f76cd2b5ee534540c8191134c3d0c1ec6e Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 00:37:07 +0200 Subject: [PATCH 26/53] remove old meta file --- CommunityEntity.UI.FadeOut.cs.meta | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 CommunityEntity.UI.FadeOut.cs.meta diff --git a/CommunityEntity.UI.FadeOut.cs.meta b/CommunityEntity.UI.FadeOut.cs.meta deleted file mode 100644 index d965fec..0000000 --- a/CommunityEntity.UI.FadeOut.cs.meta +++ /dev/null @@ -1,12 +0,0 @@ -fileFormatVersion: 2 -guid: aff0aa9f1a0b6ec4ebb3303fa24c6841 -timeCreated: 1492689370 -licenseType: Pro -MonoImporter: - serializedVersion: 2 - defaultReferences: [] - executionOrder: 0 - icon: {instanceID: 0} - userData: - assetBundleName: - assetBundleVariant: From f0daa49509efabc7d5f702f1517d758de3751032 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 00:39:49 +0200 Subject: [PATCH 27/53] Updated Example for recent commits + Cleanup --- ...st.json => InteractiveComponentsTest.json} | 300 ++++-------------- 1 file changed, 64 insertions(+), 236 deletions(-) rename examples/{MultipleAnimationTest.json => InteractiveComponentsTest.json} (87%) diff --git a/examples/MultipleAnimationTest.json b/examples/InteractiveComponentsTest.json similarity index 87% rename from examples/MultipleAnimationTest.json rename to examples/InteractiveComponentsTest.json index 41a513c..04ba59b 100644 --- a/examples/MultipleAnimationTest.json +++ b/examples/InteractiveComponentsTest.json @@ -33,9 +33,6 @@ "anchormax": "1 1", "offsetmin": "0 0", "offsetmax": "0 -60" - }, - { - "type":"NeedsCursor" } ] }, @@ -166,9 +163,6 @@ "offsetmin": "0 20", "offsetmax": "0 80" }, - { - "type":"NeedsCursor" - }, { "type": "Animation", "properties": [ @@ -202,12 +196,8 @@ "anchormin": "0 0", "anchormax": "0.33 1", }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Tab_Button1", "properties": [ { "type": "Color", @@ -243,7 +233,6 @@ }, { "type": "Animation", - "mouseTarget": "Tab_Button1", "properties": [ { "type": "Color", @@ -285,12 +274,8 @@ "anchormin": "0.33 0", "anchormax": "0.66 1", }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Tab_Button2", "properties": [ { "type": "Color", @@ -326,7 +311,6 @@ }, { "type": "Animation", - "mouseTarget": "Tab_Button2", "properties": [ { "type": "Color", @@ -368,12 +352,8 @@ "anchormin": "0.66 0", "anchormax": "1 1", }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Tab_Button3", "properties": [ { "type": "Color", @@ -409,7 +389,6 @@ }, { "type": "Animation", - "mouseTarget": "Tab_Button3", "properties": [ { "type": "Color", @@ -448,12 +427,8 @@ "offsetmin": "0 0", "offsetmax": "0 3" }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Tab_Button1", "properties": [ { "type": "Color", @@ -462,6 +437,7 @@ }, { "trigger": "OnClick", + "target": "Tab_Button1", "type": "Color", "duration": 0.3, "easing": "0 1.15 0.6 1", @@ -469,19 +445,15 @@ }, { "trigger": "OnClick", + "target": "Tab_Button1", "type": "MoveTo", "duration": 0.3, "easing": "0 1.15 0.6 1", "to": "0 0 0.33 0" }, - ] - }, - { - "type": "Animation", - "mouseTarget": "Tab_Button2", - "properties": [ { "trigger": "OnClick", + "target": "Tab_Button2", "type": "Color", "duration": 0.3, "easing": "0 1.15 0.6 1", @@ -489,19 +461,15 @@ }, { "trigger": "OnClick", + "target": "Tab_Button2", "type": "MoveTo", "duration": 0.3, "easing": "0 1.15 0.6 1", "to": "0.33 0 0.66 0" }, - ] - }, - { - "type": "Animation", - "mouseTarget": "Tab_Button3", - "properties": [ { "trigger": "OnClick", + "target": "Tab_Button3", "type": "Color", "duration": 0.3, "easing": "0 1.15 0.6 1", @@ -509,6 +477,7 @@ }, { "trigger": "OnClick", + "target": "Tab_Button3", "type": "MoveTo", "duration": 0.3, "easing": "0 1.15 0.6 1", @@ -534,15 +503,12 @@ "offsetmin": "0 0", "offsetmax": "0 -60" }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "TabBar", "properties": [ { "trigger": "OnClick", + "target": "TabBar", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -566,41 +532,28 @@ "anchormin": "0 0", "anchormax": "1 1" }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Tab_Button1", "properties": [ { "trigger": "OnClick", + "target": "Tab_Button1", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, "to": "0 0 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "Tab_Button2", - "properties": [ + }, { "trigger": "OnClick", + "target": "Tab_Button2", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, "to": "-1 0 0 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "Tab_Button3", - "properties": [ + }, { "trigger": "OnClick", + "target": "Tab_Button3", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -684,41 +637,28 @@ "anchormin": "1 0", "anchormax": "2 1", }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Tab_Button2", "properties": [ { "trigger": "OnClick", + "target": "Tab_Button2", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, "to": "0 0 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "Tab_Button1", - "properties": [ + }, { "trigger": "OnClick", + "target": "Tab_Button1", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, "to": "1 0 2 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "Tab_Button3", - "properties": [ + }, { "trigger": "OnClick", + "target": "Tab_Button3", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -766,7 +706,6 @@ }, { "type": "Animation", - "mouseTarget": "ModalButton", "properties": [ { "type": "Color", @@ -815,41 +754,28 @@ "anchormin": "1 0", "anchormax": "2 1", }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Tab_Button3", "properties": [ { "trigger": "OnClick", + "target": "Tab_Button3", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, "to": "0 0 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "Tab_Button1", - "properties": [ + }, { "trigger": "OnClick", + "target": "Tab_Button2", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, "to": "1 0 2 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "Tab_Button2", - "properties": [ + }, { "trigger": "OnClick", + "target": "Tab_Button1", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, @@ -893,7 +819,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown1_Button", "properties": [ { "type": "Color", @@ -944,24 +869,18 @@ }, { "type": "Animation", - "mouseTarget": "DropDown1_Button", "properties": [ { "trigger": "OnClick", + "target": "DropDown1_Button", "type": "MoveTo", "duration": 0, "to": "0 0 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown1_Parent", - "properties": [ - + }, { "trigger": "OnClick", + "target": "DropDown1_Parent", "type": "MoveTo", "delay": 0.3, "duration": 0, @@ -997,23 +916,18 @@ }, { "type": "Animation", - "mouseTarget": "DropDown1_Button", "properties": [ { "trigger": "OnClick", + "target": "DropDown1_Button", "type": "MoveToPX", "easing": "0 1.15 0.6 1", "duration": 0.3, "to": "2 -220 -2 -20" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown1_Parent", - "properties": [ + }, { "trigger": "OnClick", + "target": "DropDown1_Parent", "type": "MoveToPX", "easing": "0 0.85 0.6 1", "duration": 0.3, @@ -1041,7 +955,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown1_Option1", "properties": [ { "type": "Color", @@ -1094,7 +1007,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown1_Option2", "properties": [ { "type": "Color", @@ -1147,7 +1059,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown1_Option3", "properties": [ { "type": "Color", @@ -1200,7 +1111,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown1_Option4", "properties": [ { "type": "Color", @@ -1253,7 +1163,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown1_Option5", "properties": [ { "type": "Color", @@ -1325,7 +1234,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown2_Button", "properties": [ { "type": "Color", @@ -1360,25 +1268,17 @@ }, { "type": "Animation", - "mouseTarget": "DropDown2_ButtonExpand", "properties": [ - { "trigger": "OnClick", "type": "MoveTo", "duration": 0.3, "easing": "0 0.75 0.6 1", "to": "0 -1 1 0" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown2_ButtonCollapse", - "properties": [ - + }, { "trigger": "OnClick", + "target": "DropDown2_ButtonCollapse", "type": "MoveTo", "duration": 0.3, "easing": "0 0.75 0.6 1", @@ -1412,23 +1312,15 @@ }, { "type": "Animation", - "mouseTarget": "DropDown2_ButtonExpand", "properties": [ - { "trigger": "OnClick", + "target": "DropDown2_ButtonExpand", "type": "MoveTo", "duration": 0.3, "easing": "0 0.75 0.6 1", "to": "0 0 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown2_ButtonCollapse", - "properties": [ - + }, { "trigger": "OnClick", "type": "MoveTo", @@ -1478,23 +1370,18 @@ }, { "type": "Animation", - "mouseTarget": "DropDown2_ButtonExpand", "properties": [ { "trigger": "OnClick", + "target": "DropDown2_ButtonExpand", "type": "MoveToPX", "easing": "0 1.15 0.6 1", "duration": 0.3, "to": "2 -320 -2 -20" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown2_ButtonCollapse", - "properties": [ + }, { "trigger": "OnClick", + "target": "DropDown2_ButtonCollapse", "type": "MoveToPX", "easing": "0 0.85 0.6 1", "duration": 0.3, @@ -1564,7 +1451,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Button", "properties": [ { "type": "Color", @@ -1615,22 +1501,14 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Button", "properties": [ - { "trigger": "OnClick", + "target": "DropDown3_Button", "type": "MoveTo", "duration": 0, "to": "0 0 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown3_Parent", - "properties": [ - + }, { "trigger": "OnClick", "type": "MoveTo", @@ -1663,6 +1541,10 @@ "offsetmin": "0 -280", "offsetmax": "0 0" }, + "verticalScrollbar" : { + "autoHide": true, + "size": 10 + }, "scrollSensitivity": 15.0 }, { @@ -1679,23 +1561,18 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Button", "properties": [ { "trigger": "OnClick", + "target": "DropDown3_Button", "type": "MoveToPX", "easing": "0 1.15 0.6 1", "duration": 0.3, "to": "2 -220 -2 -20" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown3_Parent", - "properties": [ + }, { "trigger": "OnClick", + "target": "DropDown3_Parent", "type": "MoveToPX", "easing": "0 0.85 0.6 1", "duration": 0.3, @@ -1723,7 +1600,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option1", "properties": [ { "type": "Color", @@ -1776,20 +1652,14 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option1", "properties": [ { "trigger": "OnClick", + "target": "DropDown3_Option1", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown3_Option1Selected", - "properties": [ + }, { "trigger": "OnClick", "type": "MoveTo", @@ -1818,7 +1688,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option2", "properties": [ { "type": "Color", @@ -1871,20 +1740,14 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option2", "properties": [ { "trigger": "OnClick", + "target": "DropDown3_Option2", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown3_Option2Selected", - "properties": [ + }, { "trigger": "OnClick", "type": "MoveTo", @@ -1913,7 +1776,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option3", "properties": [ { "type": "Color", @@ -1966,20 +1828,14 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option3", "properties": [ { "trigger": "OnClick", + "target": "DropDown3_Option3", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown3_Option3Selected", - "properties": [ + }, { "trigger": "OnClick", "type": "MoveTo", @@ -2048,7 +1904,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option5", "properties": [ { "type": "Color", @@ -2101,20 +1956,14 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option5", "properties": [ { "trigger": "OnClick", + "target": "DropDown3_Option5", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown3_Option5Selected", - "properties": [ + }, { "trigger": "OnClick", "type": "MoveTo", @@ -2143,7 +1992,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option6", "properties": [ { "type": "Color", @@ -2196,20 +2044,14 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option6", "properties": [ { "trigger": "OnClick", + "target": "DropDown3_Option6", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown3_Option6Selected", - "properties": [ + }, { "trigger": "OnClick", "type": "MoveTo", @@ -2238,7 +2080,6 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option7", "properties": [ { "type": "Color", @@ -2291,10 +2132,10 @@ }, { "type": "Animation", - "mouseTarget": "DropDown3_Option7", "properties": [ { "trigger": "OnClick", + "target": "DropDown3_Option7", "type": "MoveTo", "duration": 0.1, "to": "0 1 1 1" @@ -2329,15 +2170,12 @@ "anchormin": "0 -1", "anchormax": "1 0" }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "ModalButton", "properties": [ { "trigger": "OnClick", + "target": "ModalButton", "type": "Color", "easing": "0 1.15 0.6 1", "duration": 0, @@ -2345,6 +2183,7 @@ }, { "trigger": "OnClick", + "target": "ModalButton", "type": "Color", "easing": "0 1.15 0.6 1", "delay": 0.5, @@ -2354,19 +2193,15 @@ }, { "trigger": "OnClick", + "target": "ModalButton", "type": "MoveTo", "easing": "0 1.15 0.6 1", "duration": 0.5, "to": "0 0 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "ModalCloseButton", - "properties": [ + }, { "trigger": "OnClick", + "target": "ModalCloseButton", "type": "Color", "easing": "0 1.15 0.6 1", "duration": 0.2, @@ -2374,20 +2209,16 @@ }, { "trigger": "OnClick", + "target": "ModalCloseButton", "type": "MoveTo", "easing": "0 1.15 0.6 1", "delay": 0.2, "duration": 0.5, "to": "0 -1 1 0" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "ModalBackdrop", - "properties": [ + }, { "trigger": "OnClick", + "target": "ModalBackdrop", "type": "Color", "easing": "0 1.15 0.6 1", "duration": 0.2, @@ -2395,6 +2226,7 @@ }, { "trigger": "OnClick", + "target": "ModalBackdrop", "type": "MoveTo", "easing": "0 1.15 0.6 1", "delay": 0.2, @@ -2439,9 +2271,6 @@ "type":"RectTransform", "anchormin": "0.2 0.2", "anchormax": "0.8 0.8" - }, - { - "type":"NeedsCursor" } ] }, @@ -2463,7 +2292,6 @@ }, { "type": "Animation", - "mouseTarget": "ModalButton", "properties": [ { "type": "Color", From 9aceac4299dc104358911445fb3f943a92f95bd0 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 02:19:07 +0200 Subject: [PATCH 28/53] Fixed Animations not stopping Fixed Animations not getting stopped properly, this was partially because of AnimationProperty being a struct, another issue was that coroutines were not getting set to null after stopping them. --- CommunityEntity.UI.Animation.cs | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 8c4c9d5..697eba3 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -8,6 +8,8 @@ using Facepunch.Extend; using System.IO; + + #if CLIENT public partial class CommunityEntity @@ -129,8 +131,11 @@ public void StopByTrigger(string trigger, string panel = null){ if(panel != null && properties[trigger][i].target != panel) return; - if(properties[trigger][i].routine != null) - StopCoroutine(properties[trigger][i].routine); + if(properties[trigger][i].routine == null) + continue; + + StopCoroutine(properties[trigger][i].routine); + properties[trigger][i].routine = null; } } @@ -347,7 +352,7 @@ public static void InitPendingAnims(){ } // this could be a class if the allocation is insignificant - public struct AnimationProperty + public class AnimationProperty { public float duration; public float delay; @@ -359,10 +364,6 @@ public struct AnimationProperty public string target; public string trigger; - public AnimationProperty(string easing = "linear") : this() { - easing = easing; - } - public Animation anim; public Coroutine routine; From 4da3a1d70f4983a9da1a94aeb58602584cc6c151 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 02:21:20 +0200 Subject: [PATCH 29/53] Indent fix --- CommunityEntity.UI.Animation.cs | 1170 +++++++++++++++---------------- 1 file changed, 584 insertions(+), 586 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 697eba3..b314f0f 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -8,8 +8,6 @@ using Facepunch.Extend; using System.IO; - - #if CLIENT public partial class CommunityEntity @@ -23,28 +21,28 @@ public class Animation : FacepunchBehaviour public static IEnumerator emptyEnumerator = new System.Object[0].GetEnumerator(); - // properties by trigger - public Dictionary> properties = new Dictionary>(){ - ["OnCreate"] = new List(), - ["OnDestroy"] = new List(), - ["OnHoverEnter"] = new List(), - ["OnHoverExit"] = new List(), - ["OnDrag"] = new List(), - ["OnDrop"] = new List(), - ["OnClick"] = new List(), - }; + // properties by trigger + public Dictionary> properties = new Dictionary>(){ + ["OnCreate"] = new List(), + ["OnDestroy"] = new List(), + ["OnHoverEnter"] = new List(), + ["OnHoverExit"] = new List(), + ["OnDrag"] = new List(), + ["OnDrop"] = new List(), + ["OnClick"] = new List(), + }; // a record of all Triggers handled public List targets = new List(); // cached relevant components - public UnityEngine.UI.Graphic graphic; - public RectTransform rt; + public UnityEngine.UI.Graphic graphic; + public RectTransform rt; public CanvasGroup group; // flags - public bool isHidden = false; - public bool isKilled = false; + public bool isHidden = false; + public bool isKilled = false; public bool initialized = false; #endregion @@ -52,92 +50,92 @@ public class Animation : FacepunchBehaviour #region Core // sets up the Animation component, Attaching Triggers & starting Animations - public void Init(){ - CacheComponents(); + public void Init(){ + CacheComponents(); AttachTriggers(properties["OnHoverEnter"]); AttachTriggers(properties["OnHoverExit"]); AttachTriggers(properties["OnClick"]); AttachTriggers(properties["OnDrag"]); AttachTriggers(properties["OnDrop"]); - StartByTrigger("OnCreate"); + StartByTrigger("OnCreate"); initialized = true; - } + } - public void StartProperty(AnimationProperty prop){ - prop.anim = this; + public void StartProperty(AnimationProperty prop){ + prop.anim = this; if(prop.routine == null) prop.routine = StartCoroutine(prop.Animate()); - } + } - public void RemoveProperty(AnimationProperty property){ - if(string.IsNullOrEmpty(property.trigger) || !ValidTrigger(property.trigger)) - return; + public void RemoveProperty(AnimationProperty property){ + if(string.IsNullOrEmpty(property.trigger) || !ValidTrigger(property.trigger)) + return; - properties[property.trigger].Remove(property); - } + properties[property.trigger].Remove(property); + } - private void OnDestroy(){ - if(!isKilled) + private void OnDestroy(){ + if(!isKilled) Kill(true); - } + } - public void Kill(bool destroyed = false) - { + public void Kill(bool destroyed = false) + { // mark as killed & clean up - isKilled = true; - StopByTrigger("OnCreate"); - StopByTrigger("OnHoverEnter"); - StopByTrigger("OnHoverExit"); - StopByTrigger("OnDrag"); - StopByTrigger("OnDrop"); - - if(destroyed) + isKilled = true; + StopByTrigger("OnCreate"); + StopByTrigger("OnHoverEnter"); + StopByTrigger("OnHoverExit"); + StopByTrigger("OnDrag"); + StopByTrigger("OnDrop"); + + if(destroyed) return; // determine duration of all OnDestroy durations to delay the actual destroying float killDelay = 0f; - foreach(var prop in properties["OnDestroy"]) - { - float totalDelay = prop.duration + prop.delay; - if(killDelay < totalDelay) killDelay = totalDelay; - StartProperty(prop); - } - Invoke(new Action(() => Object.Destroy(gameObject)), killDelay + 0.05f); - } + foreach(var prop in properties["OnDestroy"]) + { + float totalDelay = prop.duration + prop.delay; + if(killDelay < totalDelay) killDelay = totalDelay; + StartProperty(prop); + } + Invoke(new Action(() => Object.Destroy(gameObject)), killDelay + 0.05f); + } #endregion #region Trigger - public bool ValidTrigger(string trigger) => properties.ContainsKey(trigger); + public bool ValidTrigger(string trigger) => properties.ContainsKey(trigger); - public bool HasForTrigger(string trigger) => ValidTrigger(trigger) && properties[trigger].Count > 0; + public bool HasForTrigger(string trigger) => ValidTrigger(trigger) && properties[trigger].Count > 0; - public void StartByTrigger(string trigger, string panel = null){ - if(!ValidTrigger(trigger)) + public void StartByTrigger(string trigger, string panel = null){ + if(!ValidTrigger(trigger)) return; - for(int i = 0; i < properties[trigger].Count; i++){ + for(int i = 0; i < properties[trigger].Count; i++){ if(panel == null || properties[trigger][i].target == panel) StartProperty(properties[trigger][i]); - } - } + } + } - public void StopByTrigger(string trigger, string panel = null){ - if(!ValidTrigger(trigger)) + public void StopByTrigger(string trigger, string panel = null){ + if(!ValidTrigger(trigger)) return; for(int i = 0; i < properties[trigger].Count; i++){ if(panel != null && properties[trigger][i].target != panel) return; - if(properties[trigger][i].routine == null) + if(properties[trigger][i].routine == null) continue; StopCoroutine(properties[trigger][i].routine); properties[trigger][i].routine = null; - } - } + } + } // returns true if the trigger relies on a MouseListener component public bool TriggerNeedsListener(string trigger){ @@ -197,68 +195,68 @@ private void AttachTo(GameObject go, bool addListener = false){ } // Events - public void OnDrag(string panel){ - if(isKilled) + public void OnDrag(string panel){ + if(isKilled) return; - StopByTrigger("OnDrop", panel); - StartByTrigger("OnDrag"); - } + StopByTrigger("OnDrop", panel); + StartByTrigger("OnDrag"); + } - public void OnDrop(string panel){ - if(isKilled) + public void OnDrop(string panel){ + if(isKilled) return; - StopByTrigger("OnDrag", panel); - StartByTrigger("OnDrop", panel); - } + StopByTrigger("OnDrag", panel); + StartByTrigger("OnDrop", panel); + } - public void OnHoverEnter(string panel){ - if(isKilled) + public void OnHoverEnter(string panel){ + if(isKilled) return; - StopByTrigger("OnHoverExit", panel); - StartByTrigger("OnHoverEnter", panel); - } + StopByTrigger("OnHoverExit", panel); + StartByTrigger("OnHoverEnter", panel); + } - public void OnHoverExit(string panel){ - if(isKilled) + public void OnHoverExit(string panel){ + if(isKilled) return; - StopByTrigger("OnHoverEnter", panel); - StartByTrigger("OnHoverExit", panel); - } + StopByTrigger("OnHoverEnter", panel); + StartByTrigger("OnHoverExit", panel); + } - public void OnClick(string panel){ - if(isKilled) + public void OnClick(string panel){ + if(isKilled) return; - StopByTrigger("OnClick", panel); - StartByTrigger("OnClick", panel); - } + StopByTrigger("OnClick", panel); + StartByTrigger("OnClick", panel); + } #endregion #region Helpers - public void CacheComponents(){ - graphic = gameObject.GetComponent(); - rt = gameObject.GetComponent(); + public void CacheComponents(){ + graphic = gameObject.GetComponent(); + rt = gameObject.GetComponent(); if(!group) group = gameObject.GetComponent(); - } + } - public void TryToggleGraphic(float delay = 0f){ - if(graphic == null) return; + public void TryToggleGraphic(float delay = 0f){ + if(graphic == null) return; - var a = new Action(() => { - bool visible = GetAlpha() > 0f; + var a = new Action(() => { + bool visible = GetAlpha() > 0f; if(group == null) graphic.canvasRenderer.cullTransparentMesh = visible; - isHidden = !visible; - SetRaycasting(visible); - }); - if(delay <= 0f) a(); - else Invoke(a, delay); - } + isHidden = !visible; + SetRaycasting(visible); + }); + if(delay <= 0f) a(); + else Invoke(a, delay); + } public float GetAlpha(){ if(group != null) @@ -349,475 +347,475 @@ public static void InitPendingAnims(){ } #endregion - } + } // this could be a class if the allocation is insignificant - public class AnimationProperty - { - public float duration; - public float delay; - public int repeat; - public float repeatDelay; - public string easing; - public string type; - public AnimationProperty.AnimationValue animValue; + public class AnimationProperty + { + public float duration; + public float delay; + public int repeat; + public float repeatDelay; + public string easing; + public string type; + public AnimationProperty.AnimationValue animValue; public string target; - public string trigger; + public string trigger; - public Animation anim; + public Animation anim; - public Coroutine routine; + public Coroutine routine; - public int completedRounds; + public int completedRounds; - // Launches the animation, keeping track of loops if its set to repeat - public IEnumerator Animate() - { + // Launches the animation, keeping track of loops if its set to repeat + public IEnumerator Animate() + { completedRounds = 0; // reset completedRounds on restart - if(animValue == null || animValue.to.Count == 0){ - Debug.LogWarning($"Animation of type {type} for {anim.gameObject.name} failed to execute - no from/to values provided"); - anim.RemoveProperty(this); - yield break; - } - - // initial delay - if(delay > 0f) yield return new WaitForSeconds(delay); - - do - { - yield return AnimateProperty(); - completedRounds++; - if(repeatDelay > 0f) yield return new WaitForSeconds(repeatDelay); - else yield return null; - } - while(repeat < 0 || (repeat > 0 && completedRounds <= repeat)); - - // this animation wont get triggered again, so remove it - if(trigger == "OnCreate") - anim.RemoveProperty(this); - } - - // Parses the from & to values and Launches the individual animation - // Adding new animations can be achieved by Adding cases to the switch statement - public IEnumerator AnimateProperty() - { - // for use in lambdas, would otherwise trigger error CS1673 - var prop = this; - switch(type){ - case "Opacity": - { - // needs a reference to the graphic & atleast 1 value in the to value - if((!anim.graphic && !anim.group) || animValue.to.Count < 1) break; - - // try to enable the graphic after 0.1 seconds if: - // - the from value is higher than 0 or - // - the graphic is currently hidden but will go above 0 opacity during the animation - if((animValue.from.Count != 0 && animValue.from.TryGet(0) > 0f) || anim.isHidden && animValue.to.TryGet(0) > 0f) - anim.TryToggleGraphic(0.1f); - - animValue.initial = new DynamicVector(anim.graphic.canvasRenderer.GetAlpha()); - - // force applies the value, meaning Opacity & Color animations may clash when multiple are setting the opacity - animValue.apply = (DynamicVector value) => { - prop.anim.SetAlpha(value.TryGet(0)); - }; - - // disables the graphic at the end of the animation if the end opacity is 0 - if(animValue.to.TryGet(0) <= 0f) anim.TryToggleGraphic(duration); - - //Use Absolute mode for these Interpolations, as it wont need the initial color for any calculations - return InterpolateValue(animValue, duration, easing, true); - } - case "Color": - { - // needs a reference to the graphic & atleast 4 values in the to value - if(!anim.graphic || animValue.to.Count < 4) break; - - // enables the graphic if: - // - the from color's alpha is higher than 0 or - // - the graphic is currently hidden but will go above 0 opacity during the animation - if((animValue.from.Count != 0 && animValue.from.TryGet(3) > 0f) || anim.isHidden && animValue.to.TryGet(3) > 0f) - anim.TryToggleGraphic(0.1f); - - animValue.initial = new DynamicVector(anim.graphic.canvasRenderer.GetColor()); - - // force applies the value, meaning Opacity & Color animations may clash when multiple are setting the opacity - animValue.apply = (DynamicVector value) => { - prop.anim.graphic.canvasRenderer.SetColor(value.ToColor()); - }; - - if(animValue.to.TryGet(3) <= 0f) anim.TryToggleGraphic(duration); - - - //Use Absolute mode for these Interpolations, as it wont need the initial color for any calculations - return InterpolateValue(animValue, duration, easing); - } - case "Scale": - { - // needs a reference to the rectTransform & atleast 2 values in the to value - if(!anim.rt || animValue.to.Count < 2) break; - - if(!anim.rt) break; - - animValue.initial = new DynamicVector(anim.rt.localScale); - - // force applies the value, meaning multiple Scale animations running at the same time will clash - animValue.apply = (DynamicVector value) => { - // we convert to a Vector3 even though the DynamicVector only holds 2 floats - // this is fine because the z value will be set to 0f, which isnt used for the scale of rectTransforms - prop.anim.rt.localScale = value.ToVector3(); - }; - - //Use Absolute mode for these Interpolations, as it wont need the initial scale for any calculations - return InterpolateValue(animValue, duration, easing); - } - case "Translate": - { - // needs a reference to the rectTransform & atleast 2 values in the to value - if(!anim.rt || animValue.to.Count < 2) break; - - animValue.initial = new DynamicVector(); - animValue.last = new DynamicVector(); - // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position - animValue.apply = (DynamicVector value) => { - DynamicVector diff = value - prop.animValue.last; - prop.anim.rt.anchorMin += diff.ToVector2(); - prop.anim.rt.anchorMax += diff.ToVector2(); - prop.animValue.last += diff; - }; - // Use Relative mode for these Interpolations, as it will take the initial position into account for the translation - return InterpolateValue(animValue, duration, easing, false); - } - case "TranslatePX": - { - // needs a reference to the rectTransform & atleast 4 values in the to value - if(!anim.rt || animValue.to.Count < 4) break; - - animValue.initial = new DynamicVector(); - animValue.last = new DynamicVector(); - // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position - animValue.apply = (DynamicVector value) => { - DynamicVector diff = value - prop.animValue.last; - prop.anim.rt.offsetMin += diff.ToVector2(0); - prop.anim.rt.offsetMax += diff.ToVector2(0); - prop.animValue.last += diff; - }; - // Use Relative mode for these Interpolations, as it will take the initial position into account for the translation - return InterpolateValue(animValue, duration, easing, false); - } - case "Rotate": - { - // needs a reference to the rectTransform & atleast 3 values in the to value - if(!anim.rt || animValue.to.Count < 3) break; - - animValue.initial = new DynamicVector(anim.rt.rotation.eulerAngles); - // force applies the value, meaning multiple Rotate animations running at the same time will clash - animValue.apply = (DynamicVector value) => { - prop.anim.rt.rotation = Quaternion.Euler(value.ToVector3()); - }; - - //Use Absolute mode for these Interpolations, as it wont need the initial rotation for any calculations - return InterpolateValue(animValue, duration, easing, true); - } - case "MoveTo": - { - if(!anim.rt) break; - - animValue.initial = new DynamicVector(anim.rt.anchorMin); - animValue.initial.Add(anim.rt.anchorMax); - animValue.last = animValue.initial; - // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position - animValue.apply = (DynamicVector value) => { - DynamicVector diff = value - prop.animValue.last; - prop.anim.rt.anchorMin += diff.ToVector2(0); - prop.anim.rt.anchorMax += diff.ToVector2(2); // skip the first 2 values - prop.animValue.last += diff; - }; - //Use Absolute mode for these Interpolations, as the from & to values supplied are absolute values - return InterpolateValue(animValue, duration, easing, true); - } - case "MoveToPX": - { - if(!anim.rt) break; - - animValue.initial = new DynamicVector(anim.rt.offsetMin); - animValue.initial.Add(anim.rt.offsetMax); - animValue.last = animValue.initial; - // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position - animValue.apply = (DynamicVector value) => { - DynamicVector diff = value - prop.animValue.last; - prop.anim.rt.offsetMin += diff.ToVector2(0); - prop.anim.rt.offsetMax += diff.ToVector2(2); // skip the first 2 values - prop.animValue.last += diff; - }; - //Use Absolute mode for these Interpolations, as the from & to values supplied are absolute values - return InterpolateValue(animValue, duration, easing, true); - } - } - - // remove this animation property of there is no valid case or the selected case fails - Debug.LogWarning($"Animation has invalid values\ngameObject: {anim.gameObject.name}\nparent: {anim.transform.parent.gameObject.name}\ntype: {type}\nfrom value: \"{animValue.from}\"\nto value: \"{animValue.to}\"\ngraphic: {anim.graphic?.ToString() ?? "null"}\ncanvasGroup: {anim.group?.ToString() ?? "null"}"); - anim.RemoveProperty(this); - repeat = 0; // ensure the animation wont repeat - // Return an empty enumerator so the coroutine finishes - return Animation.emptyEnumerator; - } - - // manipulates the input based on a preset easing function or a custom Bezier curve - // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve - // NOTE: the return value is unclamped as this allowes bezier curves with under- and overshoot to work - public float Ease(string type, float input){ - switch(type){ - case "Linear": return input; - case "EaseIn": return input * input; - case "EaseOut": return 1f - ((1f - input) * (1f - input)); - case "EaseInOut": return Mathf.Lerp(input * input, 1f - ((1f - input) * (1f - input)), input); - default: // Custom Easing - { - var split = type.Split(' '); - float X1, Y1, X2, Y2; - if(split.Length < 4) return input; - if( - !float.TryParse(split[0], out X1) || !float.TryParse(split[1], out Y1) || - !float.TryParse(split[2], out X2) || !float.TryParse(split[3], out Y2) - ) return input; - - return BezierEasing.Ease(X1, Y1, X2, Y2, input); - } - } - } - - // Interpolats an AnimationValue over the duration with the easing specified - // the absolute arguement specifies if the animation should be handled as a relative animation or an absolute animation - // absolute = false: the objects initial value gets used as a 0 point, with the from and to values being relative to the initial value - // absolute = true: the object's initial value does not get factored in and the from and to values are seen as absolute - public IEnumerator InterpolateValue(AnimationValue value, float duration, string easing, bool absolute = true){ - float time = 0f; - DynamicVector current; - DynamicVector start = value.from.Count == 0 ? value.initial : (absolute ? value.from : value.initial + value.from); - - // Immediately apply the start value if present - if(value.from.Count != 0){ - value.apply(start); - value.initial = start; - } - DynamicVector end = (absolute ? value.to : value.initial + value.to); - - while(time < duration){ - current = DynamicVector.LerpUnclamped(start, end, Ease(easing, time / duration)); - value.apply(current); - time += Time.deltaTime; - yield return null; - } - value.apply(end); - } - - // Generalizes the values for an AnimationProperty - public class AnimationValue { - // gets set just before InterpolateValue is called - public DynamicVector initial; - // used for relative animations - public DynamicVector last; - // the from value can be optional - public DynamicVector from; - public DynamicVector to; - // gets called during interpolation with the arguement being the current value. - public Action apply; - - public AnimationValue(){ - - } - - public AnimationValue(string sourceTo, string sourceFrom = null){ - this.from = ParseFromString(sourceFrom); - this.to = ParseFromString(sourceTo); - } - public DynamicVector ParseFromString(string source){ - var values = new DynamicVector(); - if(string.IsNullOrEmpty(source)) return values; - var split = source.Split(' '); - if(split.Length == 0) return values; - for(int i = 0; i < split.Length; i++){ - float temp; - if(float.TryParse(split[i], out temp)) + if(animValue == null || animValue.to.Count == 0){ + Debug.LogWarning($"Animation of type {type} for {anim.gameObject.name} failed to execute - no from/to values provided"); + anim.RemoveProperty(this); + yield break; + } + + // initial delay + if(delay > 0f) yield return new WaitForSeconds(delay); + + do + { + yield return AnimateProperty(); + completedRounds++; + if(repeatDelay > 0f) yield return new WaitForSeconds(repeatDelay); + else yield return null; + } + while(repeat < 0 || (repeat > 0 && completedRounds <= repeat)); + + // this animation wont get triggered again, so remove it + if(trigger == "OnCreate") + anim.RemoveProperty(this); + } + + // Parses the from & to values and Launches the individual animation + // Adding new animations can be achieved by Adding cases to the switch statement + public IEnumerator AnimateProperty() + { + // for use in lambdas, would otherwise trigger error CS1673 + var prop = this; + switch(type){ + case "Opacity": + { + // needs a reference to the graphic & atleast 1 value in the to value + if((!anim.graphic && !anim.group) || animValue.to.Count < 1) break; + + // try to enable the graphic after 0.1 seconds if: + // - the from value is higher than 0 or + // - the graphic is currently hidden but will go above 0 opacity during the animation + if((animValue.from.Count != 0 && animValue.from.TryGet(0) > 0f) || anim.isHidden && animValue.to.TryGet(0) > 0f) + anim.TryToggleGraphic(0.1f); + + animValue.initial = new DynamicVector(anim.graphic.canvasRenderer.GetAlpha()); + + // force applies the value, meaning Opacity & Color animations may clash when multiple are setting the opacity + animValue.apply = (DynamicVector value) => { + prop.anim.SetAlpha(value.TryGet(0)); + }; + + // disables the graphic at the end of the animation if the end opacity is 0 + if(animValue.to.TryGet(0) <= 0f) anim.TryToggleGraphic(duration); + + //Use Absolute mode for these Interpolations, as it wont need the initial color for any calculations + return InterpolateValue(animValue, duration, easing, true); + } + case "Color": + { + // needs a reference to the graphic & atleast 4 values in the to value + if(!anim.graphic || animValue.to.Count < 4) break; + + // enables the graphic if: + // - the from color's alpha is higher than 0 or + // - the graphic is currently hidden but will go above 0 opacity during the animation + if((animValue.from.Count != 0 && animValue.from.TryGet(3) > 0f) || anim.isHidden && animValue.to.TryGet(3) > 0f) + anim.TryToggleGraphic(0.1f); + + animValue.initial = new DynamicVector(anim.graphic.canvasRenderer.GetColor()); + + // force applies the value, meaning Opacity & Color animations may clash when multiple are setting the opacity + animValue.apply = (DynamicVector value) => { + prop.anim.graphic.canvasRenderer.SetColor(value.ToColor()); + }; + + if(animValue.to.TryGet(3) <= 0f) anim.TryToggleGraphic(duration); + + + //Use Absolute mode for these Interpolations, as it wont need the initial color for any calculations + return InterpolateValue(animValue, duration, easing); + } + case "Scale": + { + // needs a reference to the rectTransform & atleast 2 values in the to value + if(!anim.rt || animValue.to.Count < 2) break; + + if(!anim.rt) break; + + animValue.initial = new DynamicVector(anim.rt.localScale); + + // force applies the value, meaning multiple Scale animations running at the same time will clash + animValue.apply = (DynamicVector value) => { + // we convert to a Vector3 even though the DynamicVector only holds 2 floats + // this is fine because the z value will be set to 0f, which isnt used for the scale of rectTransforms + prop.anim.rt.localScale = value.ToVector3(); + }; + + //Use Absolute mode for these Interpolations, as it wont need the initial scale for any calculations + return InterpolateValue(animValue, duration, easing); + } + case "Translate": + { + // needs a reference to the rectTransform & atleast 2 values in the to value + if(!anim.rt || animValue.to.Count < 2) break; + + animValue.initial = new DynamicVector(); + animValue.last = new DynamicVector(); + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position + animValue.apply = (DynamicVector value) => { + DynamicVector diff = value - prop.animValue.last; + prop.anim.rt.anchorMin += diff.ToVector2(); + prop.anim.rt.anchorMax += diff.ToVector2(); + prop.animValue.last += diff; + }; + // Use Relative mode for these Interpolations, as it will take the initial position into account for the translation + return InterpolateValue(animValue, duration, easing, false); + } + case "TranslatePX": + { + // needs a reference to the rectTransform & atleast 4 values in the to value + if(!anim.rt || animValue.to.Count < 4) break; + + animValue.initial = new DynamicVector(); + animValue.last = new DynamicVector(); + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position + animValue.apply = (DynamicVector value) => { + DynamicVector diff = value - prop.animValue.last; + prop.anim.rt.offsetMin += diff.ToVector2(0); + prop.anim.rt.offsetMax += diff.ToVector2(0); + prop.animValue.last += diff; + }; + // Use Relative mode for these Interpolations, as it will take the initial position into account for the translation + return InterpolateValue(animValue, duration, easing, false); + } + case "Rotate": + { + // needs a reference to the rectTransform & atleast 3 values in the to value + if(!anim.rt || animValue.to.Count < 3) break; + + animValue.initial = new DynamicVector(anim.rt.rotation.eulerAngles); + // force applies the value, meaning multiple Rotate animations running at the same time will clash + animValue.apply = (DynamicVector value) => { + prop.anim.rt.rotation = Quaternion.Euler(value.ToVector3()); + }; + + //Use Absolute mode for these Interpolations, as it wont need the initial rotation for any calculations + return InterpolateValue(animValue, duration, easing, true); + } + case "MoveTo": + { + if(!anim.rt) break; + + animValue.initial = new DynamicVector(anim.rt.anchorMin); + animValue.initial.Add(anim.rt.anchorMax); + animValue.last = animValue.initial; + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position + animValue.apply = (DynamicVector value) => { + DynamicVector diff = value - prop.animValue.last; + prop.anim.rt.anchorMin += diff.ToVector2(0); + prop.anim.rt.anchorMax += diff.ToVector2(2); // skip the first 2 values + prop.animValue.last += diff; + }; + //Use Absolute mode for these Interpolations, as the from & to values supplied are absolute values + return InterpolateValue(animValue, duration, easing, true); + } + case "MoveToPX": + { + if(!anim.rt) break; + + animValue.initial = new DynamicVector(anim.rt.offsetMin); + animValue.initial.Add(anim.rt.offsetMax); + animValue.last = animValue.initial; + // incrementally applies the value, allowing multiple MoveTo/PX & Translate/PX values to affect the position + animValue.apply = (DynamicVector value) => { + DynamicVector diff = value - prop.animValue.last; + prop.anim.rt.offsetMin += diff.ToVector2(0); + prop.anim.rt.offsetMax += diff.ToVector2(2); // skip the first 2 values + prop.animValue.last += diff; + }; + //Use Absolute mode for these Interpolations, as the from & to values supplied are absolute values + return InterpolateValue(animValue, duration, easing, true); + } + } + + // remove this animation property of there is no valid case or the selected case fails + Debug.LogWarning($"Animation has invalid values\ngameObject: {anim.gameObject.name}\nparent: {anim.transform.parent.gameObject.name}\ntype: {type}\nfrom value: \"{animValue.from}\"\nto value: \"{animValue.to}\"\ngraphic: {anim.graphic?.ToString() ?? "null"}\ncanvasGroup: {anim.group?.ToString() ?? "null"}"); + anim.RemoveProperty(this); + repeat = 0; // ensure the animation wont repeat + // Return an empty enumerator so the coroutine finishes + return Animation.emptyEnumerator; + } + + // manipulates the input based on a preset easing function or a custom Bezier curve + // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve + // NOTE: the return value is unclamped as this allowes bezier curves with under- and overshoot to work + public float Ease(string type, float input){ + switch(type){ + case "Linear": return input; + case "EaseIn": return input * input; + case "EaseOut": return 1f - ((1f - input) * (1f - input)); + case "EaseInOut": return Mathf.Lerp(input * input, 1f - ((1f - input) * (1f - input)), input); + default: // Custom Easing + { + var split = type.Split(' '); + float X1, Y1, X2, Y2; + if(split.Length < 4) return input; + if( + !float.TryParse(split[0], out X1) || !float.TryParse(split[1], out Y1) || + !float.TryParse(split[2], out X2) || !float.TryParse(split[3], out Y2) + ) return input; + + return BezierEasing.Ease(X1, Y1, X2, Y2, input); + } + } + } + + // Interpolats an AnimationValue over the duration with the easing specified + // the absolute arguement specifies if the animation should be handled as a relative animation or an absolute animation + // absolute = false: the objects initial value gets used as a 0 point, with the from and to values being relative to the initial value + // absolute = true: the object's initial value does not get factored in and the from and to values are seen as absolute + public IEnumerator InterpolateValue(AnimationValue value, float duration, string easing, bool absolute = true){ + float time = 0f; + DynamicVector current; + DynamicVector start = value.from.Count == 0 ? value.initial : (absolute ? value.from : value.initial + value.from); + + // Immediately apply the start value if present + if(value.from.Count != 0){ + value.apply(start); + value.initial = start; + } + DynamicVector end = (absolute ? value.to : value.initial + value.to); + + while(time < duration){ + current = DynamicVector.LerpUnclamped(start, end, Ease(easing, time / duration)); + value.apply(current); + time += Time.deltaTime; + yield return null; + } + value.apply(end); + } + + // Generalizes the values for an AnimationProperty + public class AnimationValue { + // gets set just before InterpolateValue is called + public DynamicVector initial; + // used for relative animations + public DynamicVector last; + // the from value can be optional + public DynamicVector from; + public DynamicVector to; + // gets called during interpolation with the arguement being the current value. + public Action apply; + + public AnimationValue(){ + + } + + public AnimationValue(string sourceTo, string sourceFrom = null){ + this.from = ParseFromString(sourceFrom); + this.to = ParseFromString(sourceTo); + } + public DynamicVector ParseFromString(string source){ + var values = new DynamicVector(); + if(string.IsNullOrEmpty(source)) return values; + var split = source.Split(' '); + if(split.Length == 0) return values; + for(int i = 0; i < split.Length; i++){ + float temp; + if(float.TryParse(split[i], out temp)) values.Add(temp); - if(values.Count == values.Capacity) break; - } - return values; - } - } - - // a struct that mimics Vector2/3/4/n, previously used a list to hold values, but lists dont work as structs - // turning this into a struct makes alot of sense, thanks for the insights @WhiteThunder - public struct DynamicVector { - - // need it to hold more than 4? add a _valueN and adjust the Capacity, indexer & Clear method - private float _value0; - private float _value1; - private float _value2; - private float _value3; - - public int Count; - - public int Capacity => 4; - - public float this[int i]{ - get { - switch(i){ - case 0: return _value0; break; - case 1: return _value1; break; - case 2: return _value2; break; - case 3: return _value3; break; - default: throw new IndexOutOfRangeException(); - } - } - set { - switch(i){ - case 0: _value0 = value; break; - case 1: _value1 = value; break; - case 2: _value2 = value; break; - case 3: _value3 = value; break; - default: throw new IndexOutOfRangeException(); - } - } - } - public DynamicVector(Vector4 vec) : this() => Add(vec); - public DynamicVector(Color col) : this() => Add(col); - public DynamicVector(Vector3 vec) : this() => Add(vec); - public DynamicVector(Vector2 vec) : this() => Add(vec); - public DynamicVector(float num) : this() => Add(num); - - public void Add(float num) => this[Count++] = num; - - public void Add(Color col){ - Add(col.r); - Add(col.g); - Add(col.b); - Add(col.a); - } - - public void Add(Vector4 vec){ - Add(vec.x); - Add(vec.y); - Add(vec.z); - Add(vec.w); - } - - public void Add(Vector3 vec){ - Add(vec.x); - Add(vec.y); - Add(vec.z); - } - - public void Add(Vector2 vec){ - Add(vec.x); - Add(vec.y); - } - // the ToVectorX & ToColor Functions have an optional offset arguement that shifts the starting point of the list when turning it into the vector - public Vector4 ToVector4(int offset = 0){ - return new Vector4( - TryGet(offset), - TryGet(offset + 1), - TryGet(offset + 2), - TryGet(offset + 3) - ); - } - public Color ToColor(int offset = 0){ - return new Color( - TryGet(offset), - TryGet(offset + 1), - TryGet(offset + 2), - TryGet(offset + 3) - ); - } - public Vector3 ToVector3(int offset = 0){ - return new Vector3( - TryGet(offset), - TryGet(offset + 1), - TryGet(offset + 2) - ); - } - public Vector2 ToVector2(int offset = 0){ - return new Vector2( - TryGet(offset), - TryGet(offset + 1) - ); - } - public float TryGet(int index, float defaultValue = 0f){ - if(index < 0 || index >= this.Count) - return defaultValue; - return this[index]; - } - - public void Clear(){ - _value0 = 0f; - _value1 = 0f; - _value2 = 0f; - _value3 = 0f; - Count = 0; - } - - public static DynamicVector Lerp(DynamicVector from, DynamicVector to, float t){ - t = Mathf.Clamp01(t); - return LerpUnclamped(from, to, t); - } - - public static DynamicVector LerpUnclamped(DynamicVector from, DynamicVector to, float t){ - DynamicVector result = new DynamicVector(); - int HigherCount = (from.Count > to.Count ? from.Count : to.Count); - for(int i = 0; i < HigherCount; i++){ - result.Add(from.TryGet(i) + (to.TryGet(i) - from.TryGet(i)) * t); - } - return result; - } - - public static DynamicVector operator +(DynamicVector lhs, DynamicVector rhs){ - DynamicVector result = new DynamicVector(); - int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); - for(int i = 0; i < HigherCount; i++){ - result.Add(lhs.TryGet(i) + rhs.TryGet(i)); - } - return result; - } - - public static DynamicVector operator -(DynamicVector lhs, DynamicVector rhs){ - DynamicVector result = new DynamicVector(); - int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); - for(int i = 0; i < HigherCount; i++){ - result.Add(lhs.TryGet(i) - rhs.TryGet(i)); - } - return result; - } - - public override string ToString(){ - var sb = new StringBuilder(32); - for(int i = 0; i < this.Count; i++){ - sb.Append(this.TryGet(i)); - sb.Append(' '); - } - return sb.ToString(); - } - } - } + if(values.Count == values.Capacity) break; + } + return values; + } + } + + // a struct that mimics Vector2/3/4/n, previously used a list to hold values, but lists dont work as structs + // turning this into a struct makes alot of sense, thanks for the insights @WhiteThunder + public struct DynamicVector { + + // need it to hold more than 4? add a _valueN and adjust the Capacity, indexer & Clear method + private float _value0; + private float _value1; + private float _value2; + private float _value3; + + public int Count; + + public int Capacity => 4; + + public float this[int i]{ + get { + switch(i){ + case 0: return _value0; break; + case 1: return _value1; break; + case 2: return _value2; break; + case 3: return _value3; break; + default: throw new IndexOutOfRangeException(); + } + } + set { + switch(i){ + case 0: _value0 = value; break; + case 1: _value1 = value; break; + case 2: _value2 = value; break; + case 3: _value3 = value; break; + default: throw new IndexOutOfRangeException(); + } + } + } + public DynamicVector(Vector4 vec) : this() => Add(vec); + public DynamicVector(Color col) : this() => Add(col); + public DynamicVector(Vector3 vec) : this() => Add(vec); + public DynamicVector(Vector2 vec) : this() => Add(vec); + public DynamicVector(float num) : this() => Add(num); + + public void Add(float num) => this[Count++] = num; + + public void Add(Color col){ + Add(col.r); + Add(col.g); + Add(col.b); + Add(col.a); + } + + public void Add(Vector4 vec){ + Add(vec.x); + Add(vec.y); + Add(vec.z); + Add(vec.w); + } + + public void Add(Vector3 vec){ + Add(vec.x); + Add(vec.y); + Add(vec.z); + } + + public void Add(Vector2 vec){ + Add(vec.x); + Add(vec.y); + } + // the ToVectorX & ToColor Functions have an optional offset arguement that shifts the starting point of the list when turning it into the vector + public Vector4 ToVector4(int offset = 0){ + return new Vector4( + TryGet(offset), + TryGet(offset + 1), + TryGet(offset + 2), + TryGet(offset + 3) + ); + } + public Color ToColor(int offset = 0){ + return new Color( + TryGet(offset), + TryGet(offset + 1), + TryGet(offset + 2), + TryGet(offset + 3) + ); + } + public Vector3 ToVector3(int offset = 0){ + return new Vector3( + TryGet(offset), + TryGet(offset + 1), + TryGet(offset + 2) + ); + } + public Vector2 ToVector2(int offset = 0){ + return new Vector2( + TryGet(offset), + TryGet(offset + 1) + ); + } + public float TryGet(int index, float defaultValue = 0f){ + if(index < 0 || index >= this.Count) + return defaultValue; + return this[index]; + } + + public void Clear(){ + _value0 = 0f; + _value1 = 0f; + _value2 = 0f; + _value3 = 0f; + Count = 0; + } + + public static DynamicVector Lerp(DynamicVector from, DynamicVector to, float t){ + t = Mathf.Clamp01(t); + return LerpUnclamped(from, to, t); + } + + public static DynamicVector LerpUnclamped(DynamicVector from, DynamicVector to, float t){ + DynamicVector result = new DynamicVector(); + int HigherCount = (from.Count > to.Count ? from.Count : to.Count); + for(int i = 0; i < HigherCount; i++){ + result.Add(from.TryGet(i) + (to.TryGet(i) - from.TryGet(i)) * t); + } + return result; + } + + public static DynamicVector operator +(DynamicVector lhs, DynamicVector rhs){ + DynamicVector result = new DynamicVector(); + int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); + for(int i = 0; i < HigherCount; i++){ + result.Add(lhs.TryGet(i) + rhs.TryGet(i)); + } + return result; + } + + public static DynamicVector operator -(DynamicVector lhs, DynamicVector rhs){ + DynamicVector result = new DynamicVector(); + int HigherCount = (lhs.Count > rhs.Count ? lhs.Count : rhs.Count); + for(int i = 0; i < HigherCount; i++){ + result.Add(lhs.TryGet(i) - rhs.TryGet(i)); + } + return result; + } + + public override string ToString(){ + var sb = new StringBuilder(32); + for(int i = 0; i < this.Count; i++){ + sb.Append(this.TryGet(i)); + sb.Append(' '); + } + return sb.ToString(); + } + } + } public List reusablePropertyList = new List(); - public Animation ParseAnimation(JSON.Object obj, GameObject go = null){ - // if no gameobject is given, attempt to find a name property and find it that way - if(go == null){ - var panel = obj.GetString("name", null); - if (string.IsNullOrEmpty(panel) || !UiDict.TryGetValue(panel, out go)) - return null; - } + public Animation ParseAnimation(JSON.Object obj, GameObject go = null){ + // if no gameobject is given, attempt to find a name property and find it that way + if(go == null){ + var panel = obj.GetString("name", null); + if (string.IsNullOrEmpty(panel) || !UiDict.TryGetValue(panel, out go)) + return null; + } - Animation anim = go.GetComponent(); - // create a new animation component if no Animation existed - if(anim == null) - anim = go.AddComponent(); + Animation anim = go.GetComponent(); + // create a new animation component if no Animation existed + if(anim == null) + anim = go.AddComponent(); - foreach(var prop in obj.GetArray("properties")){ - reusablePropertyList.Add(ParseProperty(anim, prop.Obj)); - } + foreach(var prop in obj.GetArray("properties")){ + reusablePropertyList.Add(ParseProperty(anim, prop.Obj)); + } anim.AttachTriggers(reusablePropertyList); reusablePropertyList.Clear(); @@ -832,39 +830,39 @@ public Animation ParseAnimation(JSON.Object obj, GameObject go = null){ } - return anim; - } + return anim; + } - public AnimationProperty ParseProperty(Animation anim, JSON.Object obj){ - var trigger = obj.GetString("trigger", "OnCreate"); + public AnimationProperty ParseProperty(Animation anim, JSON.Object obj){ + var trigger = obj.GetString("trigger", "OnCreate"); - if(!anim.ValidTrigger(trigger)) + if(!anim.ValidTrigger(trigger)) trigger = "OnCreate"; - string from = obj.GetString("from", null); - string to = obj.GetString("to", null); - var animprop = new AnimationProperty{ - duration = obj.GetFloat("duration", 0f), - delay = obj.GetFloat("delay", 0f), - repeat = obj.GetInt("repeat", 0), - repeatDelay = obj.GetFloat("repeatDelay", 0f), - easing = obj.GetString("easing", "Linear"), + string from = obj.GetString("from", null); + string to = obj.GetString("to", null); + var animprop = new AnimationProperty{ + duration = obj.GetFloat("duration", 0f), + delay = obj.GetFloat("delay", 0f), + repeat = obj.GetInt("repeat", 0), + repeatDelay = obj.GetFloat("repeatDelay", 0f), + easing = obj.GetString("easing", "Linear"), target = obj.GetString("target", anim.gameObject.name), - type = obj.GetString("type", null), - animValue = new AnimationProperty.AnimationValue(to, from), - trigger = trigger - }; - anim.properties[trigger].Add(animprop); - - // if the animation has a graphic it means Start has allready been called on it - // manually start the OnCreate Properties in this case - if(anim.initialized && trigger == "OnCreate") + type = obj.GetString("type", null), + animValue = new AnimationProperty.AnimationValue(to, from), + trigger = trigger + }; + anim.properties[trigger].Add(animprop); + + // if the animation has a graphic it means Start has allready been called on it + // manually start the OnCreate Properties in this case + if(anim.initialized && trigger == "OnCreate") anim.StartProperty(animprop); - return animprop; - } + return animprop; + } - // RPC function to Add Animations to existing objects - // accepts the same json object that the CreateComponents function does - [RPC_Client] + // RPC function to Add Animations to existing objects + // accepts the same json object that the CreateComponents function does + [RPC_Client] public void AddAnimation( RPCMessage msg ) { string str = msg.read.StringRaw(); @@ -878,10 +876,10 @@ public void AddAnimation( RPCMessage msg ) foreach (var value in json){ Animation anim = ParseAnimation(value.Obj); - // if it returns a valid animation that hasnt allready been started, start it - if(anim == null || anim.initialized) - continue; - anim.Init(); + // if it returns a valid animation that hasnt allready been started, start it + if(anim == null || anim.initialized) + continue; + anim.Init(); } } } From 7c9a9811731d67ddf7771ff3eb4fff59c0b9cfcc Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 02:25:02 +0200 Subject: [PATCH 30/53] Added maskSoftness to RectMask2D JSON api --- CommunityEntity.UI.cs | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index bbb6c37..334865e 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -436,7 +436,11 @@ T GetOrAddComponent() where T : Component } case "UnityEngine.UI.RectMask2D": { - go.AddComponent(); + var c = GetOrAddComponent(); + if( ShouldUpdateField("maskSoftness") ) + c.softness = Vector2Int.RoundToInt(Vector2Ex.Parse( obj.GetString( "maskSoftness", "0.0 0.0" ))); + + HandleEnableState( obj, c ); break; } case "UnityEngine.UI.Mask": From 1feddd6d0f5ce5fbade04e01df0aa695db04b7d4 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 02:31:45 +0200 Subject: [PATCH 31/53] Fixed for update --- examples/AnimationTest.json | 127 +++++++++++++++--------------------- 1 file changed, 53 insertions(+), 74 deletions(-) diff --git a/examples/AnimationTest.json b/examples/AnimationTest.json index 7d2c7fd..ca4567f 100644 --- a/examples/AnimationTest.json +++ b/examples/AnimationTest.json @@ -31,9 +31,6 @@ "type":"RectTransform", "anchormin": "0 0", "anchormax": "1 1" - }, - { - "type":"NeedsCursor" } ] }, @@ -189,12 +186,8 @@ "anchormin": "0 -1", "anchormax": "1 0" }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Slide0_Kill", "properties": [ { "type": "Opacity", @@ -202,6 +195,7 @@ }, { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "MoveTo", "delay": 0.2, "duration": 0.5, @@ -210,6 +204,7 @@ }, { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Opacity", "delay": 0.2, "duration": 0.5, @@ -280,7 +275,6 @@ }, { "type": "Animation", - "mouseTarget": "Slide0_Kill", "properties": [ { "type": "Opacity", @@ -288,6 +282,7 @@ }, { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Opacity", "delay": 0, "duration": 1.5, @@ -298,6 +293,7 @@ }, { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Opacity", "delay": 1.5, "duration": 1.5, @@ -329,7 +325,6 @@ }, { "type": "Animation", - "mouseTarget": "Slide0_Kill", "properties": [ { "type": "Opacity", @@ -337,6 +332,7 @@ }, { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Color", "delay": 0, "duration": 1.5, @@ -347,6 +343,7 @@ }, { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Color", "delay": 1.5, "duration": 1.5, @@ -374,10 +371,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide0_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Scale", "delay": 0, "duration": 1.5, @@ -388,6 +385,7 @@ }, { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Scale", "delay": 1.5, "duration": 1.5, @@ -433,10 +431,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide0_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Rotate", "delay": 0, "duration": 1.5, @@ -447,6 +445,7 @@ }, { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Rotate", "delay": 1.5, "duration": 1.5, @@ -492,10 +491,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide0_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Translate", "delay": 0, "duration": 1.5, @@ -505,6 +504,7 @@ }, { "trigger": "OnClick", + "target": "Slide0_Kill", "type": "Translate", "delay": 1.5, "duration": 1.5, @@ -560,12 +560,8 @@ "anchormin": "0 -1", "anchormax": "1 0" }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Slide1_Kill", "properties": [ { "type": "Opacity", @@ -573,6 +569,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "MoveTo", "delay": 0.2, "duration": 0.5, @@ -581,6 +578,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Opacity", "delay": 0.2, "duration": 0.5, @@ -630,10 +628,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide1_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Opacity", "delay": 0, "duration": 1.5, @@ -644,6 +642,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Opacity", "delay": 1.5, "duration": 1.5, @@ -689,7 +688,6 @@ }, { "type": "Animation", - "mouseTarget": "Slide2_Block2", "properties": [ { "trigger": "OnHoverEnter", @@ -700,6 +698,7 @@ }, { "trigger": "OnHoverExit", + "target": "Slide2_Block2", "type": "Rotate", "delay": 0, "duration": 0.5, @@ -707,6 +706,7 @@ }, { "trigger": "OnHoverExit", + "target": "Slide2_Block2", "type": "Scale", "delay": 0, "duration": 0.5, @@ -714,6 +714,7 @@ }, { "trigger": "OnHoverExit", + "target": "Slide2_Block2", "type": "Rotate", "delay": 0.51, "duration": 0, @@ -747,7 +748,7 @@ "components": [ { - "type":"UnityEngine.UI.RawImage", + "type":"UnityEngine.UI.Button", "color": "0.35 0.65 0.45 1.0", }, { @@ -757,10 +758,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide2_Block3", "properties": [ { "trigger": "OnClick", + "target": "Slide2_Block3", "type": "Scale", "delay": 0, "duration": 0.2, @@ -768,6 +769,7 @@ }, { "trigger": "OnClick", + "target": "Slide2_Block3", "type": "Scale", "delay": 0.5, "duration": 0.2, @@ -916,10 +918,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide1_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Color", "delay": 0, "duration": 1.5, @@ -930,6 +932,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Translate", "delay": 0, "duration": 1.5, @@ -976,10 +979,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide1_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Translate", "delay": 0, "duration": 0.4, @@ -989,6 +992,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Translate", "delay": 0.4, "duration": 0.4, @@ -998,6 +1002,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Translate", "delay": 0.8, "duration": 0.4, @@ -1007,6 +1012,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Translate", "delay": 1.2, "duration": 0.4, @@ -1052,10 +1058,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide1_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Color", "delay": 0, "duration": 1.5, @@ -1066,6 +1072,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Translate", "delay": 0, "duration": 0.75, @@ -1075,6 +1082,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Translate", "delay": 0, "duration": 0.75, @@ -1085,6 +1093,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Translate", "delay": 0.75, "duration": 0.75, @@ -1094,6 +1103,7 @@ }, { "trigger": "OnClick", + "target": "Slide1_Kill", "type": "Translate", "delay": 0.75, "duration": 0.75, @@ -1167,12 +1177,8 @@ "anchormin": "0 -1", "anchormax": "1 0" }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Slide2_Kill", "properties": [ { "type": "Opacity", @@ -1180,6 +1186,7 @@ }, { "trigger": "OnClick", + "target": "Slide2_Kill", "type": "MoveTo", "delay": 0.2, "duration": 0.5, @@ -1188,6 +1195,7 @@ }, { "trigger": "OnClick", + "target": "Slide2_Kill", "type": "Opacity", "delay": 0.2, "duration": 0.5, @@ -1239,10 +1247,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide2_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide2_Kill", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1293,10 +1301,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide2_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide2_Kill", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1348,10 +1356,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide2_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide2_Kill", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1403,10 +1411,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide2_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide2_Kill", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1458,10 +1466,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide2_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide2_Kill", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1513,10 +1521,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide2_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide2_Kill", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1568,10 +1576,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide2_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide2_Kill", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1623,10 +1631,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide2_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide2_Kill", "type": "Translate", "delay": 0, "duration": 1.5, @@ -1703,12 +1711,8 @@ "anchormin": "0 -1", "anchormax": "1 0" }, - { - "type":"NeedsCursor" - }, { "type": "Animation", - "mouseTarget": "Slide3_Kill", "properties": [ { "type": "Opacity", @@ -1716,6 +1720,7 @@ }, { "trigger": "OnClick", + "target": "Slide3_Kill", "type": "MoveTo", "delay": 0.2, "duration": 0.5, @@ -1724,6 +1729,7 @@ }, { "trigger": "OnClick", + "target": "Slide3_Kill", "type": "Opacity", "delay": 0.2, "duration": 0.5, @@ -1776,10 +1782,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide4_Block1", "properties": [ { "trigger": "OnClick", + "target": "Slide4_Block1", "type": "Rotate", "delay": 0, "duration": 1.5, @@ -1824,10 +1830,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide3_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide3_Kill", "type": "MoveTo", "delay": 0, "duration": 1.5, @@ -1859,10 +1865,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide4_Block1", "properties": [ { "trigger": "OnHoverEnter", + "target": "Slide4_Block1", "type": "MoveTo", "delay": 0, "duration": 0.5, @@ -1870,6 +1876,7 @@ }, { "trigger": "OnHoverExit", + "target": "Slide4_Block1", "type": "MoveTo", "delay": 0, "duration": 0.5, @@ -1916,10 +1923,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide4_Block2", "properties": [ { "trigger": "OnClick", + "target": "Slide4_Block2", "type": "Rotate", "delay": 0, "duration": 1.5, @@ -1964,10 +1971,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide3_Kill", "properties": [ { "trigger": "OnClick", + "target": "Slide3_Kill", "type": "MoveTo", "delay": 0, "duration": 1.5, @@ -1999,10 +2006,10 @@ }, { "type": "Animation", - "mouseTarget": "Slide4_Block2", "properties": [ { "trigger": "OnHoverEnter", + "target": "Slide4_Block2", "type": "MoveTo", "delay": 0, "duration": 0.5, @@ -2010,6 +2017,7 @@ }, { "trigger": "OnHoverExit", + "target": "Slide4_Block2", "type": "MoveTo", "delay": 0, "duration": 0.5, @@ -2037,35 +2045,6 @@ } ] }, - { - "name": "Slide4_Kill", - "parent": "Slide4", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"Slide4", - "color": "0.9 0.8 0.3 0.12" - }, - { - "type":"RectTransform", - "anchormin": "0.9 0.0", - "anchormax": "1 0.07" - } - ] - }, - { - "parent": "Slide4_Kill", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Done", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, { "parent": "UI", "components": From 95e8c78c3bf5a4e911a915a4fa721f78ef72b973 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 02:42:33 +0200 Subject: [PATCH 32/53] Delete Old incompatible example --- examples/UsecaseExample.json | 1384 ---------------------------------- 1 file changed, 1384 deletions(-) delete mode 100644 examples/UsecaseExample.json diff --git a/examples/UsecaseExample.json b/examples/UsecaseExample.json deleted file mode 100644 index f2e0028..0000000 --- a/examples/UsecaseExample.json +++ /dev/null @@ -1,1384 +0,0 @@ -[ - { - "name": "UI", - "parent":"Overlay", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 1.0", - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"NeedsCursor" - } - ] - }, - { - "name": "Background", - "parent":"UI", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Image1", - "parent":"Background", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/3WE54zp.png", - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"Animation", - "properties": [ - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0", - "duration": 0, - "delay": 0 - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.7", - "duration": 2.5, - "delay": 0.5, - "repeat": -1, - "repeatDelay": 5.0, - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.0", - "duration": 2.5, - "delay": 4.5, - "repeat": -1, - "repeatDelay": 5.0, - }, - { - "trigger" : "OnCreate", - "type": "Scale", - "to": "1.45 1.45", - "duration": 0.05, - "delay": 0.0, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.2 -0.1", - "duration": 0.0, - "delay": 0.1, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.4 -0.2", - "duration": 0, - "delay": 7.0, - "repeat": -1, - "repeatDelay": 7.5, - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "0.4 0.2", - "duration": 7.0, - "delay": 0.5, - "repeat": -1, - "repeatDelay": 0.5, - }, - { - "trigger" : "OnCreate", - "type": "Rotate", - "to": "0 0 0", - "duration": 0, - "delay": 7.0, - "repeat": -1, - "repeatDelay": 7.5, - }, - { - "trigger" : "OnCreate", - "type": "Rotate", - "to": "0 0 30", - "duration": 7.0, - "delay": 0.5, - "repeat": -1, - "repeatDelay": 0.5, - } - ] - } - ] - }, - { - "name": "Image2", - "parent":"Background", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/3WE54zp.png", - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"Animation", - "properties": [ - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0", - "duration": 0, - "delay": 0 - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.7", - "duration": 2.5, - "delay": 1.0, - "repeat": -1, - "repeatDelay": 12.0, - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.0", - "duration": 2.5, - "delay": 10.5, - "repeat": -1, - "repeatDelay": 12.0, - }, - { - "trigger" : "OnCreate", - "type": "Scale", - "to": "1.25 1.25", - "duration": 0.05, - "delay": 0.0, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.1 -0.1", - "duration": 0.0, - "delay": 0.1, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.2 -0.2", - "duration": 0, - "delay": 14.5, - "repeat": -1, - "repeatDelay": 14.5, - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "0.2 0.2", - "duration": 14.0, - "delay": 0.5, - "repeat": -1, - "repeatDelay": 0.5, - }, - ] - } - ] - }, - { - "name": "Image3", - "parent":"Background", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/dnw34TV.png", - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"Animation", - "properties": [ - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0", - "duration": 0, - "delay": 0 - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.7", - "duration": 2.5, - "delay": 3.5, - "repeat": -1, - "repeatDelay": 9.0, - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.0", - "duration": 2.5, - "delay": 10.0, - "repeat": -1, - "repeatDelay": 9.0, - } - ] - } - ] - }, - { - "name": "Image4", - "parent":"Background", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/GTjhKO6.png", - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"Animation", - "properties": [ - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0", - "duration": 0, - "delay": 0 - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.7", - "duration": 2.5, - "delay": 2.5, - "repeat": -1, - "repeatDelay": 5.0, - }, - { - "trigger" : "OnCreate", - "type": "Opacity", - "to": "0.0", - "duration": 2.5, - "delay": 6.5, - "repeat": -1, - "repeatDelay": 5.0, - }, - { - "trigger" : "OnCreate", - "type": "Scale", - "to": "1.45 1.45", - "duration": 0.05, - "delay": 0.0, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.2 -0.1", - "duration": 0.0, - "delay": 0.1, - "repeat": 0 - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "-0.4 -0.2", - "duration": 0, - "delay": 9.0, - "repeat": -1, - "repeatDelay": 7.5, - }, - { - "trigger" : "OnCreate", - "type": "Translate", - "to": "0.4 0.2", - "duration": 7.0, - "delay": 2.5, - "repeat": -1, - "repeatDelay": 0.5, - }, - { - "trigger" : "OnCreate", - "type": "Rotate", - "to": "0 0 0", - "duration": 0, - "delay": 9.0, - "repeat": -1, - "repeatDelay": 7.5, - }, - { - "trigger" : "OnCreate", - "type": "Rotate", - "to": "0 0 30", - "duration": 14.5, - "delay": 2.5, - "repeat": -1, - "repeatDelay": 0.5, - } - ] - } - ] - }, - { - "parent": "UI", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Choose your Class", - "fontSize":44, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.75", - "anchormax": "0.93 0.95" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - } - ] - }, - { - "name": "Cards", - "parent":"UI", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.07 0.1", - "anchormax": "0.93 0.9" - }, - { - "type": "Animation", - "properties": [ - { - "type": "MoveTo", - "to": "1.07 1.1 1.93 1.9" - }, - { - "type": "MoveTo", - "delay": 1.4, - "to": "0.07 0.1 0.93 0.9" - } - ] - } - ] - }, - { - "name": "Card1", - "parent":"Cards", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0", - "anchormax": "0.5 0", - "offsetmin": "-572 40", - "offsetmax": "-100 472" - }, - { - "type": "Animation", - "mouseTarget": "CardBody1", - "properties": [ - { - "type": "Rotate", - "to": "3 10 10" - }, - { - "type": "Translate", - "to": "-0.02 -0.2" - }, - { - "type": "Rotate", - "delay": 2.0, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "0 0 0" - }, - { - "type": "Translate", - "to": "0.02 0.2", - "delay": 2.0, - "duration": 0.7, - "easing": ".06 .77 .3 .94" - }, - { - "type": "Scale", - "delay": 2.0, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "1.1 1.1" - }, - { - "type": "Scale", - "delay": 2.53, - "duration": 0.38, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.06 1.06" - }, - { - "trigger": "OnHoverEnter", - "type": "Rotate", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "0 0 3" - }, - { - "trigger": "OnHoverExit", - "type": "Scale", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverExit", - "type": "Rotate", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "0 0 0" - } - ] - } - ] - }, - { - "name": "CardBackground1", - "parent":"Card1", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 2.0, - "duration": 0.4, - "to": "1.0" - }, - { - "type": "Opacity", - "delay": 2.5, - "duration": 2.0, - "to": "0.2", - "repeat": -1, - "repeatDelay": 3.0 - }, - { - "type": "Opacity", - "delay": 4.5, - "duration": 3.0, - "to": "1.0", - "repeat": -1, - "repeatDelay": 3.0 - } - ] - } - ] - }, - { - "name": "CardBackgroundHover1", - "parent":"Card1", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "mouseTarget": "CardBody1", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "2.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - }, - ] - } - ] - }, - { - "name": "CardBody1", - "parent":"Card1", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0.5", - "anchormax": "0.5 0.5", - "offsetmin": "-149 -184", - "offsetmax": "149 184" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/NHO2yEy.png" - }, - { - "type": "UnityEngine.UI.Mask" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 2.0, - "duration": 0.6, - "to": "1.0" - } - ] - } - ] - }, - { - "name": "CardBodyHover1", - "parent":"CardBody1", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "color": "0.1 0.075 0 0.3" - }, - { - "type": "Animation", - "mouseTarget": "CardBody1", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - } - ] - } - ] - }, - { - "name": "CardBodyText1", - "parent":"CardBody1", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "UnityEngine.UI.Text", - "text": "Assasin", - "fontSize":44, - "align": "MiddleCenter" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.08", - "distance": "2 2" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.04", - "distance": "4 4" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.02", - "distance": "6 6" - }, - { - "type": "Animation", - "mouseTarget": "CardBody1", - "properties": [ - { - "trigger": "OnHoverEnter", - "type": "MoveTo", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0.3 -1 1.3 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0 0", - "to": "1.1 1.1" - }, - { - "trigger": "OnHoverExit", - "type": "MoveTo", - "delay": 0.1, - "duration": 0.2, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "Card2", - "parent":"Cards", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0", - "anchormax": "0.5 0", - "offsetmin": "-236 40", - "offsetmax": "236 472" - }, - { - "type": "Animation", - "mouseTarget": "CardBody2", - "properties": [ - { - "type": "Rotate", - "to": "3 10 10" - }, - { - "type": "Translate", - "to": "-0.02 -0.2" - }, - { - "type": "Rotate", - "delay": 2.5, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "0 0 0" - }, - { - "type": "Translate", - "to": "0.02 0.2", - "delay": 2.5, - "duration": 0.7, - "easing": ".06 .77 .3 .94" - }, - { - "type": "Scale", - "delay": 2.5, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "1.1 1.1" - }, - { - "type": "Scale", - "delay": 3.03, - "duration": 0.38, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.06 1.06" - }, - { - "trigger": "OnHoverEnter", - "type": "Rotate", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "0 0 3" - }, - { - "trigger": "OnHoverExit", - "type": "Scale", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverExit", - "type": "Rotate", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "0 0 0" - } - ] - } - ] - }, - { - "name": "CardBackground2", - "parent":"Card2", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 2.5, - "duration": 0.4, - "to": "1.0" - }, - { - "type": "Opacity", - "delay": 3.0, - "duration": 2.0, - "to": "0.2", - "repeat": -1, - "repeatDelay": 3.0 - }, - { - "type": "Opacity", - "delay": 5.0, - "duration": 3.0, - "to": "1.0", - "repeat": -1, - "repeatDelay": 3.0 - } - ] - } - ] - }, - { - "name": "CardBackgroundHover2", - "parent":"Card2", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "mouseTarget": "CardBody2", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "2.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - }, - ] - } - ] - }, - { - "name": "CardBody2", - "parent":"Card2", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0.5", - "anchormax": "0.5 0.5", - "offsetmin": "-149 -184", - "offsetmax": "149 184" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/Rgw0z8R.png" - }, - { - "type": "UnityEngine.UI.Mask" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 2.5, - "duration": 0.6, - "to": "1.0" - } - ] - } - ] - }, - { - "name": "CardBodyHover2", - "parent":"CardBody2", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "color": "0.1 0.075 0 0.3" - }, - { - "type": "Animation", - "mouseTarget": "CardBody2", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - } - ] - } - ] - }, - { - "name": "CardBodyText2", - "parent":"CardBody2", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "UnityEngine.UI.Text", - "text": "Sniper", - "fontSize":44, - "align": "MiddleCenter" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.08", - "distance": "2 2" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.04", - "distance": "4 4" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.02", - "distance": "6 6" - }, - { - "type": "Animation", - "mouseTarget": "CardBody2", - "properties": [ - { - "trigger": "OnHoverEnter", - "type": "MoveTo", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0.3 -1 1.3 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0 0", - "to": "1.1 1.1" - }, - { - "trigger": "OnHoverExit", - "type": "MoveTo", - "delay": 0.1, - "duration": 0.2, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "Card3", - "parent":"Cards", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0", - "anchormax": "0.5 0", - "offsetmin": "100 40", - "offsetmax": "572 472" - }, - { - "type": "Animation", - "mouseTarget": "CardBody3", - "properties": [ - { - "type": "Rotate", - "to": "3 10 10" - }, - { - "type": "Translate", - "to": "-0.02 -0.2" - }, - { - "type": "Rotate", - "delay": 3.0, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "0 0 0" - }, - { - "type": "Translate", - "to": "0.02 0.2", - "delay": 3.0, - "duration": 0.7, - "easing": ".06 .77 .3 .94" - }, - { - "type": "Scale", - "delay": 3.0, - "duration": 0.6, - "easing": ".06 .77 .3 .94", - "to": "1.1 1.1" - }, - { - "type": "Scale", - "delay": 3.53, - "duration": 0.38, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.06 1.06" - }, - { - "trigger": "OnHoverEnter", - "type": "Rotate", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "0 0 3" - }, - { - "trigger": "OnHoverExit", - "type": "Scale", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "1 1" - }, - { - "trigger": "OnHoverExit", - "type": "Rotate", - "delay": 0.1, - "duration": 0.2, - "easing": "0.05 0.95 0.7 1", - "to": "0 0 0" - } - ] - } - ] - }, - { - "name": "CardBackground3", - "parent":"Card3", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 3.0, - "duration": 0.4, - "to": "1.0" - }, - { - "type": "Opacity", - "delay": 3.5, - "duration": 2.0, - "to": "0.2", - "repeat": -1, - "repeatDelay": 3.0 - }, - { - "type": "Opacity", - "delay": 5.5, - "duration": 3.0, - "to": "1.0", - "repeat": -1, - "repeatDelay": 3.0 - } - ] - } - ] - }, - { - "name": "CardBackgroundHover3", - "parent":"Card3", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/DH0Bn6c.png" - }, - { - "type": "Animation", - "mouseTarget": "CardBody3", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "2.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - }, - ] - } - ] - }, - { - "name": "CardBody3", - "parent":"Card3", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.5 0.5", - "anchormax": "0.5 0.5", - "offsetmin": "-149 -184", - "offsetmax": "149 184" - }, - { - "type": "UnityEngine.UI.RawImage", - "url": "https://i.imgur.com/XGAEmHd.png" - }, - { - "type": "UnityEngine.UI.Mask" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 3.0, - "duration": 0.6, - "to": "1.0" - } - ] - } - ] - }, - { - "name": "CardBodyHover3", - "parent":"CardBody3", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "UnityEngine.UI.RawImage", - "color": "0.1 0.075 0 0.3" - }, - { - "type": "Animation", - "mouseTarget": "CardBody3", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnHoverEnter", - "type": "Opacity", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "to": "1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Opacity", - "delay": 0.1, - "duration": 0.2, - "to": "0" - } - ] - } - ] - }, - { - "name": "CardBodyText3", - "parent":"CardBody3", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "UnityEngine.UI.Text", - "text": "Tank", - "fontSize":44, - "align": "MiddleCenter" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.08", - "distance": "2 2" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.04", - "distance": "4 4" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.02", - "distance": "6 6" - }, - { - "type": "Animation", - "mouseTarget": "CardBody3", - "properties": [ - { - "trigger": "OnHoverEnter", - "type": "MoveTo", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0.3 -1 1.3 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "easing": "0 1.45 0.6 1", - "from": "0 0", - "to": "1.1 1.1" - }, - { - "trigger": "OnHoverExit", - "type": "MoveTo", - "delay": 0.1, - "duration": 0.2, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "Button88", - "parent": "UI", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"UI", - "command":"cui.endtest", - "color": "0.9 0.8 0.3 0.02" - }, - { - "type":"RectTransform", - "anchormin": "0.0 0.0", - "anchormax": "0.1 0.07" - } - ] - }, - { - "parent": "Button88", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Kill UI", - "fontSize":16, - "align": "MiddleCenter" - } - ] - } -] From e09a937052c4886f24bb5b870c4487d449442ca9 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 03:05:36 +0200 Subject: [PATCH 33/53] FadeOut not FadeIn --- CommunityEntity.UI.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index 334865e..8ddc1eb 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -107,7 +107,7 @@ public void AddUI( RPCMessage msg ) } if ( json.ContainsKey( "fadeOut" ) ) - Animation.AddFadeIn(go, json.GetFloat( "fadeOut", 0 ), json.GetBoolean( "fadeAsGroup", false )); + Animation.AddFadeOut(go, json.GetFloat( "fadeOut", 0 ), json.GetBoolean( "fadeAsGroup", false )); var anim = go.GetComponent(); if(anim != null) From 4f8d779774447efc62e756a3b6b4db602161b0c4 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 17 May 2023 03:10:28 +0200 Subject: [PATCH 34/53] easing default fix --- CommunityEntity.UI.Animation.cs | 38 ++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index b314f0f..a1dc8f4 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -352,11 +352,14 @@ public static void InitPendingAnims(){ // this could be a class if the allocation is insignificant public class AnimationProperty { + + #region Fields + public float duration; public float delay; public int repeat; public float repeatDelay; - public string easing; + public string easing = "Linear"; public string type; public AnimationProperty.AnimationValue animValue; public string target; @@ -368,6 +371,10 @@ public class AnimationProperty public int completedRounds; + #endregion + + #region Core + // Launches the animation, keeping track of loops if its set to repeat public IEnumerator Animate() { @@ -561,6 +568,10 @@ public IEnumerator AnimateProperty() return Animation.emptyEnumerator; } + #endregion + + #region Helpers + // manipulates the input based on a preset easing function or a custom Bezier curve // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve // NOTE: the return value is unclamped as this allowes bezier curves with under- and overshoot to work @@ -610,6 +621,8 @@ public IEnumerator InterpolateValue(AnimationValue value, float duration, string value.apply(end); } + #endregion + // Generalizes the values for an AnimationProperty public class AnimationValue { // gets set just before InterpolateValue is called @@ -649,6 +662,8 @@ public DynamicVector ParseFromString(string source){ // turning this into a struct makes alot of sense, thanks for the insights @WhiteThunder public struct DynamicVector { + #region Fields + // need it to hold more than 4? add a _valueN and adjust the Capacity, indexer & Clear method private float _value0; private float _value1; @@ -679,6 +694,11 @@ public float this[int i]{ } } } + + #endregion + + #region Adding & Constructing + public DynamicVector(Vector4 vec) : this() => Add(vec); public DynamicVector(Color col) : this() => Add(col); public DynamicVector(Vector3 vec) : this() => Add(vec); @@ -711,6 +731,11 @@ public void Add(Vector2 vec){ Add(vec.x); Add(vec.y); } + + #endregion + + #region Casting + // the ToVectorX & ToColor Functions have an optional offset arguement that shifts the starting point of the list when turning it into the vector public Vector4 ToVector4(int offset = 0){ return new Vector4( @@ -741,6 +766,11 @@ public Vector2 ToVector2(int offset = 0){ TryGet(offset + 1) ); } + + #endregion + + #region Helpers + public float TryGet(int index, float defaultValue = 0f){ if(index < 0 || index >= this.Count) return defaultValue; @@ -755,6 +785,10 @@ public void Clear(){ Count = 0; } + #endregion + + #region Operations + public static DynamicVector Lerp(DynamicVector from, DynamicVector to, float t){ t = Mathf.Clamp01(t); return LerpUnclamped(from, to, t); @@ -795,6 +829,8 @@ public override string ToString(){ } return sb.ToString(); } + + #endregion } } From eff31d5399acc2b54b7617a23715d37563999db1 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Fri, 19 May 2023 02:24:47 +0200 Subject: [PATCH 35/53] Fix CanvasGroup sometimes not getting created --- CommunityEntity.UI.Animation.cs | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index a1dc8f4..73779ab 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -298,13 +298,11 @@ public static void AddFadeIn(GameObject go, float duration, bool addCanvasGroup) }; anim.properties["OnCreate"].Add(prop); - - if(anim.initialized){ - if(anim.group == null && addCanvasGroup) + + if(addCanvasGroup && anim.group == null) { + anim.group = go.GetComponent(); + if(anim.group == null) anim.group = go.AddComponent(); - anim.StartProperty(prop); - } else if(addCanvasGroup) { - anim.group = go.GetComponent() ?? go.AddComponent(); } } @@ -326,12 +324,11 @@ public static void AddFadeOut(GameObject go, float duration, bool addCanvasGroup }; anim.properties["OnDestroy"].Add(prop); - - if(anim.initialized){ - if(anim.group == null && addCanvasGroup) + + if(addCanvasGroup && anim.group == null) { + anim.group = go.GetComponent(); + if(anim.group == null) anim.group = go.AddComponent(); - } else if(addCanvasGroup) { - anim.group = go.AddComponent(); } } @@ -857,13 +854,10 @@ public Animation ParseAnimation(JSON.Object obj, GameObject go = null){ reusablePropertyList.Clear(); // ensures a canvasGroup is added if needed, regardless of if its a new animation or an existing one - if(obj.GetBoolean("addCanvasGroup", false)){ - if(anim.initialized && anim.group == null){ + if(obj.GetBoolean("addCanvasGroup", false) && anim.group == null){ + anim.group = go.GetComponent(); + if(anim.group == null) anim.group = go.AddComponent(); - } else { - anim.group = go.GetComponent() ?? go.AddComponent(); - } - } return anim; From e19919606440948b074f1012cbcb33949f7c943a Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Sun, 13 Aug 2023 12:40:17 +0200 Subject: [PATCH 36/53] Fix Mask & RectMask2D cases fixed wrong type an AddComponent made both cases Update compliant --- CommunityEntity.UI.cs | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index 8ddc1eb..b4b766e 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -436,20 +436,23 @@ T GetOrAddComponent() where T : Component } case "UnityEngine.UI.RectMask2D": { - var c = GetOrAddComponent(); - if( ShouldUpdateField("maskSoftness") ) - c.softness = Vector2Int.RoundToInt(Vector2Ex.Parse( obj.GetString( "maskSoftness", "0.0 0.0" ))); + var c = GetOrAddComponent(); + if( ShouldUpdateField("maskSoftness") ) + c.softness = Vector2Int.RoundToInt(Vector2Ex.Parse( obj.GetString( "maskSoftness", "0.0 0.0" ))); HandleEnableState( obj, c ); break; } case "UnityEngine.UI.Mask": { - var c = go.AddComponent(); - c.showMaskGraphic = obj.GetBoolean("showMaskGraphic", true); + var c = GetOrAddComponent(); + if( ShouldUpdateField("showMaskGraphic") ) + c.showMaskGraphic = obj.GetBoolean("showMaskGraphic", true); + + HandleEnableState( obj, c ); break; } - case "Animation": + case "Animation": { // Moved Setup to its own function in CommunityEntity.UI.Animation.cs // now shares the code with the AddAnimation RPC function From 93bd1d75e841a64a406d8c2344696bd7d7bb6a63 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 14 Aug 2023 06:59:19 +0200 Subject: [PATCH 37/53] Client Test changes --- examples/AnimationTest.json | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/examples/AnimationTest.json b/examples/AnimationTest.json index ca4567f..dc1337e 100644 --- a/examples/AnimationTest.json +++ b/examples/AnimationTest.json @@ -7,6 +7,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.1 0.1 0.1 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -26,6 +27,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -180,6 +182,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.15 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -363,6 +366,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -423,6 +427,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -483,6 +488,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -554,6 +560,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.15 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -620,6 +627,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -680,6 +688,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -805,6 +814,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -910,6 +920,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -971,6 +982,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1050,6 +1062,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1171,6 +1184,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.05 0.15 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1237,6 +1251,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1291,6 +1306,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1346,6 +1362,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1401,6 +1418,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1456,6 +1474,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1511,6 +1530,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1566,6 +1586,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1621,6 +1642,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1705,6 +1727,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.01 0.01 0.01 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1771,6 +1794,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1822,6 +1846,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.15 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1854,6 +1879,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.05 0.05 0.7", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1912,6 +1938,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1963,6 +1990,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.15 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1995,6 +2023,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.05 0.05 0.7", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", From 1fd91f3563697b4636beb98756467737fe2d3996 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Tue, 22 Aug 2023 06:59:59 +0200 Subject: [PATCH 38/53] Fix culture dependant float parsing its possible that this wouldnt have been an issue once it was added to the client, but it was producing issues during client mod testing --- CommunityEntity.UI.Animation.cs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 73779ab..1621cb0 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -7,6 +7,7 @@ using System.Text; using Facepunch.Extend; using System.IO; +using System.Globalization; #if CLIENT @@ -584,8 +585,8 @@ public float Ease(string type, float input){ float X1, Y1, X2, Y2; if(split.Length < 4) return input; if( - !float.TryParse(split[0], out X1) || !float.TryParse(split[1], out Y1) || - !float.TryParse(split[2], out X2) || !float.TryParse(split[3], out Y2) + !float.TryParse(split[0], NumberStyles.Any, CultureInfo.InvariantCulture, out X1) || !float.TryParse(split[1], NumberStyles.Any, CultureInfo.InvariantCulture, out Y1) || + !float.TryParse(split[2], NumberStyles.Any, CultureInfo.InvariantCulture, out X2) || !float.TryParse(split[3], NumberStyles.Any, CultureInfo.InvariantCulture, out Y2) ) return input; return BezierEasing.Ease(X1, Y1, X2, Y2, input); @@ -647,7 +648,7 @@ public DynamicVector ParseFromString(string source){ if(split.Length == 0) return values; for(int i = 0; i < split.Length; i++){ float temp; - if(float.TryParse(split[i], out temp)) + if(float.TryParse(split[i], NumberStyles.Any, CultureInfo.InvariantCulture, out temp)) values.Add(temp); if(values.Count == values.Capacity) break; } From e262652b5d0f9b96510a278ea0528cc792fc1aa0 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Tue, 22 Aug 2023 07:39:23 +0200 Subject: [PATCH 39/53] Fix RawImage sprite --- examples/InteractiveComponentsTest.json | 94 ++++++++++++++++++------- 1 file changed, 69 insertions(+), 25 deletions(-) diff --git a/examples/InteractiveComponentsTest.json b/examples/InteractiveComponentsTest.json index 04ba59b..0740444 100644 --- a/examples/InteractiveComponentsTest.json +++ b/examples/InteractiveComponentsTest.json @@ -7,6 +7,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -26,6 +27,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.05 0.05 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -155,6 +157,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -185,6 +188,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type": "UnityEngine.UI.Outline", @@ -263,6 +267,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type": "UnityEngine.UI.Outline", @@ -341,6 +346,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type": "UnityEngine.UI.Outline", @@ -419,6 +425,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "1 1 1 1" + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -495,6 +502,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.08 0.08 0.08 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -526,6 +534,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -631,6 +640,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -696,6 +706,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "1 1 1 1" + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -748,6 +759,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -793,6 +805,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -808,7 +821,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -861,6 +875,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.09 0.09 0.09 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -897,7 +912,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "0.02 0.02 0.02 0.8" + "color": "0.02 0.02 0.02 0.8", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type": "UnityEngine.UI.RectMask2D" @@ -944,7 +960,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -996,7 +1013,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1048,7 +1066,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1100,7 +1119,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1152,7 +1172,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1205,6 +1226,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.06 0.06 0.06 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1220,7 +1242,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1351,7 +1374,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "0.02 0.02 0.02 0.8" + "color": "0.02 0.02 0.02 0.8", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type": "UnityEngine.UI.RectMask2D" @@ -1425,6 +1449,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1440,7 +1465,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1493,6 +1519,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "0.09 0.09 0.09 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1527,7 +1554,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "0.02 0.02 0.02 0.8" + "color": "0.02 0.02 0.02 0.8", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"UnityEngine.UI.ScrollView", @@ -1589,7 +1617,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1641,7 +1670,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1" + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1677,7 +1707,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1729,7 +1760,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1" + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1765,7 +1797,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1817,7 +1850,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1" + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1853,7 +1887,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1893,7 +1928,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1945,7 +1981,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1" + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -1981,7 +2018,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -2033,7 +2071,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1" + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -2069,7 +2108,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -2121,7 +2161,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1" + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -2164,6 +2205,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -2245,6 +2287,7 @@ { "type":"UnityEngine.UI.RawImage", "color": "1 1 1 0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", @@ -2281,7 +2324,8 @@ [ { "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" }, { "type":"RectTransform", From 341b9e0e544e9cdacf4be3ac7cc1c372a443bf9b Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Tue, 22 Aug 2023 07:43:25 +0200 Subject: [PATCH 40/53] Fix Invalid JSON --- examples/InteractiveComponentsTest.json | 4647 +++++++++++------------ 1 file changed, 2206 insertions(+), 2441 deletions(-) diff --git a/examples/InteractiveComponentsTest.json b/examples/InteractiveComponentsTest.json index 0740444..edbfde5 100644 --- a/examples/InteractiveComponentsTest.json +++ b/examples/InteractiveComponentsTest.json @@ -1,2443 +1,2208 @@ -[ - { - "name": "UI", - "parent":"Overlay", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"NeedsCursor" - } - ] - }, - { - "name": "Slide0", - "parent":"UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 0.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1", - "offsetmin": "0 0", - "offsetmax": "0 -60" - } - ] - }, - { - "parent": "Slide0", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Using Multiple Animations with different mouseTargets", - "color": "1 1 1 0.6", - "fontSize":28, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.65", - "anchormax": "0.93 0.92" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 0.5, - "duration": 0.5, - "from": "0", - "to": "1" - } - ] - } - ] - }, - { - "parent": "Slide0", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"lets us listen to multiple mouseTargets, Opening up things", - "color": "1 1 1 0.8", - "fontSize":22, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -30", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 1.0, - "duration": 0.5, - "from": "0", - "to": "1" - } - ] - } - ] - }, - { - "parent": "Slide0", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Like Tabs", - "color": "1 1 1 0.8", - "fontSize":50, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -170", - "offsetmax": "0 -90" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 1.5, - "duration": 0.5, - "from": "0", - "to": "1" - } - ] - } - ] - }, - { - "name": "TabBar", - "parent":"UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 20", - "offsetmax": "0 80" - }, - { - "type": "Animation", - "properties": [ - { - "type": "MoveToPX", - "delay": 1.5, - "easing": "0 1.45 0.6 1", - "duration": 0.5, - "to": "0 -60 0 0" - } - ] - } - ] - }, - { - "name": "Tab_Button1", - "parent":"TabBar", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.4", - "distance": "1 0" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "0.33 1", - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - } - ] - } - ] - }, - { - "parent": "Tab_Button1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Details", - "color": "1 1 1 1", - "fontSize":24, - "align": "MiddleCenter" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - } - ] - } - ] - }, - { - "name": "Tab_Button2", - "parent":"TabBar", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.4", - "distance": "1 0" - }, - { - "type":"RectTransform", - "anchormin": "0.33 0", - "anchormax": "0.66 1", - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - } - ] - } - ] - }, - { - "parent": "Tab_Button2", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Modals", - "color": "1 1 1 1", - "fontSize":24, - "align": "MiddleCenter" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - } - ] - } - ] - }, - { - "name": "Tab_Button3", - "parent":"TabBar", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.4", - "distance": "1 0" - }, - { - "type":"RectTransform", - "anchormin": "0.66 0", - "anchormax": "1 1", - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - } - ] - } - ] - }, - { - "parent": "Tab_Button3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Dropdowns", - "color": "1 1 1 1", - "fontSize":24, - "align": "MiddleCenter" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - } - ] - } - ] - }, - { - "name": "Tab_Highlight", - "parent":"TabBar", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 0", - "offsetmin": "0 0", - "offsetmax": "0 3" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0, - "to": "0.4 0.4 0.4 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button1", - "type": "Color", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0.25 0.8 0.35 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button1", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0 0 0.33 0" - }, - { - "trigger": "OnClick", - "target": "Tab_Button2", - "type": "Color", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0.25 0.8 0.35 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button2", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0.33 0 0.66 0" - }, - { - "trigger": "OnClick", - "target": "Tab_Button3", - "type": "Color", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0.25 0.8 0.35 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button3", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0.66 0 1 0" - }, - ] - } - ] - }, - { - "name": "Tabs", - "parent":"UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.08 0.08 0.08 0.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "1 0", - "anchormax": "2 1", - "offsetmin": "0 0", - "offsetmax": "0 -60" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "TabBar", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "0 0 1 1" - } - ] - } - ] - }, - { - "name": "Tab1", - "parent":"Tabs", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Tab_Button1", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button2", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "-1 0 0 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button3", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "-1 0 0 1" - } - ] - } - ] - }, - { - "parent": "Tab1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"this subtle change lets us react to mouse events on different panels, which is great for creating more complex UI behaviours completely without server interaction required", - "color": "1 1 1 0.9", - "fontSize":22, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -70", - "offsetmax": "0 0" - } - ] - }, - { - "parent": "Tab1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"for example, we can make a tab system that cohesively swipes from right to left depending on which tab the user last selected, and even have a material-style tab indicator that smoothly swipes between the tabs", - "color": "1 1 1 0.7", - "fontSize":18, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.8", - "anchormax": "0.9 0.8", - "offsetmin": "0 -160", - "offsetmax": "0 -80" - } - ] - }, - { - "parent": "Tab1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"aside from tabs we can create Modals & dropdowns with great UX", - "color": "1 1 1 0.7", - "fontSize":18, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.8", - "anchormax": "0.9 0.8", - "offsetmin": "0 -240", - "offsetmax": "0 -160" - } - ] - }, - { - "name": "Tab2", - "parent":"Tabs", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "1 0", - "anchormax": "2 1", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Tab_Button2", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button1", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "1 0 2 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button3", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "-1 0 0 1" - } - ] - } - ] - }, - { - "parent": "Tab2", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Click the button below to open a modal", - "color": "1 1 1 0.9", - "fontSize":22, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -70", - "offsetmax": "0 0" - } - ] - }, - { - "name": "ModalButton", - "parent": "Tab2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1" - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.5 0.5", - "anchormax": "0.5 0.5", - "offsetmin": "-50 -20", - "offsetmax": "50 20" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - } - ] - } - ] - }, - { - "parent": "ModalButton", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Open Modal", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "Tab3", - "parent":"Tabs", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "1 0", - "anchormax": "2 1", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Tab_Button3", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button2", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "1 0 2 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button1", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "1 0 2 1" - } - ] - } - ] - }, - { - "name": "Tab3_Section1", - "parent":"Tab3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "0.33 1", - } - ] - }, - { - "name": "DropDown1_Button", - "parent": "Tab3_Section1", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "0 -20", - "offsetmax": "0 20" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - } - ] - } - ] - }, - { - "parent": "DropDown1_Button", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Select Option", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown1_Parent", - "parent":"Tab3_Section1", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 0.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0", - }, - { - "type": "Animation", - "properties": [ +[{ + "name": "UI", + "parent": "Overlay", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "NeedsCursor" + } + ] + }, + { + "name": "Slide0", + "parent": "UI", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 1", + "offsetmin": "0 0", + "offsetmax": "0 -60" + } + ] + }, + { + "parent": "Slide0", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Using Multiple Animations with different mouseTargets", + "color": "1 1 1 0.6", + "fontSize": 28, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + }, + { + "type": "Animation", + "properties": [{ + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 0.5, + "duration": 0.5, + "from": "0", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide0", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "lets us listen to multiple mouseTargets, Opening up things", + "color": "1 1 1 0.8", + "fontSize": 22, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -30", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [{ + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 1.0, + "duration": 0.5, + "from": "0", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide0", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Like Tabs", + "color": "1 1 1 0.8", + "fontSize": 50, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -170", + "offsetmax": "0 -90" + }, + { + "type": "Animation", + "properties": [{ + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 1.5, + "duration": 0.5, + "from": "0", + "to": "1" + } + ] + } + ] + }, + { + "name": "TabBar", + "parent": "UI", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 20", + "offsetmax": "0 80" + }, + { + "type": "Animation", + "properties": [{ + "type": "MoveToPX", + "delay": 1.5, + "easing": "0 1.45 0.6 1", + "duration": 0.5, + "to": "0 -60 0 0" + }] + } + ] + }, + { + "name": "Tab_Button1", + "parent": "TabBar", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.4", + "distance": "1 0" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "0.33 1" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + } + ] + } + ] + }, + { + "parent": "Tab_Button1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Details", + "color": "1 1 1 1", + "fontSize": 24, + "align": "MiddleCenter" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + } + ] + } + ] + }, + { + "name": "Tab_Button2", + "parent": "TabBar", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.4", + "distance": "1 0" + }, + { + "type": "RectTransform", + "anchormin": "0.33 0", + "anchormax": "0.66 1" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + } + ] + } + ] + }, + { + "parent": "Tab_Button2", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Modals", + "color": "1 1 1 1", + "fontSize": 24, + "align": "MiddleCenter" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + } + ] + } + ] + }, + { + "name": "Tab_Button3", + "parent": "TabBar", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.4", + "distance": "1 0" + }, + { + "type": "RectTransform", + "anchormin": "0.66 0", + "anchormax": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + } + ] + } + ] + }, + { + "parent": "Tab_Button3", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Dropdowns", + "color": "1 1 1 1", + "fontSize": 24, + "align": "MiddleCenter" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + } + ] + } + ] + }, + { + "name": "Tab_Highlight", + "parent": "TabBar", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 0", + "offsetmin": "0 0", + "offsetmax": "0 3" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0, + "to": "0.4 0.4 0.4 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button1", + "type": "Color", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.25 0.8 0.35 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button1", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0 0 0.33 0" + }, + { + "trigger": "OnClick", + "target": "Tab_Button2", + "type": "Color", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.25 0.8 0.35 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button2", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.33 0 0.66 0" + }, + { + "trigger": "OnClick", + "target": "Tab_Button3", + "type": "Color", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.25 0.8 0.35 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button3", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.66 0 1 0" + } + ] + } + ] + }, + { + "name": "Tabs", + "parent": "UI", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.08 0.08 0.08 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 0", + "anchormax": "2 1", + "offsetmin": "0 0", + "offsetmax": "0 -60" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "TabBar", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + }] + } + ] + }, + { + "name": "Tab1", + "parent": "Tabs", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "Tab_Button1", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button2", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "-1 0 0 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button3", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "-1 0 0 1" + } + ] + } + ] + }, + { + "parent": "Tab1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "this subtle change lets us react to mouse events on different panels, which is great for creating more complex UI behaviours completely without server interaction required", + "color": "1 1 1 0.9", + "fontSize": 22, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -70", + "offsetmax": "0 0" + } + ] + }, + { + "parent": "Tab1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "for example, we can make a tab system that cohesively swipes from right to left depending on which tab the user last selected, and even have a material-style tab indicator that smoothly swipes between the tabs", + "color": "1 1 1 0.7", + "fontSize": 18, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.8", + "anchormax": "0.9 0.8", + "offsetmin": "0 -160", + "offsetmax": "0 -80" + } + ] + }, + { + "parent": "Tab1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "aside from tabs we can create Modals & dropdowns with great UX", + "color": "1 1 1 0.7", + "fontSize": 18, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.8", + "anchormax": "0.9 0.8", + "offsetmin": "0 -240", + "offsetmax": "0 -160" + } + ] + }, + { + "name": "Tab2", + "parent": "Tabs", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 0", + "anchormax": "2 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "Tab_Button2", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button1", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "1 0 2 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button3", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "-1 0 0 1" + } + ] + } + ] + }, + { + "parent": "Tab2", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Click the button below to open a modal", + "color": "1 1 1 0.9", + "fontSize": 22, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -70", + "offsetmax": "0 0" + } + ] + }, + { + "name": "ModalButton", + "parent": "Tab2", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.5 0.5", + "offsetmin": "-50 -20", + "offsetmax": "50 20" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "parent": "ModalButton", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Open Modal", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "Tab3", + "parent": "Tabs", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 0", + "anchormax": "2 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "Tab_Button3", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button2", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "1 0 2 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button1", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "1 0 2 1" + } + ] + } + ] + }, + { + "name": "Tab3_Section1", + "parent": "Tab3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "0.33 1" + } + ] + }, + { + "name": "DropDown1_Button", + "parent": "Tab3_Section1", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "0 -20", + "offsetmax": "0 20" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "parent": "DropDown1_Button", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Select Option", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown1_Parent", + "parent": "Tab3_Section1", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "Animation", + "properties": [ - { - "trigger": "OnClick", - "target": "DropDown1_Button", - "type": "MoveTo", - "duration": 0, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "DropDown1_Parent", - "type": "MoveTo", - "delay": 0.3, - "duration": 0, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "DropDown1_Container", - "parent": "DropDown1_Parent", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.02 0.02 0.02 0.8", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.RectMask2D" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "2 -20", - "offsetmax": "-2 -20" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "1 1 1 0.1", - "distance": "1 1" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown1_Button", - "type": "MoveToPX", - "easing": "0 1.15 0.6 1", - "duration": 0.3, - "to": "2 -220 -2 -20" - }, - { - "trigger": "OnClick", - "target": "DropDown1_Parent", - "type": "MoveToPX", - "easing": "0 0.85 0.6 1", - "duration": 0.3, - "to": "2 -20 -2 -20" - } - ] - } - ] - }, - { - "name": "DropDown1_Option1", - "parent": "DropDown1_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -40", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown1_Option1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Selecting an Option Closes the Dropdown", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown1_Option2", - "parent": "DropDown1_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -80", - "offsetmax": "0 -40" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown1_Option2", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Option 2", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown1_Option3", - "parent": "DropDown1_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -120", - "offsetmax": "0 -80" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown1_Option3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Dont choose me", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown1_Option4", - "parent": "DropDown1_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -160", - "offsetmax": "0 -120" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown1_Option4", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Choose me", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown1_Option5", - "parent": "DropDown1_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -200", - "offsetmax": "0 -160" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown1_Option5", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"i'm just filler", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "Tab3_Section2", - "parent":"Tab3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.06 0.06 0.06 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.33 0", - "anchormax": "0.66 1", - } - ] - }, - { - "name": "DropDown2_Button", - "parent": "Tab3_Section2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "0 -20", - "offsetmax": "0 20" - }, - { - "type": "UnityEngine.UI.RectMask2D" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - } - ] - } - ] - }, - { - "name": "DropDown2_ButtonExpand", - "parent": "DropDown2_Button", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 0.75 0.6 1", - "to": "0 -1 1 0" - }, - { - "trigger": "OnClick", - "target": "DropDown2_ButtonCollapse", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 0.75 0.6 1", - "to": "0 0 1 1" - } - ] - } - ] - }, - { - "parent": "DropDown2_ButtonExpand", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Expand", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown2_ButtonCollapse", - "parent": "DropDown2_Button", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 2" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown2_ButtonExpand", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 0.75 0.6 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 0.75 0.6 1", - "to": "0 1 1 2" - } - ] - } - ] - }, - { - "parent": "DropDown2_ButtonCollapse", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Collapse", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown2_Container", - "parent": "Tab3_Section2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.02 0.02 0.02 0.8", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.RectMask2D" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "2 -20", - "offsetmax": "-2 -20" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "1 1 1 0.1", - "distance": "1 1" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown2_ButtonExpand", - "type": "MoveToPX", - "easing": "0 1.15 0.6 1", - "duration": 0.3, - "to": "2 -320 -2 -20" - }, - { - "trigger": "OnClick", - "target": "DropDown2_ButtonCollapse", - "type": "MoveToPX", - "easing": "0 0.85 0.6 1", - "duration": 0.3, - "to": "2 -20 -2 -20" - } - ] - } - ] - }, - { - "name": "DropDown2_TextContainer", - "parent": "DropDown2_Container", - "components": - [ - { - "type":"RectTransform", - "anchormin": "0.05 1", - "anchormax": "0.95 1", - "offsetmin": "0 -300", - "offsetmax": "0 0" - } - ] - }, - { - "parent": "DropDown2_TextContainer", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"unlike the first dropdown, this dropdown can only be closed by clicking the Collapse button. the Expand/Collapse button illustrates that this also lets us somewhat track state right in the UI, which allows us to create simple triggerals like checkboxes without requiring any AddUI/Destroy calls from the server", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "Tab3_Section3", - "parent":"Tab3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.66 0", - "anchormax": "1 1", - } - ] - }, - { - "name": "DropDown3_Button", - "parent": "Tab3_Section3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "0 -20", - "offsetmax": "0 20" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - } - ] - } - ] - }, - { - "parent": "DropDown3_Button", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Select Option", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown3_Parent", - "parent":"Tab3_Section3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 0.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown3_Button", - "type": "MoveTo", - "duration": 0, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "delay": 0.3, - "duration": 0, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "DropDown3_Container", - "parent":"Tab3_Section3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.02 0.02 0.02 0.8", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"UnityEngine.UI.ScrollView", - "vertical": true, - "horizontal": false, - "movementType": "Clamped", - "inertia": false, - "contentTransform": { - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -280", - "offsetmax": "0 0" - }, - "verticalScrollbar" : { - "autoHide": true, - "size": 10 - }, - "scrollSensitivity": 15.0 - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "2 -20", - "offsetmax": "-2 -20" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "1 1 1 0.1", - "distance": "1 1" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown3_Button", - "type": "MoveToPX", - "easing": "0 1.15 0.6 1", - "duration": 0.3, - "to": "2 -220 -2 -20" - }, - { - "trigger": "OnClick", - "target": "DropDown3_Parent", - "type": "MoveToPX", - "easing": "0 0.85 0.6 1", - "duration": 0.3, - "to": "2 -20 -2 -20" - } - ] - } - ] - }, - { - "name": "DropDown3_Option1", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -40", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Selecting an Option wont close the Dropdown", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown3_Option1Selected", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -40", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown3_Option1", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "DropDown3_Option2", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -80", - "offsetmax": "0 -40" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option2", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"You Can Select Me", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown3_Option2Selected", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -80", - "offsetmax": "0 -40" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown3_Option2", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "DropDown3_Option3", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -120", - "offsetmax": "0 -80" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Or Me!", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown3_Option3Selected", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -120", - "offsetmax": "0 -80" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown3_Option3", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "DropDown3_Option4", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -160", - "offsetmax": "0 -120" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.15 0.35 0.2 0.1" - }, - ] - } - ] - }, - { - "parent": "DropDown3_Option4", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Not me Though", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown3_Option5", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -200", - "offsetmax": "0 -160" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option5", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"i'm just filler", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown3_Option5Selected", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -200", - "offsetmax": "0 -160" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown3_Option5", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "DropDown3_Option6", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -240", - "offsetmax": "0 -200" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option6", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"i'm just filler", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown3_Option6Selected", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -240", - "offsetmax": "0 -200" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown3_Option6", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "DropDown3_Option7", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -280", - "offsetmax": "0 -240" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option7", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"i'm just filler", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "DropDown3_Option7Selected", - "parent": "DropDown3_Container", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -280", - "offsetmax": "0 -240" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "DropDown3_Option7", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - } - ] - }, - { - "type": "Animation", - "mouseTarget": "DropDown3_Option7Selected", - "properties": [ - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "ModalParent", - "parent":"UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "ModalButton", - "type": "Color", - "easing": "0 1.15 0.6 1", - "duration": 0, - "to": "0.05 0.05 0.05 0.0" - }, - { - "trigger": "OnClick", - "target": "ModalButton", - "type": "Color", - "easing": "0 1.15 0.6 1", - "delay": 0.5, - "duration": 0.5, - "from": "0.05 0.05 0.05 0.0", - "to": "0.05 0.05 0.05 0.98" - }, - { - "trigger": "OnClick", - "target": "ModalButton", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "ModalCloseButton", - "type": "Color", - "easing": "0 1.15 0.6 1", - "duration": 0.2, - "to": "0.05 0.05 0.05 0.0" - }, - { - "trigger": "OnClick", - "target": "ModalCloseButton", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "delay": 0.2, - "duration": 0.5, - "to": "0 -1 1 0" - }, - { - "trigger": "OnClick", - "target": "ModalBackdrop", - "type": "Color", - "easing": "0 1.15 0.6 1", - "duration": 0.2, - "to": "0.05 0.05 0.05 0.0" - }, - { - "trigger": "OnClick", - "target": "ModalBackdrop", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "delay": 0.2, - "duration": 0.5, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "ModalBackdrop", - "parent":"ModalParent", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Modal", - "parent":"ModalParent", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.08 0.08 0.08 1", - }, - { - "type": "UnityEngine.UI.Outline", - "color": "1 1 1 0.1", - "distance": "1 1" - }, - { - "type":"RectTransform", - "anchormin": "0.2 0.2", - "anchormax": "0.8 0.8" - } - ] - }, - { - "name": "ModalCloseButton", - "parent": "Modal", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "1 1", - "anchormax": "1 1", - "offsetmin": "-60 -25", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Color", - "duration": 0, - "to": "0.3 0.65 0.35 0.4" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.6" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.4" - } - ] - } - ] - }, - { - "parent": "ModalCloseButton", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Close", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "parent": "Modal", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Re-Usable Modals without any server interaction required", - "color": "1 1 1 0.8", - "fontSize":24, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -30", - "offsetmax": "0 0" - } - ] - }, - { - "parent": "Modal", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"to Close this modal you can click outside of it on the backdrop or use the dedicated close button", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -120", - "offsetmax": "0 -40" - } - ] - }, - { - "name": "Button88", - "parent": "UI", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"UI", - "command":"cui.endtest", - "color": "0.9 0.8 0.3 0.52" - }, - { - "type":"RectTransform", - "anchormin": "0.0 0.0", - "anchormax": "0.1 0.07" - } - ] - }, - { - "parent": "Button88", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Kill UI", - "fontSize":16, - "align": "MiddleCenter" - } - ] - } + { + "trigger": "OnClick", + "target": "DropDown1_Button", + "type": "MoveTo", + "duration": 0, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "DropDown1_Parent", + "type": "MoveTo", + "delay": 0.3, + "duration": 0, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "DropDown1_Container", + "parent": "DropDown1_Parent", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.02 0.02 0.02 0.8", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "2 -20", + "offsetmax": "-2 -20" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown1_Button", + "type": "MoveToPX", + "easing": "0 1.15 0.6 1", + "duration": 0.3, + "to": "2 -220 -2 -20" + }, + { + "trigger": "OnClick", + "target": "DropDown1_Parent", + "type": "MoveToPX", + "easing": "0 0.85 0.6 1", + "duration": 0.3, + "to": "2 -20 -2 -20" + } + ] + } + ] + }, + { + "name": "DropDown1_Option1", + "parent": "DropDown1_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -40", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Selecting an Option Closes the Dropdown", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown1_Option2", + "parent": "DropDown1_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -80", + "offsetmax": "0 -40" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option2", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Option 2", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown1_Option3", + "parent": "DropDown1_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -120", + "offsetmax": "0 -80" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option3", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Dont choose me", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown1_Option4", + "parent": "DropDown1_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -160", + "offsetmax": "0 -120" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option4", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Choose me", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown1_Option5", + "parent": "DropDown1_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -200", + "offsetmax": "0 -160" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option5", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "i'm just filler", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "Tab3_Section2", + "parent": "Tab3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.06 0.06 0.06 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.33 0", + "anchormax": "0.66 1" + } + ] + }, + { + "name": "DropDown2_Button", + "parent": "Tab3_Section2", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "0 -20", + "offsetmax": "0 20" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "name": "DropDown2_ButtonExpand", + "parent": "DropDown2_Button", + "components": [{ + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 -1 1 0" + }, + { + "trigger": "OnClick", + "target": "DropDown2_ButtonCollapse", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 0 1 1" + } + ] + } + ] + }, + { + "parent": "DropDown2_ButtonExpand", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Expand", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown2_ButtonCollapse", + "parent": "DropDown2_Button", + "components": [{ + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 2" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown2_ButtonExpand", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 1 1 2" + } + ] + } + ] + }, + { + "parent": "DropDown2_ButtonCollapse", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Collapse", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown2_Container", + "parent": "Tab3_Section2", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.02 0.02 0.02 0.8", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "2 -20", + "offsetmax": "-2 -20" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown2_ButtonExpand", + "type": "MoveToPX", + "easing": "0 1.15 0.6 1", + "duration": 0.3, + "to": "2 -320 -2 -20" + }, + { + "trigger": "OnClick", + "target": "DropDown2_ButtonCollapse", + "type": "MoveToPX", + "easing": "0 0.85 0.6 1", + "duration": 0.3, + "to": "2 -20 -2 -20" + } + ] + } + ] + }, + { + "name": "DropDown2_TextContainer", + "parent": "DropDown2_Container", + "components": [{ + "type": "RectTransform", + "anchormin": "0.05 1", + "anchormax": "0.95 1", + "offsetmin": "0 -300", + "offsetmax": "0 0" + }] + }, + { + "parent": "DropDown2_TextContainer", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "unlike the first dropdown, this dropdown can only be closed by clicking the Collapse button. the Expand/Collapse button illustrates that this also lets us somewhat track state right in the UI, which allows us to create simple triggerals like checkboxes without requiring any AddUI/Destroy calls from the server", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "Tab3_Section3", + "parent": "Tab3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.66 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "DropDown3_Button", + "parent": "Tab3_Section3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "0 -20", + "offsetmax": "0 20" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "parent": "DropDown3_Button", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Select Option", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Parent", + "parent": "Tab3_Section3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Button", + "type": "MoveTo", + "duration": 0, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "delay": 0.3, + "duration": 0, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "DropDown3_Container", + "parent": "Tab3_Section3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.02 0.02 0.02 0.8", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.ScrollView", + "vertical": true, + "horizontal": false, + "movementType": "Clamped", + "inertia": false, + "contentTransform": { + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -280", + "offsetmax": "0 0" + }, + "verticalScrollbar": { + "autoHide": true, + "size": 10 + }, + "scrollSensitivity": 15.0 + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "2 -20", + "offsetmax": "-2 -20" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Button", + "type": "MoveToPX", + "easing": "0 1.15 0.6 1", + "duration": 0.3, + "to": "2 -220 -2 -20" + }, + { + "trigger": "OnClick", + "target": "DropDown3_Parent", + "type": "MoveToPX", + "easing": "0 0.85 0.6 1", + "duration": 0.3, + "to": "2 -20 -2 -20" + } + ] + } + ] + }, + { + "name": "DropDown3_Option1", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -40", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Selecting an Option wont close the Dropdown", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option1Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -40", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option1", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option2", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -80", + "offsetmax": "0 -40" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option2", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "You Can Select Me", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option2Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -80", + "offsetmax": "0 -40" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option2", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option3", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -120", + "offsetmax": "0 -80" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option3", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Or Me!", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option3Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -120", + "offsetmax": "0 -80" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option3", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option4", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -160", + "offsetmax": "0 -120" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.15 0.35 0.2 0.1" + }] + } + ] + }, + { + "parent": "DropDown3_Option4", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Not me Though", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option5", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -200", + "offsetmax": "0 -160" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option5", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "i'm just filler", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option5Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -200", + "offsetmax": "0 -160" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option5", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option6", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -240", + "offsetmax": "0 -200" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option6", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "i'm just filler", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option6Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -240", + "offsetmax": "0 -200" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option6", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option7", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -280", + "offsetmax": "0 -240" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option7", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "i'm just filler", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option7Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -280", + "offsetmax": "0 -240" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option7", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }] + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option7Selected", + "properties": [{ + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + }] + } + ] + }, + { + "name": "ModalParent", + "parent": "UI", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "ModalButton", + "type": "Color", + "easing": "0 1.15 0.6 1", + "duration": 0, + "to": "0.05 0.05 0.05 0.0" + }, + { + "trigger": "OnClick", + "target": "ModalButton", + "type": "Color", + "easing": "0 1.15 0.6 1", + "delay": 0.5, + "duration": 0.5, + "from": "0.05 0.05 0.05 0.0", + "to": "0.05 0.05 0.05 0.98" + }, + { + "trigger": "OnClick", + "target": "ModalButton", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "ModalCloseButton", + "type": "Color", + "easing": "0 1.15 0.6 1", + "duration": 0.2, + "to": "0.05 0.05 0.05 0.0" + }, + { + "trigger": "OnClick", + "target": "ModalCloseButton", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "delay": 0.2, + "duration": 0.5, + "to": "0 -1 1 0" + }, + { + "trigger": "OnClick", + "target": "ModalBackdrop", + "type": "Color", + "easing": "0 1.15 0.6 1", + "duration": 0.2, + "to": "0.05 0.05 0.05 0.0" + }, + { + "trigger": "OnClick", + "target": "ModalBackdrop", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "delay": 0.2, + "duration": 0.5, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "ModalBackdrop", + "parent": "ModalParent", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Modal", + "parent": "ModalParent", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.08 0.08 0.08 1" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "RectTransform", + "anchormin": "0.2 0.2", + "anchormax": "0.8 0.8" + } + ] + }, + { + "name": "ModalCloseButton", + "parent": "Modal", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "1 1", + "offsetmin": "-60 -25", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0, + "to": "0.3 0.65 0.35 0.4" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.6" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.4" + } + ] + } + ] + }, + { + "parent": "ModalCloseButton", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Close", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "parent": "Modal", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Re-Usable Modals without any server interaction required", + "color": "1 1 1 0.8", + "fontSize": 24, + "align": "MiddleCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -30", + "offsetmax": "0 0" + } + ] + }, + { + "parent": "Modal", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "to Close this modal you can click outside of it on the backdrop or use the dedicated close button", + "color": "1 1 1 0.8", + "fontSize": 20, + "align": "MiddleCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -120", + "offsetmax": "0 -40" + } + ] + }, + { + "name": "Button88", + "parent": "UI", + "components": [{ + "type": "UnityEngine.UI.Button", + "close": "UI", + "command": "cui.endtest", + "color": "0.9 0.8 0.3 0.52" + }, + { + "type": "RectTransform", + "anchormin": "0.0 0.0", + "anchormax": "0.1 0.07" + } + ] + }, + { + "parent": "Button88", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Kill UI", + "fontSize": 16, + "align": "MiddleCenter" + }] + } ] From af91ea08c32ca2b4e8f0c4c305bd78295fdcd6aa Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Tue, 22 Aug 2023 17:13:24 +0200 Subject: [PATCH 41/53] continue instead of return --- CommunityEntity.UI.Animation.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 1621cb0..6d60cb5 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -128,7 +128,7 @@ public void StopByTrigger(string trigger, string panel = null){ for(int i = 0; i < properties[trigger].Count; i++){ if(panel != null && properties[trigger][i].target != panel) - return; + continue; if(properties[trigger][i].routine == null) continue; From f7606ae0681247a37ba3e8655a5f810f554efed9 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 23 Aug 2023 05:52:42 +0200 Subject: [PATCH 42/53] Simplified Bezier Easing Implementation overall cleanup, naming improvements & only things that need to be public are public the math is still undocumented magic, but thats what math just is preperation for BezierPoints to be used directly, defined some default curves for comparison use --- CommunityEntity.UI.BezierEasing.cs | 220 +++++++++++++++++------------ 1 file changed, 131 insertions(+), 89 deletions(-) diff --git a/CommunityEntity.UI.BezierEasing.cs b/CommunityEntity.UI.BezierEasing.cs index 661d276..92e0d7a 100644 --- a/CommunityEntity.UI.BezierEasing.cs +++ b/CommunityEntity.UI.BezierEasing.cs @@ -11,147 +11,189 @@ public partial class CommunityEntity { - public class BezierEasing { - // this basically is the same process that Browsers use for their CSS easing, allowing you to define any possible easing value with 4 bezier points - // NOTE: this is a C# version of the javascript library at https://github.com/gre/bezier-easing, i simply rewrote it to be in C# Syntax and added a Static helper method + public class BezierEasing + { + // the same process browsers use for the cubic-bezier css timing function + // from the spec: + // "A cubic Bézier easing function is a type of easing function defined by four real numbers that specify the two control points, P1 and P2, + // of a cubic Bézier curve whose end points P0 and P3 are fixed at (0, 0) and (1, 1) respectively. + // The x coordinates of P1 and P2 are restricted to the range [0, 1]." + // NOTE: Loosely based on https://github.com/gre/bezier-easing - public static Dictionary cache = new Dictionary(); + static Dictionary cache = new Dictionary(); // these values modify the accuracy & performance of the curve's evaluation // while these are the values used in the javascript library you may find better values that produce good enough results with better performance - public static int NewItts = 4; - public static float NewMinSlope = 0.001f; - public static float SubDivPrec = 0.0000001f; - public static float SubDivItts = 10; - - public float mX1 = 0f; - public float mY1 = 0f; - public float mX2 = 1f; - public float mY2 = 1f; - public float[] mSampleValues; - - public static int kSplineTableSize = 11; - public static float kSampleStepSize = 1.0f / (kSplineTableSize - 1.0f); + static int NewtonItterations = 4; + + public float firstX = 0f; + public float firstY = 0f; + public float secondX = 1f; + public float secondY = 1f; + float[] _precomputedSections; + + static int _precomputeSize = 11; + static float _precomputeStepSize = 1.0f / (_precomputeSize - 1.0f); bool _precomputed = false; + // its beneficial to call this when we want to reset our session, like when leaving/switching servers + public static void Clear() + { + cache.Clear(); + } + // Helper function that caches BezierEasing Instances. supplying 4 points & time between 0 & 1 generates the curve & caches it, returning the value for time - public static float Ease(float X1, float Y1, float X2, float Y2, float time){ + public static float Ease(float X1, float Y1, float X2, float Y2, float time) + { var key = new BezierPoints(X1, Y1, X2, Y2); - if(!cache.ContainsKey(key)){ - cache[key] = new BezierEasing(X1, Y1, X2, Y2); - } - return cache[key].GetPosition(time); + return Ease(key, time); } - public BezierEasing (float X1, float Y1, float X2, float Y2) { - mX1 = X1; - mY1 = Y1; - mX2 = X2; - mY2 = Y2; - mSampleValues = new float[kSplineTableSize]; + + public static float Ease(BezierPoints points, float time) + { + if (!cache.TryGetValue(points, out BezierEasing easing)) + cache[points] = easing = new BezierEasing(points); + + return easing.GetPosition(time); } + public BezierEasing(BezierPoints points) : this(points.P1, points.P2, points.P3, points.P4) + { - // the following 3 functions are a single math formula split up into 3 steps for clarity - float A (float aA1, float aA2) { return 1.0f - 3.0f * aA2 + 3.0f * aA1; } - float B (float aA1, float aA2) { return 3.0f * aA2 - 6.0f * aA1; } - float C (float aA1) { return 3.0f * aA1; } + } - // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. - public float CalcBezier (float aT, float aA1, float aA2) { - return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT; + public BezierEasing(float X1, float Y1, float X2, float Y2) + { + firstX = X1; + firstY = Y1; + secondX = X2; + secondY = Y2; + _precomputedSections = new float[_precomputeSize]; } - // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. - public float GetSlope (float aT, float aA1, float aA2) { - return 3.0f * A(aA1, aA2)*aT*aT + 2.0f * B(aA1, aA2) * aT + C(aA1); + + + // returns the value on the curve for X + public float GetPosition(float unscaledTime) + { + if (!_precomputed) PreCompute(); + if (firstX == firstY && secondX == secondY) return unscaledTime; // linear + if (unscaledTime == 0f) return 0f; + if (unscaledTime == 1f) return 1f; + return CalcBezier(ScaleTime(unscaledTime), firstY, secondY); } - // performs a dichometric search to find the most accurate value between 2 precalculated points within SubDivItts loops - public float BinarySubdivide (float aX, float aA, float aB) { - float currentX, currentT, i = 0f; - do { - currentT = aA + (aB - aA) / 2.0f; - currentX = CalcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0f) { - aB = currentT; - } else { - aA = currentT; - } - } while (Math.Abs(currentX) > SubDivPrec && ++i < SubDivItts); - return currentT; + // the following 2 functions are part of a single math formula split up into 2 steps for clarity + float StepA(float aA1, float aA2) { return 1.0f - 3.0f * aA2 + 3.0f * aA1; } + float StepB(float aA1, float aA2) { return 3.0f * aA2 - 6.0f * aA1; } + + // Returns calculates the value between 2 points based on call + // points may be x or y depending on call + float CalcBezier(float time, float point1, float point2) + { + return ((StepA(point1, point2) * time + StepB(point1, point2)) * time + (3f * point1)) * time; } - // pre-calculates a set amount of points to be used within the BinarySubdivide function - void CalcSampleValues () { - for (var i = 0; i < kSplineTableSize; ++i) { - mSampleValues[i] = CalcBezier(i * kSampleStepSize, mX1, mX2); + // Returns the estimated slope of the curve at the supplied time + float GetSlope(float time) + { + return 3.0f * StepA(firstX, secondX) * time * time + 2.0f * StepB(firstX, secondX) * time + (3f * firstX); + } + + // pre-calculates a set amount of points to spped up calculation + void CalcSampleValues() + { + for (var i = 0; i < _precomputeSize; ++i) + { + _precomputedSections[i] = CalcBezier(i * _precomputeStepSize, firstX, secondX); } } - // finds the surrounding pre-calculated points for x and returns the closest value, uses NewtonRaphson's method for faster computation if the slope is above a set threshold, otherwhise falls back to a binary search - float GetTForX (float aX) { + // finds the surrounding pre-calculated sections around our unscaled time and refines it using NewtonRaphson's method + float ScaleTime(float unscaledTime) + { float intervalStart = 0.0f; int currentSample = 1; - int lastSample = kSplineTableSize - 1; + int lastSample = _precomputeSize - 1; - for (; currentSample != lastSample && mSampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; + // find the last precomputed section before unscaledTime + for (; currentSample != lastSample && _precomputedSections[currentSample] <= unscaledTime; ++currentSample) + { + intervalStart += _precomputeStepSize; } --currentSample; - float dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample+1] - mSampleValues[currentSample]); - float guessForT = intervalStart + dist * kSampleStepSize; - float initialSlope = GetSlope(guessForT, mX1, mX2); - if (initialSlope >= NewMinSlope) { - return NewtonRaphsonIterate(aX, guessForT); - } else if (initialSlope == 0.0f) { - return guessForT; - } else { - return BinarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize); + // divide distance from last section by distance between last and next section + float distance = (unscaledTime - _precomputedSections[currentSample]) / (_precomputedSections[currentSample + 1] - _precomputedSections[currentSample]); + float timeGuess = intervalStart + distance * _precomputeStepSize; + float initialSlope = GetSlope(timeGuess); + if (initialSlope == 0.0f) + { + return timeGuess; + } + else + { + return NewtonRaphsonIterate(unscaledTime, timeGuess); } } - void PreCompute() { + void PreCompute() + { _precomputed = true; - if (mX1 != mY1 || mX2 != mY2) + if (firstX != firstY || secondX != secondY) CalcSampleValues(); } - // returns the value on the curve for X - public float GetPosition(float aX) { - if (!_precomputed) PreCompute(); - if (mX1 == mY1 && mX2 == mY2) return aX; // linear - if (aX == 0f) return 0f; - if (aX == 1f) return 1f; - return CalcBezier(GetTForX(aX), mY1, mY2); - } - // approximates the value for X using the Newton-Raphson Method - float NewtonRaphsonIterate (float aX, float aGuessT) { - for (var i = 0; i < NewItts; ++i) { - float currentSlope = GetSlope(aGuessT, mX1, mX2); - if (currentSlope == 0.0f) return aGuessT; - var currentX = CalcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; + float NewtonRaphsonIterate(float aX, float timeGuess) + { + for (var i = 0; i < NewtonItterations; ++i) + { + float currentSlope = GetSlope(timeGuess); + if (currentSlope == 0.0f) return timeGuess; + var currentX = CalcBezier(timeGuess, firstX, secondX) - aX; + timeGuess -= currentX / currentSlope; } - return aGuessT; + return timeGuess; } // used as a key for the cache - public struct BezierPoints{ + public struct BezierPoints : IEquatable + { + public static readonly BezierPoints LINEAR = new BezierPoints(0f, 0f, 0f, 0f); + public static readonly BezierPoints EASE_IN = new BezierPoints(0.42f, 0f, 1f, 1f); + public static readonly BezierPoints EASE_OUT = new BezierPoints(0f, 0f, 0.58f, 1f); + public static readonly BezierPoints EASE_IN_OUT = new BezierPoints(0.42f, 0f, 0.58f, 1f); + public float P1; public float P2; public float P3; public float P4; - public BezierPoints(float X1, float Y1, float X2, float Y2){ + public BezierPoints(float X1, float Y1, float X2, float Y2) + { P1 = X1; P2 = Y1; P3 = X2; P4 = Y2; } + + public bool Equals(BezierPoints other) + { + return P1 == other.P1 && P2 == other.P2 && P2 == other.P2 && P3 == other.P3 && P4 == other.P4; + } + + public override bool Equals(object obj) + { + return obj is BezierPoints points && Equals(points); + } + + public override int GetHashCode() + { + return HashCode.Combine(P1, P2, P3, P4); + } } } From 88657c84ca27fe33a83e922cc6a1a3a313b5b4e6 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 23 Aug 2023 06:02:56 +0200 Subject: [PATCH 43/53] Comment fixes --- CommunityEntity.UI.BezierEasing.cs | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/CommunityEntity.UI.BezierEasing.cs b/CommunityEntity.UI.BezierEasing.cs index 92e0d7a..d5afcca 100644 --- a/CommunityEntity.UI.BezierEasing.cs +++ b/CommunityEntity.UI.BezierEasing.cs @@ -75,7 +75,7 @@ public BezierEasing(float X1, float Y1, float X2, float Y2) - // returns the value on the curve for X + // returns the value on the curve for the unscaled time public float GetPosition(float unscaledTime) { if (!_precomputed) PreCompute(); @@ -89,8 +89,6 @@ public float GetPosition(float unscaledTime) float StepA(float aA1, float aA2) { return 1.0f - 3.0f * aA2 + 3.0f * aA1; } float StepB(float aA1, float aA2) { return 3.0f * aA2 - 6.0f * aA1; } - // Returns calculates the value between 2 points based on call - // points may be x or y depending on call float CalcBezier(float time, float point1, float point2) { return ((StepA(point1, point2) * time + StepB(point1, point2)) * time + (3f * point1)) * time; From 6f7c165b5b1e075ad8f6fdffee8341fa338f2293 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 23 Aug 2023 06:23:12 +0200 Subject: [PATCH 44/53] add == operator overrides --- CommunityEntity.UI.BezierEasing.cs | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CommunityEntity.UI.BezierEasing.cs b/CommunityEntity.UI.BezierEasing.cs index d5afcca..a17ea2a 100644 --- a/CommunityEntity.UI.BezierEasing.cs +++ b/CommunityEntity.UI.BezierEasing.cs @@ -192,6 +192,16 @@ public override int GetHashCode() { return HashCode.Combine(P1, P2, P3, P4); } + + public static bool operator == (BezierPoints p1, BezierPoints p2) + { + return p1.Equals(p2); + } + + public static bool operator != (BezierPoints p1, BezierPoints p2) + { + return !p1.Equals(p2); + } } } From 56e28c7889fbe4c0c160746a95d961fa2cd0fb27 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 23 Aug 2023 06:55:08 +0200 Subject: [PATCH 45/53] Refactor to use BezierPoints instead of keeping the string and parsing it everytime we try to ease with a custom bezier function it now parses it once and re-uses it for the entire property's lifetime. we still keep the static easing functions as they have better performance, they are now compared to a static readonly Points struct that also happens to represent their bezier curves, if we need to add any functions that cannot be expressed with a single cubic bezier, an invalid curve can be used for comparison this should reduce the overhead of easing by removing the need to reparse the string every update, which also gets rid of the array & string allocations it produced --- CommunityEntity.UI.Animation.cs | 96 +++++++++++++++++++-------------- 1 file changed, 56 insertions(+), 40 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 6d60cb5..e0c28d4 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -357,7 +357,7 @@ public class AnimationProperty public float delay; public int repeat; public float repeatDelay; - public string easing = "Linear"; + public BezierEasing.BezierPoints easing; public string type; public AnimationProperty.AnimationValue animValue; public string target; @@ -573,32 +573,23 @@ public IEnumerator AnimateProperty() // manipulates the input based on a preset easing function or a custom Bezier curve // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve // NOTE: the return value is unclamped as this allowes bezier curves with under- and overshoot to work - public float Ease(string type, float input){ - switch(type){ - case "Linear": return input; - case "EaseIn": return input * input; - case "EaseOut": return 1f - ((1f - input) * (1f - input)); - case "EaseInOut": return Mathf.Lerp(input * input, 1f - ((1f - input) * (1f - input)), input); - default: // Custom Easing - { - var split = type.Split(' '); - float X1, Y1, X2, Y2; - if(split.Length < 4) return input; - if( - !float.TryParse(split[0], NumberStyles.Any, CultureInfo.InvariantCulture, out X1) || !float.TryParse(split[1], NumberStyles.Any, CultureInfo.InvariantCulture, out Y1) || - !float.TryParse(split[2], NumberStyles.Any, CultureInfo.InvariantCulture, out X2) || !float.TryParse(split[3], NumberStyles.Any, CultureInfo.InvariantCulture, out Y2) - ) return input; - - return BezierEasing.Ease(X1, Y1, X2, Y2, input); - } - } + public float Ease(BezierEasing.BezierPoints easing, float input) + { + return easing switch + { + _ when easing == BezierEasing.BezierPoints.LINEAR => input, + _ when easing == BezierEasing.BezierPoints.EASE_IN => input * input, + _ when easing == BezierEasing.BezierPoints.EASE_OUT => 1f - ((1f - input) * (1f - input)), + _ when easing == BezierEasing.BezierPoints.EASE_IN_OUT => Mathf.Lerp(input * input, 1f - ((1f - input) * (1f - input)), input), + _ => BezierEasing.Ease(easing, input) + }; } // Interpolats an AnimationValue over the duration with the easing specified // the absolute arguement specifies if the animation should be handled as a relative animation or an absolute animation // absolute = false: the objects initial value gets used as a 0 point, with the from and to values being relative to the initial value // absolute = true: the object's initial value does not get factored in and the from and to values are seen as absolute - public IEnumerator InterpolateValue(AnimationValue value, float duration, string easing, bool absolute = true){ + public IEnumerator InterpolateValue(AnimationValue value, float duration, BezierEasing.BezierPoints easing, bool absolute = true){ float time = 0f; DynamicVector current; DynamicVector start = value.from.Count == 0 ? value.initial : (absolute ? value.from : value.initial + value.from); @@ -638,21 +629,8 @@ public AnimationValue(){ } public AnimationValue(string sourceTo, string sourceFrom = null){ - this.from = ParseFromString(sourceFrom); - this.to = ParseFromString(sourceTo); - } - public DynamicVector ParseFromString(string source){ - var values = new DynamicVector(); - if(string.IsNullOrEmpty(source)) return values; - var split = source.Split(' '); - if(split.Length == 0) return values; - for(int i = 0; i < split.Length; i++){ - float temp; - if(float.TryParse(split[i], NumberStyles.Any, CultureInfo.InvariantCulture, out temp)) - values.Add(temp); - if(values.Count == values.Capacity) break; - } - return values; + this.from = DynamicVector.FromString(sourceFrom); + this.to = DynamicVector.FromString(sourceTo); } } @@ -769,6 +747,23 @@ public Vector2 ToVector2(int offset = 0){ #region Helpers + public static DynamicVector FromString(string source) + { + var values = new DynamicVector(); + if (string.IsNullOrEmpty(source)) return values; + var split = source.Split(' '); + if (split.Length == 0) return values; + for (int i = 0; i < split.Length; i++) + { + float temp; + if (!float.TryParse(split[i], NumberStyles.Any, CultureInfo.InvariantCulture, out temp)) + continue; + values.Add(temp); + if (values.Count == values.Capacity) break; + } + return values; + } + public float TryGet(int index, float defaultValue = 0f){ if(index < 0 || index >= this.Count) return defaultValue; @@ -867,16 +862,36 @@ public Animation ParseAnimation(JSON.Object obj, GameObject go = null){ public AnimationProperty ParseProperty(Animation anim, JSON.Object obj){ var trigger = obj.GetString("trigger", "OnCreate"); - if(!anim.ValidTrigger(trigger)) + BezierEasing.BezierPoints easing = BezierEasing.BezierPoints.LINEAR; + var easingString = obj.GetString("easing", "Linear"); + switch (easingString) + { + case "Linear": break; + case "EaseIn": easing = BezierEasing.BezierPoints.EASE_IN; break; + case "EaseOut": easing = BezierEasing.BezierPoints.EASE_OUT; break; + case "EaseInOut": easing = BezierEasing.BezierPoints.EASE_IN_OUT; break; + default: + { + var parsed = AnimationProperty.DynamicVector.FromString(easingString); + if (parsed.Count != 4) + break; + easing = new BezierEasing.BezierPoints(parsed.TryGet(0), parsed.TryGet(1), parsed.TryGet(2), parsed.TryGet(3)); + break; + } + } + + if (!anim.ValidTrigger(trigger)) trigger = "OnCreate"; + string from = obj.GetString("from", null); string to = obj.GetString("to", null); - var animprop = new AnimationProperty{ + var animprop = new AnimationProperty + { duration = obj.GetFloat("duration", 0f), delay = obj.GetFloat("delay", 0f), repeat = obj.GetInt("repeat", 0), repeatDelay = obj.GetFloat("repeatDelay", 0f), - easing = obj.GetString("easing", "Linear"), + easing = easing, target = obj.GetString("target", anim.gameObject.name), type = obj.GetString("type", null), animValue = new AnimationProperty.AnimationValue(to, from), @@ -886,8 +901,9 @@ public AnimationProperty ParseProperty(Animation anim, JSON.Object obj){ // if the animation has a graphic it means Start has allready been called on it // manually start the OnCreate Properties in this case - if(anim.initialized && trigger == "OnCreate") + if (anim.initialized && trigger == "OnCreate") anim.StartProperty(animprop); + return animprop; } From 5d020b9cda1a4d5e719f334b97c3160f2e9b58d5 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Fri, 25 Aug 2023 07:27:23 +0200 Subject: [PATCH 46/53] Update CommunityEntity.UI.Animation.cs Removed extra Client RPC - the CUI update mechanism works just fine for adding new animations Added Reset json property and function - if set, stops and removes all properties on an animation before new properties are added switched to using CoroutineEx.waitForSeconds instead of allocating new ones all the time (i somehow missed the client having this and thought it was server only for some reason until now) optimized InterpolateValue to bypass if start and end value are equal, this is fairly common in setups like the second animation example where different animations are ran depending on which tab is clicked. in the case where an object doesnt need to move it will just wait for the duration instead of assigning the same value every frame moved CommunityEntity instance functions into respective classes as a static function, made additional functions static --- CommunityEntity.UI.Animation.cs | 245 ++++++++++++++++++-------------- 1 file changed, 135 insertions(+), 110 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index e0c28d4..57ee3ac 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -21,6 +21,8 @@ public class Animation : FacepunchBehaviour public static List reusableList = new List(); public static IEnumerator emptyEnumerator = new System.Object[0].GetEnumerator(); + + public static List reusablePropertyList = new List(); // properties by trigger public Dictionary> properties = new Dictionary>(){ @@ -50,8 +52,11 @@ public class Animation : FacepunchBehaviour #region Core - // sets up the Animation component, Attaching Triggers & starting Animations + // sets up the Animation component & start Animations public void Init(){ + if (initialized) + return; + CacheComponents(); AttachTriggers(properties["OnHoverEnter"]); AttachTriggers(properties["OnHoverExit"]); @@ -76,6 +81,16 @@ public void RemoveProperty(AnimationProperty property){ properties[property.trigger].Remove(property); } + public void Reset() + { + foreach(var proplists in properties) + { + StopByTrigger(proplists.Key); + proplists.Value.Clear(); + } + initialized = false; + } + private void OnDestroy(){ if(!isKilled) Kill(true); @@ -344,6 +359,36 @@ public static void InitPendingAnims(){ reusableList.Clear(); } + public static Animation ParseAnimation(JSON.Object obj, GameObject go = null, bool allowUpdate = false){ + + Animation anim = go.GetComponent(); + // create a new animation component if no Animation existed + if(anim == null) + anim = go.AddComponent(); + + if (allowUpdate && obj.ContainsKey("Reset")) + anim.Reset(); + + var arr = obj.GetArray("properties"); + for (int i = 0; i < arr.Length; i++) + { + var prop = AnimationProperty.ParseProperty(anim, arr[i].Obj); + Animation.reusablePropertyList.Add(prop); + } + if (anim.initialized) + anim.AttachTriggers(Animation.reusablePropertyList); + Animation.reusablePropertyList.Clear(); + + // ensures a canvasGroup is added if needed, regardless of if its a new animation or an existing one + if(obj.GetBoolean("addCanvasGroup", false) && anim.group == null){ + anim.group = go.GetComponent(); + if(anim.group == null) + anim.group = go.AddComponent(); + } + + return anim; + } + #endregion } @@ -390,7 +435,7 @@ public IEnumerator Animate() { yield return AnimateProperty(); completedRounds++; - if(repeatDelay > 0f) yield return new WaitForSeconds(repeatDelay); + if(repeatDelay > 0f) yield return CoroutineEx.waitForSeconds(repeatDelay); else yield return null; } while(repeat < 0 || (repeat > 0 && completedRounds <= repeat)); @@ -573,7 +618,7 @@ public IEnumerator AnimateProperty() // manipulates the input based on a preset easing function or a custom Bezier curve // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve // NOTE: the return value is unclamped as this allowes bezier curves with under- and overshoot to work - public float Ease(BezierEasing.BezierPoints easing, float input) + public static float Ease(BezierEasing.BezierPoints easing, float input) { return easing switch { @@ -589,7 +634,7 @@ public float Ease(BezierEasing.BezierPoints easing, float input) // the absolute arguement specifies if the animation should be handled as a relative animation or an absolute animation // absolute = false: the objects initial value gets used as a 0 point, with the from and to values being relative to the initial value // absolute = true: the object's initial value does not get factored in and the from and to values are seen as absolute - public IEnumerator InterpolateValue(AnimationValue value, float duration, BezierEasing.BezierPoints easing, bool absolute = true){ + public static IEnumerator InterpolateValue(AnimationValue value, float duration, BezierEasing.BezierPoints easing, bool absolute = true){ float time = 0f; DynamicVector current; DynamicVector start = value.from.Count == 0 ? value.initial : (absolute ? value.from : value.initial + value.from); @@ -600,6 +645,11 @@ public IEnumerator InterpolateValue(AnimationValue value, float duration, Bezier value.initial = start; } DynamicVector end = (absolute ? value.to : value.initial + value.to); + + if(start == end){ + yield return CoroutineEx.waitForSeconds(duration); + yield break; + } while(time < duration){ current = DynamicVector.LerpUnclamped(start, end, Ease(easing, time / duration)); @@ -610,6 +660,54 @@ public IEnumerator InterpolateValue(AnimationValue value, float duration, Bezier value.apply(end); } + public static AnimationProperty ParseProperty(Animation anim, JSON.Object obj){ + var trigger = obj.GetString("trigger", "OnCreate"); + + BezierEasing.BezierPoints easing = BezierEasing.BezierPoints.LINEAR; + var easingString = obj.GetString("easing", "Linear"); + switch (easingString) + { + case "Linear": break; + case "EaseIn": easing = BezierEasing.BezierPoints.EASE_IN; break; + case "EaseOut": easing = BezierEasing.BezierPoints.EASE_OUT; break; + case "EaseInOut": easing = BezierEasing.BezierPoints.EASE_IN_OUT; break; + default: + { + var parsed = AnimationProperty.DynamicVector.FromString(easingString); + if (parsed.Count != 4) + break; + easing = new BezierEasing.BezierPoints(parsed.TryGet(0), parsed.TryGet(1), parsed.TryGet(2), parsed.TryGet(3)); + break; + } + } + + if (!anim.ValidTrigger(trigger)) + trigger = "OnCreate"; + + string from = obj.GetString("from", null); + string to = obj.GetString("to", null); + var animprop = new AnimationProperty + { + duration = obj.GetFloat("duration", 0f), + delay = obj.GetFloat("delay", 0f), + repeat = obj.GetInt("repeat", 0), + repeatDelay = obj.GetFloat("repeatDelay", 0f), + easing = easing, + target = obj.GetString("target", anim.gameObject.name), + type = obj.GetString("type", null), + animValue = new AnimationProperty.AnimationValue(to, from), + trigger = trigger + }; + anim.properties[trigger].Add(animprop); + + // if the animation has a graphic it means Start has allready been called on it + // manually start the OnCreate Properties in this case + if (anim.initialized && trigger == "OnCreate") + anim.StartProperty(animprop); + + return animprop; + } + #endregion // Generalizes the values for an AnimationProperty @@ -636,7 +734,7 @@ public AnimationValue(string sourceTo, string sourceFrom = null){ // a struct that mimics Vector2/3/4/n, previously used a list to hold values, but lists dont work as structs // turning this into a struct makes alot of sense, thanks for the insights @WhiteThunder - public struct DynamicVector { + public struct DynamicVector : IEquatable { #region Fields @@ -679,6 +777,11 @@ public float this[int i]{ public DynamicVector(Color col) : this() => Add(col); public DynamicVector(Vector3 vec) : this() => Add(vec); public DynamicVector(Vector2 vec) : this() => Add(vec); + public DynamicVector(Vector2 vec1, Vector2 vec2) : this() + { + Add(vec1); + Add(vec2); + } public DynamicVector(float num) : this() => Add(num); public void Add(float num) => this[Count++] = num; @@ -814,119 +917,41 @@ public static DynamicVector LerpUnclamped(DynamicVector from, DynamicVector to, return result; } - public override string ToString(){ - var sb = new StringBuilder(32); - for(int i = 0; i < this.Count; i++){ - sb.Append(this.TryGet(i)); - sb.Append(' '); - } - return sb.ToString(); - } - - #endregion - } - } - - public List reusablePropertyList = new List(); - - public Animation ParseAnimation(JSON.Object obj, GameObject go = null){ - // if no gameobject is given, attempt to find a name property and find it that way - if(go == null){ - var panel = obj.GetString("name", null); - if (string.IsNullOrEmpty(panel) || !UiDict.TryGetValue(panel, out go)) - return null; - } - - Animation anim = go.GetComponent(); - // create a new animation component if no Animation existed - if(anim == null) - anim = go.AddComponent(); - - foreach(var prop in obj.GetArray("properties")){ - reusablePropertyList.Add(ParseProperty(anim, prop.Obj)); - } - - anim.AttachTriggers(reusablePropertyList); - reusablePropertyList.Clear(); - - // ensures a canvasGroup is added if needed, regardless of if its a new animation or an existing one - if(obj.GetBoolean("addCanvasGroup", false) && anim.group == null){ - anim.group = go.GetComponent(); - if(anim.group == null) - anim.group = go.AddComponent(); - } - - return anim; - } - - public AnimationProperty ParseProperty(Animation anim, JSON.Object obj){ - var trigger = obj.GetString("trigger", "OnCreate"); + public bool Equals(DynamicVector other) + { + if (Count != other.Count) + return false; - BezierEasing.BezierPoints easing = BezierEasing.BezierPoints.LINEAR; - var easingString = obj.GetString("easing", "Linear"); - switch (easingString) - { - case "Linear": break; - case "EaseIn": easing = BezierEasing.BezierPoints.EASE_IN; break; - case "EaseOut": easing = BezierEasing.BezierPoints.EASE_OUT; break; - case "EaseInOut": easing = BezierEasing.BezierPoints.EASE_IN_OUT; break; - default: + for (int i = 0; i < Count; i++) { - var parsed = AnimationProperty.DynamicVector.FromString(easingString); - if (parsed.Count != 4) - break; - easing = new BezierEasing.BezierPoints(parsed.TryGet(0), parsed.TryGet(1), parsed.TryGet(2), parsed.TryGet(3)); - break; + if (TryGet(i) != other.TryGet(i)) + return false; } - } - - if (!anim.ValidTrigger(trigger)) - trigger = "OnCreate"; - - string from = obj.GetString("from", null); - string to = obj.GetString("to", null); - var animprop = new AnimationProperty - { - duration = obj.GetFloat("duration", 0f), - delay = obj.GetFloat("delay", 0f), - repeat = obj.GetInt("repeat", 0), - repeatDelay = obj.GetFloat("repeatDelay", 0f), - easing = easing, - target = obj.GetString("target", anim.gameObject.name), - type = obj.GetString("type", null), - animValue = new AnimationProperty.AnimationValue(to, from), - trigger = trigger - }; - anim.properties[trigger].Add(animprop); - - // if the animation has a graphic it means Start has allready been called on it - // manually start the OnCreate Properties in this case - if (anim.initialized && trigger == "OnCreate") - anim.StartProperty(animprop); - return animprop; - } + return true; + } - // RPC function to Add Animations to existing objects - // accepts the same json object that the CreateComponents function does - [RPC_Client] - public void AddAnimation( RPCMessage msg ) - { - string str = msg.read.StringRaw(); + public static bool operator == (DynamicVector lhs, DynamicVector rhs){ + return lhs.Equals(rhs); + } - if (string.IsNullOrEmpty(str)) - return; + public static bool operator != (DynamicVector lhs, DynamicVector rhs) + { + return !lhs.Equals(rhs); + } - var json = JSON.Array.Parse( str ); - if (json == null) - return; + public override string ToString() + { + var sb = new StringBuilder(32); + for (int i = 0; i < Count; i++) + { + sb.Append(TryGet(i)); + sb.Append(' '); + } + return sb.ToString(); + } - foreach (var value in json){ - Animation anim = ParseAnimation(value.Obj); - // if it returns a valid animation that hasnt allready been started, start it - if(anim == null || anim.initialized) - continue; - anim.Init(); + #endregion } } } From f3d5fc932bdb6925cbfe0549884fa83a5e7abb28 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Fri, 25 Aug 2023 07:30:09 +0200 Subject: [PATCH 47/53] Update ParseAnimation Class --- CommunityEntity.UI.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index b4b766e..4ab8afc 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -456,8 +456,8 @@ T GetOrAddComponent() where T : Component { // Moved Setup to its own function in CommunityEntity.UI.Animation.cs // now shares the code with the AddAnimation RPC function - ParseAnimation(obj, go); - break; + Animation.ParseAnimation(obj, go, allowUpdate); + break; } } From d61c8bd40e28327d85c52d2aa29cf0b48b501fce Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Thu, 5 Oct 2023 00:32:51 +0200 Subject: [PATCH 48/53] Fix not supplying panel to OnDrag Trigger start --- CommunityEntity.UI.Animation.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 57ee3ac..b847b4a 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -215,7 +215,7 @@ public void OnDrag(string panel){ if(isKilled) return; StopByTrigger("OnDrop", panel); - StartByTrigger("OnDrag"); + StartByTrigger("OnDrag", panel); } public void OnDrop(string panel){ From 817502dd1571fd9a23474741205123fc37c0f42b Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 11 Oct 2023 06:49:11 +0200 Subject: [PATCH 49/53] add shouldRaycast to graphic Allows Toggling if a graphic should obstruct clicks or not among other things, this enables developers to have graphics as overlays. defaults to true, next commit enables animations to respect this behaviour again (they used to already) --- CommunityEntity.UI.cs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index 4ab8afc..b2f68f3 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -472,6 +472,9 @@ private void GraphicComponentCreated( UnityEngine.UI.Graphic c, JSON.Object obj { if ( obj.ContainsKey( "fadeIn" ) ) Animation.AddFadeIn(c.gameObject, obj.GetFloat( "fadeIn", 0 ), obj.GetBoolean( "fadeAsGroup", false )); + + if ( obj.ContainsKey( "shouldRaycast" ) ) + c.raycastTarget = obj.GetBoolean("shouldRaycast", true); } private IEnumerator LoadTextureFromWWW( UnityEngine.UI.RawImage c, string p ) From 0c655c877be802bb89516e1d7e85a2ef11e09399 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Wed, 11 Oct 2023 06:50:00 +0200 Subject: [PATCH 50/53] Re-Introduce shouldRaycast tracking this was removed in the May 17 commit where the animation component got refactored, though there weren't many situations previously where raycasting would be disabled for an element, this is now needed to support both draggables & toggling raycasting on graphics again --- CommunityEntity.UI.Animation.cs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index b847b4a..6930271 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -42,6 +42,7 @@ public class Animation : FacepunchBehaviour public UnityEngine.UI.Graphic graphic; public RectTransform rt; public CanvasGroup group; + public bool shouldRaycast = true; // flags public bool isHidden = false; @@ -258,6 +259,8 @@ public void CacheComponents(){ rt = gameObject.GetComponent(); if(!group) group = gameObject.GetComponent(); + + shouldRaycast = graphic?.raycastTarget ?? false; } public void TryToggleGraphic(float delay = 0f){ @@ -268,7 +271,7 @@ public void TryToggleGraphic(float delay = 0f){ if(group == null) graphic.canvasRenderer.cullTransparentMesh = visible; isHidden = !visible; - SetRaycasting(visible); + SetRaycasting(visible && shouldRaycast); }); if(delay <= 0f) a(); else Invoke(a, delay); From 377aab8f591f3b5319a97ca7bd46a819465439f9 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Mon, 8 Jul 2024 00:56:30 +0200 Subject: [PATCH 51/53] Move examples into Test folder --- ScrollTest.json | 724 --- {examples => Tests}/AnimationTest.json | 4258 ++++++++-------- .../InteractiveComponentsTest.json | 4416 ++++++++--------- 3 files changed, 4337 insertions(+), 5061 deletions(-) delete mode 100644 ScrollTest.json rename {examples => Tests}/AnimationTest.json (96%) rename {examples => Tests}/InteractiveComponentsTest.json (95%) diff --git a/ScrollTest.json b/ScrollTest.json deleted file mode 100644 index a1d48b8..0000000 --- a/ScrollTest.json +++ /dev/null @@ -1,724 +0,0 @@ -[ - { - "name": "UI", - "parent":"Overlay", - "destroyUi": "UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.03 0.03 0.03 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"NeedsCursor" - } - ] - }, - { - "name": "Example", - "parent":"UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.1 0.1 0.1 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.3 0", - "anchormax": "0.7 1" - }, - { - "type":"NeedsCursor" - } - ] - }, - { - "parent": "Example", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Scroll View", - "fontSize":24, - "align": "MiddleCenter", - }, - { - "type":"RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -50" - } - ] - }, - { - "name": "Scroller", - "parent":"Example", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "sprite": "assets/content/effects/crossbreed/fx gradient skewed.png", - "color": "0.05 0.05 0.05 0.5", - }, - { - "type":"UnityEngine.UI.ScrollView", - "contentTransform": { - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -1500", - "offsetmax": "0 0" - }, - "vertical": true, - "horizontal": false, - "movementType": "Elastic", - "elasticity": 0.25, - "inertia": true, - "decelerationRate": 0.3, - "scrollSensitivity": 24.0, - "maskSoftness": "0 100", - "verticalScrollbar": { - "size": 20, - "autoHide": true - }, - "horizontalScrollbar": { - "size": 20, - "autoHide": true - } - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1", - "offsetmax": "0 -50" - }, - { - "type":"NeedsCursor" - } - ] - }, - { - "name": "child1", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -90", - "offsetmax": "0 0" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Lorem ipsum dolor sit amet", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child2", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -190", - "offsetmax": "0 -100" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child2", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"consectetur adipiscing elit", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child3", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -290", - "offsetmax": "0 -200" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Sed fringilla quam vitae odio", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child4", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -390", - "offsetmax": "0 -300" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child4", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"sollicitudin accumsan. Nulla tincidunt", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child5", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -490", - "offsetmax": "0 -400" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child5", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"odio at eros egestas,", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child6", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -590", - "offsetmax": "0 -500" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child6", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"a lobortis elit posuere.", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child7", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -690", - "offsetmax": "0 -600" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child7", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Aliquam vulputate ex in blandit iaculis.", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child8", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -790", - "offsetmax": "0 -700" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child8", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Quisque sit amet mi ac justo tincidunt laoreet.", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child9", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -890", - "offsetmax": "0 -800" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child9", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Nulla sollicitudin eget quam ut sollicitudin.", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child10", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -990", - "offsetmax": "0 -900" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child10", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"And so on and so forth", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child11", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -1090", - "offsetmax": "0 -1000" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child11", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Anyways, you know what would go well with this?", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child12", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -1190", - "offsetmax": "0 -1100" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child12", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Something with some more Movement.", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child13", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -1290", - "offsetmax": "0 -1200" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child13", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Maybe, an Animation System?", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "child14", - "parent":"Scroller", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.2 0.2 0.2 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd", - }, - { - "type":"RectTransform", - "anchormin": "0.03 0.97", - "anchormax": "0.97 0.97", - "offsetmin": "0 -1390", - "offsetmax": "0 -1300" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "2 2", - "color": "0 0 0 0.06" - }, - { - "type": "UnityEngine.UI.Outline", - "distance": "4 4", - "color": "0 0 0 0.025" - } - ] - }, - { - "parent": "child14", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Nvm, lets get Scrollable Containers in first :)", - "color": "0.6 0.6 0.6 1.0", - "fontSize":26, - "align": "MiddleCenter" - } - ] - }, - { - "name": "Button88", - "parent": "UI", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"UI", - "color": "0.9 0.8 0.3 0.8", - }, - { - "type":"RectTransform", - "anchormin": "0.02 0.05", - "anchormax": "0.2 0.12" - } - ] - }, - { - "parent": "Button88", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Kill UI", - "fontSize":16, - "align": "MiddleCenter" - } - ] - } -] diff --git a/examples/AnimationTest.json b/Tests/AnimationTest.json similarity index 96% rename from examples/AnimationTest.json rename to Tests/AnimationTest.json index dc1337e..6a49850 100644 --- a/examples/AnimationTest.json +++ b/Tests/AnimationTest.json @@ -1,2129 +1,2129 @@ -[ - { - "name": "UI", - "parent":"Overlay", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.1 0.1 0.1 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type":"NeedsCursor" - } - ] - }, - { - "name": "Slide0", - "parent":"UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "parent": "Slide0", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"A Feature Test Case", - "color": "1 1 1 0.6", - "fontSize":28, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.65", - "anchormax": "0.93 0.92" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - } - ] - }, - { - "parent": "Slide0", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Animation Changes Values", - "color": "1 1 1 0.8", - "fontSize":22, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -30", - "offsetmax": "0 0" - } - ] - }, - { - "parent": "Slide0", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Over Time...", - "color": "1 1 1 0.8", - "fontSize":22, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -60", - "offsetmax": "0 -30" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "from": "0", - "to": "1" - }, - { - "type": "Opacity", - "delay": 1.5, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "to": "0" - }, - ] - } - ] - }, - { - "parent": "Slide0", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"But there's More this Component can do", - "color": "1 1 1 0.8", - "fontSize":40, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -150", - "offsetmax": "0 -90" - } - ] - }, - { - "name": "Slide0_Kill", - "parent": "Slide0", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"Slide0", - "color": "0.9 0.8 0.3 0.12" - }, - { - "type":"RectTransform", - "anchormin": "0.9 0.0", - "anchormax": "1 0.07" - } - ] - }, - { - "parent": "Slide0_Kill", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Begin", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "Slide1", - "parent":"UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.15 0.05 0.05 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "MoveTo", - "delay": 0.2, - "duration": 0.5, - "easing": "0 1.45 0.6 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Opacity", - "delay": 0.2, - "duration": 0.5, - "easing": "0 1.45 0.6 1", - "to": "1" - } - ] - } - ] - }, - { - "name": "Slide1_Kill", - "parent": "Slide1", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"Slide1", - "color": "0.9 0.8 0.3 0.12" - }, - { - "type":"RectTransform", - "anchormin": "0.9 0.0", - "anchormax": "1 0.07" - } - ] - }, - { - "parent": "Slide1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Can Change Different Values", - "color": "1 1 1 0.6", - "fontSize":28, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.65", - "anchormax": "0.93 0.92" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - } - ] - }, - { - "parent": "Slide1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Like Opacity", - "color": "1 1 1 0.8", - "fontSize":22, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -30", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Opacity", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "from": "0", - "to": "1" - }, - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Opacity", - "delay": 1.5, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "to": "0" - }, - ] - } - ] - }, - { - "parent": "Slide1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"And Color", - "color": "1 1 1 0.8", - "fontSize":22, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -60", - "offsetmax": "0 -30" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Color", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "from": "1 0.2 0.2 1", - "to": "0.2 1 0.2 1" - }, - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Color", - "delay": 1.5, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "to": "0.2 0.2 1 1" - }, - ] - } - ] - }, - { - "name": "Slide1_Block1", - "parent":"Slide1", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.4", - "anchormax": "0.25 0.6", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Scale", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "from": "1 1", - "to": "1.5 1.5" - }, - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Scale", - "delay": 1.5, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "to": "1 1" - }, - ] - } - ] - }, - { - "parent": "Slide1_Block1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Or Scale", - "color": "1 1 1 0.8", - "fontSize":22, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Slide1_Block2", - "parent":"Slide1", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.4 0.4", - "anchormax": "0.55 0.6", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Rotate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "from": "0 0 45", - "to": "0 0 -45" - }, - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Rotate", - "delay": 1.5, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "to": "0 0 45" - }, - ] - } - ] - }, - { - "parent": "Slide1_Block2", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Or Rotation", - "color": "1 1 1 0.8", - "fontSize":22, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Slide1_Block3", - "parent":"Slide1", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.7 0.4", - "anchormax": "0.85 0.6", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Translate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "to": "0 -0.3" - }, - { - "trigger": "OnClick", - "target": "Slide0_Kill", - "type": "Translate", - "delay": 1.5, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "to": "0 0.3" - }, - ] - } - ] - }, - { - "parent": "Slide1_Block3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"And Movement", - "color": "1 1 1 0.8", - "fontSize":22, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "parent": "Slide1_Kill", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Next Page", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "Slide2", - "parent":"UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.15 0.05 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "MoveTo", - "delay": 0.2, - "duration": 0.5, - "easing": "0 1.45 0.6 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Opacity", - "delay": 0.2, - "duration": 0.5, - "easing": "0 1.45 0.6 1", - "to": "1" - } - ] - } - ] - }, - { - "parent": "Slide2", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Can Happen..", - "color": "1 1 1 0.6", - "fontSize":28, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.65", - "anchormax": "0.93 0.92" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - } - ] - }, - { - "name": "Slide2_Block1", - "parent":"Slide2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.5", - "anchormax": "0.25 0.7", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Opacity", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "from": "0.5", - "to": "1" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Opacity", - "delay": 1.5, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "to": "0.5" - }, - ] - } - ] - }, - { - "parent": "Slide2_Block1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"By Themselves", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Slide2_Block2", - "parent":"Slide2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.3 0.5", - "anchormax": "0.45 0.7", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnHoverEnter", - "type": "Scale", - "delay": 0, - "duration": 0.5, - "to": "1.2 1.2" - }, - { - "trigger": "OnHoverExit", - "target": "Slide2_Block2", - "type": "Rotate", - "delay": 0, - "duration": 0.5, - "to": "0 0 180" - }, - { - "trigger": "OnHoverExit", - "target": "Slide2_Block2", - "type": "Scale", - "delay": 0, - "duration": 0.5, - "to": "1 1" - }, - { - "trigger": "OnHoverExit", - "target": "Slide2_Block2", - "type": "Rotate", - "delay": 0.51, - "duration": 0, - "to": "0 0 0" - }, - ] - } - ] - }, - { - "parent": "Slide2_Block2", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"On Hover", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Slide2_Block3", - "parent":"Slide2", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "color": "0.35 0.65 0.45 1.0", - }, - { - "type":"RectTransform", - "anchormin": "0.5 0.5", - "anchormax": "0.65 0.7", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide2_Block3", - "type": "Scale", - "delay": 0, - "duration": 0.2, - "to": "1.2 1.2" - }, - { - "trigger": "OnClick", - "target": "Slide2_Block3", - "type": "Scale", - "delay": 0.5, - "duration": 0.2, - "to": "1 1" - }, - ] - } - ] - }, - { - "parent": "Slide2_Block3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"On Click", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Slide2_Block4", - "parent":"Slide2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.7 0.5", - "anchormax": "0.85 0.7", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnDestroy", - "type": "Translate", - "delay": 0, - "duration": 0.5, - "to": "1 0" - }, - { - "trigger": "OnDestroy", - "type": "Opacity", - "delay": 0, - "duration": 0.5, - "to": "0" - }, - ] - } - ] - }, - { - "parent": "Slide2_Block4", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"OnDestroy", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Slide2_Block4Kill", - "parent": "Slide2_Block4", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"Slide2_Block4", - "color": "0.9 0.3 0.3 0.42" - }, - { - "type":"RectTransform", - "anchormin": "0 0.0", - "anchormax": "1 0.3" - } - ] - }, - { - "parent": "Slide2_Block4Kill", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Kill me", - "fontSize":12, - "align": "MiddleCenter" - } - ] - }, - { - "parent": "Slide2", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"They Can be Combined", - "color": "1 1 1 0.6", - "fontSize":28, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.25", - "anchormax": "0.93 0.45" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - } - ] - }, - { - "name": "Slide2_Block5", - "parent":"Slide2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.2", - "anchormax": "0.25 0.4", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Color", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "from": "0.35 0.65 0.45 1.0", - "to": "0.45 0.35 0.65 1.0" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Translate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 1.5, - "from": "-0.15 0", - "to": "0.15 0" - }, - ] - } - ] - }, - { - "parent": "Slide2_Block5", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"At The Same Time", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Slide2_Block6", - "parent":"Slide2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.3 0.2", - "anchormax": "0.45 0.4", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Translate", - "delay": 0, - "duration": 0.4, - "repeat": -1, - "repeatDelay": 1.6, - "to": "0.15 0" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Translate", - "delay": 0.4, - "duration": 0.4, - "repeat": -1, - "repeatDelay": 1.6, - "to": "0 -0.15" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Translate", - "delay": 0.8, - "duration": 0.4, - "repeat": -1, - "repeatDelay": 1.6, - "to": "-0.15 0" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Translate", - "delay": 1.2, - "duration": 0.4, - "repeat": -1, - "repeatDelay": 1.6, - "to": "0 0.15" - }, - ] - } - ] - }, - { - "parent": "Slide2_Block6", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Or Staggered With Delays", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Slide2_Block7", - "parent":"Slide2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.6 0.2", - "anchormax": "0.75 0.4", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Color", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0, - "from": "0.35 0.65 0.45 1.0", - "to": "0.45 0.35 0.65 1.0" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Translate", - "delay": 0, - "duration": 0.75, - "repeat": -1, - "repeatDelay": 0.75, - "to": "0.15 0" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Translate", - "delay": 0, - "duration": 0.75, - "repeat": -1, - "repeatDelay": 0.75, - "easing": "EaseIn", - "to": "0 -0.15" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Translate", - "delay": 0.75, - "duration": 0.75, - "repeat": -1, - "repeatDelay": 0.75, - "to": "-0.15 0" - }, - { - "trigger": "OnClick", - "target": "Slide1_Kill", - "type": "Translate", - "delay": 0.75, - "duration": 0.75, - "repeat": -1, - "repeatDelay": 0.75, - "easing": "EaseIn", - "to": "0 0.15" - }, - ] - } - ] - }, - { - "parent": "Slide2_Block7", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Or Both", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Slide2_Kill", - "parent": "Slide2", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"Slide2", - "color": "0.9 0.8 0.3 0.12" - }, - { - "type":"RectTransform", - "anchormin": "0.9 0.0", - "anchormax": "1 0.07" - } - ] - }, - { - "parent": "Slide2_Kill", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Next Page", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "Slide3", - "parent":"UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.15 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnClick", - "target": "Slide2_Kill", - "type": "MoveTo", - "delay": 0.2, - "duration": 0.5, - "easing": "0 1.45 0.6 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "Slide2_Kill", - "type": "Opacity", - "delay": 0.2, - "duration": 0.5, - "easing": "0 1.45 0.6 1", - "to": "1" - } - ] - } - ] - }, - { - "parent": "Slide3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Can use Easing functions", - "color": "1 1 1 0.6", - "fontSize":28, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.65", - "anchormax": "0.93 0.92" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - } - ] - }, - { - "name": "Slide3_Block1", - "parent":"Slide3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.3 0.7", - "anchormax": "0.3 0.7", - "offsetmin": "-25 -25", - "offsetmax": "25 25", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide2_Kill", - "type": "Translate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0.5, - "from": "-0.2 0", - "to": "0.2 0" - } - ] - } - ] - }, - { - "parent": "Slide3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Easing: Linear", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.7", - "anchormax": "0.1 0.7", - "offsetmin": "25 25", - "offsetmax": "275 75", - } - ] - }, - { - "name": "Slide3_Block2", - "parent":"Slide3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.3 0.7", - "anchormax": "0.3 0.7", - "offsetmin": "-25 -125", - "offsetmax": "25 -75", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide2_Kill", - "type": "Translate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0.5, - "easing": "EaseIn", - "from": "-0.2 0", - "to": "0.2 0" - } - ] - } - ] - }, - { - "parent": "Slide3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Easing: EaseIn", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.7", - "anchormax": "0.1 0.7", - "offsetmin": "25 -75", - "offsetmax": "275 -25", - } - ] - }, - { - "name": "Slide3_Block3", - "parent":"Slide3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.3 0.7", - "anchormax": "0.3 0.7", - "offsetmin": "-25 -225", - "offsetmax": "25 -175", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide2_Kill", - "type": "Translate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0.5, - "easing": "EaseOut", - "from": "-0.2 0", - "to": "0.2 0" - } - ] - } - ] - }, - { - "parent": "Slide3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Easing: EaseOut", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.7", - "anchormax": "0.1 0.7", - "offsetmin": "25 -175", - "offsetmax": "275 -125", - } - ] - }, - { - "name": "Slide3_Block4", - "parent":"Slide3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.3 0.7", - "anchormax": "0.3 0.7", - "offsetmin": "-25 -325", - "offsetmax": "25 -275", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide2_Kill", - "type": "Translate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0.5, - "easing": "EaseInOut", - "from": "-0.2 0", - "to": "0.2 0" - } - ] - } - ] - }, - { - "parent": "Slide3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Easing: EaseInOut", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.7", - "anchormax": "0.1 0.7", - "offsetmin": "25 -275", - "offsetmax": "275 -225", - } - ] - }, - { - "name": "Slide3_Block5", - "parent":"Slide3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.7 0.7", - "anchormax": "0.7 0.7", - "offsetmin": "-25 -25", - "offsetmax": "25 25", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide2_Kill", - "type": "Translate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0.5, - "easing": "0.5 0.5 0.5 0.5", - "from": "-0.2 0", - "to": "0.2 0" - } - ] - } - ] - }, - { - "parent": "Slide3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Cubic Bezier: 0.5 0.5 0.5 0.5", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.5 0.7", - "anchormax": "0.5 0.7", - "offsetmin": "25 25", - "offsetmax": "275 75", - } - ] - }, - { - "name": "Slide3_Block6", - "parent":"Slide3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.7 0.7", - "anchormax": "0.7 0.7", - "offsetmin": "-25 -125", - "offsetmax": "25 -75", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide2_Kill", - "type": "Translate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0.5, - "easing": "0.3 -1 0.7 1.5", - "from": "-0.2 0", - "to": "0.2 0" - } - ] - } - ] - }, - { - "parent": "Slide3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Cubic-Bezier: 0.3 -1 0.7 1.5", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.5 0.7", - "anchormax": "0.5 0.7", - "offsetmin": "25 -75", - "offsetmax": "275 -25", - } - ] - }, - { - "name": "Slide3_Block7", - "parent":"Slide3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.7 0.7", - "anchormax": "0.7 0.7", - "offsetmin": "-25 -225", - "offsetmax": "25 -175", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide2_Kill", - "type": "Translate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0.5, - "easing": "0 1.5 0.7 0.4", - "from": "-0.2 0", - "to": "0.2 0" - } - ] - } - ] - }, - { - "parent": "Slide3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Cubic-Bezier: 0 1.5 0.7 0.4", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.5 0.7", - "anchormax": "0.5 0.7", - "offsetmin": "25 -175", - "offsetmax": "275 -125", - } - ] - }, - { - "name": "Slide3_Block8", - "parent":"Slide3", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.7 0.7", - "anchormax": "0.7 0.7", - "offsetmin": "-25 -325", - "offsetmax": "25 -275", - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide2_Kill", - "type": "Translate", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0.5, - "easing": "0 1.45 0.6 1", - "from": "-0.2 0", - "to": "0.2 0" - } - ] - } - ] - }, - { - "parent": "Slide3", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Cubic-Bezier: 0 1.45 0.6 1", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.5 0.7", - "anchormax": "0.5 0.7", - "offsetmin": "25 -275", - "offsetmax": "275 -225", - } - ] - }, - { - "name": "Slide3_Kill", - "parent": "Slide3", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"Slide3", - "color": "0.9 0.8 0.3 0.12" - }, - { - "type":"RectTransform", - "anchormin": "0.9 0.0", - "anchormax": "1 0.07" - } - ] - }, - { - "parent": "Slide3_Kill", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Next Page", - "fontSize":16, - "align": "MiddleCenter" - } - ] - }, - { - "name": "Slide4", - "parent":"UI", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.01 0.01 0.01 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "Animation", - "properties": [ - { - "type": "Opacity", - "to": "0.0" - }, - { - "trigger": "OnClick", - "target": "Slide3_Kill", - "type": "MoveTo", - "delay": 0.2, - "duration": 0.5, - "easing": "0 1.45 0.6 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "Slide3_Kill", - "type": "Opacity", - "delay": 0.2, - "duration": 0.5, - "easing": "0 1.45 0.6 1", - "to": "1" - } - ] - } - ] - }, - { - "parent": "Slide4", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Brings A Few unrelated but useful additions", - "color": "1 1 1 0.6", - "fontSize":28, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.65", - "anchormax": "0.93 0.92" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - } - ] - }, - { - "name": "Slide4_Block1", - "parent":"Slide4", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.1 0.3", - "anchormax": "0.4 0.7" - }, - { - "type": "UnityEngine.UI.RectMask2D" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide4_Block1", - "type": "Rotate", - "delay": 0, - "duration": 1.5, - "from": "0 0 180", - "to": "0 0 0" - } - ] - } - ] - }, - { - "parent": "Slide4_Block1", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"RectMask2D is a more performant way to mask objects but... [Hover me]", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0.3", - "anchormax": "1 1", - } - ] - }, - { - "name": "Slide4_Block1Moving", - "parent":"Slide4_Block1", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.15 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "-0.1 0.03", - "anchormax": "0 0.13" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide3_Kill", - "type": "MoveTo", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0.5, - "from": "-0.1 0.03 0 0.13", - "to": "1.0 0.03 1.1 0.13" - } - ] - } - ] - }, - { - "name": "Slide4_Block1Sub", - "parent":"Slide4_Block1", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 0.7", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "UnityEngine.UI.RectMask2D" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnHoverEnter", - "target": "Slide4_Block1", - "type": "MoveTo", - "delay": 0, - "duration": 0.5, - "to": "0 0 1 1" - }, - { - "trigger": "OnHoverExit", - "target": "Slide4_Block1", - "type": "MoveTo", - "delay": 0, - "duration": 0.5, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "parent": "Slide4_Block1Sub", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"But it Breaks when Using Rotation [ClickMe]", - "color": "1 1 1 0.8", - "fontSize":30, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1", - } - ] - }, - { - "name": "Slide4_Block2", - "parent":"Slide4", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.35 0.65 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0.5 0.3", - "anchormax": "0.8 0.7" - }, - { - "type": "UnityEngine.UI.Mask" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide4_Block2", - "type": "Rotate", - "delay": 0, - "duration": 1.5, - "from": "0 0 180", - "to": "0 0 0" - } - ] - } - ] - }, - { - "parent": "Slide4_Block2", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Mask is a Bit less efficient but more reliable [HoverMe]", - "color": "1 1 1 0.8", - "fontSize":20, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0.3", - "anchormax": "1 1", - } - ] - }, - { - "name": "Slide4_Block2Moving", - "parent":"Slide4_Block2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.15 0.45 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "-0.1 0.03", - "anchormax": "0 0.13" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnClick", - "target": "Slide3_Kill", - "type": "MoveTo", - "delay": 0, - "duration": 1.5, - "repeat": -1, - "repeatDelay": 0.5, - "from": "-0.1 0.03 0 0.13", - "to": "1.0 0.03 1.1 0.13" - } - ] - } - ] - }, - { - "name": "Slide4_Block2Sub", - "parent":"Slide4_Block2", - "components": - [ - { - "type":"UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 0.7", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type":"RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "UnityEngine.UI.Mask" - }, - { - "type": "Animation", - "properties": [ - { - "trigger": "OnHoverEnter", - "target": "Slide4_Block2", - "type": "MoveTo", - "delay": 0, - "duration": 0.5, - "to": "0 0 1 1" - }, - { - "trigger": "OnHoverExit", - "target": "Slide4_Block2", - "type": "MoveTo", - "delay": 0, - "duration": 0.5, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "parent": "Slide4_Block2Sub", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"It Doesnt Break on Rotation [ClickMe]", - "color": "1 1 1 0.8", - "fontSize":30, - "align": "MiddleCenter" - }, - { - "type":"RectTransform", - "anchormin": "0 0", - "anchormax": "1 1", - } - ] - }, - { - "parent": "UI", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Animation", - "fontSize":44, - "align": "UpperCenter" - }, - { - "type":"RectTransform", - "anchormin": "0.07 0.81", - "anchormax": "0.93 1" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - } - ] - }, - { - "name": "Button88", - "parent": "UI", - "components": - [ - { - "type":"UnityEngine.UI.Button", - "close":"UI", - "command":"cui.endtest", - "color": "0.9 0.8 0.3 0.02" - }, - { - "type":"RectTransform", - "anchormin": "0.0 0.0", - "anchormax": "0.1 0.07" - } - ] - }, - { - "parent": "Button88", - "components": - [ - { - "type":"UnityEngine.UI.Text", - "text":"Kill UI", - "fontSize":16, - "align": "MiddleCenter" - } - ] - } -] +[ + { + "name": "UI", + "parent":"Overlay", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.1 0.1 0.1 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type":"NeedsCursor" + } + ] + }, + { + "name": "Slide0", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"A Feature Test Case", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Animation Changes Values", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -30", + "offsetmax": "0 0" + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Over Time...", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -60", + "offsetmax": "0 -30" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "0", + "to": "1" + }, + { + "type": "Opacity", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0" + }, + ] + } + ] + }, + { + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"But there's More this Component can do", + "color": "1 1 1 0.8", + "fontSize":40, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -150", + "offsetmax": "0 -90" + } + ] + }, + { + "name": "Slide0_Kill", + "parent": "Slide0", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide0", + "color": "0.9 0.8 0.3 0.12" + }, + { + "type":"RectTransform", + "anchormin": "0.9 0.0", + "anchormax": "1 0.07" + } + ] + }, + { + "parent": "Slide0_Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Begin", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Slide1", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.15 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "MoveTo", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Opacity", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "1" + } + ] + } + ] + }, + { + "name": "Slide1_Kill", + "parent": "Slide1", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide1", + "color": "0.9 0.8 0.3 0.12" + }, + { + "type":"RectTransform", + "anchormin": "0.9 0.0", + "anchormax": "1 0.07" + } + ] + }, + { + "parent": "Slide1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Can Change Different Values", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "parent": "Slide1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Like Opacity", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -30", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Opacity", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "0", + "to": "1" + }, + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Opacity", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0" + }, + ] + } + ] + }, + { + "parent": "Slide1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"And Color", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -60", + "offsetmax": "0 -30" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Color", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "1 0.2 0.2 1", + "to": "0.2 1 0.2 1" + }, + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Color", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0.2 0.2 1 1" + }, + ] + } + ] + }, + { + "name": "Slide1_Block1", + "parent":"Slide1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.4", + "anchormax": "0.25 0.6", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Scale", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "1 1", + "to": "1.5 1.5" + }, + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Scale", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "1 1" + }, + ] + } + ] + }, + { + "parent": "Slide1_Block1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Or Scale", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide1_Block2", + "parent":"Slide1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.4 0.4", + "anchormax": "0.55 0.6", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Rotate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "0 0 45", + "to": "0 0 -45" + }, + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Rotate", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0 0 45" + }, + ] + } + ] + }, + { + "parent": "Slide1_Block2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Or Rotation", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide1_Block3", + "parent":"Slide1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.4", + "anchormax": "0.85 0.6", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0 -0.3" + }, + { + "trigger": "OnClick", + "target": "Slide0_Kill", + "type": "Translate", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0 0.3" + }, + ] + } + ] + }, + { + "parent": "Slide1_Block3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"And Movement", + "color": "1 1 1 0.8", + "fontSize":22, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "parent": "Slide1_Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Next Page", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Slide2", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.15 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "MoveTo", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Opacity", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Can Happen..", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Slide2_Block1", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.5", + "anchormax": "0.25 0.7", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Opacity", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "0.5", + "to": "1" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Opacity", + "delay": 1.5, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "to": "0.5" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"By Themselves", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block2", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.5", + "anchormax": "0.45 0.7", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnHoverEnter", + "type": "Scale", + "delay": 0, + "duration": 0.5, + "to": "1.2 1.2" + }, + { + "trigger": "OnHoverExit", + "target": "Slide2_Block2", + "type": "Rotate", + "delay": 0, + "duration": 0.5, + "to": "0 0 180" + }, + { + "trigger": "OnHoverExit", + "target": "Slide2_Block2", + "type": "Scale", + "delay": 0, + "duration": 0.5, + "to": "1 1" + }, + { + "trigger": "OnHoverExit", + "target": "Slide2_Block2", + "type": "Rotate", + "delay": 0.51, + "duration": 0, + "to": "0 0 0" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"On Hover", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block3", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "color": "0.35 0.65 0.45 1.0", + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.65 0.7", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide2_Block3", + "type": "Scale", + "delay": 0, + "duration": 0.2, + "to": "1.2 1.2" + }, + { + "trigger": "OnClick", + "target": "Slide2_Block3", + "type": "Scale", + "delay": 0.5, + "duration": 0.2, + "to": "1 1" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"On Click", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block4", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.5", + "anchormax": "0.85 0.7", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnDestroy", + "type": "Translate", + "delay": 0, + "duration": 0.5, + "to": "1 0" + }, + { + "trigger": "OnDestroy", + "type": "Opacity", + "delay": 0, + "duration": 0.5, + "to": "0" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block4", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"OnDestroy", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block4Kill", + "parent": "Slide2_Block4", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide2_Block4", + "color": "0.9 0.3 0.3 0.42" + }, + { + "type":"RectTransform", + "anchormin": "0 0.0", + "anchormax": "1 0.3" + } + ] + }, + { + "parent": "Slide2_Block4Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Kill me", + "fontSize":12, + "align": "MiddleCenter" + } + ] + }, + { + "parent": "Slide2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"They Can be Combined", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.25", + "anchormax": "0.93 0.45" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Slide2_Block5", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.2", + "anchormax": "0.25 0.4", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Color", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "0.35 0.65 0.45 1.0", + "to": "0.45 0.35 0.65 1.0" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 1.5, + "from": "-0.15 0", + "to": "0.15 0" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block5", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"At The Same Time", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block6", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.2", + "anchormax": "0.45 0.4", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Translate", + "delay": 0, + "duration": 0.4, + "repeat": -1, + "repeatDelay": 1.6, + "to": "0.15 0" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Translate", + "delay": 0.4, + "duration": 0.4, + "repeat": -1, + "repeatDelay": 1.6, + "to": "0 -0.15" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Translate", + "delay": 0.8, + "duration": 0.4, + "repeat": -1, + "repeatDelay": 1.6, + "to": "-0.15 0" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Translate", + "delay": 1.2, + "duration": 0.4, + "repeat": -1, + "repeatDelay": 1.6, + "to": "0 0.15" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block6", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Or Staggered With Delays", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Block7", + "parent":"Slide2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.6 0.2", + "anchormax": "0.75 0.4", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Color", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0, + "from": "0.35 0.65 0.45 1.0", + "to": "0.45 0.35 0.65 1.0" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Translate", + "delay": 0, + "duration": 0.75, + "repeat": -1, + "repeatDelay": 0.75, + "to": "0.15 0" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Translate", + "delay": 0, + "duration": 0.75, + "repeat": -1, + "repeatDelay": 0.75, + "easing": "EaseIn", + "to": "0 -0.15" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Translate", + "delay": 0.75, + "duration": 0.75, + "repeat": -1, + "repeatDelay": 0.75, + "to": "-0.15 0" + }, + { + "trigger": "OnClick", + "target": "Slide1_Kill", + "type": "Translate", + "delay": 0.75, + "duration": 0.75, + "repeat": -1, + "repeatDelay": 0.75, + "easing": "EaseIn", + "to": "0 0.15" + }, + ] + } + ] + }, + { + "parent": "Slide2_Block7", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Or Both", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Slide2_Kill", + "parent": "Slide2", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide2", + "color": "0.9 0.8 0.3 0.12" + }, + { + "type":"RectTransform", + "anchormin": "0.9 0.0", + "anchormax": "1 0.07" + } + ] + }, + { + "parent": "Slide2_Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Next Page", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Slide3", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.15 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnClick", + "target": "Slide2_Kill", + "type": "MoveTo", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "Slide2_Kill", + "type": "Opacity", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Can use Easing functions", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Slide3_Block1", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.7", + "anchormax": "0.3 0.7", + "offsetmin": "-25 -25", + "offsetmax": "25 25", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide2_Kill", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Easing: Linear", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.7", + "anchormax": "0.1 0.7", + "offsetmin": "25 25", + "offsetmax": "275 75", + } + ] + }, + { + "name": "Slide3_Block2", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.7", + "anchormax": "0.3 0.7", + "offsetmin": "-25 -125", + "offsetmax": "25 -75", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide2_Kill", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "EaseIn", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Easing: EaseIn", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.7", + "anchormax": "0.1 0.7", + "offsetmin": "25 -75", + "offsetmax": "275 -25", + } + ] + }, + { + "name": "Slide3_Block3", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.7", + "anchormax": "0.3 0.7", + "offsetmin": "-25 -225", + "offsetmax": "25 -175", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide2_Kill", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "EaseOut", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Easing: EaseOut", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.7", + "anchormax": "0.1 0.7", + "offsetmin": "25 -175", + "offsetmax": "275 -125", + } + ] + }, + { + "name": "Slide3_Block4", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.3 0.7", + "anchormax": "0.3 0.7", + "offsetmin": "-25 -325", + "offsetmax": "25 -275", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide2_Kill", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "EaseInOut", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Easing: EaseInOut", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.7", + "anchormax": "0.1 0.7", + "offsetmin": "25 -275", + "offsetmax": "275 -225", + } + ] + }, + { + "name": "Slide3_Block5", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.7", + "anchormax": "0.7 0.7", + "offsetmin": "-25 -25", + "offsetmax": "25 25", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide2_Kill", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "0.5 0.5 0.5 0.5", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Cubic Bezier: 0.5 0.5 0.5 0.5", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.7", + "anchormax": "0.5 0.7", + "offsetmin": "25 25", + "offsetmax": "275 75", + } + ] + }, + { + "name": "Slide3_Block6", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.7", + "anchormax": "0.7 0.7", + "offsetmin": "-25 -125", + "offsetmax": "25 -75", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide2_Kill", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "0.3 -1 0.7 1.5", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Cubic-Bezier: 0.3 -1 0.7 1.5", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.7", + "anchormax": "0.5 0.7", + "offsetmin": "25 -75", + "offsetmax": "275 -25", + } + ] + }, + { + "name": "Slide3_Block7", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.7", + "anchormax": "0.7 0.7", + "offsetmin": "-25 -225", + "offsetmax": "25 -175", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide2_Kill", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "0 1.5 0.7 0.4", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Cubic-Bezier: 0 1.5 0.7 0.4", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.7", + "anchormax": "0.5 0.7", + "offsetmin": "25 -175", + "offsetmax": "275 -125", + } + ] + }, + { + "name": "Slide3_Block8", + "parent":"Slide3", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.7 0.7", + "anchormax": "0.7 0.7", + "offsetmin": "-25 -325", + "offsetmax": "25 -275", + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide2_Kill", + "type": "Translate", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "easing": "0 1.45 0.6 1", + "from": "-0.2 0", + "to": "0.2 0" + } + ] + } + ] + }, + { + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Cubic-Bezier: 0 1.45 0.6 1", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.7", + "anchormax": "0.5 0.7", + "offsetmin": "25 -275", + "offsetmax": "275 -225", + } + ] + }, + { + "name": "Slide3_Kill", + "parent": "Slide3", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"Slide3", + "color": "0.9 0.8 0.3 0.12" + }, + { + "type":"RectTransform", + "anchormin": "0.9 0.0", + "anchormax": "1 0.07" + } + ] + }, + { + "parent": "Slide3_Kill", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Next Page", + "fontSize":16, + "align": "MiddleCenter" + } + ] + }, + { + "name": "Slide4", + "parent":"UI", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.01 0.01 0.01 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "Animation", + "properties": [ + { + "type": "Opacity", + "to": "0.0" + }, + { + "trigger": "OnClick", + "target": "Slide3_Kill", + "type": "MoveTo", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "Slide3_Kill", + "type": "Opacity", + "delay": 0.2, + "duration": 0.5, + "easing": "0 1.45 0.6 1", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide4", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Brings A Few unrelated but useful additions", + "color": "1 1 1 0.6", + "fontSize":28, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Slide4_Block1", + "parent":"Slide4", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.1 0.3", + "anchormax": "0.4 0.7" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide4_Block1", + "type": "Rotate", + "delay": 0, + "duration": 1.5, + "from": "0 0 180", + "to": "0 0 0" + } + ] + } + ] + }, + { + "parent": "Slide4_Block1", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"RectMask2D is a more performant way to mask objects but... [Hover me]", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0.3", + "anchormax": "1 1", + } + ] + }, + { + "name": "Slide4_Block1Moving", + "parent":"Slide4_Block1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.15 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "-0.1 0.03", + "anchormax": "0 0.13" + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide3_Kill", + "type": "MoveTo", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "from": "-0.1 0.03 0 0.13", + "to": "1.0 0.03 1.1 0.13" + } + ] + } + ] + }, + { + "name": "Slide4_Block1Sub", + "parent":"Slide4_Block1", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 0.7", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnHoverEnter", + "target": "Slide4_Block1", + "type": "MoveTo", + "delay": 0, + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "trigger": "OnHoverExit", + "target": "Slide4_Block1", + "type": "MoveTo", + "delay": 0, + "duration": 0.5, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "parent": "Slide4_Block1Sub", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"But it Breaks when Using Rotation [ClickMe]", + "color": "1 1 1 0.8", + "fontSize":30, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1", + } + ] + }, + { + "name": "Slide4_Block2", + "parent":"Slide4", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.35 0.65 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0.5 0.3", + "anchormax": "0.8 0.7" + }, + { + "type": "UnityEngine.UI.Mask" + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide4_Block2", + "type": "Rotate", + "delay": 0, + "duration": 1.5, + "from": "0 0 180", + "to": "0 0 0" + } + ] + } + ] + }, + { + "parent": "Slide4_Block2", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Mask is a Bit less efficient but more reliable [HoverMe]", + "color": "1 1 1 0.8", + "fontSize":20, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0.3", + "anchormax": "1 1", + } + ] + }, + { + "name": "Slide4_Block2Moving", + "parent":"Slide4_Block2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.15 0.45 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "-0.1 0.03", + "anchormax": "0 0.13" + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnClick", + "target": "Slide3_Kill", + "type": "MoveTo", + "delay": 0, + "duration": 1.5, + "repeat": -1, + "repeatDelay": 0.5, + "from": "-0.1 0.03 0 0.13", + "to": "1.0 0.03 1.1 0.13" + } + ] + } + ] + }, + { + "name": "Slide4_Block2Sub", + "parent":"Slide4_Block2", + "components": + [ + { + "type":"UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 0.7", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type":"RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "UnityEngine.UI.Mask" + }, + { + "type": "Animation", + "properties": [ + { + "trigger": "OnHoverEnter", + "target": "Slide4_Block2", + "type": "MoveTo", + "delay": 0, + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "trigger": "OnHoverExit", + "target": "Slide4_Block2", + "type": "MoveTo", + "delay": 0, + "duration": 0.5, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "parent": "Slide4_Block2Sub", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"It Doesnt Break on Rotation [ClickMe]", + "color": "1 1 1 0.8", + "fontSize":30, + "align": "MiddleCenter" + }, + { + "type":"RectTransform", + "anchormin": "0 0", + "anchormax": "1 1", + } + ] + }, + { + "parent": "UI", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Animation", + "fontSize":44, + "align": "UpperCenter" + }, + { + "type":"RectTransform", + "anchormin": "0.07 0.81", + "anchormax": "0.93 1" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + } + ] + }, + { + "name": "Button88", + "parent": "UI", + "components": + [ + { + "type":"UnityEngine.UI.Button", + "close":"UI", + "command":"cui.endtest", + "color": "0.9 0.8 0.3 0.02" + }, + { + "type":"RectTransform", + "anchormin": "0.0 0.0", + "anchormax": "0.1 0.07" + } + ] + }, + { + "parent": "Button88", + "components": + [ + { + "type":"UnityEngine.UI.Text", + "text":"Kill UI", + "fontSize":16, + "align": "MiddleCenter" + } + ] + } +] diff --git a/examples/InteractiveComponentsTest.json b/Tests/InteractiveComponentsTest.json similarity index 95% rename from examples/InteractiveComponentsTest.json rename to Tests/InteractiveComponentsTest.json index edbfde5..ec15ef5 100644 --- a/examples/InteractiveComponentsTest.json +++ b/Tests/InteractiveComponentsTest.json @@ -1,2208 +1,2208 @@ -[{ - "name": "UI", - "parent": "Overlay", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "NeedsCursor" - } - ] - }, - { - "name": "Slide0", - "parent": "UI", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 0.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 0", - "anchormax": "1 1", - "offsetmin": "0 0", - "offsetmax": "0 -60" - } - ] - }, - { - "parent": "Slide0", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Using Multiple Animations with different mouseTargets", - "color": "1 1 1 0.6", - "fontSize": 28, - "align": "UpperCenter" - }, - { - "type": "RectTransform", - "anchormin": "0.07 0.65", - "anchormax": "0.93 0.92" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.6", - "distance": "2 2" - }, - { - "type": "Animation", - "properties": [{ - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 0.5, - "duration": 0.5, - "from": "0", - "to": "1" - } - ] - } - ] - }, - { - "parent": "Slide0", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "lets us listen to multiple mouseTargets, Opening up things", - "color": "1 1 1 0.8", - "fontSize": 22, - "align": "UpperCenter" - }, - { - "type": "RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -30", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [{ - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 1.0, - "duration": 0.5, - "from": "0", - "to": "1" - } - ] - } - ] - }, - { - "parent": "Slide0", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Like Tabs", - "color": "1 1 1 0.8", - "fontSize": 50, - "align": "UpperCenter" - }, - { - "type": "RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -170", - "offsetmax": "0 -90" - }, - { - "type": "Animation", - "properties": [{ - "type": "Opacity", - "to": "0.0" - }, - { - "type": "Opacity", - "delay": 1.5, - "duration": 0.5, - "from": "0", - "to": "1" - } - ] - } - ] - }, - { - "name": "TabBar", - "parent": "UI", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 20", - "offsetmax": "0 80" - }, - { - "type": "Animation", - "properties": [{ - "type": "MoveToPX", - "delay": 1.5, - "easing": "0 1.45 0.6 1", - "duration": 0.5, - "to": "0 -60 0 0" - }] - } - ] - }, - { - "name": "Tab_Button1", - "parent": "TabBar", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.4", - "distance": "1 0" - }, - { - "type": "RectTransform", - "anchormin": "0 0", - "anchormax": "0.33 1" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - } - ] - } - ] - }, - { - "parent": "Tab_Button1", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Details", - "color": "1 1 1 1", - "fontSize": 24, - "align": "MiddleCenter" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - } - ] - } - ] - }, - { - "name": "Tab_Button2", - "parent": "TabBar", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.4", - "distance": "1 0" - }, - { - "type": "RectTransform", - "anchormin": "0.33 0", - "anchormax": "0.66 1" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - } - ] - } - ] - }, - { - "parent": "Tab_Button2", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Modals", - "color": "1 1 1 1", - "fontSize": 24, - "align": "MiddleCenter" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - } - ] - } - ] - }, - { - "name": "Tab_Button3", - "parent": "TabBar", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "0.0 0 0 0.4", - "distance": "1 0" - }, - { - "type": "RectTransform", - "anchormin": "0.66 0", - "anchormax": "1 1" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.15 0.15 0.15 0.8" - } - ] - } - ] - }, - { - "parent": "Tab_Button3", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Dropdowns", - "color": "1 1 1 1", - "fontSize": 24, - "align": "MiddleCenter" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.2 0.7 0.35 0.8" - } - ] - } - ] - }, - { - "name": "Tab_Highlight", - "parent": "TabBar", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 0", - "anchormax": "1 0", - "offsetmin": "0 0", - "offsetmax": "0 3" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0, - "to": "0.4 0.4 0.4 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button1", - "type": "Color", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0.25 0.8 0.35 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button1", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0 0 0.33 0" - }, - { - "trigger": "OnClick", - "target": "Tab_Button2", - "type": "Color", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0.25 0.8 0.35 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button2", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0.33 0 0.66 0" - }, - { - "trigger": "OnClick", - "target": "Tab_Button3", - "type": "Color", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0.25 0.8 0.35 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button3", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 1.15 0.6 1", - "to": "0.66 0 1 0" - } - ] - } - ] - }, - { - "name": "Tabs", - "parent": "UI", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.08 0.08 0.08 0.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "1 0", - "anchormax": "2 1", - "offsetmin": "0 0", - "offsetmax": "0 -60" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "TabBar", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "0 0 1 1" - }] - } - ] - }, - { - "name": "Tab1", - "parent": "Tabs", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "Tab_Button1", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button2", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "-1 0 0 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button3", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "-1 0 0 1" - } - ] - } - ] - }, - { - "parent": "Tab1", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "this subtle change lets us react to mouse events on different panels, which is great for creating more complex UI behaviours completely without server interaction required", - "color": "1 1 1 0.9", - "fontSize": 22, - "align": "UpperCenter" - }, - { - "type": "RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -70", - "offsetmax": "0 0" - } - ] - }, - { - "parent": "Tab1", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "for example, we can make a tab system that cohesively swipes from right to left depending on which tab the user last selected, and even have a material-style tab indicator that smoothly swipes between the tabs", - "color": "1 1 1 0.7", - "fontSize": 18, - "align": "UpperCenter" - }, - { - "type": "RectTransform", - "anchormin": "0.1 0.8", - "anchormax": "0.9 0.8", - "offsetmin": "0 -160", - "offsetmax": "0 -80" - } - ] - }, - { - "parent": "Tab1", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "aside from tabs we can create Modals & dropdowns with great UX", - "color": "1 1 1 0.7", - "fontSize": 18, - "align": "UpperCenter" - }, - { - "type": "RectTransform", - "anchormin": "0.1 0.8", - "anchormax": "0.9 0.8", - "offsetmin": "0 -240", - "offsetmax": "0 -160" - } - ] - }, - { - "name": "Tab2", - "parent": "Tabs", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.05 0.05 0.05 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "1 0", - "anchormax": "2 1" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "Tab_Button2", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button1", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "1 0 2 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button3", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "-1 0 0 1" - } - ] - } - ] - }, - { - "parent": "Tab2", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Click the button below to open a modal", - "color": "1 1 1 0.9", - "fontSize": 22, - "align": "UpperCenter" - }, - { - "type": "RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -70", - "offsetmax": "0 0" - } - ] - }, - { - "name": "ModalButton", - "parent": "Tab2", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0.5 0.5", - "anchormax": "0.5 0.5", - "offsetmin": "-50 -20", - "offsetmax": "50 20" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - } - ] - } - ] - }, - { - "parent": "ModalButton", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Open Modal", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "Tab3", - "parent": "Tabs", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "1 0", - "anchormax": "2 1" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "Tab_Button3", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button2", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "1 0 2 1" - }, - { - "trigger": "OnClick", - "target": "Tab_Button1", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "1 0 2 1" - } - ] - } - ] - }, - { - "name": "Tab3_Section1", - "parent": "Tab3", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 0", - "anchormax": "0.33 1" - } - ] - }, - { - "name": "DropDown1_Button", - "parent": "Tab3_Section1", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "0 -20", - "offsetmax": "0 20" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - } - ] - } - ] - }, - { - "parent": "DropDown1_Button", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Select Option", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown1_Parent", - "parent": "Tab3_Section1", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 0.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "Animation", - "properties": [ - - { - "trigger": "OnClick", - "target": "DropDown1_Button", - "type": "MoveTo", - "duration": 0, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "DropDown1_Parent", - "type": "MoveTo", - "delay": 0.3, - "duration": 0, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "DropDown1_Container", - "parent": "DropDown1_Parent", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.02 0.02 0.02 0.8", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.RectMask2D" - }, - { - "type": "RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "2 -20", - "offsetmax": "-2 -20" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "1 1 1 0.1", - "distance": "1 1" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown1_Button", - "type": "MoveToPX", - "easing": "0 1.15 0.6 1", - "duration": 0.3, - "to": "2 -220 -2 -20" - }, - { - "trigger": "OnClick", - "target": "DropDown1_Parent", - "type": "MoveToPX", - "easing": "0 0.85 0.6 1", - "duration": 0.3, - "to": "2 -20 -2 -20" - } - ] - } - ] - }, - { - "name": "DropDown1_Option1", - "parent": "DropDown1_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -40", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown1_Option1", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Selecting an Option Closes the Dropdown", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown1_Option2", - "parent": "DropDown1_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -80", - "offsetmax": "0 -40" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown1_Option2", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Option 2", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown1_Option3", - "parent": "DropDown1_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -120", - "offsetmax": "0 -80" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown1_Option3", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Dont choose me", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown1_Option4", - "parent": "DropDown1_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -160", - "offsetmax": "0 -120" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown1_Option4", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Choose me", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown1_Option5", - "parent": "DropDown1_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -200", - "offsetmax": "0 -160" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown1_Option5", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "i'm just filler", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "Tab3_Section2", - "parent": "Tab3", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.06 0.06 0.06 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0.33 0", - "anchormax": "0.66 1" - } - ] - }, - { - "name": "DropDown2_Button", - "parent": "Tab3_Section2", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "0 -20", - "offsetmax": "0 20" - }, - { - "type": "UnityEngine.UI.RectMask2D" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - } - ] - } - ] - }, - { - "name": "DropDown2_ButtonExpand", - "parent": "DropDown2_Button", - "components": [{ - "type": "RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 0.75 0.6 1", - "to": "0 -1 1 0" - }, - { - "trigger": "OnClick", - "target": "DropDown2_ButtonCollapse", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 0.75 0.6 1", - "to": "0 0 1 1" - } - ] - } - ] - }, - { - "parent": "DropDown2_ButtonExpand", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Expand", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown2_ButtonCollapse", - "parent": "DropDown2_Button", - "components": [{ - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 2" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown2_ButtonExpand", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 0.75 0.6 1", - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.3, - "easing": "0 0.75 0.6 1", - "to": "0 1 1 2" - } - ] - } - ] - }, - { - "parent": "DropDown2_ButtonCollapse", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Collapse", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown2_Container", - "parent": "Tab3_Section2", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.02 0.02 0.02 0.8", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.RectMask2D" - }, - { - "type": "RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "2 -20", - "offsetmax": "-2 -20" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "1 1 1 0.1", - "distance": "1 1" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown2_ButtonExpand", - "type": "MoveToPX", - "easing": "0 1.15 0.6 1", - "duration": 0.3, - "to": "2 -320 -2 -20" - }, - { - "trigger": "OnClick", - "target": "DropDown2_ButtonCollapse", - "type": "MoveToPX", - "easing": "0 0.85 0.6 1", - "duration": 0.3, - "to": "2 -20 -2 -20" - } - ] - } - ] - }, - { - "name": "DropDown2_TextContainer", - "parent": "DropDown2_Container", - "components": [{ - "type": "RectTransform", - "anchormin": "0.05 1", - "anchormax": "0.95 1", - "offsetmin": "0 -300", - "offsetmax": "0 0" - }] - }, - { - "parent": "DropDown2_TextContainer", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "unlike the first dropdown, this dropdown can only be closed by clicking the Collapse button. the Expand/Collapse button illustrates that this also lets us somewhat track state right in the UI, which allows us to create simple triggerals like checkboxes without requiring any AddUI/Destroy calls from the server", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "Tab3_Section3", - "parent": "Tab3", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 1.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0.66 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "DropDown3_Button", - "parent": "Tab3_Section3", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "0 -20", - "offsetmax": "0 20" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 1.0" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.8" - } - ] - } - ] - }, - { - "parent": "DropDown3_Button", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Select Option", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown3_Parent", - "parent": "Tab3_Section3", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.09 0.09 0.09 0.0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown3_Button", - "type": "MoveTo", - "duration": 0, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "delay": 0.3, - "duration": 0, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "DropDown3_Container", - "parent": "Tab3_Section3", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.02 0.02 0.02 0.8", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "UnityEngine.UI.ScrollView", - "vertical": true, - "horizontal": false, - "movementType": "Clamped", - "inertia": false, - "contentTransform": { - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -280", - "offsetmax": "0 0" - }, - "verticalScrollbar": { - "autoHide": true, - "size": 10 - }, - "scrollSensitivity": 15.0 - }, - { - "type": "RectTransform", - "anchormin": "0.1 0.9", - "anchormax": "0.9 0.9", - "offsetmin": "2 -20", - "offsetmax": "-2 -20" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "1 1 1 0.1", - "distance": "1 1" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown3_Button", - "type": "MoveToPX", - "easing": "0 1.15 0.6 1", - "duration": 0.3, - "to": "2 -220 -2 -20" - }, - { - "trigger": "OnClick", - "target": "DropDown3_Parent", - "type": "MoveToPX", - "easing": "0 0.85 0.6 1", - "duration": 0.3, - "to": "2 -20 -2 -20" - } - ] - } - ] - }, - { - "name": "DropDown3_Option1", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -40", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option1", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Selecting an Option wont close the Dropdown", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown3_Option1Selected", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -40", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown3_Option1", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "DropDown3_Option2", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -80", - "offsetmax": "0 -40" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option2", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "You Can Select Me", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown3_Option2Selected", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -80", - "offsetmax": "0 -40" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown3_Option2", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "DropDown3_Option3", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -120", - "offsetmax": "0 -80" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option3", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Or Me!", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown3_Option3Selected", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -120", - "offsetmax": "0 -80" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown3_Option3", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "DropDown3_Option4", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -160", - "offsetmax": "0 -120" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.15 0.35 0.2 0.1" - }] - } - ] - }, - { - "parent": "DropDown3_Option4", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Not me Though", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown3_Option5", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -200", - "offsetmax": "0 -160" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option5", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "i'm just filler", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown3_Option5Selected", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -200", - "offsetmax": "0 -160" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown3_Option5", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "DropDown3_Option6", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -240", - "offsetmax": "0 -200" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option6", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "i'm just filler", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown3_Option6Selected", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -240", - "offsetmax": "0 -200" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown3_Option6", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }, - { - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - } - ] - } - ] - }, - { - "name": "DropDown3_Option7", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 1", - "anchormax": "1 1", - "offsetmin": "0 -280", - "offsetmax": "0 -240" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.2" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.1" - } - ] - } - ] - }, - { - "parent": "DropDown3_Option7", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "i'm just filler", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "name": "DropDown3_Option7Selected", - "parent": "DropDown3_Container", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 0.1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "1 1", - "anchormax": "2 1", - "offsetmin": "0 -280", - "offsetmax": "0 -240" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "DropDown3_Option7", - "type": "MoveTo", - "duration": 0.1, - "to": "0 1 1 1" - }] - }, - { - "type": "Animation", - "mouseTarget": "DropDown3_Option7Selected", - "properties": [{ - "trigger": "OnClick", - "type": "MoveTo", - "duration": 0.1, - "to": "1 1 2 1" - }] - } - ] - }, - { - "name": "ModalParent", - "parent": "UI", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 -1", - "anchormax": "1 0" - }, - { - "type": "Animation", - "properties": [{ - "trigger": "OnClick", - "target": "ModalButton", - "type": "Color", - "easing": "0 1.15 0.6 1", - "duration": 0, - "to": "0.05 0.05 0.05 0.0" - }, - { - "trigger": "OnClick", - "target": "ModalButton", - "type": "Color", - "easing": "0 1.15 0.6 1", - "delay": 0.5, - "duration": 0.5, - "from": "0.05 0.05 0.05 0.0", - "to": "0.05 0.05 0.05 0.98" - }, - { - "trigger": "OnClick", - "target": "ModalButton", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "duration": 0.5, - "to": "0 0 1 1" - }, - { - "trigger": "OnClick", - "target": "ModalCloseButton", - "type": "Color", - "easing": "0 1.15 0.6 1", - "duration": 0.2, - "to": "0.05 0.05 0.05 0.0" - }, - { - "trigger": "OnClick", - "target": "ModalCloseButton", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "delay": 0.2, - "duration": 0.5, - "to": "0 -1 1 0" - }, - { - "trigger": "OnClick", - "target": "ModalBackdrop", - "type": "Color", - "easing": "0 1.15 0.6 1", - "duration": 0.2, - "to": "0.05 0.05 0.05 0.0" - }, - { - "trigger": "OnClick", - "target": "ModalBackdrop", - "type": "MoveTo", - "easing": "0 1.15 0.6 1", - "delay": 0.2, - "duration": 0.5, - "to": "0 -1 1 0" - } - ] - } - ] - }, - { - "name": "ModalBackdrop", - "parent": "ModalParent", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 0", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "0 0", - "anchormax": "1 1" - } - ] - }, - { - "name": "Modal", - "parent": "ModalParent", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "0.08 0.08 0.08 1" - }, - { - "type": "UnityEngine.UI.Outline", - "color": "1 1 1 0.1", - "distance": "1 1" - }, - { - "type": "RectTransform", - "anchormin": "0.2 0.2", - "anchormax": "0.8 0.8" - } - ] - }, - { - "name": "ModalCloseButton", - "parent": "Modal", - "components": [{ - "type": "UnityEngine.UI.RawImage", - "color": "1 1 1 1", - "sprite": "Assets/Content/UI/UI.Background.Tile.psd" - }, - { - "type": "RectTransform", - "anchormin": "1 1", - "anchormax": "1 1", - "offsetmin": "-60 -25", - "offsetmax": "0 0" - }, - { - "type": "Animation", - "properties": [{ - "type": "Color", - "duration": 0, - "to": "0.3 0.65 0.35 0.4" - }, - { - "trigger": "OnHoverEnter", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.6" - }, - { - "trigger": "OnHoverExit", - "type": "Color", - "duration": 0.1, - "to": "0.3 0.65 0.35 0.4" - } - ] - } - ] - }, - { - "parent": "ModalCloseButton", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Close", - "fontSize": 16, - "align": "MiddleCenter" - }] - }, - { - "parent": "Modal", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Re-Usable Modals without any server interaction required", - "color": "1 1 1 0.8", - "fontSize": 24, - "align": "MiddleCenter" - }, - { - "type": "RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -30", - "offsetmax": "0 0" - } - ] - }, - { - "parent": "Modal", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "to Close this modal you can click outside of it on the backdrop or use the dedicated close button", - "color": "1 1 1 0.8", - "fontSize": 20, - "align": "MiddleCenter" - }, - { - "type": "RectTransform", - "anchormin": "0.07 0.8", - "anchormax": "0.93 0.8", - "offsetmin": "0 -120", - "offsetmax": "0 -40" - } - ] - }, - { - "name": "Button88", - "parent": "UI", - "components": [{ - "type": "UnityEngine.UI.Button", - "close": "UI", - "command": "cui.endtest", - "color": "0.9 0.8 0.3 0.52" - }, - { - "type": "RectTransform", - "anchormin": "0.0 0.0", - "anchormax": "0.1 0.07" - } - ] - }, - { - "parent": "Button88", - "components": [{ - "type": "UnityEngine.UI.Text", - "text": "Kill UI", - "fontSize": 16, - "align": "MiddleCenter" - }] - } -] +[{ + "name": "UI", + "parent": "Overlay", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "NeedsCursor" + } + ] + }, + { + "name": "Slide0", + "parent": "UI", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 1", + "offsetmin": "0 0", + "offsetmax": "0 -60" + } + ] + }, + { + "parent": "Slide0", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Using Multiple Animations with different mouseTargets", + "color": "1 1 1 0.6", + "fontSize": 28, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.65", + "anchormax": "0.93 0.92" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.6", + "distance": "2 2" + }, + { + "type": "Animation", + "properties": [{ + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 0.5, + "duration": 0.5, + "from": "0", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide0", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "lets us listen to multiple mouseTargets, Opening up things", + "color": "1 1 1 0.8", + "fontSize": 22, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -30", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [{ + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 1.0, + "duration": 0.5, + "from": "0", + "to": "1" + } + ] + } + ] + }, + { + "parent": "Slide0", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Like Tabs", + "color": "1 1 1 0.8", + "fontSize": 50, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -170", + "offsetmax": "0 -90" + }, + { + "type": "Animation", + "properties": [{ + "type": "Opacity", + "to": "0.0" + }, + { + "type": "Opacity", + "delay": 1.5, + "duration": 0.5, + "from": "0", + "to": "1" + } + ] + } + ] + }, + { + "name": "TabBar", + "parent": "UI", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 20", + "offsetmax": "0 80" + }, + { + "type": "Animation", + "properties": [{ + "type": "MoveToPX", + "delay": 1.5, + "easing": "0 1.45 0.6 1", + "duration": 0.5, + "to": "0 -60 0 0" + }] + } + ] + }, + { + "name": "Tab_Button1", + "parent": "TabBar", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.4", + "distance": "1 0" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "0.33 1" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + } + ] + } + ] + }, + { + "parent": "Tab_Button1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Details", + "color": "1 1 1 1", + "fontSize": 24, + "align": "MiddleCenter" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + } + ] + } + ] + }, + { + "name": "Tab_Button2", + "parent": "TabBar", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.4", + "distance": "1 0" + }, + { + "type": "RectTransform", + "anchormin": "0.33 0", + "anchormax": "0.66 1" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + } + ] + } + ] + }, + { + "parent": "Tab_Button2", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Modals", + "color": "1 1 1 1", + "fontSize": 24, + "align": "MiddleCenter" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + } + ] + } + ] + }, + { + "name": "Tab_Button3", + "parent": "TabBar", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "0.0 0 0 0.4", + "distance": "1 0" + }, + { + "type": "RectTransform", + "anchormin": "0.66 0", + "anchormax": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.15 0.15 0.15 0.8" + } + ] + } + ] + }, + { + "parent": "Tab_Button3", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Dropdowns", + "color": "1 1 1 1", + "fontSize": 24, + "align": "MiddleCenter" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.2 0.7 0.35 0.8" + } + ] + } + ] + }, + { + "name": "Tab_Highlight", + "parent": "TabBar", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 0", + "offsetmin": "0 0", + "offsetmax": "0 3" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0, + "to": "0.4 0.4 0.4 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button1", + "type": "Color", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.25 0.8 0.35 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button1", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0 0 0.33 0" + }, + { + "trigger": "OnClick", + "target": "Tab_Button2", + "type": "Color", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.25 0.8 0.35 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button2", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.33 0 0.66 0" + }, + { + "trigger": "OnClick", + "target": "Tab_Button3", + "type": "Color", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.25 0.8 0.35 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button3", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 1.15 0.6 1", + "to": "0.66 0 1 0" + } + ] + } + ] + }, + { + "name": "Tabs", + "parent": "UI", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.08 0.08 0.08 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 0", + "anchormax": "2 1", + "offsetmin": "0 0", + "offsetmax": "0 -60" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "TabBar", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + }] + } + ] + }, + { + "name": "Tab1", + "parent": "Tabs", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "Tab_Button1", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button2", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "-1 0 0 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button3", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "-1 0 0 1" + } + ] + } + ] + }, + { + "parent": "Tab1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "this subtle change lets us react to mouse events on different panels, which is great for creating more complex UI behaviours completely without server interaction required", + "color": "1 1 1 0.9", + "fontSize": 22, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -70", + "offsetmax": "0 0" + } + ] + }, + { + "parent": "Tab1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "for example, we can make a tab system that cohesively swipes from right to left depending on which tab the user last selected, and even have a material-style tab indicator that smoothly swipes between the tabs", + "color": "1 1 1 0.7", + "fontSize": 18, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.8", + "anchormax": "0.9 0.8", + "offsetmin": "0 -160", + "offsetmax": "0 -80" + } + ] + }, + { + "parent": "Tab1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "aside from tabs we can create Modals & dropdowns with great UX", + "color": "1 1 1 0.7", + "fontSize": 18, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.8", + "anchormax": "0.9 0.8", + "offsetmin": "0 -240", + "offsetmax": "0 -160" + } + ] + }, + { + "name": "Tab2", + "parent": "Tabs", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.05 0.05 0.05 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 0", + "anchormax": "2 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "Tab_Button2", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button1", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "1 0 2 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button3", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "-1 0 0 1" + } + ] + } + ] + }, + { + "parent": "Tab2", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Click the button below to open a modal", + "color": "1 1 1 0.9", + "fontSize": 22, + "align": "UpperCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -70", + "offsetmax": "0 0" + } + ] + }, + { + "name": "ModalButton", + "parent": "Tab2", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.5 0.5", + "anchormax": "0.5 0.5", + "offsetmin": "-50 -20", + "offsetmax": "50 20" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "parent": "ModalButton", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Open Modal", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "Tab3", + "parent": "Tabs", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 0", + "anchormax": "2 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "Tab_Button3", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button2", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "1 0 2 1" + }, + { + "trigger": "OnClick", + "target": "Tab_Button1", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "1 0 2 1" + } + ] + } + ] + }, + { + "name": "Tab3_Section1", + "parent": "Tab3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "0.33 1" + } + ] + }, + { + "name": "DropDown1_Button", + "parent": "Tab3_Section1", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "0 -20", + "offsetmax": "0 20" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "parent": "DropDown1_Button", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Select Option", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown1_Parent", + "parent": "Tab3_Section1", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "Animation", + "properties": [ + + { + "trigger": "OnClick", + "target": "DropDown1_Button", + "type": "MoveTo", + "duration": 0, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "DropDown1_Parent", + "type": "MoveTo", + "delay": 0.3, + "duration": 0, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "DropDown1_Container", + "parent": "DropDown1_Parent", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.02 0.02 0.02 0.8", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "2 -20", + "offsetmax": "-2 -20" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown1_Button", + "type": "MoveToPX", + "easing": "0 1.15 0.6 1", + "duration": 0.3, + "to": "2 -220 -2 -20" + }, + { + "trigger": "OnClick", + "target": "DropDown1_Parent", + "type": "MoveToPX", + "easing": "0 0.85 0.6 1", + "duration": 0.3, + "to": "2 -20 -2 -20" + } + ] + } + ] + }, + { + "name": "DropDown1_Option1", + "parent": "DropDown1_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -40", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Selecting an Option Closes the Dropdown", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown1_Option2", + "parent": "DropDown1_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -80", + "offsetmax": "0 -40" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option2", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Option 2", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown1_Option3", + "parent": "DropDown1_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -120", + "offsetmax": "0 -80" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option3", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Dont choose me", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown1_Option4", + "parent": "DropDown1_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -160", + "offsetmax": "0 -120" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option4", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Choose me", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown1_Option5", + "parent": "DropDown1_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -200", + "offsetmax": "0 -160" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown1_Option5", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "i'm just filler", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "Tab3_Section2", + "parent": "Tab3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.06 0.06 0.06 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.33 0", + "anchormax": "0.66 1" + } + ] + }, + { + "name": "DropDown2_Button", + "parent": "Tab3_Section2", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "0 -20", + "offsetmax": "0 20" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "name": "DropDown2_ButtonExpand", + "parent": "DropDown2_Button", + "components": [{ + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 -1 1 0" + }, + { + "trigger": "OnClick", + "target": "DropDown2_ButtonCollapse", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 0 1 1" + } + ] + } + ] + }, + { + "parent": "DropDown2_ButtonExpand", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Expand", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown2_ButtonCollapse", + "parent": "DropDown2_Button", + "components": [{ + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 2" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown2_ButtonExpand", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.3, + "easing": "0 0.75 0.6 1", + "to": "0 1 1 2" + } + ] + } + ] + }, + { + "parent": "DropDown2_ButtonCollapse", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Collapse", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown2_Container", + "parent": "Tab3_Section2", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.02 0.02 0.02 0.8", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.RectMask2D" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "2 -20", + "offsetmax": "-2 -20" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown2_ButtonExpand", + "type": "MoveToPX", + "easing": "0 1.15 0.6 1", + "duration": 0.3, + "to": "2 -320 -2 -20" + }, + { + "trigger": "OnClick", + "target": "DropDown2_ButtonCollapse", + "type": "MoveToPX", + "easing": "0 0.85 0.6 1", + "duration": 0.3, + "to": "2 -20 -2 -20" + } + ] + } + ] + }, + { + "name": "DropDown2_TextContainer", + "parent": "DropDown2_Container", + "components": [{ + "type": "RectTransform", + "anchormin": "0.05 1", + "anchormax": "0.95 1", + "offsetmin": "0 -300", + "offsetmax": "0 0" + }] + }, + { + "parent": "DropDown2_TextContainer", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "unlike the first dropdown, this dropdown can only be closed by clicking the Collapse button. the Expand/Collapse button illustrates that this also lets us somewhat track state right in the UI, which allows us to create simple triggerals like checkboxes without requiring any AddUI/Destroy calls from the server", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "Tab3_Section3", + "parent": "Tab3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 1.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.66 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "DropDown3_Button", + "parent": "Tab3_Section3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "0 -20", + "offsetmax": "0 20" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 1.0" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.8" + } + ] + } + ] + }, + { + "parent": "DropDown3_Button", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Select Option", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Parent", + "parent": "Tab3_Section3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.09 0.09 0.09 0.0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Button", + "type": "MoveTo", + "duration": 0, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "delay": 0.3, + "duration": 0, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "DropDown3_Container", + "parent": "Tab3_Section3", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.02 0.02 0.02 0.8", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "UnityEngine.UI.ScrollView", + "vertical": true, + "horizontal": false, + "movementType": "Clamped", + "inertia": false, + "contentTransform": { + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -280", + "offsetmax": "0 0" + }, + "verticalScrollbar": { + "autoHide": true, + "size": 10 + }, + "scrollSensitivity": 15.0 + }, + { + "type": "RectTransform", + "anchormin": "0.1 0.9", + "anchormax": "0.9 0.9", + "offsetmin": "2 -20", + "offsetmax": "-2 -20" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Button", + "type": "MoveToPX", + "easing": "0 1.15 0.6 1", + "duration": 0.3, + "to": "2 -220 -2 -20" + }, + { + "trigger": "OnClick", + "target": "DropDown3_Parent", + "type": "MoveToPX", + "easing": "0 0.85 0.6 1", + "duration": 0.3, + "to": "2 -20 -2 -20" + } + ] + } + ] + }, + { + "name": "DropDown3_Option1", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -40", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option1", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Selecting an Option wont close the Dropdown", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option1Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -40", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option1", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option2", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -80", + "offsetmax": "0 -40" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option2", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "You Can Select Me", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option2Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -80", + "offsetmax": "0 -40" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option2", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option3", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -120", + "offsetmax": "0 -80" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option3", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Or Me!", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option3Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -120", + "offsetmax": "0 -80" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option3", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option4", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -160", + "offsetmax": "0 -120" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.15 0.35 0.2 0.1" + }] + } + ] + }, + { + "parent": "DropDown3_Option4", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Not me Though", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option5", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -200", + "offsetmax": "0 -160" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option5", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "i'm just filler", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option5Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -200", + "offsetmax": "0 -160" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option5", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option6", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -240", + "offsetmax": "0 -200" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option6", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "i'm just filler", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option6Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -240", + "offsetmax": "0 -200" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option6", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }, + { + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + } + ] + } + ] + }, + { + "name": "DropDown3_Option7", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 1", + "anchormax": "1 1", + "offsetmin": "0 -280", + "offsetmax": "0 -240" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.2" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.1" + } + ] + } + ] + }, + { + "parent": "DropDown3_Option7", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "i'm just filler", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "name": "DropDown3_Option7Selected", + "parent": "DropDown3_Container", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0.1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "2 1", + "offsetmin": "0 -280", + "offsetmax": "0 -240" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "DropDown3_Option7", + "type": "MoveTo", + "duration": 0.1, + "to": "0 1 1 1" + }] + }, + { + "type": "Animation", + "mouseTarget": "DropDown3_Option7Selected", + "properties": [{ + "trigger": "OnClick", + "type": "MoveTo", + "duration": 0.1, + "to": "1 1 2 1" + }] + } + ] + }, + { + "name": "ModalParent", + "parent": "UI", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 -1", + "anchormax": "1 0" + }, + { + "type": "Animation", + "properties": [{ + "trigger": "OnClick", + "target": "ModalButton", + "type": "Color", + "easing": "0 1.15 0.6 1", + "duration": 0, + "to": "0.05 0.05 0.05 0.0" + }, + { + "trigger": "OnClick", + "target": "ModalButton", + "type": "Color", + "easing": "0 1.15 0.6 1", + "delay": 0.5, + "duration": 0.5, + "from": "0.05 0.05 0.05 0.0", + "to": "0.05 0.05 0.05 0.98" + }, + { + "trigger": "OnClick", + "target": "ModalButton", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "duration": 0.5, + "to": "0 0 1 1" + }, + { + "trigger": "OnClick", + "target": "ModalCloseButton", + "type": "Color", + "easing": "0 1.15 0.6 1", + "duration": 0.2, + "to": "0.05 0.05 0.05 0.0" + }, + { + "trigger": "OnClick", + "target": "ModalCloseButton", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "delay": 0.2, + "duration": 0.5, + "to": "0 -1 1 0" + }, + { + "trigger": "OnClick", + "target": "ModalBackdrop", + "type": "Color", + "easing": "0 1.15 0.6 1", + "duration": 0.2, + "to": "0.05 0.05 0.05 0.0" + }, + { + "trigger": "OnClick", + "target": "ModalBackdrop", + "type": "MoveTo", + "easing": "0 1.15 0.6 1", + "delay": 0.2, + "duration": 0.5, + "to": "0 -1 1 0" + } + ] + } + ] + }, + { + "name": "ModalBackdrop", + "parent": "ModalParent", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 0", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "0 0", + "anchormax": "1 1" + } + ] + }, + { + "name": "Modal", + "parent": "ModalParent", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "0.08 0.08 0.08 1" + }, + { + "type": "UnityEngine.UI.Outline", + "color": "1 1 1 0.1", + "distance": "1 1" + }, + { + "type": "RectTransform", + "anchormin": "0.2 0.2", + "anchormax": "0.8 0.8" + } + ] + }, + { + "name": "ModalCloseButton", + "parent": "Modal", + "components": [{ + "type": "UnityEngine.UI.RawImage", + "color": "1 1 1 1", + "sprite": "Assets/Content/UI/UI.Background.Tile.psd" + }, + { + "type": "RectTransform", + "anchormin": "1 1", + "anchormax": "1 1", + "offsetmin": "-60 -25", + "offsetmax": "0 0" + }, + { + "type": "Animation", + "properties": [{ + "type": "Color", + "duration": 0, + "to": "0.3 0.65 0.35 0.4" + }, + { + "trigger": "OnHoverEnter", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.6" + }, + { + "trigger": "OnHoverExit", + "type": "Color", + "duration": 0.1, + "to": "0.3 0.65 0.35 0.4" + } + ] + } + ] + }, + { + "parent": "ModalCloseButton", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Close", + "fontSize": 16, + "align": "MiddleCenter" + }] + }, + { + "parent": "Modal", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Re-Usable Modals without any server interaction required", + "color": "1 1 1 0.8", + "fontSize": 24, + "align": "MiddleCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -30", + "offsetmax": "0 0" + } + ] + }, + { + "parent": "Modal", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "to Close this modal you can click outside of it on the backdrop or use the dedicated close button", + "color": "1 1 1 0.8", + "fontSize": 20, + "align": "MiddleCenter" + }, + { + "type": "RectTransform", + "anchormin": "0.07 0.8", + "anchormax": "0.93 0.8", + "offsetmin": "0 -120", + "offsetmax": "0 -40" + } + ] + }, + { + "name": "Button88", + "parent": "UI", + "components": [{ + "type": "UnityEngine.UI.Button", + "close": "UI", + "command": "cui.endtest", + "color": "0.9 0.8 0.3 0.52" + }, + { + "type": "RectTransform", + "anchormin": "0.0 0.0", + "anchormax": "0.1 0.07" + } + ] + }, + { + "parent": "Button88", + "components": [{ + "type": "UnityEngine.UI.Text", + "text": "Kill UI", + "fontSize": 16, + "align": "MiddleCenter" + }] + } +] From 3edde1e2cd221b772e94dd2e2aa08ef75765555e Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Fri, 7 Feb 2025 23:32:08 +0100 Subject: [PATCH 52/53] Minor Cleanup remove some very redundant comments --- CommunityEntity.UI.Animation.cs | 41 ++++++++++++++++----------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 6930271..6ff486b 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -42,7 +42,7 @@ public class Animation : FacepunchBehaviour public UnityEngine.UI.Graphic graphic; public RectTransform rt; public CanvasGroup group; - public bool shouldRaycast = true; + public bool shouldRaycast = true; // flags public bool isHidden = false; @@ -99,7 +99,6 @@ private void OnDestroy(){ public void Kill(bool destroyed = false) { - // mark as killed & clean up isKilled = true; StopByTrigger("OnCreate"); StopByTrigger("OnHoverEnter"); @@ -118,7 +117,7 @@ public void Kill(bool destroyed = false) if(killDelay < totalDelay) killDelay = totalDelay; StartProperty(prop); } - Invoke(new Action(() => Object.Destroy(gameObject)), killDelay + 0.05f); + Invoke(() => Object.Destroy(gameObject), killDelay + 0.05f); } #endregion @@ -264,17 +263,20 @@ public void CacheComponents(){ } public void TryToggleGraphic(float delay = 0f){ - if(graphic == null) return; + if(delay <= 0f) DoGraphicToggle(); + else Invoke(DoGraphicToggle, delay); + } + + private void DoGraphicToggle() { + if(graphic == null) + return; - var a = new Action(() => { - bool visible = GetAlpha() > 0f; - if(group == null) - graphic.canvasRenderer.cullTransparentMesh = visible; - isHidden = !visible; - SetRaycasting(visible && shouldRaycast); - }); - if(delay <= 0f) a(); - else Invoke(a, delay); + bool visible = GetAlpha() > 0f; + if(group == null) + graphic.canvasRenderer.cullTransparentMesh = visible; + + isHidden = !visible; + SetRaycasting(visible && shouldRaycast); } public float GetAlpha(){ @@ -283,14 +285,14 @@ public float GetAlpha(){ return graphic.canvasRenderer.GetAlpha(); } - // uses the canvasGroup if found, otherwise the graphic + public void SetAlpha(float alpha){ if(group != null) group.alpha = alpha; else graphic.canvasRenderer.SetAlpha(alpha); } - // uses the canvasGroup if found, otherwise the graphic + public void SetRaycasting(bool wants){ if(group != null) group.blocksRaycasts = wants; @@ -365,7 +367,6 @@ public static void InitPendingAnims(){ public static Animation ParseAnimation(JSON.Object obj, GameObject go = null, bool allowUpdate = false){ Animation anim = go.GetComponent(); - // create a new animation component if no Animation existed if(anim == null) anim = go.AddComponent(); @@ -395,7 +396,6 @@ public static Animation ParseAnimation(JSON.Object obj, GameObject go = null, bo #endregion } - // this could be a class if the allocation is insignificant public class AnimationProperty { @@ -619,7 +619,7 @@ public IEnumerator AnimateProperty() #region Helpers // manipulates the input based on a preset easing function or a custom Bezier curve - // accepts a predefined easing type, or a string of 4 floats to represent a bezier curve + // uses dedicated instructions for common presets, even if bezier can technically match them // NOTE: the return value is unclamped as this allowes bezier curves with under- and overshoot to work public static float Ease(BezierEasing.BezierPoints easing, float input) { @@ -735,13 +735,12 @@ public AnimationValue(string sourceTo, string sourceFrom = null){ } } - // a struct that mimics Vector2/3/4/n, previously used a list to hold values, but lists dont work as structs - // turning this into a struct makes alot of sense, thanks for the insights @WhiteThunder + // a struct that mimics Vector2/3/4/n with built-in conversion methods that support offsets public struct DynamicVector : IEquatable { #region Fields - // need it to hold more than 4? add a _valueN and adjust the Capacity, indexer & Clear method + // adjust the Capacity, indexer & Clear method when adding fields private float _value0; private float _value1; private float _value2; From e61d30423ed5aa076ad00020ce908bbf840393f8 Mon Sep 17 00:00:00 2001 From: Kulltero <33698270+Kulltero@users.noreply.github.com> Date: Fri, 7 Feb 2025 23:46:45 +0100 Subject: [PATCH 53/53] Comment out DragNDrop integrations uncomment if/when DragnDrop is merged --- CommunityEntity.UI.Animation.cs | 17 ++++++++++------- CommunityEntity.UI.cs | 13 ++++++------- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs index 6ff486b..f68f2f6 100644 --- a/CommunityEntity.UI.Animation.cs +++ b/CommunityEntity.UI.Animation.cs @@ -30,8 +30,8 @@ public class Animation : FacepunchBehaviour ["OnDestroy"] = new List(), ["OnHoverEnter"] = new List(), ["OnHoverExit"] = new List(), - ["OnDrag"] = new List(), - ["OnDrop"] = new List(), + // ["OnDrag"] = new List(), + // ["OnDrop"] = new List(), ["OnClick"] = new List(), }; @@ -62,8 +62,8 @@ public void Init(){ AttachTriggers(properties["OnHoverEnter"]); AttachTriggers(properties["OnHoverExit"]); AttachTriggers(properties["OnClick"]); - AttachTriggers(properties["OnDrag"]); - AttachTriggers(properties["OnDrop"]); + // AttachTriggers(properties["OnDrag"]); + // AttachTriggers(properties["OnDrop"]); StartByTrigger("OnCreate"); initialized = true; @@ -103,8 +103,8 @@ public void Kill(bool destroyed = false) StopByTrigger("OnCreate"); StopByTrigger("OnHoverEnter"); StopByTrigger("OnHoverExit"); - StopByTrigger("OnDrag"); - StopByTrigger("OnDrop"); + // StopByTrigger("OnDrag"); + // StopByTrigger("OnDrop"); if(destroyed) return; @@ -201,16 +201,18 @@ private void AttachTo(GameObject go, bool addListener = false){ listener.onExit += this.OnHoverExit; listener.onClick += this.OnClick; } - + /* var drag = go.GetComponent(); if(drag == null) return; drag.onDragCallback += this.OnDrag; drag.onDropCallback += this.OnDrop; + */ } // Events + /* public void OnDrag(string panel){ if(isKilled) return; @@ -225,6 +227,7 @@ public void OnDrop(string panel){ StopByTrigger("OnDrag", panel); StartByTrigger("OnDrop", panel); } + */ public void OnHoverEnter(string panel){ if(isKilled) diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index 27ce125..0b1645a 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -186,7 +186,7 @@ T GetOrAddComponent() where T : Component if ( ShouldUpdateField( "fontSize" ) ) c.fontSize = obj.GetInt( "fontSize", 14 ); if ( ShouldUpdateField( "font" ) ) - { + { c.font = LoadFont(obj.GetString("font", strDEFAULT: "RobotoCondensed-Bold.ttf")); } if ( ShouldUpdateField( "align" ) ) @@ -249,7 +249,7 @@ T GetOrAddComponent() where T : Component } } } - + GraphicComponentCreated( c, obj ); break; @@ -278,7 +278,7 @@ T GetOrAddComponent() where T : Component { ApplyTextureToImage( c, id ); } - + if ( obj.ContainsKey( "steamid" ) ) { var steamidString = obj.GetString( "steamid" ); @@ -486,7 +486,6 @@ T GetOrAddComponent() where T : Component case "Animation": { // Moved Setup to its own function in CommunityEntity.UI.Animation.cs - // now shares the code with the AddAnimation RPC function Animation.ParseAnimation(obj, go, allowUpdate); break; } @@ -703,17 +702,17 @@ private IEnumerator LoadTextureFromWWW( UnityEngine.UI.RawImage c, string p ) private Font LoadFont(string fontName) { var font = FileSystem.Load( "Assets/Content/UI/Fonts/" + fontName ); - if (font == null) + if (font == null) { // Fallback to TMP default font if the loading failed font = TMP_Settings.defaultFontAsset.sourceFontFile; - + Debug.LogWarning($"Failed loading {fontName}, using RobotoCondensed-Bold as a fallback"); } return font; } - + [RPC_Client] public void DestroyUI( RPCMessage msg ) {