Scrolling through documents

Some adventure games, such as Syberia and Realms Of The Haunting, allow the player to pick up and read documents that offer clues. Since these documents are often larger than the screen, the player can drag the document as they read each portion.

This effect is possible in Adventure Creator by making use of the Drag menu element. In this tutorial, we'll be using it to view a page from the Domesday book, because why not?

Note: This tutorial relies AC's internal Menu rendering mode. When using Unity UI, a ScrollRect component can be used, with no need to configure elements in the Menu Manager.

In the Menu Manager, create a new menu and name it Document. For demonstration purposes, we'll make it active during regular gameplay, so set it's Appear type to During gameplay.

Set it's Size to Manual, and increase it's Width and Height values such that it covers a sizeable portion of the Game window:

If you don't see the yellow outlines appear in the Game window, be sure to click Organise room objects in the Scene Manager, and ensure Test in Game Window? is ticked at the top of the Menu Manager.

Next, we'll add the document in as a Label texture. From the list of available elements, choose Label and then Add new.

Rename the Label to Page, clear the Label text field, and assign the document you wish to display as the Background texture.

Set the Label's Position to Relative To Menu Size, and reduce both the X and Y values to zero, so that the texture appears in the menu's upper-left corner. Next, set it's Size to Manual, and adjust the Width and Height values such that the texture is as wide as the menu, but it's lower half goes beyond the menu's boundary:

We'll need to create a Drag element, which will define the boundary that the Page label can be moved within. Choose an Element type of Drag, and click Add new to create it.

As with the Label, clear the Button text field, and set it's Position to Relative To Menu Size. Set the Size to Manual, and resize the element such that it covers the same borders as the menu.

We'll want to drag just the Page label, so set the Drag type to Single Element, and enter the name Page into the Element name field.

We now need to define the exact boundary that the Page label can be dragged. By default, the boundary will be visible in the top-left corner. Increase the width (W) to match that of the Page label. Reduce the y-position (Y) so that it extends above the page by the same amount that the page extends beneath the menu. Then increase the height (H) so that it covers the entire Page label. You may need to test and iterate to find the best values.

When complete, run the game and you'll be able to click anywhere on the visible portion of the document, and drag upwards to view the rest of it.

Adventure Creator and this website are copyright Chris Burton, ICEBOX Studios

Go to top
Do NOT follow this link or you will be banned from the site!