Ngui official website Example 7-scrollview (1)

Effect:

Description: enter a description.

Image: 1.png

Scrollview of ngui allows you to scroll through the icon with the mouse or gesture, which can be seen in many games now. For example, in Angry Birds, you can choose a level. The rolling operation of icons is easy to implement in ngui. You only need to add a uidragpanelcontents component to the Panel, and then perform detailed operations. In this tutorial, we will complete this example in three steps. Step 1: create a window background; Step 2: create and implement the icon scroll effect; Step 3: implement the effect in some small details.

Step 1: create a window

1.
Choose ngui> Create a new UI on the menu. The UI tool window is displayed. Select camera as simple2d and click Create.
Your UI creates the original GUI object structure, which is not provided here, saving some images. Haha.
2.
Adjust its original structure, rename anchor to anchor-center, add an empty sub-game object to anchor-center, name it windowroot, and reset it, rename the Panel as panel-window and drag it to windowroot to become its sub-object:

Description: enter a description.

Image: 2.jpg

Now we can complete panel-Window Creation. Create an empty game object named background, and become a sub-object of panel-window, and reset it. Use create
In the new widget dialog box, create a tiled Sprite
The parameter is Atlas: woodenatlas, Font: arimo14, template: tilesprite, Sprite: honeycomb; size X: 770, Y: 570; color tint is R: 255, G: 236, B: 206, renamed the wooden background
Background ,:

Description: enter a description.

Image: 3.jpg

Create a window border for it, create a sliced sprite component in the create a new widget dialog box, set Atlas to woodenatlas, set font to arimo14, set template to sliced Sprite, and set sprite to glow-outer, the value is X: 814, Y is 614, and color tint is black. The value of depth is-3, which is a value lower than that of background. Rename the component glow ,:

Description: enter a description.

Image: 4.jpg

Next, create the title at the top of the window. Create an empty game object named title and become a child object of windowroot. Remember to reset it. Create a tiledsprite. The parameter is woodenatlas, the font is arimo14, the template is titedsprite, and the color tint is light gray. It becomes a sub-object of the title and is named background. Create an slicedsprite. The sprite parameter is glow-inner. The component is named glow, the color tint is black, and the depth is-1. adjust its size and position, create an slicedsprite around the perimeter of the background under the title. Set sprite to glow-inner, set color tint to dark gray, name it shadow, and adjust the size and position, overwrite the background under the title. Finally, create a label with the parameter Font: arimo20, effect as outline, and sky blue. In this way, you can add a font box to it. The text is scroll view, and the final result is as follows:

Description: enter a description.

Image: 5.png

Create a label. The parameter is Font: arimo18, line width is 720, effect is shadow, shadow is black, and color tint is dark brown. Effect:

Description: enter a description.

Image: 6.jpg

Create an icon to scroll the background. Create an slicedsprite. The parameter is template, Sprite is hightlight-shadow, color
Tint is black, X is 724, Y is 266, its position is adjusted, and the name is outline ,:

Description: enter a description.

Image: 7.png

Create a scrollbar. The parameter is template, background is hightlight-shadows, foreground is button, and ction is horizontal. :

Description: enter a description.

Image: 8.png

In this way, the basic window is created. To be continued .....