​

This is the 26th day of my participation in the August Text Challenge.More challenges in August

👉 About the author

As we all know, life is a long process of constantly overcoming difficulties and reflecting on progress. In this process, there will be a lot of questions and thoughts about life, so I decided to share my thoughts, experiences and stories to find resonance!! Focus on Android/Unity and various game development tips, as well as various resource sharing (websites, tools, materials, source code, games, etc.)

👉 about to learn

The FairyGUI cross-platform UI scheme implements diverse lists, lists nested lists, and plays with flowers in Unity.

👉 effect preview

​

​

👉 background

🙎 Xiao Zhi: Xiao Kong, xiao Kong, do you know what the meaning of the new network word set baby is?

🙈 Xiao Kong: Yeah, I know.

🙎 small zhi worship: wow, you tell me about it, I did not understand ah ~

🙈 Xiao Kong meditation: sister, I take you to lunch at noon, what do you want to eat.

🙎 xiaozhi: good, good, don’t know, you decide.

🙈 Xiao Kong: Let’s eat rice noodles

🙎 Xiaozhi: Hot, don’t want to eat.

🙈 Xiao Kong: Eat the crispy chicken. It’s quick and not hot.

🙎 Xiaozhi: Uh, no, I lose weight.

… .

🙈 small empty gradually collapse: that you want to eat what ？？？？？？

🙎 Xiaozhi: Whatever, you decide.

🙈 Xiaokong:! @#￥% () *&…… You see, your behavior is a nesting doll!

🙎 Xiaozhi: Is there?

🙈 xiaokong: give you an example again, reporter: you herd sheep for what?

Shepherd boy: Make money

Reporter: What do you make money for?

Shepherd boy: Get a wife

Reporter: You marry a wife for what?

Herding the sheep: Giving birth to the baby Reporter: Giving birth to the baby what to do Herding the sheep: Herding the sheep.

🙎 small zhi quickly shift topic: ok, ok, don’t say this, no meaning. Let’s go to dinner

🙈 small empty into a long meditation: I suddenly have a List nested List way to have a good solution, I solve the next, you go to dinner.

🙎 small zhi silently clenched her small fist: deserve you single.

👉 Case Environment

The template chosen by Unity 2020.3.8 F1 is Universal Render Pipeline

FairyGUI editor version 2021.1.0

Demo I have uploaded the resource center, download the address below the end of the article.

👉 Practice

Komori has previously shared the full FairyGUI tutorial series, but can’t just talk about it, so komori has created some complicated examples to share the process.

The official pattern is this

​

But here’s what we’re going to do:

​

Or maybe:

​

It’s more like this:

​

👉 Three-dimensional Gallery

In this case, we can directly use the List case provided by the official, because there are very few codes and the focus is on ideas.

At first, xiao Kong was tortured and did not think of the three-dimensional rotation effect of List, until one day when he played Ghost Valley eight Wasters, he saw this picture.

​

Small empty take good toilet paper to immerse in the inside to do something.

​

I had an Epiphany, how can I drown in FairyGUI? I should have done it in Unity, which is 3D, so shut it down and give it a try.

​

Here’s the thing:

​

So first of all, let’s look at Pivot, which by default is 0,0, which is the top left corner. If you don’t change the Pivot by default, changing the Rotation looks like this:

​

So we need to change the Pivot’s X to 0.5 and then rotate. So now that we know what we’re going to do, we’re going to do it in code.

In the beginning, I just said,

obj.rotationY = midX – obj.x – obj.width / 2;

Feels very reasonable and results run after the old Rap. There seems to be something wrong.

​

Ha ha, that’s obviously a bit too much rotation, and we want to make sure that the rotation is as visible as possible within, say, plus or minus 70, so let’s just divide that by some number and keep the rotation within a nice range.

obj.rotationY = -(midX – obj.x – obj.width / 2) / 4;

Run it again and view it. Nice.

​

Core source code:

​

🙎 Xiaozhi: step by step as you do, but it looks like a plane ah

🙈 Note: Also remember to change the Stage Camera to perspective mode (default is orthogonal) so that you can see the stereo effect.

👉 Water reflection

Look at this article specifically, xiao Kong has introduced:

The nuggets (juejin. Cn)

👉 multi-list nesting

FairyGUI section

  1. Create a ListA in the FairyGUI editor, defining a component as a ListA Item and creating a ListB within the component
  2. The ListB Item is arbitrary, I’m a loader
  3. Note: Setting the ListB axis to (0.5,1.4) is a key step
  4. Other effects are optional, and projects are linked below

​

Unity section

No special content, normal display, control in the code, the code is the focus, the notes are very detailed.

using System.Collections; using System.Collections.Generic; using FairyGUI; using UnityEngine; public class ScriptFGEThreeDListList : MonoBehaviour { private GComponent _mainView; private GList ListListThreeD; public GameObject UIPanel; void Start() { _mainView = UIPanel.GetComponent<UIPanel>().ui; ListListThreeD = _mainView.GetChild("ListList").asList; ListListThreeD.SetVirtualAndLoop(); / / set the virtual list and circulation ListListThreeD itemRenderer = RendererGListPageSelect; ListListThreeD.numItems = 4; ListListThreeD.scrollPane.mouseWheelEnabled = false; ListListThreeD.scrollPane.onScroll.Add(ScrollListenerGListPageSelect); For (int I = 0; i < 5; //5 line {for (int j = 0; j < 5; J++) //5 columns {GLoader GLoader = ListListThreeD.GetChildAt(i).asCom.GetChild("ContentList").asList.GetChildAt(j).asCom.GetChild("loader").asLoader; Gloader. url = "Img/"+Random.Range(1,14); gloader.url = "Img/"+Random. }} / / slide to the specified location, can solve interface is tiled, as did not reflect stereo ListListThreeD. AddSelection (4, true); } private void RendererGListPageSelect(int index, GObject item) {item.setpivot (0.5f, 8f); // Key oh, super key, Need to set the anchor to implement the direction of the zoom} private void ScrollListenerGListPageSelect () {float midX = ListListThreeD. The scrollPane. PosY + ListListThreeD.viewHeight; for (int i = 0; i < ListListThreeD.numChildren; i++) { GObject obj = ListListThreeD.GetChildAt(i); Float dist = mathf.abs (midx-obj.y); float dist = mathF.abs (midx-obj.y); float dist = mathF.abs (midx-obj.y); Dist > obj.height) {float ss = 1 + (dist/obj.height) * 0.1f; dist > obj.height) {float ss = 1 + (dist/obj.height) * 0.1f; obj.SetScale(ss, ss); / / ScriptFairyGUI_Tools ChangeBlurFilter (0.02 f, obj. AsCom); BlurFilter blurFilter = new BlurFilter(); BlurFilter. BlurSize = 0.2 f; obj.filter = blurFilter; Obj. Alpha = ss; if (ListListThreeD.GetChildAt(i).asCom.GetChild("ContentList").asList.touchable) { ListListThreeD.GetChildAt(i).asCom.GetChild("ContentList").asList.touchable = false; } if (ss > 0.99f) {BlurFilter bb = new BlurFilter(); bb.blurSize = 0f; obj.filter = bb; obj.alpha = ss; // ScriptFairyGUI_Tools.ChangeBlurFilter(0, obj.asCom); if (! ListListThreeD.GetChildAt(i).asCom.GetChild("ContentList").asList.touchable) { ListListThreeD.GetChildAt(i).asCom.GetChild("ContentList").asList.touchable = true; } } } else { obj.SetScale(1, 1); }}}}Copy the code

When you play positive 666, you suddenly realize that you can also slide here, which is not what you expected.

​

Reason: It looks like there is no content, but what we have changed is the content display, and we haven’t really changed the height of the outermost List, which means that the List height is still the same as it was by default in FairyGUI editor.

Solution: Overlay it with a graphical element in the FairyGUI editor, which shields the mouse event and you’re done.

Source code download address: Unity technology -FairtGUI example tutorial -List. Zip -Unity3D document class resources

👉 other

📢 author: Kom and Kom in Kom

📢 Official account: [Mr. Empty Name]

📢 reprint description: be sure to specify the source: Zhim Granular’s personal home page – column – Nuggets (juejin. Cn)

📢 welcome to like 👍 collect 🌟 message

​