Book - Page Curl Pro教程❄️一款制作Unity翻页的插件

Posted 2021-09-04 橙子SKODE

哈喽大家好，你的橙哥突然出现~

本系列博客地址：传送门

一、效果展示

插件预览：

二、翻页插件介绍

导入插件
首先导入插件，我们以 Example_6 场景为例，讲解插件的使用方法。

1️⃣、如何设置书本的大小？

在未运行状态下，调整 “BookPro” 的大小即可。

2️⃣、预制件介绍

预制件中包括上面图片的阴影效果物体、手势交互感应热区，
还有最重要的书本每一页的页面 page1-6。

在 BookPro 脚本，我们可以看到 Papers 属性：


Papers 将我们所有的页面都配置到了里面。
且Paper是成对存在的，代表每一页书纸，有正有反面。

Front：代表书本打开后，我们看到的右侧一面为Front
Back：我们看到的左侧一面为Back

SetCurrent：设置当前组为显示页面（显示前一组的Back，当前组的Front）

我们需要将我们制作的每一页page添加到这属性里面，以用于我们的翻页。

可以使用 Back，或者 Front 预制体，进行书本页面的制作。

三、两种翻页方式介绍

插件有两种翻页的方式：

• 通过交互，鼠标滑动页面进行翻页
• 通过代码，进行翻页效果
  
  

1️⃣、交互的翻页方式

将 BookPro 预制体拖到Canvas下，

首先开启交互的开关：BookPro 脚本，Interactable = true

RightHotSpot、LeftHotSpot物体，即为触发交互的区域。
调整每块的大小，即可改变交互的范围

2️⃣、代码翻页方式

给 BookPro 添加 AutoFlip 脚本，
接下来直接调用下面的方法即可。

向后翻页的方法：

GetComponent<AutoFlip>().FlipLeftPage();

向前翻页的方法：

GetComponent<AutoFlip>().FlipRightPage();

四、拓展翻页方式

下面介绍如何使用代码，实现实用的翻页效果。

1️⃣翻页到指定页面

给 BookPro 添加 AutoFlip 脚本，
接下来给你的脚本写下面的方法，调用即可。

//pageNum：要到达的页面数
public void GotoPage(int pageNum)
{
	AutoFlip autoFlip = FindObjectOfType<AutoFlip>();

	//避免输入的页面数超过，或小于实际页面数
	if (pageNum < 0) pageNum = 0;
	if (pageNum > autoFlip.ControledBook.papers.Length * 2) pageNum = autoFlip.ControledBook.papers.Length * 2 - 1;
            
	autoFlip.enabled = true;
	autoFlip.PageFlipTime = 0.2f;
	autoFlip.TimeBetweenPages = 0;
	autoFlip.StartFlipping((pageNum + 1) / 2);
}

2️⃣、跳转到指定页面

给 BookPro 添加 AutoFlip 脚本，
接下来给你的脚本写下面的方法，调用即可。

//设置当前显示Papers[1]内容
FindObjectOfType<BookPro>().CurrentPaper = 1;

3️⃣、动态添加页面

若我们不想在一开始配置好界面，而是通过代码生成界面，
那可以用下面的方法，来进行实现。

使用方法：

• 可传入你配置好的预制件，或者插件自带的 Back、Front预制件，完成书页的动态添加。
• 你会得到你添加的Paper，接下来你也可以在你的代码中，对添加的书页进行修改。

public class BookPage_DynamicallyAddPages : MonoBehaviour
{
    /// <summary>
    /// 动态在书本末尾添加书页
    /// </summary>
    /// <param name="book">控制的BookPro</param>
    /// <param name="frontPagePrefab">该页的正面预制件</param>
    /// <param name="backPagePrefab">该页的反面预制件</param>
    public static Paper AddPaper(BookPro book, GameObject frontPagePrefab, GameObject backPagePrefab)
    {
        Paper newPaper = new Paper
        {
            Front = Instantiate(frontPagePrefab, book.transform, false),
            Back = Instantiate(backPagePrefab, book.transform, false)
        };
        var temp = book.papers.ToList();
        temp.Add(newPaper);
        book.papers = temp.ToArray();

        //更新翻转范围以包含新添加的纸张
        book.EndFlippingPaper = book.papers.Length - 1;
        book.UpdatePages();

        return newPaper;
    }
}

五、翻页组件讲解

下面详细讲解每个组件属性的用途，可在这进行含义查询。

📢BookPro

Flipping Range：可以限制可以翻页的范围，例如第一页是最后一页不可翻页
Current Paper：当前的页数(第一页下标为0，最后一页下标为最后一页的下标+1)
Update Pages Order：根据Current Paper数值重置页面顺序
Update Pages Names：将所有的UI页面，按照页码排序重命名
Show：若要修改某个页面，点击Show之后在Scene面板中选中进行修改
OnFlip：翻页时执行的回调

📢Auto Flip：实现翻页功能的脚本

脚本启用后，会将BookPro的interactable设置为false

ControledBook：控制哪个 BookPro 进行翻页
Mode：翻页的方向，从左向右翻，还是从右向左翻
Page Flip Time：翻页动画的时间
Delay Before Start：第一次翻页的延迟时间
Time Between Pages：两次翻页的时间间隔
Auto Start Flip：是否开启 自动翻页，可以取消自动翻页之后在需要的地方通过代码调用StartFlipping方法

本篇翻页插件教程就到此结束了，

学会了还可以看下橙哥的其他U3D专栏哦~

• 这个“插件专栏”（传送门）正在不断更新U3D插件！
• 点个收藏防走丢~

专栏会至少更新四十篇博客，从入门到高级的插件都将记录在这，将是网上最全的U3D插件专栏，早订阅早学习哦！