1.

Introduction
2. SBC Component Features
3. Installation
4. User Interface
5. storyBook creator tools

- pageManager (master)
- page
- object
- simpleUVanim
- menu creator
- subtitle editor
- Audion
- Raycaster
helper components

- checkMouse
- planeProportion
- overlaus
6. Scene hierarchy and organisation
7. Interactive object trigger commands

Contents
link to NOW blog: Wordpress
email to author: DarMar or link to LinkedIn
CONTACT info:
for viewing of SBC videos and tutorials you can also visit youtube channel:
demo video:
https://www.youtube.com/watch?v=5ohKLvBsWhs
tutorials:
https://www.youtube.com/playlist?list=PLwDwWf2Odp70TqTZkgFaXFhu5SAG6rm-8
FOREWORD
First, thank you for purchasing storyBook creator (SBC) tools for UNITY, this tools purpose is to ease creation of
interactive presentations such as storyBooks, video presentations, hidden object games or some simple interac-
tive animations. While developing took some time and many rewrites and type of workfow, some changes are
also made. And SBC is intended to grow, and we continue to develop many of its features. First release will be ba-
sic version, and many modules are in this moment in develop, some are even done but need better integration so
expect them soon. All future upgrades and releases are free after tool is initialy purchased. First version of release
will have all tools necessary to create all numbered features. In future releases we planned that we integrate in
app purchasing and upgrading tools and components that will enable managing all with ease.
MORE ABOUT
Its main goal is to automate a lot of processes, shorten scripting needs and organize multiple storybooks with
ease. Basical workfow is that one Unity scene is used as one book. In root of scene is empty gameObject with
main script attached to it. It is master controller of storyBook we are working on. All objects that we will need
in interactive app we creating are created through this inspector. On frst creation it will ask for a story name
and number of pages. When all set, it creates gameObjects as childs of pageManager, every that child object is
representation of a single page in book we are creating. All elements we use on that page should be child of that
page. In that way we can very easily and efective navigate needed pages in page manager. To enter page we
want to edit, we simply click yellow edit button in page navigator described better below, and we enter page we
want to edit. Here we can add backgrounds, foregrounds, animate them or their UVs, or what ever we plan to do.
To for example better edit object in object tab we have again yellow button named edit which will take us again
deeper in hierarchy and we can manage our object with more options and controls. To go back to page manager
or change an edit page, just follow named yellow buttons. SBC is made that way every colored state of button
or label means something. So yellow buttons in inspector are used to jump from object or script components
without need of clicking objects in Hierarchy Unity view. Main advantage of tool is possibility to play animation
sequences on 3Dplanes or objects in a very special way. For example we have animation of lion that stands, than
sits for a second, than scratches its head and we can have as many states we desire. And after having that we can
choose a play sequences order and random loop in that case makes animation with 4 sequences every time we
play diferent. So by now you probably get it that SBC is strongly hierarchical dependent tool, and it is strongly
reccomended to NOT manually delete any object created by SBC, but rather through SBCs inspector editor on a
place where is created in frst time.
Please do note that storyBook is not intended to be animation tool nor drawing one. User should have images
prepared in his favourite image editing app and animation sequences exported from favourite compositing/mo-
tion app. SBC is more like alot of automation and managing tools which makes creative process easier to manipu-
late for non coder and more artist types.
Whole toolset acts in semi wizard creation way. Something like imagine wizard method with possibility to jump
back and forwards to setup certain things.
This manual will try to act in similar way, leading you from start process of creation through hierarchy of every
component, explain usage and meaning behind all.
For further understanding or more visual how tos, additional video tutorials should be on our blog at the time of
release this tool on Unitys Asset Store.
Expect that this tool will be updated and upgraded, our main intent is to make it easy and powerfull. For any
requirements, needs of implementation, please do contact us.
Thank you again for support and watch for updates
Yours,
NOW team
Introduction
- pageManager:
- camera options, all needed camera options easily accessible in one place in pageManager
- easily set basic story rules such as page transition, play from, where to go ater this book..
- easily add, manage, edit and set subtitles in multiple languages, live edit in editor,
changeable during runtime
- total controll over audio management, adding multiple speech languages with ease, changeable during runtime.
- languages, music per page and overall sound FX with ease, fade between scenes.
- volume control for every separate audiofle, main volume and master in one place,
made easy to mix audio
- uber easy page navigation and component jumping method of editing.

- page:
-create 3d depth background plane which keeps its size automatically and proportionaly to screen
- easily animate UVs in any direction with ease (for moving backgrounds), fip x, y, resize and depth
- create foreground ojects represented as object layers (similar in Photoshop fashion), with easy
accesibility to its visibility, UV animation, fip order, depth and scale, all easily manageable
- create interactive objectts in same fashion as foreground layers (with some diferences between them)*
- manage all objects properties in layered fashion view with multiple objects in one space, without no need
to change between actual objects while editing its position, size, scale, visibility and depth
- easy edit object script navigation for more in depth object settings.
- object:
- plays animation sequences as texture with alpha channel
- multiple states of animation such as main loop, interactive loop and trigger loops
- easily make object afect world or do something in given frame or when clicked.. (chain reactions)
- every animation state is made of short sub states, for example if main state is idle, sub state would be head
scratching, leg moving and hand raising, which could be played in multiple orders
and most important, randomly
- attach sound fx as loops or as events triggered on frames, for whole main loop or for every sub loop
- visual RT feedback in editor and UNITY game and scene window
- visual info pannels for inspecting and debugging of animation sequences window
- set begaviour such as framerate, clickable or alpha dependant**
- track how many times animation loop is played and do something after certain number of loops
- every animation object can haz events in certain timeframe, it can trigger other or self animations, send
messages, debugging...
- simpleUVanim:
- create UV animations with few clicks in all directions, x, y, z and x+y diagonal options
- animation speed and ofset set easy
- simple use animation button to switch animation on/of w live feedback
- Audion
- a master book audio player that plays speech, music and background efects with all volume sliders and
options in one place which makes sound fnalizing a lot easier and a master level
- set pause between changing scenes
- in editor inspect and debug
- Raycaster
- simple component attached to camera that casts rays in objects we click on screen
- easy switch between mouse/touch interface or use em both at same time.
- can check if we clicked in alpha channel of texture to make click collision alpha dependant
- subtitle editor:
- with most ease create or import subtitles to edit in various languages
- saves subtitles in custom format similar to .xml
- subtutle properties fo story name, language, pages, rect positions on screen depending on language and
page
- dragn drop created languages in pageManager and set which is default, and easily switch between
* note that background layer will always keep proportions, it may be used or not. Foreground object can keep proportion or not, depends on settings, while
interactive object will keep its proportions we set no matter of resizing screen proportion.
SBC Component Features
Installation
When downloaded from Unitys Asset Store and imported into Unity, storyBook is pretty much installed. Imortant is to keep prefab folder in Re-
sources, not delete created material folder for story book that we plan to use. To avoid errors ALL Editor scripts and subfolders shoud be as is. The
best practice would be that imported storyBook stays in _storyBook folder as is. and Resources folder sitting in Assets root.
Also additional tags should be created if they are not present in Unity editor by default. SBC uses them so they need to be set.
Tags that needs to be added are:
- main
- page
- interactive
- foreground
- background
User Interface
SBC user interface is pretty straight forward, all main components are located in UNITYs editor inspector. To navigate
child and parent objects there is way through attached components. For example if we are in page manager and we
simply want to fast change scene, we drag slider in page navigator (white marked part on image) and we make page
objects visible unvisible. To edit current page we simply hit yellow edit button. Below pageManager is Audion compo-
nent attached. Even we set all our sounds in AUDIO OPTIONS part of pageManager, in Audion there are volume sliders
made to easier mix sound levels. To START using storyBook we choose from Unity fle toolbar Components/storyBook/
NEW storyBook...
In green box is classical hierarchy view and how our scene looks like. If you are familiar with UNITY than you could
reckognize advantage of hierarchical scene management. Even if we an select our objects in hierarchy our SBC tool
is made that way we can fast jump to edit any object we want in no time. You may wonder at frst, why that way but in
past SBC was node based editor and this way was so much more efcent and more native that we currently disposed
node editor for sake of investing time in more helpful elements.
So how does it works?
Imagine hierarchy view as layers (picture to the right)
With every object edit options needed completely exposed,
so you can edit multiple options without need to jump to any of
them separately. Also as you can see we can attach animation to
our UV map. And all options are accesible. Yellow e button would
navigate us to edit UV animate options. Green u stands for use
animation, if green animation plays. Small red button deataches
animation component. Animation is simple animation UV script
component, if we want to use animation we attach it to our object.
In that way if we wont use animation we wont have that script on
our object at all.
An EDIT
As we already probably know,
yellow button would navigate us deeper into object.
Where we would meet OBJECT script component to setup our
animation frames and interactive options. Eyes on all layers are
classics visibility toggle scheme.
Every important component has little debug button on top right part, if click
selected=green. Object will debug all that it does to console.
This is main controll of pages, scenes, subtitles, audio languages, music and
play rules and defaults. First option is to edit some camera basic options.
pageManager
Actually here we can
decide between two basic
workfows. A ortographic
or perspective view. Set its
size and cameras depth
(transform.z)
In STORY RULES we can set various playout options.
play from frst page:
If we edit our storyBook and we are on 5th page and we wanna hit play to see changes, usually we
wont start from frst page but that one we edit.
play audion on start:
do we automaticaly play audio readout and music on start?
audio changes page:
option to change page when current audio is fnished playing for page
use unity GUI nav:
option to use OnGUI method to display buttons for page navigation.
Below that option we can apply any skin and it will be used for display.
page transition:
only two options for now, but page transition option, more transition will be added later. For now it
is fade out or just jump to page.
also below is transition speed.
frst foat is speed of fading and secon for how much time we change scene when we fading. The
lower speed, the bigger time we need to make nice looking transitions.
after done:
here you type scene name to load after we reach and pass our last page or story. If name of current
edit story is entered , story will start again. if you have menu called mainMenu, just enter its name
here and after playout that scene will be loaded.
allow manual page change:
this will enable or disable manual page change. This is mostly used if we make some game where
certain conditions need to be done before we are able to change scene.
SUBTITLE OPTIONS:
use subtitles:
Here we can set do we use subtitles at all
live edit:
if enabled we can set all our rect positions, sizes according to pages. every page can have subtitle
box at diferent position and at diferent size.
add language:
adds a new language into our story
In language box you can see languages id, default button, when green, that language is set as
default. Right of it is TextInput, it is used for language name. it may or may not be entered manually.
Next to it is empty TextAsset object feld. Here we should drag our created subtitle .xml or .txt. When
we do that, we can notice our grey arrow button on left of it. When we click on it it will automaticaly
set name acordingly to subtitle fle, and load subtitle. NOTE: if you drag subtitle in TextAsset box and
dont apply that gray arrow button, subtitle will not be loaded and shown in story.
Last button is orange X, which will delete that subtitle from array List.
If you have live edit turn on, than subtitle Rect options will be shown for setting x and y position,
width and height. Right of it there are two buttons.
frst, pages in this language.. If we want all subtitles on same position on screen, we need to set it
on only one page and click that button. It will apply settings to all page positions. Button bellow
basicaly does the same but for all languages loaded.
AUDIO OPTIONS:
here is a bit similar interface as subtitles one. On grey Add button we add new language. When lan-
guage is created on right of it is array of empty AudioClip boxes. Each one is for one page. So if we
have 6 pages and we create a new language a place for 6 audio clips will appear. They will be played
accordingly to page we navigate to. We can also set their levels separate here, for ever page itself.
below all of that we can enable back audio option, whichever sound we put here it will not change
when we change our page. This could be some overall ambient sound or whatever should stay all
scenes there as ambient. Now here is neat trick. If we in languages section of audio options add
language and we name that language as music (as represented in picture), engine will automati-
cally reckognize it as a music channel. In that way no matter which language we choose, the music
will always be played. In that way we can have few audios playing that are changed when page
changes.
Although you can set here audio levels for every clip, we can look at those level setting as Input
audio level. To mix audio levels further (in more grouped manner) we have below pageManager
audion component attached.
MASTER volume:
is master level of all levels below, if it is set to 0, none audio is going out
Rest of channels separated are pretty explanatory for it self. Speech wil controll master volume of all
audios set in laguage array, and page music same as background music.
It is set that way in AUDIO OPTIONS we can set audio levels as Input levels, and in audio is output
level mix of it all.
pause between dialogs:
here we can set pause of audio between changing pages. If we use fade out option, perhaps it is
better to play audio few secs later.
fade in between changes:
if enabled our audio level of speech and music will fade in between page changing.
pageManager
page navigator:
A neat feature of pageManager that we shouldnt forget about is page navigator
A quick navigation slider that will enable/disable edit page we want to edit by dragging. When we
want edit selected page, we simply click yellow edit button.
page
When we hit that edit button descripted above, we will fnd ourselves here in DM_page component.
This component represents our current edit page. At the very top there are nav buttons to go on
previous or nex page or jump back to pageManager and scrub some scenes there.
There are three main stages of page to edit, background, foreground and interactive object.
Background object is created by default. In diference from others it will always keep 3D plane size in
proportion to resolution size.
BACKGROUND:
To attach an image to background plane, we simply drag wanted image from resources into empty
box and hit assign button. below image box there is material option, where we can choose material
we want to be assigned at this plane. There is also fip X and Y option to quick fip image if needed.
On right of it we can set UV animation options. When animate UV is set on, we can choose in which
direction we will animate, and speed of it. ofset written there is only to inspect if animation is
playing. In yellow box more below are plane position options. Since it is background type as we said
earlier it will maintain aspect ratio of game screen. But here we can set depth of layer, which is actu-
ally z transform in 3D scene view. Re-size option will uniform scale image. Number in box represents
percents of plane size. If set to 100, plane will always fll the screen, although best practice is to put it
atleast to 103% so image have something like print bleed margin or something like safe areas.
NOTE: plane size will also automatically change in editor as we change our game view window size.
Best practice is to set resolution to work with in game screen so we make shure everything is in
place.
FOREGROUND:
Foreground objects are similar to background ones with few diferences. We can for example turn
of/on keep screen proportion (which would be advisable for some items like trees or houses). It has
also similar depth and size settings as background. Diference is in how we set foreground layers
animation. We rather attach it as separate component and if we want to edit it just follow yellow e
button. When we hit that button we see similar options as in background in image below. Again to
return back to PAGE, just hit center yellow ^PAGE^ button
To Add FOREGROUND layer, click grey button
And if you want to delete it, click red x on that laer box,
NOTE: if you dont want errors do not delete layers you created here in hierarchy view.
INTERACTIVE:
In same manner as described for foreground layers we can with Add button create an interactive
object for current page. Interactive object doesnt have UV animation options, it has act to be static
or animated object. Animations in these interactive objects are imge sequences which can be edited
on yellow :EDIT: button. Here we also see X and Y position of our object, its scale dept and size. Size
will resize object uniformely while scale stretch/squashes object.
With eye icon we can set visibility of layer while editing or playmode.
It goes same as for everything. IF you created any object via SBCs pageManager or page do delete it
there rather than mannualy in scene view.
This is because behind this UI hull SBC keeps track of everything in arrays. So any updates, fast
changes to scene are dones within few clicks. To be able to do that, pretty hich organisation is
needed.
Adding Interactive object is a bit diferent than adding foregrounds.
When we click add, it will ask us name of that object. If we want animated bird, we would name it
bird and hit SETUP. Note that setup button is red and we are unnable to create object without name.
When name is set, SETUP button will turn green and we can set our object now. After hitting it we
will end in DM_object component edit mode. Which is described on next page.
interactiveObject
IF we on previous page enterd to EDIT interactive object, we would immediately jump to this script
component. This is our interactive object.
Here we have input arrays for two basic loops, main loop and interactive one.
Main loop is animation that plays by default all the time if set to play mode, and interactive one is
played only when object is clicked or interacted with.
We can feed into those loops multiple sequences by hitting + button in loop section. If we want
static object (not animated lets say until clicked) we dont load animation, but simply drag in texture
box single image and thats it. If you wand load sequences from folder, you should navigate in
Unitys project, probably Resources, and drag only one image from sequence into box, after doing
that you will immediately see that our object is set and it has frames: 1. To load all sequences from
folder simply hit :Load: button on right and wait for half a sec. After loaded sequence, you shoud see
array list of images used to play that sequence as you can see in right image in loop 1 section.
If image does not appear on plane immediately, click refresh button at top.
You can see on right image also that loop layers have buttons L and P at top.
L - means that we see images list like on loop1 case. If L button is grey, we can see additional loop
layer options. Here we can set an event to be triggered at certain frame of loop. And we can do that
for every loop separately.
In trigger section we can set trigger options, there is a drop down list with couple of options:
None:
- does nothing...
Trigger Other:
- trigger given objects interactive or main animation loop on.
Send Message:
- this will send message to selected object at given time. Messages are basically functions and every
function does something else. If we want to hide or show some other object when we click this
one, task is easy. Simply drag that object to onObject box, and in msg section you write
command as mesage, something like: HideObject or ShowObject or PlayMain. all possible
combinations and messages will be described later on more detailed.
Message (comment):
- Similar to previous one but with one option more. As you can see on right image in loop 0 box.
we get blue button on right and input box. That means that we can send messages with
arguments. Like msg: DoDamage , int: 10 would damage other object for 10 points or similar.
Likewise yellow buttons do navigate through SBC, cyan ones like onFrame and id one on picture
means that by clicking on it we can change its options. So we can choose when we send
message which type is comment: id, int, foat or string. When ID is selected object will send its id
as comment, that could be usefull to register object in certain situations as hidden object game for
example, we can register clicked object as discovered and add 100 points.
Animation Start:
- This could trigger Unitys animation to play. If we want to trigger specifc animation we as before
drag desired object we want to afect and set name of animation. In this way we can use Unitys
native animation system in combination with sequence loops (ideal for bird fy or running duck).
You can open Unitys Animation editor by pressing ctrl+6, or from menu Window/Animation
DebugLog:
- It will only print desired message in Unitys console (works as classical Debug.Log)
Useful for fnetuning, inspecting or debugging options.
As we mentioned before. Any loop main or interactive can have few sub loops. Advantage of this
method is if we have 4 or fve sub animations and in play mode we set to Random Loop, our main
animation will jump between sequences in random order, thats perfect if we want to achieve that
evey time someone opens story book, characters behave more randomly. It gives ceratin efects.
Also we can set play mode to Loop 123, that will always play loops in order mode. And we have also
Play once option. Which will go through every loop once and stop on end.
And on right of that we can choose audio options. If audio mode separate is selected, we will play
sound for every sub clip of main loop separately. if one for all, only one audio loop is used for all
animation sub loops.
In every loop box we have P button at top which when pressed turns green and activates our
animation preview options. Here we are presented with a slider which when dragged we see anima-
tion preview on that frame.
Akso notice that frst sub-loop (loop0) of main loop is green colored. When you hit play in game
mode, SBC will color green box of sequence that is currently playing. If we want to inspect for
example how random works we can click on that arrow button ocated right of + one. And we will
get view like one below on picture.
In this view we can track and inspect how our animation sequences are played. Green colored one is
the one currently played. To return back to old view simply click now colore cyan arrow button.
INFO panel only inspects and we can see various play info when in game play mode. Whn is object
clicked, on which animation we are currently, how much time and so on. There is also played times
counter and below that is play percentage bar, which shows percentage of currently played clip.
BEHAVIOUR:
- fps option should be pretty explanatory. Here we set our framerate of animation sequenes.
- autoplay is set on when entering play mode, animation sequences automatically starts
- is clickable means is our object interactive?
- hide on start. Nowm sometimes we want start game or story with certain objects hidden and later
we want to show them at some time or when some object triggers it. We should set here hide on
start rather than disabling eye icon on page before.
- alpha dependant is used when we have our image plane too large and actual drawing of actor is
smaller and we want to make shure we clicked exactly that image object. We should be aware that
for using this option we should set all images we use here as sequence loops to read/write enabled.
Best practice for setting that is to set images read/write enabled while imporing them into Unity.
If those are not set error will be thrown and it wont work correctly. But you can always select those
multiple images later in project window in Unity and set option to Advanced then enable read/write
option.
subtitleEditor
SUBTITLE EDITOR is editor separated from Inspector view toolset. It is started from Unitys menu Component/storyBook/subtitle editor
Here we deal with subtitle language fles used in book play.
To create subtitle, you should give it storyname, language name, number of pages (even if we dont plan to use subtitles on every page we should set same number for pages here as in pageManag-
er). After basic data is set we hit > button and it creates array of text areas. For every page one subtitle. Here we can write our subtitles or copy paste them from text editor. When we are done we hit
green save button and Save fle dialog will open asking you where to save fle. Files can be saved as .xml or .txt fle. Currently there is no real diference nor advantage one over other which is planned
to be dealt with later with addin more subtitle formats such as .sub wit timing interpretation. We dont set our subtitle position and size options here as it has no much sense. We rather set those later
in pageManager while previewing those in game window in realtime.
Subtitles are best kept somewhere in resources folder / storyname / subtitles. So when save dialog pops up, consider Resources folder to keep those fles.
Actually all used images, audio fles and even subtitles are best kept in Resources folder, but on project hierarchy we will talk a bit later.
In subtitle editor there is also description TextArea input. We can set here
description of story. And that can be used in menu (multiple language story
descriptions).
After we saved our language subtitle fles we can simply drag them in page
manager subtitles section.
After loading our subtitle fle onto that section, we press grey button on left,
and if on left appears our given name of subtitle all is loaded correctly and it is
set for acttion.
To further edit those inputed subtitles we simply jump from page to page and
set its rect options with live feedback in game view.
helperScript components
Occasionally while working with SBC you will meet those helper scripts. They diferate from others that they are not controled from place where they are attached but rather pageManager or page editor.
One of such scripts is planeProportion. We feed information in it through PAGE script. remember those foreground and background keep proportions options we talked before?
Well even if i mentioned that background option always keep its proportions
It really doesnt need to be so. If we get to its plane proportion component,
we can tick of keep screensize proportions and proportions wont change with
screen resolution
Every background and foreground object as this automatically applied.
Even if not natively set so and maybe even not reccomended, in certain situa-
tions we can attach planeProportion component to our intractive object.
This script simply forces objct to which is attached to to maintain same propor-
tions as screen one.
RAYCASTER:
Is also one of helper components. It is always attached to Main camera. If it is
not attached to main camera, our interactive object wont work. Main task of
this script is to cast a ray in direction where we clicked with mouse on screen or
touched on pad or mobile phone. Ray will check if object is interactive, check
if object option is set to use alpha and if all dependancies met will trigger
interactive object.
Other thing needed in order for Raycaster to work propperly is DM_checkMouse
script which is attached to interactive object. Which actually triggers object and
does specifc tasks on order.
Also among these scripts are found:
- overlaus: its main task is to add black overlay when fading between scenes
is set. At the moment pretty basic script, but planned to grow into module with
multiple transition modes to choose from.
scene hierarchy and organisation
In sample story provided with SBC can be seen how organisation is planned
and kept in Project view. On image on right is example of such hierarchy.
Basic idea is to keep all in resources, so when you edit those fles for some
reason, they are automatically updated in SBC.
First folder we see on picture is Material folder. In there all created materials
will be kept. For propper usage that folder needs to be present ther. If it is
not, creation of material for that object will fail. If thats the case (accidentaly
removed that folder). You can always go into resources folder and create
Material folder in there with capital M.
prefabs is second visible folder on image. here are all prefabs needed for SBC
to function properly.
To avoid undesirable efect if you do not exactly what you are doing, please
do not change prefab properties. Some familiarity about how SBC works
should be acquired before. But changing those can automate other tasks,
and set diferent object modes and such. Undesirable change in prefab will
result in error probbably.
next folder below prefabs is called price (means story on Croatian),
now this is folder where we can keep our stories. lisica i vrana (means fox
and crow) is name of our story. for sub folders there are anim, where anima-
tion sequence images are kept, subfoldered by page number. same goes for
enviro, which stands for enviroment (back, foreground, house, tree).
And there should be sound and subtitles folder.
This is good practice to keep hierarchy of project, it is clean and folder
dependant. There is option which is still in dev phase but could setup whole
story book only from given folder hierarchy. And it will be implemented in
future releases. So keep that in mind because creating that way couldnt be
easier.
Also stories kept this way are easier to upgrade, add, or remove. In short
term manage all of that.
Other important aspect of keeping clean is keeping scene hierarchy clean
as much as possible, similar to image below. In that image we can see root
and top game object is named default. His childs are page_0, page_1 and
page_2. Object we want present and enabled when we are on that page
shoul be child of page_x game object. There is possibility to put any 3d ob-
ject, 3d text, light or whatever as a child of page object. As long that custom
inserted object is child of page_ object it will be enabled/disabled propperly
while changing pages.
In bottom part of image we can see how our scene looks in 3D scene view.
Good practice would be to move, scale or reorder
3D layers more through SBCs page manager than
transforms separately. Interactive objects can be
freely dragged arround and setupped in 3D view,
while again managing it through layers in editor
makes easier to manage multiple instances at
once. Background and foreground position and
size are calculated through planeProportion script
so moving it in 3D scene view could give weird
results. But not necesarly.
You can freely add anything you like in the scene
and drag into parenting to pages or objects. Their
references are anyways kept in array lists nder the
hub.
When we end all needed setups our saved scene
is one happy new storyBook created :)
We can than create menu with list of created
stories and activate them from there. Depending
on if they are on list, separately downloaded or
separately purchased.
interactiveObject trigger commands
In our interactive objects we have possibility to send messages to other
game objects in scene. That could be any function you got on any of custom
created object or script. It is easy extensible in this way. Currently most of
SBC components have predefned functions. So for example if we send to
pageManager simple message ChangePageForwards on that event we will
advance to next page. Or many more buitin functions in various compo-
nents. There is good ammount of possibilities this way. Lets say you dont
wat to use OnGUI methos to change in between pages but rather set nicely
animated buttons in 3D object manner. you can create interctive game ob-
ject, set its texture and navigation function. So can be for go to main menu
buttons, navigation ones or various other purposes. Below is list of most
essential callable messages (functions) inside SBC components.
DM_pageManager:
- ChangePageForwards
- advances us to next page
- ChangePageBackwards
- we go back one page
- ChangeEditPage (id : int)
- we jump on given page id. this should use message (comment) method
DM_object:
- HideObject
- hides given gameObject
- ShowObject
- unhides given gameObject

- StartMain
- starts main loop animation of that object
- StartMain (id : int)
- same as above but we can select which page we want jump to.

- StartInter
- Startts playing interactive animation of object
- StopMain
- it stops main animation loop

- StopInter
- it stops interactive animation loop
- RegisterMouseClick
- this command could execute that object in same manner as it would if
we clicked it.
This is essentially way to interact between SBC components at the moment.
We mentioned before that tool will grow and from user feedbacks/requests
we will implement needed funcions. Also there is already few functions
planned for next update.
But taking in fact that you already got this tool in Unity via Asset store we
will asume that you know about component communication and
SendMessage principle and options this way are limitless and easily
customisable and upgradeable.
When we want to set trigger on certain frame, we can choose preview mode
(by clicking green P button) to see frame slider. As we slide frame image on
the right will be updated so we can set on exact image frame we want, and
if it is that frame we want we click grey C button next to cyan onFrame
button. By click spamming that button you can switch between frst frame,
last frame, or custom frame. Now when we set when to send message, we
need to set who is receiveing. By dragging desired gameObject from scene
hierarchy to onObject box we will set receiver.
msg is message we are sending (function we want to call)
In case when Message (comments) is selected we get additional input
button and feld on right. By click-spamming right cyan button we switch
message comment type between id, int, foat or string.
set language on book load
When storyBook scene starts it searches if we have language selection
stored in PlayerPrefs. If not, it plays default selected ones.
So when creating menu where we can choose created stories we should
write two separate PlayerPrefs, so our storyBook can play subtitle or sound
we have selected in menu.
Audio can be selected in diferent language than subtitles, thats why we
have two PlayerPrefs strings.
So to use selected languages, in menu before story scene loading, set those
two PlayerPrefs:
PlayerPrefs.SetString (audioLanguage, English);
PlayerPrefs.SetString (subtitleLanguage, English);
In next update comes menu builder where we can set books on shelf, or
build simple scene menu chooser. Untill than you can use these to set
languages.
menu creator
Menu creator should ease process of creating various types of main menu,
such as lists, thumbnails or bookshelves. It also supports changing languag-
es same as main story book app. Descriptions are kept in subtitles which
we create for story in subtitle editor. So we can have all story description nd
subtitles kept in one place.
We start building menu in similar manner as storyBook. From Unity toolbar
in empty scene select Component/storyBook/NEW menu...
After we did that we got new empty game object into scene with two scripts
attached.
DM_menu is root of menu information and setup. Here we link all fles nec-
essary for representing story such as icons, images, description text..
Also here we add language types, set its names and also icons.
When creating available language list, all languages should be named in
subtitles and here the same.
By clicking green Add button we add new empty story. Right of it we can set
its name which will be displayed, and below name goes action name.
If status is set to available, menu will try load scene by its name. So to load
specifc story scene we just need to enter its name here and it will be loaded
on select. For purchase or download free options we should put www link
there and app ill throw us on web page, we need to purchase/download
new story.
Three image slots are for images representing our story. Basicaly those
are icon image, small and big image representation. If needed it could be
reworked to hold array of images easily also.
when we setup all general stuf we can click on details tab and here are
only subtitles and description languages setup. To load subtitles, we simply
click on get subtitles folder button and select folder where our subtitles are
located and it will load them into array.
In similar manner we can setup and add or remove language types and their
icons.
in DM_menu should be stored all needed menu info.
As we start building menu besides DM_menu component we got DM_uGUI
attached also.
DM_uGUI uses unity gui system to pull and present all data from DM_menu
and navigate us through options.
To use any other GUI tool we can simply turn of or remove uGUI component
and leave only DM_menu and pull all needed info from there. So usrs can
use nGUI or some other systems they like.
Pulling and presenting data from DM_menu can be seen also in DM_uGUI
code example.
PLEASE NOTE:
In order to use menu and switch between scenes, they should be all put
in Build settings/Scenes in build. Cause Unity wont load scene that isnt in
build.
uGUI
DM_uGUI is another component we got attached when we start to create
main menu. It can be used easily as WYSIWYG editor. Because as soon we en-
ter needed data in DM_menu component it will be shown in game window
as long as we have this component attached.
We can also freely remove it or add later, without breaking base data struc-
ture.
In main options we can se few setup options.
First settings concerning all premade views and grey rect buttons below
represents each view separately. Those are premade windows with exposed
variables so users can cutomize them more easily on the fy.
For example you can turn on/of icons in list view, numbers, set size of list
blocks, thumbs spacing and stuf like that,
main Rect () is size and position of our menu. It can be full screen or just list
kept in some part of screen.
Background visible? will turn background of our menu on or of.
Skin is pretty obvious and we can set our gui skin here. At the moment
there is only one skin in resources folder, and you can edit its properties to
set custom GUI skin. Please note that we use some custom styles in skins to
display GUI in specifc way, so keep that in mind if starting gui skin design
from scratch.
Sometimes we only want only one specifc view not tons of them and we
can set that by turning of view bar on top option and set default view from
drop down list below that.
On GO button label we can set custom label for button to show.
Moving on more below we can see more view options.
By clicking on grey button we can expand settings and we also expose edit
button on right which if clicked will throw us on that page we need to edit.
Bsic idea of workfow of uGUI menu is:
we see intro image -> than we choose story from list -> and we than see
more detailed view where we can set language and start a story.
All list views will lead to detailed view except compact view. Compact vie is
for now only one view that has all in self. List of stories on bottom, setailed
description and picture above, language and go button also.
This is cool if we want to evade too many list types and keep all needed info
in one view.
Sticky button option will make shure that our buttons stick along with size of
our main rect. Disabling it will enable us editing its position more freely.
page order manager
Page order manager is new component in SBC toolset.
Its role is to easy manipulate our pages, reorder, delete or duplicate.
Workfow is straightforward.
To use it we need to have our storyBook scene opened, if not window will be
empty and order manager would be unusable, ofc it needs pages to manage
in frst place.
Usually it is good practice to have it opened all the time while working on
story book. We can open it from Unitys toolbar going to Component/story-
Book/tools/page ordr manager
By clicking on page button we can switch on that page so page navigation
got even more easier.
To reorder pages we can do that by clicking on + or - buttons. Minus will
move page to lower number while plus will add.
Red X button should remove that page from storyBook.
Add simply adds a new page.
Copy copies selected page. To copy page we need to have it selected frst
(should be dark grey) and hit copy button. Whole page with all properties is
copied to new page.
view on SBC and page order manager in UNITY 3.5 free.
inspector GUI changes
While adding some requested features and upgrading SBC we could change
GUI from time to time.
In previous video tutorials we used alot keep proportions button, which
main task is to maintain object aspect ratio same as game screen no matter
of its resolution or aspect. Sometimes its usefull, sometimes not. And be-
cause of some rewuests we did put it on visible places in inspector GUI.
One of additional changes is setting objects aspect ration when assigning
to plane. In old version SBC did always set images on 1x1 aspect ratio plane
(square). By requests we now set in that way when you click assign or set
image, it is loaded and set up according to its proportions.
If by any chance that is not desirable we can reset its proportions to square
again by hitting reset proportions button. That button is also added to
DM_planeProportion component.
To have constant plane proportions not afected by screen size we should
have our keep proportions toggle set to of.
If we want image to fll and stretch along with screen we should have keep
proportions set to on and idela would be to reset proportions to square
aspect.
One slight touch to story rules is additional GUI settings. We can change its
Y position on screen and add additional button to lead on desired scene.
Usually to lead back to main menu from story.
In name box we set button label and in leadsTo should hold scene name
which we want to load.
Along with adding proportions button, we exposed foreground layer posi-
tion inputs also. To make it easier to position layer.
changelog...
SBC version 1.017
added:
- main menu assembler, a tool that will ease process of creating main menus and bookshelves and its WYSIWYG editor
- page order manager, easy add, remove or copy pages through storyBook
- 247 country fag icons in small and mid res (ISO 3166-1-alpha-2 code)
- 5 bookshelf images and 4 book icons for bookshelf usage
- added main menu scene for better preview
- added additional story (not full story, more like placeholder with few pages to get idea how it works)
changed:
- all page numbers are not any more starting from 0 but rather from 1, which comes easier for creatives to mangle with
- aspect ratio! now every object can have its original aspect ratio, completely stretch on screen and stretch while trying to hold aspect.
- added keep screen proportions toggle options on background and foreground inspector, also foreground inspector got additional position options visible
- changed description variable in subtitle to two description representations. short_description and long_description, to easier manage needed in menus
- gui page changer (in page manager) got slight boost, now can change position and can have menu button (additive button) easily accesible
- SBC manual updated for few lines also.
- all elements that comes in package are renamed to english version, and minor folder restructure.
bug fxes:
- disabling visibility for all foregorunds worked but enabling em on diferent Unity versions had issue. fxed now
- inspector gui layout for background object displayed wrong on free versions of Unity, now fxed and added few options in that place
- sometimes planes would change its proportion even if option was unchecked, fxed
- subtitle editor now actually opens subtitles
known issues:
- seems that Unity Inspector GUI diferate between free and PRO versions. Things that are aligned and designed in PRO are moved for few pixels on some
places free version. Displacement is minimal and shouldnt afect workfow for now.
reserved