Ngui official website Example 9-questlog (available components)

Ngui official website Example 9-questlog
This example shows a scalable interface. You can click no quest to expand the content. :

Description: enter a description.

Image: 1.png

First, create a basic interface. I will not go into details here (refer to my series of tutorials). Here, I will mention that when creating a background, you can use the create a widget to create a simpletexture, and paste the appropriate material without scaling or moving it, add a stretch component (component-> ngui-> UI-> stretch) for it. The component can be automatically adjusted based on the window size. Pay attention to this level structure and the final effect

Description: enter a description.

Image: 2.png

Next, let's take a big part in this example. Select Quest log, create a new panel (ngui-> Create a panel) for it, and name it subpanel,

Description: enter a description.

Image: 3.png

Select subpanel to create an empty game object as its sub-object and name it table. This object will be used to arrange the positions of all its sub-objects.

Description: enter a description.

Image: 4.png

Select a table object and create an empty game object as its sub-object. Name it quest1 and reset it.

Description: enter a description.

Image: 5.png

Select quest1 and add a lable and slicedsprite to it.

Description: enter a description.

Image: 6.png

Select quest1, create an empty game object, and name it "Tween" as its sub-object. Reset it, create a label under "Tween", and enter a text description to display the final effect.

Description: enter a description.

Image: 7.png

First, turn off the Enable of the Tween object, and then create three such quest in the same way. I am lazy here. I will directly use Ctrl + D to copy two, and named quest2 and quest3. Don't worry about its location,

Description: enter a description.

Image: 8.png

Select a table object, add a table component (component-> ngui-> interaction-> table) to it, set colomn to 1, direction to down, and padding to 4, select sorted, hide inactive, and keep within panel. After you click play, its subobjects are automatically arranged! (You can see the meaning of these parameters in English. I will not go into details here ).

Description: enter a description.

Image: 9.png

When you click these quest, the following description is automatically displayed. Select the Tween object under quest1, add a tweenscale component (component-> ngui-> tween-> Scale) to it, and set its parameters.

Description: enter a description.

Image: 10.png

Select slicedsprite under quest1 and add a trigger component (ngui-> attach a collider) to it to receive input events, next, add a button tween component (component-> ngui-> interaction-> button tween). You are familiar with this component. perform similar operations on several other quest tasks and click play, place the cursor over quest and click OK! The parameters are as follows:

Description: enter a description.

Image: 11.png

If you expand the Three quest requests at the same time, you will find that the content is missing! Let's solve this problem. Select subpanel, set clipping in its panel component to softclip, and set X to 420, y to 290, softness to 1, and Y to 8 in its size, then click play again. Ha, the content is within the configured range.

Description: enter a description.

Image: 12.png

The problem comes again. I want to see the following content. Then we can add a scrollbar to it. Create a vertical scrollbar component under Quest log. We want to display the scollbar when the content exceeds panel. We set its alpha to 0, and the final parameter.

Description: enter a description.

Image: 13.png

Now connect subpanel and scrollbar. Select subpanel to add a draggablepanel component (component-> ngui-> interaction-> draggablepanel ). Then assign the scrollbar object to verticalscrollbar,

Description: enter a description.

Image: 14.png

OK, the drag function is ready!

In this example, there is also the effect of dragging the window, which has been discussed in the previous tutorial.