Ngui official website Example 8-scroll view (CAMERA)

Example 8-scroll view (CAMERA)
In the previous example, scrollview uses the shader processing, and some low-end machines or mobile devices may display abnormal results, ngui also provides us with another processing method, that is, moving the camera to achieve the same purpose. Next, this example shows you how to implement this function.
First, create a common GUI. These interfaces have been described in the previous tutorial and will not be described here. The final result is as follows:

Image: 1.jpg

Now let's create the items that can be rolled. Use create
New UI creates an ngui basic structure, adjusts their hierarchies, deletes the Panel component under uiroot, and finally:

Image: 2.jpg

Create a new empty game object, name it "offset", place it in anchor to become its sub-object, and reset it, add a panel component (component-> ngui-> interation->
Panel), so that the object can be placed with ngui components. :

Image: 3.jpg

Same as ngui official website Example 7 --
Scrollview (1)
(Http://game.ceeger.com/forum/read.php? Tid = 4269)
In the same way, create one item component and then use Ctrl + D to copy nine items. Of course, you can also copy the quantity you need. Now these items are all overlapped, final effect:

Image: 4.jpg

Select offset to add a table component (component-> ngui-> Interaction
-> Table ). Ha, the magic effect is shown here, but the grid component is used in the previous tutorial. This time, the table is used. The difference between this table and grid can be found on the official website. I will not go into details here. :

Image: 5.jpg

Select the GUI structure created for the first time, and select tiledsprite under the window ,:

Image: 6.jpg

Create two empty game objects and name them bottomright and topleft respectively. These empty objects are used to mark the boundaries of rolling items and place them in the corresponding positions in the scene editing window, finally, add a uidragcamera component (component-> ngui-> interation
-> Dragcamera ):

Image: 7.jpg

Select the second camera and add a viewcamera component (component-> ngui-> UI->
Viewcamera), assign the first camera to sourcecamera, and assign the topleft object to top
Left: Assign bottomright to bottom right, and select offset to adjust the position of the object ,:

Image: 8.jpg

Add a draggablecamera component (component-> ngui-> interaction->
Draggablecamera) and set parameters for it,

Image: 9.jpg

Select tiledsprite under the window of the two empty objects just added, and assign the second camera to draggablecamera in the dragcamera component of the component. The result is as follows:

Image: 10.jpg

Then select the tiledsprite and add a collider for it to accept the input information (ngui->
Attach a collider ). Haha. It's so happy. Looking at the results, the result is a one-click stream. Is it like this ?! Although the input information is acceptable

Image: 11.jpg

It turns out that in the anchor object in the second GUI structure, uicamera, the default component uianchor, is the second camera. Now we change it to the first camera, and then click play, well
Done! Successful!

Image: 12.jpg

Add a dragcamera component (component-> ngui->
Interaction-> dragcamera) and a trigger (ngui-> attach a collider ). Add a buttonscale component and a buttonsound component to it (both in component-> ngui-> interaction)

Image: 13.jpg

Finally, implement the press me button. First, select the window object, add a tweenposisiton component (component-> tween-> position) for it, and close it (we will use a button to enable it ), and set its parameters,

Image: 14.jpg