Tutorial (VR Digital Picture Book System)

A Three functions implemented in the asset

B How to change the texture displayed on the pages of a picture book

A

1 Function using a pickup cube

In both Demo_Map1 and Demo_Map2, there is a small picture book on a table. That is a picture book that you can pick up. Using the function of the pickup cube, you can pick up the picture book. Actually, you are not grabbing the picture book, but the pick-up cube. The pickup cube is transparent and the picture book is paired to it.

If you want to use this feature, you first need to change the material of the pickup cube; there is a material called Zero, which is a material that is used for the pickup cube. Duplicate the blueprint of the pickup cube and change its material to this. This will result in a transparent pickup cube. Next, pair the picture book to this pickup cube. We recommend that you pair it to the pickup cube by placing it in a diagonal position on the pickup cube, i.e., intentionally at an angle to the cube.

2 Functions using RenderTarget

In both Demo_Map1 and Demo_Map2, you will see a large picture book floating on the right side. That is the picture book that uses the RenderTarget function. Inside the pages of the picture book, images from the scene capture camera can be projected in real time. In fact, the material that is assigned to each page is what makes this possible.

If you want to use this feature, look at the material inside each page of this picture book. And look at the nodes within them, and you will see that RenderTarget is used. What I want you to notice is that the TextureCropping node is used. This is used to bring the camera image to a specific position in the UV map. Then why is there a CustomRotator node? This is due to the fact that the original UV map of the page is upside down. In fact, each page is a Cube, not a Plane. The reason why this is so is that in order to get the bones into the page, it needed to be a very thin Cube, not a Plane. And because of that, the UV map is complicated: the six faces of the Cube are expanded into a UV map.

Try moving the camera in the scene capture. The image on the page will change. Depending on where you place the camera, the image on the page will change. Using this feature, it is possible to realize the unique magic of VR by entering the pages of a picture book. The player’s position can be teleported from the front of the picture book to the position in the space projected in the scene capture. Of course, it would be necessary to use some kind of effect to produce magic in this case. In this way, magic unique to VR can be realized.

3 Functions using BoxTrigger

In both Demo_Map1 and Demo_Map2, there is a large picture book floating on the left side.

This picture book can be turned to the page in a pseudo manner by using BoxTrigger.

Let’s actually turn the pages. Do you see a box drawn with a thin red line? Touch it. You can turn the page. For example, if you make this box smaller, place it next to the picture, and pair it with the picture book, you can turn the page every time you touch it. Or, if used in a game, the box itself could be used as a switch for the gimmick.

To begin with, let me explain how to make it: place the BoxTrigger and the Pawn from the picture book in the space. Open the Level Blueprint. Now it is important to connect the two within the level blueprint: bind the BoxTrigger’s dispatcher to the Pawn’s custom event. For more information, open and look at Demo_Map1, Demo_Map2, and their respective level blueprints. You will see that these two are connected. Whenever these two are connected, they will move.

A picture book that allows you to turn pages one by one must be a Pawn, not an Actor’s. The reason why the Actor’s picture book is moving in the Demo is because the animation itself is assigned to it, not the animated blueprints. Therefore, Actor’s picture book stays in motion all the time, and you cannot control the motion.

In contrast, a picture book in which the pages can be turned one by one is made of Pawn and is moved by animated blueprints. The animation is a split version of the animation used in Actor’s picture book. The divided animations are animated by animated blueprints, which move in turn.

The animated blueprints are simple enough to be freely customized. The number of times the animations are switched should be adjusted when changing the number of pages in the picture book.

Also, this picture book is not made of one skeleton mesh, but 17 skeleton meshes. Each is in motion simultaneously; one is the outer cover. The other 16 are 16 pages. Originally it contains 16 pages, but it can be adjusted freely from one to 16. In that case, adjust the number of times the animation switches as described earlier.

To turn the page back, please set the animated blueprint in the reverse direction. Simply play back the part of the page that turns the page in reverse. When combined, the pages can be flipped back and forth.

B How to change the texture displayed on the pages of a picture book

We will also tell you how to change the texture that appears on the pages of the picture book to a different texture. Look at the materials assigned to the pages of each picture book, which have a set of nodes just like the RenderTarget material. Look at the TextureObject in it. By changing the object assigned to this node, you can change the texture displayed on the page.

Also, by changing the value connected to the TextureCropping node, you can change the position of the texture to be displayed. If you want to have the texture on the back of the page, on the left side of the page when the picture book is opened, change the value here from 0.15,0.52, 0.35,0.74 to, for example, 0.65,0.52, 0.85,074. If you want to display it on both sides, you can take advantage of this by rearranging the nodes.