"COCOS CREATOR Series tutorial Four" based on 0.7.1 first simple to make a pageview

This site article is Li Himi original, reproduced must be clearly noted:
reprinted from "Black Rice gamedev Block" original link: http://www.himigame.com/cocos-creator/1999.html

Since the current version has not been released 1.0, so there are many components are not released, then Himi also see Cocos Creator Group has several children's shoes asked PageView question, then Himi just take this practiced hand, based on the current version of the production of a pageview.

This article is divided into two parts to explain: 1. Make PageView 2. How to use

I. Making PageView

Because they are based on the components provided by the current CC version, they are not explained in detail here.

In fact, the production of PageView, first of all consider to ensure that the following points:

1. To be able to automatically layout

2. To be able to set the crop area

3. Provide user parameter settings.

So looking back to consider the current CC version of the components provided, whether the above conditions can be met:

1. Automatic layout?? CC has layout, and can set the layout in both directions, but also provides the setting of the interval.

2. Set Crop area?? There is a mask in CC.

OK, let's start with the following steps:

1. First we create an empty node PageView and add a mask component as the crop view.

2. Under the PageView node, we add a layout component playout, which can be automatically laid out after the user adds item directly under Playout.

3. PageView a custom script on the root node, its contents implement the logic of touch sliding page flipping (change the position of layout), etc.

4. Himi made the PageView into a prefab for ease of use (now the plug-in production Himi has not looked closely at –-. ）

The finish effect is shown in GIF:(click to see the dynamic effect)

650) this.width=650; "class=" Alignnone size-medium wp-image-1990 "src=" http://www.himigame.com/wp-content/uploads/ 2016/02/pageview-300x170.gif "alt=" PageView "width=" "height=" "style=" border:1px solid rgb (97,146,140); margin : 0px;padding:1px;font-family:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;height:auto; " />

Two. How to use:

1. Copy PageView (Prefab) and Pvjs (script) into the Explorer, and drag PageView Prefab into the hierarchy Manager to use.

2. Parameter settings:

Select the root node PageView, and then view The script provides the parameters , such as:

650) this.width=650; "class=" Alignnone size-medium wp-image-2002 "src=" http://www.himigame.com/wp-content/uploads/ 2016/02/qq20160205-1@2x-300x227.png "alt=" qq20160205-1@2x "width=" "height=" 227 "style=" border:1px solid RGB ( 97,146,140); Margin:0px;padding:1px;font-family:inherit;font-style:inherit;font-variant:inherit;line-height: Inherit;height:auto; "/>

Number of Item_count:item (please ensure that the number is the same as the number of sub-nodes you added under Playout!) )

Item_width: The width of each Item

Item_height: The height of each Item

Item_move_dis: Sets the distance (in pixels) that triggers the page flip

3. Set the clipping area size

Select the root node PageView, and then look at the size property of the node in the property inspector, so that its width is consistent with the wide height of each item!

4. Set layout type, sort type, and interval

Select the layout component in the property inspector for the playout child node under the root node PageView, such as:

650) this.width=650; "class=" Alignnone size-medium wp-image-2003 "src=" http://www.himigame.com/wp-content/uploads/ 2016/02/qq20160205-2@2x-300x123.png "alt=" qq20160205-2@2x "width=" "height=" 123 "style=" border:1px solid RGB ( 97,146,140); Margin:0px;padding:1px;font-family:inherit;font-style:inherit;font-variant:inherit;line-height: Inherit;height:auto; "/>

Layout type: Types of layouts, three types:

None: None (since to do pageview effect, choose this is not very reasonable, please do not choose this)

Horizontal: Horizontal Typesetting

VERTICAL: Portrait layout

Margin: blank size (horizontally adjustable width, height can be changed vertically)

Spacing x: The interval between each item x-axis (attributes that appear when you select Landscape Layout)

Spacing y: The interval between each item's Y-axis (attributes that appear when you select Portrait layout)

Horizontal Direction: There are two types:

Left_to_right: Ordered from left to right

Right_to_left: Right-to-left order

5. Add item under Playout, please feel free to increase it. Just remember that its number is guaranteed to be consistent with the number of Item_count parameter settings in the PageView script.

In fact, simplifying the use of the process, just 1 steps:

Check PageView, in the property inspector, set the size of node to match your item, and set the parameters exposed by the script as appropriate.

(Remember to check the layout type under Playout type this property is not optional none, because Himi also does not support-.) 0)

The following release source: Http://vdisk.weibo.com/s/yZxRoLm4MKqqU

Project structure:

650) this.width=650; "class=" Alignnone size-medium wp-image-2005 "src=" http://www.himigame.com/wp-content/uploads/ 2016/02/qq20160205-1@2x-1-300x201.png "alt=" qq20160205-1@2x "width=" "height=" 201 "style=" border:1px solid RGB ( 97,146,140); Margin:0px;padding:1px;font-family:inherit;font-style:inherit;font-variant:inherit;line-height: Inherit;height:auto; "/>

The HPV folder of the Explorer is the ~

Pageviewtest is an example

PageView is a template, we use this ~

Pvjs is a script

Himi is a picture that everyone can ignore

Use Demo: (Click to see the dynamic effect)

650) this.width=650; "class=" Alignnone size-medium wp-image-2004 "src=" http://www.himigame.com/wp-content/uploads/ 2016/02/user-300x224.gif "alt=" user "width=" "height=" 224 "style=" border:1px solid rgb (97,146,140); margin:0px; Padding:1px;font-family:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;height:auto; "/>

So years ago to here, you and I see after the Year ~ 650) this.width=650; "Src=" Http://www.himigame.com/wp-includes/images/smilies/simple-smile.png " alt= ":)" class= "Wp-smiley" style= "Border:0px;font-family:inherit;font-style:inherit;font-variant:inherit; line-height:inherit;margin:0px. 07em;padding:0px;width:auto;vertical-align:-.1em;background-image:none; "/>

This article is from the "Li Himi" blog, please be sure to keep this source http://xiaominghimi.blog.51cto.com/2614927/1741214

"COCOS CREATOR Series tutorial Four" based on 0.7.1 first simple to make a pageview