diff --git a/CommunityEntity.UI.Animation.cs b/CommunityEntity.UI.Animation.cs new file mode 100644 index 0000000..f68f2f6 --- /dev/null +++ b/CommunityEntity.UI.Animation.cs @@ -0,0 +1,964 @@ +using Object = UnityEngine.Object; +using UnityEngine; +using System; +using System.Collections; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using Facepunch.Extend; +using System.IO; +using System.Globalization; + +#if CLIENT + +public partial class CommunityEntity +{ + public class Animation : FacepunchBehaviour + { + + #region Fields + + 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>(){ + ["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; + public bool shouldRaycast = true; + + // flags + public bool isHidden = false; + public bool isKilled = false; + public bool initialized = false; + + #endregion + + #region Core + + // sets up the Animation component & start Animations + public void Init(){ + if (initialized) + return; + + 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); + } + + public void Reset() + { + foreach(var proplists in properties) + { + StopByTrigger(proplists.Key); + proplists.Value.Clear(); + } + initialized = false; + } + + private void OnDestroy(){ + if(!isKilled) + Kill(true); + } + + public void Kill(bool destroyed = false) + { + 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(() => 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++){ + if(panel != null && properties[trigger][i].target != panel) + continue; + + 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){ + return trigger switch{ + "OnHoverEnter" => true, + "OnHoverExit" => true, + "OnClick" => true, + _ => false + }; + } + + // 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); + } + } + + // 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; + } + /* + 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; + StopByTrigger("OnDrop", panel); + StartByTrigger("OnDrag", panel); + } + + public void OnDrop(string panel){ + if(isKilled) + return; + + StopByTrigger("OnDrag", panel); + StartByTrigger("OnDrop", panel); + } + */ + + public void OnHoverEnter(string panel){ + if(isKilled) + return; + StopByTrigger("OnHoverExit", panel); + StartByTrigger("OnHoverEnter", panel); + } + + public void OnHoverExit(string panel){ + if(isKilled) + return; + + StopByTrigger("OnHoverEnter", panel); + StartByTrigger("OnHoverExit", panel); + } + + public void OnClick(string panel){ + if(isKilled) + return; + + StopByTrigger("OnClick", panel); + StartByTrigger("OnClick", panel); + } + + #endregion + + #region Helpers + + public void CacheComponents(){ + graphic = gameObject.GetComponent(); + rt = gameObject.GetComponent(); + if(!group) + group = gameObject.GetComponent(); + + shouldRaycast = graphic?.raycastTarget ?? false; + } + + public void TryToggleGraphic(float delay = 0f){ + if(delay <= 0f) DoGraphicToggle(); + else Invoke(DoGraphicToggle, delay); + } + + private void DoGraphicToggle() { + if(graphic == null) + return; + + bool visible = GetAlpha() > 0f; + if(group == null) + graphic.canvasRenderer.cullTransparentMesh = visible; + + isHidden = !visible; + SetRaycasting(visible && shouldRaycast); + } + + public float GetAlpha(){ + if(group != null) + return group.alpha; + + return graphic.canvasRenderer.GetAlpha(); + } + + public void SetAlpha(float alpha){ + if(group != null) + group.alpha = alpha; + else + graphic.canvasRenderer.SetAlpha(alpha); + } + + public void SetRaycasting(bool wants){ + if(group != null) + group.blocksRaycasts = wants; + else + graphic.raycastTarget = wants; + } + + // 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(addCanvasGroup && anim.group == null) { + anim.group = go.GetComponent(); + if(anim.group == null) + anim.group = go.AddComponent(); + } + } + + // Compatability for old FadeOut method + public static void AddFadeOut(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(){ + to = new AnimationProperty.DynamicVector(0f) + }, + type = "Opacity", + duration = duration + }; + + anim.properties["OnDestroy"].Add(prop); + + if(addCanvasGroup && anim.group == null) { + anim.group = go.GetComponent(); + if(anim.group == null) + anim.group = go.AddComponent(); + } + } + + 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(); + } + + public static Animation ParseAnimation(JSON.Object obj, GameObject go = null, bool allowUpdate = false){ + + Animation anim = go.GetComponent(); + 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 + } + + public class AnimationProperty + { + + #region Fields + + public float duration; + public float delay; + public int repeat; + public float repeatDelay; + public BezierEasing.BezierPoints easing; + public string type; + public AnimationProperty.AnimationValue animValue; + public string target; + public string trigger; + + public Animation anim; + + public Coroutine routine; + + public int completedRounds; + + #endregion + + #region Core + + // 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 CoroutineEx.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; + } + + #endregion + + #region Helpers + + // manipulates the input based on a preset easing function or a custom 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) + { + 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 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); + + // 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); + + if(start == end){ + yield return CoroutineEx.waitForSeconds(duration); + yield break; + } + + 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 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 + 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 = DynamicVector.FromString(sourceFrom); + this.to = DynamicVector.FromString(sourceTo); + } + } + + // a struct that mimics Vector2/3/4/n with built-in conversion methods that support offsets + public struct DynamicVector : IEquatable { + + #region Fields + + // adjust the Capacity, indexer & Clear method when adding fields + 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(); + } + } + } + + #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); + 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; + + 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); + } + + #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( + 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) + ); + } + + #endregion + + #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; + return this[index]; + } + + public void Clear(){ + _value0 = 0f; + _value1 = 0f; + _value2 = 0f; + _value3 = 0f; + Count = 0; + } + + #endregion + + #region Operations + + 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 bool Equals(DynamicVector other) + { + if (Count != other.Count) + return false; + + for (int i = 0; i < Count; i++) + { + if (TryGet(i) != other.TryGet(i)) + return false; + } + + return true; + } + + public static bool operator == (DynamicVector lhs, DynamicVector rhs){ + return lhs.Equals(rhs); + } + + public static bool operator != (DynamicVector lhs, DynamicVector rhs) + { + return !lhs.Equals(rhs); + } + + 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(); + } + + #endregion + } + } +} + +#endif diff --git a/CommunityEntity.UI.BezierEasing.cs b/CommunityEntity.UI.BezierEasing.cs new file mode 100644 index 0000000..a17ea2a --- /dev/null +++ b/CommunityEntity.UI.BezierEasing.cs @@ -0,0 +1,210 @@ +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 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 + + 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 + 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) + { + var key = new BezierPoints(X1, Y1, X2, Y2); + return Ease(key, time); + } + + + 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) + { + + } + + public BezierEasing(float X1, float Y1, float X2, float Y2) + { + firstX = X1; + firstY = Y1; + secondX = X2; + secondY = Y2; + _precomputedSections = new float[_precomputeSize]; + } + + + + // returns the value on the curve for the unscaled time + 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); + } + + // 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; } + + float CalcBezier(float time, float point1, float point2) + { + return ((StepA(point1, point2) * time + StepB(point1, point2)) * time + (3f * point1)) * time; + } + + // 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 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 = _precomputeSize - 1; + + // find the last precomputed section before unscaledTime + for (; currentSample != lastSample && _precomputedSections[currentSample] <= unscaledTime; ++currentSample) + { + intervalStart += _precomputeStepSize; + } + --currentSample; + + // 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() + { + _precomputed = true; + if (firstX != firstY || secondX != secondY) + CalcSampleValues(); + } + + // approximates the value for X using the Newton-Raphson Method + 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 timeGuess; + } + + // used as a key for the cache + 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) + { + 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); + } + + public static bool operator == (BezierPoints p1, BezierPoints p2) + { + return p1.Equals(p2); + } + + public static bool operator != (BezierPoints p1, BezierPoints p2) + { + return !p1.Equals(p2); + } + } + } + +} + +#endif diff --git a/CommunityEntity.UI.FadeOut.cs b/CommunityEntity.UI.FadeOut.cs deleted file mode 100644 index 1881223..0000000 --- a/CommunityEntity.UI.FadeOut.cs +++ /dev/null @@ -1,27 +0,0 @@ -using UnityEngine; - -#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 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: diff --git a/CommunityEntity.UI.MouseListener.cs b/CommunityEntity.UI.MouseListener.cs new file mode 100644 index 0000000..444ea03 --- /dev/null +++ b/CommunityEntity.UI.MouseListener.cs @@ -0,0 +1,50 @@ +using Object = UnityEngine.Object; +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 string name; + public Action onEnter; + public Action onExit; + public Action onClick; + + void Awake(){ + name = gameObject.name; + } + + public virtual void OnPointerClick(PointerEventData eventData) + { + 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(name); + // Manually Bubble it up + ExecuteEvents.ExecuteHierarchy(transform.parent.gameObject, eventData, ExecuteEvents.pointerEnterHandler); + } + + public virtual void OnPointerExit(PointerEventData eventData) + { + if(onExit != null) onExit(name); + // Manually Bubble it up + ExecuteEvents.ExecuteHierarchy(transform.parent.gameObject, eventData, ExecuteEvents.pointerExitHandler); + } + } +} +#endif diff --git a/CommunityEntity.UI.cs b/CommunityEntity.UI.cs index f0da08f..0b1645a 100644 --- a/CommunityEntity.UI.cs +++ b/CommunityEntity.UI.cs @@ -109,10 +109,19 @@ public void AddUI( RPCMessage msg ) } if ( json.ContainsKey( "fadeOut" ) ) + Animation.AddFadeOut(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().duration = json.GetFloat( "fadeOut", 0 ); + go.AddComponent(); + go.AddComponent(); } } + Animation.InitPendingAnims(); } private GameObject FindPanel( string name, bool allowScrollviews = true ) @@ -177,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" ) ) @@ -240,7 +249,7 @@ T GetOrAddComponent() where T : Component } } } - + GraphicComponentCreated( c, obj ); break; @@ -269,7 +278,7 @@ T GetOrAddComponent() where T : Component { ApplyTextureToImage( c, id ); } - + if ( obj.ContainsKey( "steamid" ) ) { var steamidString = obj.GetString( "steamid" ); @@ -442,7 +451,7 @@ T GetOrAddComponent() where T : Component c.numberFormat = obj.GetString( "numberFormat", allowUpdate ? c.numberFormat : "0.####" ); if ( ShouldUpdateField( "destroyIfDone" ) ) c.destroyIfDone = obj.GetBoolean( "destroyIfDone", allowUpdate ? c.destroyIfDone : true); - + if ( obj.ContainsKey( "command" ) ) { c.command = obj.GetString( "command" ); @@ -456,11 +465,35 @@ T GetOrAddComponent() where T : Component HandleEnableState( obj, c ); break; } + case "UnityEngine.UI.RectMask2D": + { + 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 = GetOrAddComponent(); + if( ShouldUpdateField("showMaskGraphic") ) + c.showMaskGraphic = obj.GetBoolean("showMaskGraphic", true); + + HandleEnableState( obj, c ); + break; + } + case "Animation": + { + // Moved Setup to its own function in CommunityEntity.UI.Animation.cs + Animation.ParseAnimation(obj, go, allowUpdate); + break; + } case "UnityEngine.UI.ScrollView": { var scrollRect = GetOrAddComponent(); HandleEnableState(obj, scrollRect); - + if(!ScrollViews.Contains(go.name)) ScrollViews.Add(go.name); // Adding a Canvas allows unity to isolate any changes inside the scrollrect, improving performance as the outer canvas wont need an update on scroll var canvas = go.GetComponent(); @@ -481,10 +514,10 @@ T GetOrAddComponent() where T : Component viewportRT.SetParent(go.transform, false); var mask = viewportGO.AddComponent(); scrollRect.viewport = viewportRT; - + // if(obj.ContainsKey("maskSoftness")) // mask.softness = Vector2Int.RoundToInt(Vector2Ex.Parse( obj.GetString( "maskSoftness", "0.0 0.0" ))); - + // create & register content panel var childGO = new GameObject(go.name + "___Content"); childGO.transform.SetParent(viewportGO.transform, false); @@ -499,7 +532,7 @@ T GetOrAddComponent() where T : Component scrollRect.content.anchorMax = Vector2Ex.Parse( contentObj.GetString( "anchormax", "1.0 1.0" ) ); scrollRect.content.offsetMin = Vector2Ex.Parse( contentObj.GetString( "offsetmin", "0.0 0.0" ) ); // we dont have to apply the shoddy offsetmax default here because no existing implementations rely on it - scrollRect.content.offsetMax = Vector2Ex.Parse( contentObj.GetString( "offsetmax", "0.0 0.0" ) ); + scrollRect.content.offsetMax = Vector2Ex.Parse( contentObj.GetString( "offsetmax", "0.0 0.0" ) ); } if(ShouldUpdateField("horizontal")) scrollRect.horizontal = obj.GetBoolean("horizontal", false); @@ -630,10 +663,10 @@ 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 )); + + if ( obj.ContainsKey( "shouldRaycast" ) ) + c.raycastTarget = obj.GetBoolean("shouldRaycast", true); } private IEnumerator LoadTextureFromWWW( UnityEngine.UI.RawImage c, string p ) @@ -669,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 ) { @@ -695,15 +728,14 @@ private void DestroyPanel( string pnlName ) if ( !panel ) return; - //Remove it from the scrollviews if its present ScrollViews.Remove(pnlName); - var fadeOut = panel.GetComponent(); - if ( fadeOut ) - { - fadeOut.FadeOutAndDestroy(); - } + + Animation animation = panel.GetComponent(); + + if(animation != null && animation.HasForTrigger("OnDestroy")) + animation.Kill(); else { Destroy( panel ); diff --git a/Tests/AnimationTest.json b/Tests/AnimationTest.json new file mode 100644 index 0000000..6a49850 --- /dev/null +++ b/Tests/AnimationTest.json @@ -0,0 +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" + } + ] + } +] diff --git a/Tests/InteractiveComponentsTest.json b/Tests/InteractiveComponentsTest.json new file mode 100644 index 0000000..ec15ef5 --- /dev/null +++ b/Tests/InteractiveComponentsTest.json @@ -0,0 +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" + }] + } +]