If we’re working without plugins, two common ways to have books is to either have a wall of scrolling text (which can be hard for some of our players to read) or multiple message boxes in a row, like so:

...Which really doesn’t work well if our books have a lot to say. Instead, why don’t we try something different and use pictures to display our books? By using images we can fit many more words onto the screen, without our players having to rush to read them all, and we can even have it look fancy while we’re at it! So let’s learn at how to make a basic picture-based book.

Setting up a Picture Book

For our first example, let’s make a short picture book. Before we can do any eventing, we need to make sure we add our book’s pages to our projects ‘pictures’ folder. After all, we can’t show the book if the images don’t exist!

Now that our three pages are in the right place, we can start working on our event. We’ll only need three event commands to really make this work: Show Picture, Show Text, and Erase Picture. Picking the position for our pictures depends on our game’s screen size, but if we want it centered on the screen we just need to pick ‘Center’ for the pictures origin and input half our screen’s width and height values into the X and Y section of direction destination to have it appear in the middle of the screen. So since this example project’s screen width is 1104 and screen height is 624, our X is 552 and Y is 312.

Once we’ve decided on the placement of our picture, the only thing that will change in our event’s other show picture commands is the image we’re calling. But before we copy and paste our command for each page of our book, we might as well make the text command so we can copy that as well. It’ll simply be an empty message box set to have a transparent background, so that the book’s page will stay on the screen until the player clicks to change the page. With those two commands ready and working, we can just copy and paste them and change the show picture’s image until we’ve shown each page image.

When we’ve reached the last picture and want to close the book, all we need to do is erase the picture. If we forget to do that then the player will be stuck with the page’s image plastered over their view, making it very hard to actually play the game. So we want to take that extra second while eventing to make sure we remove the picture once the book is done being read.

And with the picture removed, our picture book event is finished! Now our players can flip through the book as quickly or as slowly as they wish.

A small but nice addition to the event is to add some sound effects when the picture is changed so the player feels like a page is really being turned. It’s not necessary to make the event work, but paying attention to little details like sounds can make our player’s gaming experience more enjoyable.

This setup works fine for books, but what if we wanted to let our players flip the pages themselves and go back a page if they felt like it? Then we’ll need to approach the eventing from a different direction.

Giving Page Control to the Players

To let our players change the book’s page when they want, we’ll need to check when the left and right arrow keys are being pressed. Luckily we’ve covered something similar in a previous tutorial (Eventing a Push/Pull System), so we can use our knowledge of loops and conditional branches from that to make our book’s event.

First thing our even needs is the variable and picture setup. We’ll be using variables to keep track of which page our player should be on, so let’s set two variables to 1 for the book’s first page. Again we’ll use the show picture command to display our page, but this time we’ll also include another picture that explains the controls to the player so that they aren’t confused. We could include the instructions on the book’s page itself, but in this case I’m using the instructions for multiple events so it’s easiest to have them separate. A sound effect and a short wait to make sure everything’s ready before the loop begins and our setup is complete.

The next part of the event is all inside the loop, so it will repeat until the player wants it to stop. Two conditional branches check if the left or right buttons are being pushed, with our first variable being changed if one of the buttons is being pushed (we could set the branches to ‘is being triggered’ if we don’t want the player to be able to flip through the whole book without lifting their finger). To help keep track of things, let’s make sure our variable amount matches the page number it should turn to, so when the variable equals 1 we’re on page 1 and if the variable is 3 then it’s page 3. So pushing the left arrow key will decrease the variable by 1 and pushing right increases it by 1. Since we don’t want the player to be stuck reading the book forever, we’ll also include a conditional branch to see if ‘cancel’ is being triggered and if so, then the loop is broken.

Now, there’s an issue if we let the variable increase or decrease freely: what happens if we go beyond the number of pages? The pages wouldn’t display properly! So to combat that issue, let’s add two conditional branches that will reset our variable to an actual page number. So if by pushing ‘left’ the variable becomes 0, one of the branches will set it back to 1, and the same thing happens for the last page of the book.

We could nest these conditional branches into the button pressing ones, but sometimes it’s easier to read the event when it’s more separated.

With the button pushes processed, we can move onto the next part in the loop, where the picture is changed. This is also where our second variable we set up comes into play. We don’t need the picture to keep updating if the player didn’t push a button, and we really don’t want the page-turning sound effect to play over and over again even if we’re at the end of the book, so let’s put the sounds and show picture commands into a conditional branch that checks if our first variable is different than our second variable. If it is, then that means the player turned the page so we need to display the right page.

Since we decided earlier to match our first variable to the page number, we can set up a conditional branch for each page to show the right picture, with a short wait so that the player doesn’t skip over pages without realizing they were there.

Once that’s all taken care of, we need to set our second variable to match our first one, so that our event will skip over this section if the player doesn’t touch the buttons again. And that’s it for inside our event’s loop!

The end of our event is a straightforward clean-up, so we’ll erase the pictures we used and set our variables to 0 so they can be used for other things if we want. Since we are using the ‘cancel’ button to break the loop and ‘cancel’ also opens the menu, we also want to include a short wait at the end of the event so that our project doesn’t try to open the menu when our player just wanted to close the book.

When it’s all put together, we end up with an event that looks like this:

And that event gives more control of the book to our player!

Using Variables or Switches to Make a Journal

Before we wrap this tutorial up, let’s take a quick look at how we could make a book event that changes as the game’s story progresses. In this example we’re making a normal event, but we could easily turn this into a common event that’s called by an item.

Like our other books, the first thing we need to do is add our images to the ‘pictures’ folder. In this case our book’s background will be separate from the book’s words, so that we can add them as needed.

For this updating book, we’ll be making a journal that adds a new entry after major plot points. Either switches or variables would work, but in this example we’ll be using a variable. So during important cutscenes elsewhere in the game, our plot variable will increase and that will be checked during our journal event with conditional branches. Our conditional branches will check if the variable is equal or more than certain amounts, and if so will have a show picture command that adds in the right journal entry. We need to use the ‘equal or more than’ option when comparing the variable because if we only used the ‘equal’ option then our journal would only have one entry appear at a time. And while that could work for a quest journal (or if our journal entries all showed in each image instead of each being a separate image), we want to keep track of all the main story points so our players can be reminded of what’s happened so far.

This example only has one page, but we could easily expand it using what we learned earlier to create an epic multi-page journal.

When we test it in-game, we can see each entry appear as the plot variable increases:

Using switches and variables to control what appears in the book gives us a lot of freedom to create all sorts of interesting books, such as a bestiary that is updated when you meet a new foe.

Now that you know how to make a book using pictures, what would you use it to make for your games?

‍