选章节

Assets/Scripts/UI/Base/WideScreenUI.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.Events;
+
+namespace Ichni.UI
+{
+    public class WideScreenUI : MonoBehaviour
+    {
+        public UnityAction wideScreenAction;
+        
+        private void Start()
+        {
+            if (!UIManager.instance.IsWideScreen())
+            {
+                gameObject.SetActive(false);
+            }
+            else
+            {
+                wideScreenAction.Invoke();
+            }
+        }
+    }
+}

Assets/Scripts/UI/Base/WideScreenUI.cs.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: cd3a2e144d4d21649b01161673fbdb68
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

Assets/Scripts/UI/ChapterSelection/ChapterSelectionUI.cs

@@ -1,7 +1,10 @@
+using System;
 using System.Collections;
 using System.Collections.Generic;
+using DG.Tweening;
 using Ichni.Menu;
 using Ichni.Story;
+using Sirenix.OdinInspector;
 using TMPro;
 using UnityEngine;
 using UnityEngine.UI;
@@ -11,27 +14,126 @@ namespace Ichni.UI
     public class ChapterSelectionUI : MonoBehaviour
     {
         public RectTransform content;
-        public TMP_Text title;
-        public TMP_Text subtitle;
+        public LayoutElement layoutElement;
+        public Button button;
+        
+        public bool isExpanded;
+        public bool isDuringAnimation;
+
+        [Title("闭合内容")] 
+        public Image bottomTip;
+        public Image upperTip;
+        public Image leftProgressBarBase;
+        public Image leftProgressBarFill;
         public Image avatar;
-        public Image border;
-        public Button area;
+        public Image avatarMask;
+        public TMP_Text decorationChapterText0;
+        public TMP_Text decorationChapterText1;
+        public TMP_Text progressText;
+        public RectTransform titleRect;
+        public TMP_Text titleText;
+
+        [Title("展开内容")]
+        public RectTransform expansionBackground;
+        public RectTransform expansionFunctions;
+        public RectTransform expansionInfos;
+
+        private void Awake()
+        {
+            button.onClick.AddListener(() =>
+            {
+                if (isDuringAnimation)
+                {
+                    return;
+                }
+                
+                if (isExpanded)
+                {
+                    Collapse();
+                }
+                else
+                {
+                    Expand();
+                }
+            });
+        }
 
         public void Initialize(ChapterSelectionUnit chapter)
         {
-            title.text = chapter.chapterName;
-            title.color = chapter.themeColor;
-            subtitle.text = chapter.chapterSubtitle;
-            subtitle.color = chapter.themeColor;
+            
+        }
+        
+        public void Expand()
+        {
+            isExpanded = true;
+            
+            Sequence expandSequence = DOTween.Sequence();
+            
+            expandSequence.Append(expansionBackground.DOSizeDelta(new Vector2(1147, 826), 0.4f)
+                .OnStart(() =>
+                {
+                    expansionBackground.gameObject.SetActive(true);
+                }));
+            expandSequence.Join(DOTween.To(() => layoutElement.preferredWidth, 
+                x => layoutElement.preferredWidth = x, 1147, 0.4f));
+            expandSequence.Join(avatarMask.rectTransform.DOSizeDelta(new Vector2(1147, 826), 0.4f));
+            expandSequence.Append(titleRect.DOSizeDelta(new Vector2(0, 100), 0.4f));
+            expandSequence.Append(expansionInfos.GetComponent<CanvasGroup>().DOFade(1, 0.4f)
+                .OnStart(()=>
+                {
+                    expansionInfos.gameObject.SetActive(true);
+                }));
+            expandSequence.Join(expansionFunctions.GetComponent<CanvasGroup>().DOFade(1, 0.4f)
+                .OnStart(() =>
+                {
+                    expansionFunctions.gameObject.SetActive(true);
+                }));
 
-            border.color = chapter.themeColor;
-            avatar.sprite = chapter.avatar;
+            expandSequence.Append(bottomTip.DOFade(1f, 0.4f));
+            expandSequence.Join(upperTip.DOFade(1f, 0.4f));
 
-            area.onClick.AddListener(() =>
-            {
-                ChapterSelectionManager.instance.chapterSelectionUIPage.FadeOut();
-                StoryManager.instance.storyUIPage.FadeIn();
-            });
+            expandSequence.OnStart(() => isDuringAnimation = true);
+            expandSequence.OnComplete(() => isDuringAnimation = false);
+            
+            expandSequence.Play();
+        }
+
+        public void Collapse()
+        {
+            isExpanded = false;
+            
+            Sequence collapseSequence = DOTween.Sequence();
+            
+            collapseSequence.Append(bottomTip.DOFade(0f, 0.4f));
+            collapseSequence.Join(upperTip.DOFade(0f, 0.4f));
+            
+            collapseSequence.Append(expansionInfos.GetComponent<CanvasGroup>().DOFade(0, 0.4f)
+                .OnComplete(()=>
+                {
+                    expansionInfos.gameObject.SetActive(false);
+                }));
+            collapseSequence.Join(expansionFunctions.GetComponent<CanvasGroup>().DOFade(0, 0.4f)
+                .OnComplete(() =>
+                {
+                    expansionFunctions.gameObject.SetActive(false);
+                }));
+            
+            collapseSequence.Append(titleRect.DOSizeDelta(new Vector2(322, 100), 0.4f));
+            
+            collapseSequence.Append(expansionBackground.DOSizeDelta(new Vector2(322, 826), 0.4f)
+                .OnComplete(() =>
+                {
+                    expansionBackground.gameObject.SetActive(false);
+                }));
+            
+            collapseSequence.Join(DOTween.To(() => layoutElement.preferredWidth, 
+                x => layoutElement.preferredWidth = x, 322, 0.4f));
+            collapseSequence.Join(avatarMask.rectTransform.DOSizeDelta(new Vector2(322, 826), 0.4f));
+            
+            collapseSequence.OnStart(() => isDuringAnimation = true);
+            collapseSequence.OnComplete(() => isDuringAnimation = false);
+            
+            collapseSequence.Play();
         }
     }
 }

Assets/Scripts/UI/ChapterSelection/ChapterSelectionUIPage.cs

@@ -1,12 +1,14 @@
 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
+using UnityEngine.UI;
 
 namespace Ichni.UI
 {
     public class ChapterSelectionUIPage : UIPageBase
     {
         public RectTransform chapterContainer;
+        public HorizontalLayoutGroup containerLayoutGroup;
 
         public GameObject chapterSelectionUIPrefab;
         

Assets/Scripts/UI/UIManager.cs

@@ -0,0 +1,29 @@
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine;
+
+namespace Ichni.UI
+{
+    public class UIManager : MonoBehaviour
+    {
+        public static UIManager instance;
+
+        private static readonly Vector2 standardResolution = new Vector2(1920, 1080);
+        
+        private void Awake()
+        {
+            instance = this;
+        }
+
+        public float GetScreenRatio()
+        {
+            return (float)Screen.width / Screen.height;
+        }
+        
+        public bool IsWideScreen()
+        {
+            return GetScreenRatio() < 1.34f;
+        }
+    }
+}

Assets/Scripts/UI/UIManager.cs.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 6915797a2eaa88e41a88b956cde9c9fe
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: