Vivepaper SDK Tutorial
Articles Blog

Vivepaper SDK Tutorial

August 21, 2019


I will briefly introduce the development tools of Vivepaper
下面,我简单介绍一下Vivepaper的开发工具 There are two tools for developing Vivepaper content
Vivepaper的开发主要有两个辅助工具 One is Vivepaper Editor
第一个是Vivepaper Editor Vivepaper Editor can integrate different kinds of materials
Vivepaper Editor可以整合素材 Build the framework of the book
构建图书的基本框架 And add buttons and some basic operations into the book
并且在其中添加按钮和一些基本操作 Like go to next page, go back to previous page …
如向前翻页,向后翻页等等 But Vivepaper Editor can not import
但是Vivepaper Editor不能导入 models or animations
模型和动画 It can not build book that contains complex operations
也不能添加复杂的操作逻辑 So we need Vivepaper SDK
因此我们需要使用Vivepaper SDK Vivepaper SDK is a set of interfaces based on Playmaker
Vivepaper SDK Vivepaper SDK is a set of interfaces based on Playmaker Vivepaper SDK is a set of interfaces based on Playmaker
是基于Playmaker的一系列接口 We can import models and animations to Vivepaper by the SDK
通过SDK可以 We can import models and animations to Vivepaper by the SDK
实现导入模型、动画 And we can control the behavior of Vivepaper
控制Vivepaper的各种行为 And also, we can get variety runtime parameters by SDK
也可以获得Vivepaper And also, we can get variety runtime parameters by SDK And also, we can get variety runtime parameters by SDK
操作时的各种参数 Including position, open angle, HMD direction and so on
如位置、打开角度、方向等等 It can also implement any custom operations
也可以实现任何自定义的操作 Vivepaper SDK is a set of Vivepaper realted actions
Vivepaper SDK是在playmaker的基础上 Vivepaper SDK is a set of Vivepaper realted actions
添加了一组与Vivepaper相关的操作 on the top of Playmaker
进而实现的一组SDK Playmaker is a third-party plugin for Unity
Playmaker是Unity的一个第三方插件 In its official website we can find its information
在其官网上我们可以找到其相关的信息 Playmaker is a visual scripting method for Unity
它实现了在Unity下的一种可视化编程方法 By set a state machines on a GameObject
通过对Unity中的GameObject By set a state machines on a GameObject By set a state machines on a GameObject
设定一系列状态和状态间相互转换的规则 设定一系列状态和状态间相互转换的规则 we can implement a control logic
进而实现一个GameObject的控制逻辑 Next, we will briefly introduce the use of Playmaker in Unity
下面我们简单介绍一下Playmaker的使用方法 Let’s create an empty Unity project and import the Playmaker
我们新建一个Unity空的工程并且导入Playmaker Add a cube in the scene
在场景里面添加一个立方体 In the inspector of the Cube
我们在立方体的组件里 Add a Playmaker FSM
添加一个Playmaker的有限状态机 Click “Edit” to edit the FSM
点击Edit可以编辑这个有限状态机 There is a default state
默认有一个状态 There is a default state There is a default state
就是初始状态 We can change the name and call it “Start”
我们可以改个名字,叫“Start” We’d like to make the cube rotate automaticly
我们希望在这个状态里实现物体的自动旋转 Click “Action Browser”
我们点击Action Browser We will see that Playmaker provide a lot of Actions
可以看到Playmaker提供了一系列的Action Most of the control logic can be implemented by these actions
这些Action可以实现绝大部分的逻辑 Let’s choose “Rotate”
我们选择Rotate Add the Action by press Enter
按回车可以将这个Action添加到状态里 We can see that this Rotate Action act on itsself
我们可以看到在Rotate这个Action里边 We can see that this Rotate Action act on itsself We can see that this Rotate Action act on itsself
作用的物体就是本身 Let’s set a value in the Y Angle, like 5
我们可以在Y轴上给它加一个数值5 choose “Per Secend”
选择每秒 In this way, we have a simple control logit
这样,我们就实现了一个最简单的控制 that can make the cube rotate automatically around Y axis
可以实现 that can make the cube rotate automatically around Y axis that can make the cube rotate automatically around Y axis
这个立方体的自动旋转 Close the Editor of Playmaker
我们关闭 Playmaker的Editor Click “Run”
点击运行 We can see that the cube is rotating
可以看到立方体在自动旋转 This is controlled by the Playmaker FSM
这些操作都是Playmaker完成的 The cube has only one State in FSM
目前这个立方体只有一个状态 Click “Edit” again
我们现在还点击Edit In playmaker editor, we add a new state and name it “RotateX”
在playmaker edit 里面我们再添加一个新的状态 In playmaker editor, we add a new state and name it “RotateX” In playmaker editor, we add a new state and name it “RotateX”
给它起名字叫RotateX And let’s change the name of the first state to “RotateY”
我们将第一个状态改为RotateY In state “RotateX”, we add a rotation around the X axis
在RotateX中,我们添加一个沿X轴方向的旋转 But there is no connection between “RotateX” and “RotateY”
但是状态1和状态2 But there is no connection between “RotateX” and “RotateY” But there is no connection between “RotateX” and “RotateY”
rotate X 和Y没有关联 That means this cube will stuck in “RotateY” from the beginning
也就是 That means this cube will stuck in “RotateY” from the beginning That means this cube will stuck in “RotateY” from the beginning
在一开始的时候 That means this cube will stuck in “RotateY” from the beginning That means this cube will stuck in “RotateY” from the beginning
物体会进入RotateY这个状态 There is no way to get into to “RotateX”
但是,并没有方法可以让它切换到RotateX Let’s add a new action in RotateY Let’s add a new action in RotateY
我们在RotateY这个状态里面给它添加一个 Let’s add a new action in RotateY Let’s add a new action in RotateY
新的Action It is called “GetKeyDown”
叫GetKeyDown “Getkeydown” can monitor the keyboard
Getkeydown可以获得当前键盘的输入 Let’s choose “Space”
我们选择空格键 It will sent an Event when space is pressed
当空格键按下的时候 It will sent an Event when space is pressed It will sent an Event when space is pressed
这个Action会发送一个Event We name the Event “rotateX”
我们给起一个新的名字叫rotateX Now, right click on the state “RotateY”
这时在状态1点击右键 We can connect “RotateY” to “RotateX”
我们可以在 We can connect “RotateY” to “RotateX” We can connect “RotateY” to “RotateX”
Add Transition里面 In menu “Add Transition” select “rotateX”
将rotateX连接到RotateX In menu “Add Transition” select “rotateX” In menu “Add Transition” select “rotateX”
将rotateX连接到RotateX The logic in the FSM is that
整个有限状态机的逻辑是 the cube will start from “RotateY”
在一开始的时候 And keep rotating around Y axis
这个物体进入RotateY这个状态 And keep rotating around Y axis
并且自动旋转 And it will monitor keyboard all the time
同时 And it will monitor keyboard all the time And it will monitor keyboard all the time
这个状态会时刻监听键盘的信息 And it will monitor keyboard all the time And it will monitor keyboard all the time
信息 When the space is pressed it will sent the rotateX event
如果有空格键按下 When the space is pressed it will sent the rotateX event
会发送一个rotateX的event This event will push the FSM to state “RotateX”
RotateX event会把状态切换到RotateX In state “RotateX” We added a rotation around X axis
在RotateX这个状态里面 In state “RotateX” We added a rotation around X axis
我们添加了一个沿着X轴的旋转 Do not close Playmaker Editor
我们并不关闭Playmaker Editor So we can see the conversion of states in FSM
这样可以看到状态的实时转换 Click “Run”
点击运行 At beginning
一开始的时候 the cube rotate around axis Y
我们可以看到这个立方体沿着Y轴旋转 After I pressed space
这时,我按下空格键 FSM move to “RotateX”
状态机把自己的状态切换到rotateX And then the cube rotate around axis X
并且这个立方体沿着自己的X轴旋转 This is a simple example contaning two states
这样,我们就实现了一个最简单的两状态的 This is a simple example contaning two states This is a simple example contaning two states
一个逻辑控制 As mentioned above
正如前面提到的 Vivepaper SDK is not a standalone program
Vivepaper SDK并不是一个独立的程序 It cannot be used indepentently
也不能独立使用 Using Vivepaper SDK, you can save GameObject as Asset Bundle file Using Vivepaper SDK, you can save GameObject as Asset Bundle file
Vivepaper SDK可以将Unity中的 Using Vivepaper SDK, you can save GameObject as Asset Bundle file
GameObject保存成Asset Bundle The Asset Bundle file contains all pre-defined information
这个Asset Bundle包含了预设的所有信息 Thus we can combine the gameobject with images, videos, audios and so on
这样 Thus we can combine the gameobject with images, videos, audios and so on Thus we can combine the gameobject with images, videos, audios and so on
将Asset Bundle通过Vivepaper Editor Thus we can combine the gameobject with images, videos, audios and so on Thus we can combine the gameobject with images, videos, audios and so on
可以和以前的 in Vivepaper Editor to build a 3D interactive Vivepaper
图像视频音频相结合 in Vivepaper Editor to build a 3D interactive Vivepaper in Vivepaper Editor to build a 3D interactive Vivepaper
形成一个立体可交互的Vivepaper Next, I will introduce how to save the prefab as Asset Bundle file
下面,我简单介绍一下 Next, I will introduce how to save the prefab as Asset Bundle file
如何将Unity中 Next, I will introduce how to save the prefab as Asset Bundle file
预设好的文件保存成 Then it can be imported by Vivepaper Editor
预设好的文件保存成 Then it can be imported by Vivepaper Editor
Vivepaper Editor可以读取的格式 By the first time we use Vivepaper SDK
在第一次使用Vivepaper SDK时 we need create a new folder under the project folder
我们要在目录文件夹下面 we need create a new folder under the project folder
新建一个 空的目录 We name this new folder “outputFile”
叫outputFile Return to Unity editor
回到我们刚才的Unity工程 We need drag the gameobject Cube into project folder
我们将场景中已经设定好的立方体 We need drag the gameobject Cube into project folder We need drag the gameobject Cube into project folder
拖拽到Project的目录下面 Unity will save this GameObject as
Unity会将这个GameObject a file which extension is “prefab”
保存成一个预设文件 a file which extension is “prefab” a file which extension is “prefab”
扩展名是”.prefab” After importing Vivepaper SDK
在导入Vivepaper SDK之后 We can select “Vivepaper” in main menu
我们可以选择Vivepaper菜单 Then select “Bundle File”
Bundle File We need to give the new bundle file a name
我们要给新生成的 We need to give the new bundle file a name
Bundle File 起一个名字 Here we call it “Cube”
在这里我们叫Cube Then we select the prefab file
我们选择我们刚才保存好的预设文件 Drag it into input field “Bundle File”
拖着到Bundle File Drag it into input field “Bundle File” Drag it into input field “Bundle File”
生成窗口中 Then click “Build Bundle”
这时,点击Build Bundle We will see that Unity create some windows
可以看到Unity We will see that Unity create some windows We will see that Unity create some windows
启动了一系列窗口 and save the prefab file as asset bundle file
执行将这个prefab保存成Asset Bundle格式 We will see that there is a file named Cube.manifest
我们可以看到在outputFile文件夹下 We will see that there is a file named Cube.manifest We will see that there is a file named Cube.manifest
有Cube.manifest 和 and another file named Cube and hash value
Cube under the “outputFile” folder
和一堆哈希值组成的文件名 These files can be used by Vivepaper Editor
这两个文件将是 These files can be used by Vivepaper Editor These files can be used by Vivepaper Editor
后边我们Vivepaper Editor可以读取的文件 Next, we talk about the setup of Vivepaper SDK
下面我简单介绍一下Vivepaper SDK的安装 We need first install Unity
Vivepaper SDK的安装首先需要安装Unity And then import Playmaker into project
第二步,是需要在Unity里面导入Playmaker At last, import the Vivepaper SDK
第三步,是导入我们提供的SDK We can download Unity online installation pakage from its website
安装Unity,可以去Unity的官网下载 We can download Unity online installation pakage from its website We can download Unity online installation pakage from its website
Unity在线安装包 Personnal Edition is free
个人版是免费的 Click Download Unity
点击下载Unity Click Download Personal Edition
点击下载个人版 Download installation program
下载安装程序 Open it and follow the instructions to install the Unity 5.6
打开网络安装包 Open it and follow the instructions to install the Unity 5.6 Open it and follow the instructions to install the Unity 5.6
按提示操作可以安装Unity 5.6 I have installed the Unity 5.6
在这里我已经装好了Unity Then, we need import Playmakter into Unity
第二步,是需要在Unity里导入Playmaker There is a shortcut on desktop after installed the Unity
在安装好Unity之后桌面上会有一个 There is a shortcut on desktop after installed the Unity There is a shortcut on desktop after installed the Unity
快捷方式 Double click it
双击Unity we can then create an new project
可以新建一个新的项目工程 click “NEW”
我们点击New Give our new project a name
给我们的项目起一个名字 Click “Create Project”
点击Create Project Click the “Window” in Unity main menu
在Unity的菜单里面有Windows菜单 Then Open the Asset Store
点开以后 Then Open the Asset Store
打开Asset Store We can access the offical Store of Unity
我们可以进到Unity的一个官方 We can access the offical Store of Unity We can access the offical Store of Unity
商城里 We can access the offical Store of Unity We can access the offical Store of Unity
在里面搜索Playmaker就是我们要安装的插件 在里面搜索Playmaker就是我们要安装的插件 Search “Playmaker”
在里面搜索Playmaker就是我们要安装的插件 Click Playmaker
点击Playmaker Playmaker ia a paid plugin
Playmaker是一个付费的应用插件 It costs $65
它的金额是65美金 I have purchased Playmaker, so I can import immediately
这里我已经购买的Playmaker所以我可以直接导入 After click “Import”, Playmaker will unzip
点击导入后,Playmaker会解压 Click “Import”, It will import the setup program into project
我们点击import可以 Click “Import”, It will import the setup program into project
将playmaker的安装程序导入进来 After importing the installation program
在导入Playmaker的安装程序后 A dialog window will appear
会自动弹出一个对话框 There is a “Intall Playmaker” button
里面会提示安装playmaker 我们点击install playmaker Click it
我们点击install playmaker Click it It will check if there is any collision in this project
这里面会有一个检查 It will check if there is any collision in this project It will check if there is any collision in this project
项目是否冲突的选项 Because this is a emply project
因为我们是一个空的项目 There have no collision
所以说应该没有冲突 Press “Install PlayMaker 1.8.1”
我们点击install Click “Import”
点击import Click “OK”
点击OK Playmaker has been installed
我们已经安装了Playmaker We can see there are some new folders in the project folder
安装好Playmaker以后 We can see there are some new folders in the project folder
我们可以在工程目录里看到Playmaker的几个文件夹 Then we are going to import Vivepaper SDK
在此基础上 Then we are going to import Vivepaper SDK
我们要导入Vivepaper的SDK Click “Assets” in main menu
我们点击Assets “Import package”
Import package “Custom package”
Custom package Select our Vivepaper SDK
然后选择我们的Vivepaper SDK Vivepaper SDK will unzip
Vivepaper SDK Vivepaper SDK will unzip Vivepaper SDK will unzip
会自动解压 Click “Import”
并且包含一系列文件 我们点击Import Then we can see the Vivepaper SDK folder
这时我们可以在工程目录下看到Vivepaper SDK Vivepaper SDK provide a set of API
Vivepaper SDK目前提供一系列 Vivepaper SDK provide a set of API Vivepaper SDK provide a set of API
相关的接口 在安装完SDK之后我们可以在 Vivepaper Vivepaper SDK provides
Vivepaper SDK提供 a set of interfaces
一系列关于Vivepaper的接口 These interfaces are provide as Playmaker actions
这些接口都以标准的 These interfaces are provide as Playmaker actions
Playmaker Action形式提供 These interfaces are provide as Playmaker actions These actions include that can control buttons, pages These actions include that can control buttons, pages
其中包括按钮的控制 These actions include that can control buttons, pages These actions include that can control buttons, pages
页面控制 These actions include that can control buttons, pages
以及获取Vivepaper当前的姿态 Also include that can get Vivepaper’s pose like position or angle
以及获取Vivepaper当前的姿态 Also include that can get Vivepaper’s pose like position or angle Also include that can get Vivepaper’s pose like position or angle
位置、打开角度等信息 After installing Vivepaper SDK
在安装完Vivepaper SDK之后 If we add an Action of Playmaker
我们如果 If we add an Action of Playmaker If we add an Action of Playmaker
添加了一个Playmaker的Action We can find Vivepaper subdirectory
可以在Playmaker的Action的Browser中 in the action browser of Playmaker
找到Vivepaper子目录 This sub directory contain all API of the SDK
子目录里包含了所有我们提供的接口 The names of these APIs are all start with “VP_”
所有这些接口都以“VP_”作为前缀 So, we can input “VP_” when we want to search the Vivepaper API
所以在使用的时候我们可以通过输入VP_ So, we can input “VP_” when we want to search the Vivepaper API So, we can input “VP_” when we want to search the Vivepaper API
找到相应的Action WaitButton Action is used to monitor Vivepaper button
WaitButton Action用于监听Vivepaper Button的按击 This action will sent a event when button pressed
并在与自己对应的Button按下的时候送出一个Event We can controll the FSM by these events
通过Event可以实现Playmaker里状态的相互转移 Open an Unity project
打开一个Unity工程 Create a new scene
新建一个场景 Add new empty GameObject
并且添加一个空的GameObject Add a FSM of Playmaker on the GameObject
在GameObject上面添加 Add a FSM of Playmaker on the GameObject
一个Playmaker的FSM 有限状态机 Click “Edit”
点击Edit In the default state, open action browser
在默认的State中 In the default state, open action browser
我们可以点击Action Browser找到我们的 Find Vivepaper actions
Vivepaper 提供的接口 Double click WaitButton
双击WaitButton We need give the Button an ID
我们要给这个Button We need give the Button an ID We need give the Button an ID
指定一个ID Here, we set it Button1
在这里我们叫Button1 That means, when a Button named Button1 on Vivepaper is pressed
也就是当Vivepaper中 That means, when a Button named Button1 on Vivepaper is pressed
有一个ID为Button1的Button被触发时 WaitButton will sent an event
WaitButton会送出一个Event We name the event (Event1)
我们可以起一个名字叫(Event1) Then, we can add “event1” on “State 1”
这时,可以在State1上添加Event1 If we have another state
如果我们有另一个状态 it can change to that state by the event
可以通过Event转移到另一个状态中 The first parameter in WaitButton is the button name
可以看到WaitButton有一个参数 The first parameter in WaitButton is the button name
就是Button的Name which is also called button ID
也就是Button的ID The second parameters is the event that we want it to sent
第二个参数,是我们要指定一个Event WaitButtonDown action is similar with WaitButton action
WaitButtonDown Action 与WaitButton 相似 WaitButton actives only
WaitButton 需要用户完整触发Button才会起作用 when user press the button on Vivepaper
送出一个Event WaitButtonDown is not the same
WaitButtonDown并不是 WaitButtonDown actives when user touch the acitve area of button
WaitButtonDown会在用户手指进入到Button区域时就触发一个Event BlockNextPage, as the name suggests, it prevents users from going to next page
BlockNextPage 顾名思义就是禁止用户向后翻页 Similar with BlockNextPage
与BlockNextPage相似 BlockPrevPage can prevent users from flipping backward
BlockPrevPage可以阻止用户手动向前翻页 UnBlockNextPage clear what BlockNextPage does
UnBlockNextPage可以取消BlockNextPage操作 It enable users go to next page
使用户可以继续手动向后翻页 Similarly, UnBlockPrevPage cancel BlockPrevPage
类似的,UnBlockPrevPage可以取消BlockPrevPage enable users flip backward
使用户可以手动向前翻页 NextPage make Vivepaper go to the next page
NextPage可以自动向后翻一页 NextPage can be called multiple times
注意NextPage可以多次调用 Repeatedly called NextPage mutiple times means flip mutiple pages
连续调用多次即向后翻多页 Meanwhile if the Vivepaper is blocked by BlockNextPage
同时 Meanwhile if the Vivepaper is blocked by BlockNextPage
如果当前状态是BlockNextPage it will clear the block once we called NextPage
一旦我们调用了NextPage it will clear the block once we called NextPage
即取消了BlockNextPage That means the user can flip page manually
也就是用户 That means the user can flip page manually
可以在后面手动向后翻页 PrevPage is similar with NextPage, it can go back to previous page
PrevPage与NextPage相似可以自动向前翻一页 it can also be called multiple times
也可以连续调用多次 to go back mutiple pages
即向前翻多页 if the Vivepaper is blocked by BlockPrevPage
如果当前的状态是BlockPrevPage it will clear the block once we called PrevPage
在调用PrevPage以后 it will clear the block once we called PrevPage
即取消了BlockPrevPage That means the user can flip page backward manually
也就是说用户可以手动向前翻页 TrackBook can keep a Gameobject relatively static with the Vivepaper
TrackBook可以使一个物体与Vivepaper保持相对静止 It is used to show some object around Vivepaper
用于在Vivepaper上展示一些物体 Two parameters it needs are
我们需要提供 Two parameters it needs are Two parameters it needs are
两个参数分别是 the offset and relative rotation from Vivepaper to the object
物体与Vivepaper的Offset the offset and relative rotation from Vivepaper to the object the offset and relative rotation from Vivepaper to the object
和物体与Vivepaper的旋转角度 In the following
在后面的例子中 在后面的例子中 we will give two examples
我们会给出两个实例 both of which uses TrackBook action
都用了TrackBook It shows a reformable cube on the Vivepaper
使一个可以变形的立方体 It shows a reformable cube on the Vivepaper It shows a reformable cube on the Vivepaper
展示在Vivepaper附近 GetCurrentPage can get the current page
GetCurrentPage可以获得当前打开的页数 It can be use for controlling Vivepaper
用于实现一些逻辑操作 It will return a integer value
它会返回一个Int值 GetOpenAngle can get the open angle of Vivepaper
GetOpenAngle可以得到当前Vivepaper的打开角度 The angle is returned in degree
打开角度 用角度表示 Its range is 0 to 350
范围是0-350度 GetPosition can get the center position of Vivepaper
GetPosition就可以获得Vivepaper GetPosition can get the center position of Vivepaper GetPosition can get the center position of Vivepaper
中心点的位置 The center of Vivepaper is defined as the center of book spine
Vivepaper的中心点 The center of Vivepaper is defined as the center of book spine
在Vivepaper合上的时候为左侧书脊的中心 GetRotation can get the rotation of Vivepaper
GetRotation可以得到Vivepaper当前的旋转姿态 GetTransform can get the transform of Vivepaper for subsequent operations
GetTransform可以获得 GetTransform can get the transform of Vivepaper for subsequent operations
Vivepaper的Transform用于进行后续的操作 HmdTransform cat return the transform of HMD
HmdTransform 可以返回头盔的Transform For example, when we’d like to show a ojbect just in front of the user
例如当我们需要展示一个物体 For example, when we’d like to show a ojbect just in front of the user For example, when we’d like to show a ojbect just in front of the user
并将这个物体给展示在用户的眼前时 We need compute the direction user look at by the transform of HMD
我们首先需要得到Hmd的transform We need compute the direction user look at by the transform of HMD
并算出 它所看的方向 Then we can put the object at suitable position
并在适合的位置展示我们的物体 Here I simply introduce you
在这里我简单向大家介绍一下 the debug scene of Vivepaper SDK
Vivepaper SDK的模拟调试场景 Vivepaper SDK is used offline
因为Vivepaper SDK是一个离线的编辑器 We need use Vivepaper SDK before we use Vivepaper Editor
相当于在我们使用Vivepaper Editor之前 before we use Vivepaper Editor
用Vivepaper SDK We need use Vivepaper SDK before we use Vivepaper Editor
用Vivepaper SDK The gameobject we build and saved can not be tested real time
独立制作一个GameObject并保存下来 The gameobject we build and saved can not be tested real time
但是这个GameObject的使用效果并不可以实时看见 We provide a debug scene where we can test the gameobjects
所以我们提供了一个模拟的调试场景 We provide a debug scene where we can test the gameobjects We provide a debug scene where we can test the gameobjects
我们可以在 It is under the folder of Vivepaper SDK
Vivepaper SDK的文件夹下面 Its name is “DebugScene”
找到一个叫DebugScene的场景 Open this scene with double click
我们双击打开这个场景 As can be seen, there are BookSimulator, HMDSimulator and ButtonSimulator
可以看到,场景中有一个BookSimulator As can be seen, there are BookSimulator, HMDSimulator and ButtonSimulator As can be seen, there are BookSimulator, HMDSimulator and ButtonSimulator
HMDSimulator 还有ButtonSimulator They simulate the Vivepaper, HMD and also buttons on Vivepaper respectively
他们分别模拟了 They simulate the Vivepaper, HMD and also buttons on Vivepaper respectively
图书的一些行为 They simulate the Vivepaper, HMD and also buttons on Vivepaper respectively They simulate the Vivepaper, HMD and also buttons on Vivepaper respectively
还有头盔的位置和摄像机的位置 They simulate the Vivepaper, HMD and also buttons on Vivepaper respectively They simulate the Vivepaper, HMD and also buttons on Vivepaper respectively
以及button的模拟 There are a few examples in Vivepaper SDK
在Vivepaper SDK中有几个小例子 The second is ShowOnBook
我们可以看到,第二个例子是ShowOnBook The third is ShowWhenBookOpen
第三个例子是ShowWhenBookOpen We will show how to use debug scene
我们可以通过这两个例子来简单说明一下 by these two examples
如何使用模拟调试场景 Double click “ShowOnBook”, there are three files in the folder
双击ShowOnBook 文件夹可以看到三个文件 They are a shader, a material and a prefab
分别是一个Shader文件Material 文件和预制好的Prefab文件 In the prefab, we have set a Playmaker FSM
在Prefab 文件中,我们已经添加了一个有限状态机 Click Edit to check the FSM
点击Edit可以看到它的逻辑情况 It contains two states
首先它包含两个状态 They are WaitForButtonPressed and Show respectively
分别是WaitForButtonPressed 和Show As the name suggests, WaitForButtonPressed wait the button to fire
顾名思义 As the name suggests, WaitForButtonPressed wait the button to fire
WaitForButtonPressed就是在等待一个Button的触发 Then it sent a event and jump to next state
并且发送一个Event跳到下一个状态 We need set the ID of the button in the first state
在第一个状态中我们要指定button的ID Here, we name it showCube
这里叫ShowCube We need to pay attention that there should be a button which named is ShowCube in VivepaperEditor
在这里我们需要注意 We need to pay attention that there should be a button which named is ShowCube in VivepaperEditor
一定要在VivepaperEditor中 We need to pay attention that there should be a button which named is ShowCube in VivepaperEditor
添加一个叫ShowCube的Button if there is no button named Showcube, the GameObject cannot change to other state
如果没有Showcube Button if there is no button named Showcube, the GameObject cannot change to other state if there is no button named Showcube, the GameObject cannot change to other state
那么这个GameObject其实无法进入下一个状态 The second state contains three actions
在第二个状态中 The second state contains three actions
它包含了三个Action The first action is “Find Child”
第一个Action是Find Child This is a internal action provided by Playmaker
这是Playmaker This is a internal action provided by Playmaker This is a internal action provided by Playmaker
自己内置提供的Action It can find the child gameobjct
它可以找到当前GameObject的子元素 The second action is “Activate GameObject”
第二个Action是 The second action is “Activate GameObject”
Active GameObject It will activate the Cube which we find by the action “Find Child”
就是将我们刚才找到的 It will activate the Cube which we find by the action “Find Child”
Cube的这个ChildObject It will activate the Cube which we find by the action “Find Child” It will activate the Cube which we find by the action “Find Child”
将它设置成Active It will activate the Cube which we find by the action “Find Child” The cube is not active by default
默认情况下,我们是将Cube设成Deactive So the cube will not appear at the beginning
这样的话在一开始的时候 So the cube will not appear at the beginning
这个Cube并不会直接出现 The third action is set the reletive pose with Vivepaper
在第三个Action是将自己的位置 The third action is set the reletive pose with Vivepaper
和Vivepaper相绑定 It needs an offset
并指定一个offset we use 0.1 for x y z
这里我们随便制定一个值是x y z都等于0.1 That means 10 centimeter in x y z axis
也就是10厘米 Click “Run”
现在点击运行 We can see that there is a button in Game window
我们可以看到 We can see that there is a button in Game window
在Game场景下的Buttons We can see that there is a button in Game window We can see that there is a button in Game window
里面会有一个按钮 This button is named as showCube
是showCube It can simulate that when the button called showButton in Vivepaper is pressed
用这个按钮我们可以模拟在Vivepaper中 It can simulate that when the button called showButton in Vivepaper is pressed It can simulate that when the button called showButton in Vivepaper is pressed
按击按钮的情况 Let’s click “showCube”
我们可以点击下showCube We see that the FSM in Gameobject is changed to the second state
我们看到 We see that the FSM in Gameobject is changed to the second state We see that the FSM in Gameobject is changed to the second state
Gameobject状态已经切换到第二个状态 And a deforming cube appears
并且展示了一个可以变形的一个cube If we try to change the position of Vivepaper
同时我们可以 If we try to change the position of Vivepaper If we try to change the position of Vivepaper
尝试改变Vivepaper的位置 Select Vivepaper Simulator
我们点击Vivepaper Simulator Drag it
然后再场景中像拖拽其他物体一样 Change a position
改变 Vivepaper的位置 We can see that the cube is raletively static with Vivepaper
我们可以看到 We can see that the cube is raletively static with Vivepaper
因为我们在 We can see that the cube is raletively static with Vivepaper We can see that the cube is raletively static with Vivepaper
ShowOnBook这个GameObject下添加了一个 We can see that the cube is raletively static with Vivepaper We can see that the cube is raletively static with Vivepaper
Trackbook这个Action Because we have added a Trackbook action which make the cube track Vivepaper
Trackbook这个Action Because we have added a Trackbook action which make the cube track Vivepaper
所以说 Because we have added a Trackbook action which make the cube track Vivepaper
所以说 Because we have added a Trackbook action which make the cube track Vivepaper Because we have added a Trackbook action which make the cube track Vivepaper
这个cube会一直与 Because we have added a Trackbook action which make the cube track Vivepaper
Vivepaper以一个固定位置绑定 Because we have added a Trackbook action which make the cube track Vivepaper If we open Vivepaper and move it
即使当我们打开Vivepaper If we open Vivepaper and move it 移动图书的时候 We see that the Cube would keep static with the Vivepaper
移动图书的时候 We see that the Cube would keep static with the Vivepaper We see that the Cube would keep static with the Vivepaper
这个Cube也会一直跟着保持不动 This sample showed how to use button to display
这个例子可以教会我们 This sample showed how to use button to display This sample showed how to use button to display
如何在Vivepaper上 a predefined object on Vivepaper
通过一个Button展示一个预定义的好的物体 In the last example
在上一个例子中 We have basically understood how to use Debug Scene
我们已经基本了解了Debug Scene的使用方法 Below we introduce the three main modules of DebugScene
下面我们分别介绍一下DebugScene的三个主要模块 They are BookSimulator
分别是BookSimulator HmdSimulator and ButtonSimulator
HmdSimulator和ButtonSimulator BookSimulator simulates some basic parameters of Vivepaper in actual operation
BookSimulator模拟了Vivepaper在实际运行中的一些基本的参数 These parameter includes position
比如它的空间的位置 and current page number
以及当前的页数 We can see that it is currently open to the third page
我们可以看到,当前已经打开到第三页 Or the open angle of Vivepaper and finger tip position
或者是用户在拿起Vivepaper时使用Vivepaper的角度 When user uses Vivepaper
以及手指在Vivepaper上的位置 We can see that the green ball in the scene can represent the projection of the user’s fingertip on the book
我们可以看到在场景中这个绿色的圆球 We can see that the green ball in the scene can represent the projection of the user’s fingertip on the book We can see that the green ball in the scene can represent the projection of the user’s fingertip on the book
就可以代表用户手指在书上的投影的位置 The second is Hmd Simulator
第二个主要部分就是Hmd Simulator Hmd Simulator simulate the Hmd
Hmd其实模拟了我们用户 It shows what user see from the Hmd
带上头盔之后 and relative position from the Vivepaper
与书的相对位置和相对视角 We can adjust
我们可以通过调整 the position of the Hmd Simulator
Hmd Simulator的位置 and check the result at different positions
在测试用户在不同角度 and check the result at different positions
观察Vivepaper以及使用Vivepaper的情况 The third part is Button Simulator
第三个部分是Button Simulator Button Simulator will simulate the button in Vivepaper
Button Simulator可以模拟Vivepaper Button Simulator will simulate the button in Vivepaper Button Simulator will simulate the button in Vivepaper
被用户点击Button时 Button Simulator will simulate the button in Vivepaper
的一些基本操作 Button Simulator will simulate the button in Vivepaper In this example, there is a WaitButton in the FSM of ShowOnBook
我们可以看到,在刚才给出的例子,在ShowOnBook中 In this example, there is a WaitButton in the FSM of ShowOnBook In this example, there is a WaitButton in the FSM of ShowOnBook
Action中含有一个WaitButton WaitButton will monitor buttons on Vivepaper
WaitButton表明 WaitButton will monitor buttons on Vivepaper WaitButton will monitor buttons on Vivepaper
这个GameObject在等待一个按钮触发 Button Simulator would list all buttons on the current page
这时 Button Simulator would list all buttons on the current page Button Simulator would list all buttons on the current page
Button Simulator Button Simulator would list all buttons on the current page Button Simulator would list all buttons on the current page
会将 Button Simulator would list all buttons on the current page
所有等待触发的按钮 in the scene
展现在Button的菜单下面 Let’s click Run, and see that the button name is changed to “ShowCube”
我们点击运行可以看到 Let’s click Run, and see that the button name is changed to “ShowCube” Let’s click Run, and see that the button name is changed to “ShowCube”
这个按钮变成了ShowCube which is same as the setting of WaitButton action
和我们Action等待的这个按钮的名字是一样的 When will have multiple buttons
当我们有多个按钮的时候 like, we can add a new action on gameobject
例如我们可以在GameObject上再添加一个Action we can add another WaitButton
我们再添加一个WaitButton give it a name (showCube2)
给Button起一个名字 We also let it trigger the same event as ShowCube
我们也让它触发ShowCube同样的一个Event That is, the two Buttons actually perform the same operation
也就是两个Button其实执行了相同的操作 This example shows that when there are two buttons
这里只是举例说明一下 Let’s click run
当有两个Button时我们点击运行 Button Simulator will create a list
Button Simulator会变成一个List there are two items in the list
下面会有两个Button when we select one
当我们点击其中一个Button时 it will trigger the event and
相当于触发了这个Button并且 will transfer FSM to the next state
使GameObject转移到下一个状态 We can see that
我们可以看到 There is a check box named “button down”
在Button的菜单后面 at the right of the Button menu
有一个Button down的Check Box Here I would like to explain that
在这里我要说明一下 in the process of using of Vivepaper
Vivepaper在使用的过程中 the user interacts with Vivepaper through his/her fingers
用户是通过手指与Vivepaper 相交互 When the user’s finger
用户的手指 is placed in the Vivepaper’s Button area
放在Vivepaper的Button触发区域时 this button is not triggered immediately
并不会直接触发这个button Users need to put their fingers in the Button area for a while
用户需要将手指放在Button中保持一段时间 to make sure he is
来确保他是有意 interested in pressing the button
按击这个按钮 并不是无意划过触碰了这个按钮 but not accidentally touching the button
并不是无意划过触碰了这个按钮 but not accidentally touching the button However, our developers sometimes need to perform a series of operations
但是我们开发者有时需要在用户手指移动进入某个区域时 when the user’s finger moves into an area
就执行一系列的操作 It can be achieved through another action
那么可以通过另一个Action来实现 Let’s click run
我们点击运行 and check the “button down”
并且勾选上button down这个选项 in the simulation
如果勾选上button down这个选项,那么在整个模拟中 click the button represent that user touch the button
按钮的按击就表示用户只是将手放在button的触发区域 but not press the button
但马上就离开,并没有完整触发这个按钮 and showcube would not
这时我点showcube时并不会 show the object
将刚才的GameObject显现出来 when uncheck the “button down”
只有当勾选掉button down的时候 showcube will make the cube visible
点击showcube才可以实现上边的操作 Next, we explain the second example
接下来,我们讲解一下第二例子 which is “show when book open”
是show when book open In this example we have implemented a basic operation
在这个例子中我们实现了一个基本的操作 It is that when book is opened to a certain angle,
就是当图书打开到一定角度的时候 a deforming cube shows
会展现一个可变的立方体 When the book is closed, the cube will disappear
当图书合上的时候立方体会自动消失 Similarly, click prefab
同样,我们 点击prefab的 open playmaker editor in inspector
点击prefab,在右边的inspector 里面打开playmaker的editor There are two states in this GameObject
在这个GameObject同样包含两个状态 They are Hide and Show
分别是Hide和show In first state “Hide”
我们先看第一个状态 In first state “Hide”
在Hide状态中 There are 4 acitons
它包含有4个Action The first two acitons will find the child gameobject
前两个Aciton分别是找到自己的子物体 that is the deforming cube
也就是可变的cube and deatctivate it
并将其设成deactive the cube will not appear
也就是不显示的状态 The last two actions
后两个Action will get the open angle of Vivepaper
在每一个update中 in every Update
不断地获取当前Vivepaper打开的角度 and compare it with a value
并将打开的角度与一个数值比较 Here, it will sent a event when the angle great than 90 degree
在这里,我们选择打开角度超过90度的时候 This event will change current state to state “Show”
就会发送一个Event使ShowCube进入到下一个状态 State Show contains 4 actions
在Show这个State中我们还是包有4个Action The first action is
第一个Action是将 activate cube in order to make it visible
Cube这个子Object设成Active activate cube in order to make it visible
这样我们就可以看到它 The second action is get
第二个Action是在每一个Update中 the open angle of Vivepaper in every Update
不断地获得当前Vivepaper的打开角度 The third aciton is compare the open angle with 90 degree
第三个Action是将获得的打开角度 The third aciton is compare the open angle with 90 degree
与90度相比较 If the angle is less than 90
也就是当打开角度小于90度的时候 it will sent a Event named “hideCube”
我们会发送一个Hide Cube的Event and checkout the current state to “Hide”
使整个状态切换到 and checkout the current state to “Hide” and checkout the current state to “Hide”
Hide State中 It hides the cube
也就是隐藏起来 The last action is
那么最后一个Action same as the last example
和上一个例子中一样 It keeps the cube and book relatively static
是使我们的cube和书保持一个相对不动的位置 Close the Playmaker Editor
我们关闭Playmaker Editor Drag the predefined prefb into scene
将已经设置好的prefab文件拉入场景中 Click Run
我们点击运行 The Cube is invisible
可以看到在最开始的时候 at beginning
cube没有展现出来 Open Playmaker Editor and we can see the FSM
我们打开Playmaker Editor可以看到当前的状态 Let’s change the open angle of Vivepaper via book Simulator
这是通过Book Simulator Let’s change the open angle of Vivepaper via book Simulator
我们可以改变书的打开角度 Let’s change the open angle of Vivepaper via book Simulator As we can see, the cube appears
我们可以看到,当角度超过90度的时候 when angle great than 90 degree
这个立方体就会展现出来 The Cube will be invisible
当角度小余90度的时候 when angle is less than 90 degree
这个立方体会隐藏起来 这样就实现了一个基本的操作

Only registered users can comment.

Leave a Reply

Your email address will not be published. Required fields are marked *