NGUI 3.5 Tutorials (ix) Scroll view-making "shops" and "backpacks"

Tribute to the original http://blog.csdn.net/chenggong2dm/article/details/41043155

Write in front:

Recently too busy, long time no update tutorial, please forgive me. This article will use Ngui, step by step to achieve the "store" and "backpack" interface. Because their logic is very similar. So here's just a "backpack" for example.

This document, and the first eight articles, basically covers most of the common uses of Ngui, and the future trend is likely to be the official UI gradually replacing Ngui, so this tutorial is the last of the Ngui 3.x series tutorials.

Welcome everyone to correct, shoot bricks! Original very hard, if reproduced, please indicate the source.

Using NGUI to make the game "backpack" ("store" also), the following controls are required:

1,container (Container)

2,scroll view (scrollable views)

3,grid (GRID)

4,item (Specific items)

Steps:

1, the need for "floor" material, "items" material, ready to play into Atlas.

(The material below, is from "World of Warcraft" plucked out, here to the Classic salute!) ）

2, create a new Sprite, as the "backplane" of the backpack. Ngui-> create-> Sprite.

3, create a container. You can create a container from the ngui-> create-> widget. Use this container as a sub-object of the "Baseplate".

Once created, change the Widget's dimesions property so that the container matches the size of your assumptions.
Also pay attention to the depth property, than the backpack background image to a higher level.

Then, NGUI---attach--and collider, add a box collider.
Then add two script components by finding drag:
(1)DragDrop Container(for specifying grid)
(2)dragscroll view(Specify scroll view) Drag control field of view script

4 . Create a scroll view. This is essentially a panel (using a panel cut) and then hangs on the scroll view component.

(1) Create a panel through the ngui->create-> panel.

The clipping property of the panel is mainly used here. You can trim a control that is out of range so that it does not appear. As long as the clipping property is adjusted to Soft Clip, controls that are outside the Panel range are automatically trimmed. And you need to adjust the values of the cliping to set the clipping range.

(2) Add the scroll view component by looking up.

Property content origin is the alignment of the contents, and here I set it to TopLeft.

Change movement to vertical. (Vertical drag)

The alignment was later found to be inappropriate. You will also need to join the Spring panel script. Then adjust the values for x, Y, z to locate.

5, create a grid. Created by Ngui-> create-> Grid.

Change Arragentment to vertical. (Vertical drag)
Also need to tick constrain to panel (Force align Panel)

6. Create an item, that is, item. Specifically with what controls, depends on the planning needs, I here is the button to do item, so that items can be clicked.

button to add drag scroll view. If you do not have a drag scroll view component, you cannot respond to the drag.

7, check the entire hierarchy, and assign values that need to be assigned.

8, run, the effect is as follows:

NGUI 3.5 Tutorials (ix) Scroll view-making "shops" and "backpacks"