Interactive Book Documentation

---

Introduction

The interactive book for Unreal Engine 4 is an in game book where you can create pages either through textures,widgets or a combination. You can interact with the book by picking up pages and adding them to your book, or read the book real time. You can create several books and pages to be used in your level.

The book uses a queue system to flip trough the pages of a book and it consists of two skeleton meshes, a book actor, a page actor, a capture actor, and animations and a fake pages mesh.

This document further explains the functionality of the book and how to create books, pages and materials so that you can create your own book for your game. The pages and cover requires your own skills to make textures and the only thing that comes with the book is a single cover material that can be color tinted, 12 textures that represents empty pages, cover textures and a lot of examples.

The book was created with first person view in mind, and the idea came from a horror game I was developing where I wanted to pick up pages and also have empty pages that I could interact with trough a widget. I wanted the player to be able to take down notes as they progressed in the game, by unlocking parts of a widget. It could either be a hint at a puzzle, an image or a part of the story that was unlocked as the player progressed. I later saw that Skyrim had something similar to this and I think this book would be a good addition to role playing games.

Enjoy
-TLS

---

Features

• Pages
  • Create pages
  • Pick up pages
  • Set to specific index
  • Set to specific book
• Book
  • Create books
  • Pick up books
  • Go to next/previous page
  • Instantly turn to page
  • Auto turn to page
  • Drop books
  • Hide/Show book
  • Physics
  • Set Book Size
  • Book stacking Actor
• Page Material
  • Alpha
  • Mirror Texture
  • Page texture template included
  • Page color tint
  • Tilable normal map
  • Tilable roughness map
• Page Widget
  • Widget support
  • Widget template included
  • Update Widgets Realtime
• Cover
  • Cover color tint
  • Cover texture template included
  • Cover color-id for Substance Painter
  • Cover static mesh for Substance Painter included
• Demo room
  • Character example
  • Books examples
  • Pages examples
  • Book Stacker examples
  • Widgets examples
  • Widgets interaction examples

---

BOOK

The book is the actor “BP_MasterBook” and when creating a new book you need to create a child of this actor. It uses a queue system to flip trough the pages and should have at least 5 pages to flip trough. There is no support for an empty book. The cover comes with a specific length and does not scale dynamically. I recommend having a max of 25 pages, once that limit is reached you can not pick up any more pages and put them into the book. To see examples of books go to /InteractiveBook/Examples/Books/

---

How to create a new book

The book is the actor “BP_MasterBook” that controls the pages attached to it. When you are flipping trough the pages you are telling the actor to control what page you put in a queue to be the next page to turn. It also does a lerp on the front cover to make it look and feel like a book.

To create a new book go to the /InteractiveBook/Blueprints folder in your project, there you will find the actor called “BP_MasterBook”. Create a child of that actor.

---

Adding pages to the book

Once the book has been created you can double click the child actor and you will see the “class defaults”. To add pages to the book simply go to the “Page” section and on the “Pages” array press the “+” button. Once a empty slot has appeared you can start assigning the page class you want to appear in the book.

---

Book blueprints

---

Cover Material

After assigning pages the next thing is to add a material to the cover. I have created a standard cover with a color tint that can be used. It was made in substance painter with a white page so it allowed for tinting. Feel free to use this or you can create your own cover in substance painter with the static meshes that comes with the project. It can be found in the material folder, and is called “MI_Cover”, duplicate this.

Assign the material to the Book actor in “Class Defaults”, under “Cover” there is a slot to assign Material called “Cover Material”.

Do you want to create your own texture or edit the current one you can use the textures that can be found in /InteractiveBook/Textures/Cover/

• Cover_Template
  • A template that shows you positions and where to place text for the cover
• Cover_Diffuse_White
  • A texture I made that can be tinted in the material. You can use this to add text upon etc, like I have done in several examples.

The Material instance contains different textures to add to the material. It also has a tintable option. Its a color that multiplies with the texture. Feel free to make your own material if necessary.

There is an Cover Template that you can use to put text and textures on your own cover. If you want to make your own texture for the cover I do recommend to use substance painter with the two meshes that was created for use in substance painter, they come with the project called “SM_CoverMesh_Static_Closed” and “SM_CoverMesh_Static_Open”. These two meshes was used to create the textures in Substance painter and can be used in Substance painter by you for the same purpose if you need to create a really cool unique cover. They can be found in /InteractiveBook/Mesh/StaticMesh/

---

Book “Class Defaults”

---

PAGES

The page is its own actors called “BP_MasterPage” and are attached to and controller by the book. They are commanded by the book to turn and stack when required to do so. They do not spawn in the book until the book is picked up. Pages has their own material that you can create textures for.

To see examples of different pages to to /InteractiveBook/Examples/Pages/

---

How to create a new page

The page is a separate actor from the book and is attached to the book once it is picked up. There is really only one blueprint in the page actor that is worth paying attention to, and that is the “PickUpPage” blueprint. It adds the page to a book.

To create a new page go to the /InteractiveBook/Blueprints folder in your project, there you will find the actor called “BP_MasterPage”. Create a child of that actor.

---

Page “Class Defaults”

---

Page Blueprints

There is really only one blueprint in the page actor you have to be concerned about and that is “PickUpPage”.

---

Page Textures

There are several ways of creating a textures for the pages. I do recommend using widgets only for pages that need interactions and rather use double textures for books that contain a lot of pages. An example of books with a lot contents would be the books they have in Skyrim

• Single texture.
  • This will be a single texture that is mirrored on both sides of the page. Front side and backside of the page. This is ideal if you want to use widgets on the page and only need a texture that is the look of the page. There are examples of this in the demo room.
• Double textures
  • This process you have to create two textures and this is the recommended way if you want to create text. An example would be to make the front of the page with text and texture on it, call it “Front Page”. Duplicate it, call it “Back Page”, then flip the texture and use that as your back texture. This is required if you have a very specific texture you want to show mirrored on the back side. There are examples of this in the demo room. This also is shown in the Front and Back Page templates that comes with the project in /InteractiveBook/Textures/Page
• Widget and single texture.
  • Recommended way of using widgets. Have only text or image be part of the widget, the texture of the page itself is only one mirrored texture. I do recommend using widgets as little as possible, they are mostly there if you are planning to interact with the content of the page. There are examples of this in the demo room.
• Have the textures and text in widgets.
  • I highly recommend not doing this in large numbers. Using the widget for many pages I do believe will cause performance issues and its just as easy as making them textures.

The templates for the front and back page shows you where to put your texture and text. The pages are saved out as a “png” with transparency.

Take note of the little area in the top right, these places must always be completely transparent even though your page has no masking. The page is created with several uv-channels and will not work correctly if this area is covered up.

---

Page Material

The pages use one material and several uv channels to achieve the combination between widgets, back and front texture and mirrored textures. For every page you create there should be a page material instance that follows with it. All you need to do is to duplicate the material instance “MI_Page”, and assign it to a page, it is located under :

/InteractiveBook/Materials/

---

Page Material Settings

After duplicating “MI_Page” you can edit the settings on your new material. Below you can find each setting and what it does.

After you have finished editing the settings and applied textures you are now ready to add the material to a page. Go into a created page and in the “class defaults” you can find “Page” and “PageMaterial”.

---

Widgets

The idea that you can use a widget to put on a page came from a game me and a friend of mine were making. It was a horror game where you could write puzzles hints along the way. The way it worked was that you could look at something and hit “E” and you would toggle a hide on a line of text or an image on a page in your book. I did not finalize this idea because I got to caught up in making the book itself work, but this very possible and I have made an example of this in the demo room.

You can also do this by swapping the textures on the page, though it would be forced to swap the textures in a specific order. With widgets you can toggle whatever element you want in what ever order you want.

Widgets might be costly, they create a render target texture at 1024×1024 (default) and needs to recapture the page every time you toggle something on them to show an update. They will not be captured until you play.

Examples of pages with widgets can be found at /InteractiveBook/Examples/Pages/

---

Create widgets

---

Assigning widgets to the page

Once your widget is created you can assign that widget to a page. Open a page and go to the “Class Defaults”, here you will find a category called “Widget Settings” and this is where you can assign it to either the front page or the back page. The slots are called “Widget Front” and “Widget Back”. Once the widget is assigned you can test it in your scene by dragging out the page and hitting play.

It is fine to have an empty slot, it will still work just as fine. The widgets are rendered on a separate UV-Channel and are rendered together. Once you hit play the widget will show up on the page.

---

Widget page settings

On the page actor you have several settings in the “Class Defaults” that are for the widget. These settings are applied before you capture the page onto a render target. The recommended settings is already set.

---

Widget Interaction

If you want to interact with a widget that is on a page you have to somehow cast to that widget that belongs to that specific page. I have made a couple of blueprints that helps out with that. In the demo character that is being provided you can see a good example of how to interact with a specific widget.

The first thing that needs to be done is to find the specific page you are looking for. This can be done with finding the book and then use the “GetPageWidget” blueprint. You need to know what index the page with the widget is on. If you don’t know what index the widget is on or the page will be picked up and added at a random number you can search for that page by using “FindPageClassIndex”, it will check if the page is in the book and return a index for you.

After you got the correct user widget, you need to cast to the widget that was made for that page, and then you can use what ever custom events or functions you have made for that widget. When done, you need to recapture the render target for the page again by using the “CapturePageWidget” function.

---

DEMO ROOM

The demo room was made so that the user has examples of how the blueprints are used. The room contains several books made for demo purposes, several pages to pick up and examples of how the books look with different number of pages in them. There is also a character that contains almost every blueprint you can use to demonstrate how everything works and how you can build your character. There has been added comments on everything and there is also comments on every tool tip on public variables.

One recent small feature I created was the ability to stack books, I used this actor to create the shelves with rows of books on them. I also created a text actor that is there to describe what you are seeing, the demo room is also available for download anybody who wants to try it out.

It can be downloaded here

---

The Example Level

A level has been added to the project, it is the same level as the demo you can download. Here you can find examples of pages, books and the book stacker. It is located at /InteractiveBook/Examples/

---

The Example Character

The example character is a character blueprint that is included with the marketplace asset, it is called “CH_InteractiveBook”. In here I have made a character that uses the books blueprints to do different actions. I have commented and tried to describe as best I can to make sure it is understandable for other users. The character can pick up books, read them with left/right mouse button, pick up pages, drop books, turn to page, instantly go to page and interact with pages that have widgets on them.

The character is located in /InteractiveBook/Examples/

---

The Example Books

There are a lot of books in the example level that is provided, some er just different variances and some are just there with empty pages. Others are using the bookstacker actor and other books are placed out manually.

• “Book_Example_Infobook
  • I made this book to have general information about “Interactive Book” as a book. Most pages are made with two textures and some pages are made with widgets and a single texture.
• “Book_Example_Empty_ 5-25
  • These books are made with empty pages, and use a single texture for both back and front side of the page. They were made to demonstrate how a book looks with the different amount of pages in them. A book with 25 pages is a lot of pages to read and this is were I set the limit.
• “Book_Example_Lorem_Volume 1-3”
  • These books were made to just give some variance and give more examples of full books with different text on different pages. Like a book that can be typically found in rpg like Skyrim and is used to fill out the history of the world you are in.

The example books are located at /InteractiveBook/Example/Books/

---

The Example Pages

The example level has plenty of pages made for demo purpose, I use most features in the example level and if you look at how they are put together it should be pretty clear how everything works.

The example pages are located at /InteractiveBook/Example/Pages/

• “Page_Example_InfoBook”
  • These pages in this folder are used using two textures with text/images, one texture for the front side of the page and one for the back side of the page.
• “Page_Example_Widgets”
  • These pages are made using a single texture that is mirrored and a widget. They are there to demonstrate how a page with a widget was created.
• “Pages_Example_Lorem”
  • These pages were made to demonstrate a set of pages in a book that has a lot of text/images. They were created with using two textures, one for the front side and one for the backside.
• “Pages_Example_Empty”
  • These pages were created just to make empty pages that use a single texture.

---

OTHER

Performance

I think the books and pages has a great performance, of course this is entirely dependent on how many books you are using and if you have the pages spawn method set to “SpawnOnPickUp” it will perform best. This allows all the pages to not show up until you trigger “PickUpBook”, they are instead replaced with a low poly fake mesh that represents the pages. In the demo level you can see that I have quite the selection of books. In fact, there is almost 300 of them.

As long as you don’t go crazy I do not think there is going to be an issue and also remember that when the pages spawn is a contributor to performance. You can read more about that in the “Book Settings” part of this documentation.

What you chose for resolution for textures for the covers and the pages is entirely up to you. I have chosen 1024×1024 for the pages and 2048×2048 for the covers. The minimum size for the render textures for the widgets is 1024×1024. You can also toggle off physics for better performance.

The demo runs everything on “Epic” setting I believe, and it uses your native resolution, you can try the demo out and look for yourself.

It can be downloaded here

---

Nativization

Nativization has been tested with the 4 main actors that are being used and it was packaged without any errors. The blueprints that has been tested are the ones in the list below. They were also used in the demo.

---

Anti-Aliasing

---

Tutorials

I have not at this time had the opportunity to make any tutorials, I do believe this document should be sufficient enough to cover how to create your own book and pages. I have recorded the process of creating books, pages and widgets. I have however not had enough time to record voice over and edit them together.

---

The Fake Pages Mesh

There is a low poly mesh that gives the illusion of the book having a lot of pages. The reason for this is simple, performance. That mesh however is being hidden depending on how you want your pages to spawn in. I have it set to “SpawnOnPickUp” as default as this is the most performance friendly. This means that when you pick up the book, it spawns the actual pages and hides away the low poly fake pages mesh. In the book settings you can change when the pages spawn in. See “Book Settings” to find out more.

There is also included a material instance for which you can tint in case your pages look another color than the one that is set up currently. You can set the material in the books “Class Defaults”

---

BookStacker Actor

BookStacker is an actor that was included to easily stack the books along shelves, it includes a bunch of settings on how to achive this. You can randomize the books, set the length, loop the books, set size and random size. Drag the actor into the scene and start adding books to it.

The settings for Bookstacker

---

Substance Painter Mesh

There is two meshes included that are there to help you create your own textures for the cover. There is one that is open and one that is closed. I used the one that is closed for the baking of the mesh and the one the one that is open to texture in substance painter. I have also included a Color-ID for usage in substance painter so you can easily pick out the important parts and use it as masks.

The two meshes is located under /InteractiveBook/Mesh/StaticMesh/
The color-id is located under /InteractiveBook/Textures/Cover/

---

Change Collision

The advantage of using your own collision presets is that it would be easier trace for the books and pages. There is two main collisions you have to be concerned about, they are currently set to be WorldDynamic and WorldStatic.

---

Conclusion

Oh boy, it has been a long time in the making and scratching together all the spare time I could the last couple of weeks to really finish up this project has been intense, but enjoyable. I like the idea of having a more interactive book that is a mesh, a book you can communicate with, rater than the usual canvas books. This project has been great fun and I have learned a lot. I do hope somebody finds this useful and who knows, maybe I will see it in a game some day. You never know..

I will keep this up to date and I will try to add more features depending on feedback..

-TLS