NOTE: This Documentation Article is written for a specific verion of VCStudio mentioned in the title. If you have a newer version, some things might be changed. There could be a newer version of this article in the wiki. If there is non. Please be aware of possible changes. The Version could be found in the bottom, right corner of VCStudio

COPYLEFT: This article is a part of VCStudio and might be used and reproduced using either GNU General Public License or CC-BY-SA.

Story Editor

There could be confusion with Script Writer.

Content:

• Simple guide
• Advanced explanation

Simple Guide

Story Editor is a 2D plane which acts like a kind of desktop for your project. But instead of folders and files it has a Node System for the story and other various links.

If you look at the picture above. Which is a screenshot from the project "Moria's Race". You can see how from the top, left corner there is a thread that goes through some nodes in the middle of the frame and end up below the frame at the right.

This is our story. Similar to Blender's node editor. Where you create shaders and stuff like that. The story editor is a node editor to build a story out of scenes. Each node in the thread represends a scene. And it's up to the user to decide the order in which they are connected.

What this gives you is an ability to plan your story more carefully. Having for example multiple un-used scenes still saved in the file. And just simply not connected to the main thread.

You can use the 2D plain to your planning advantages. For exmaple thinking of a space from left to right as a true time in the story world and the node connections as the editing. Which makes building Non-Linear naratives so much easier.

Also you can make scenes for situations that are not presented on the screen but happen simultaneously for planning purposes. Like making sure that the timing of one thing makes sense in relation to another thing. And stuff like that.

Now that I have your creative juices running and every one of you thinks about various creative ways they can use this to their advantage. How do you use the darn thing?

Start and End nodes

I want to to look at the screen shot and find 2 nodes that have different color tops. The Start and the End which are empty nodes. Meaning they do not contain any scene text. They are here to define the main thread.

Anything connected between them will be canon. And will be concidered when calculating the analytics. Anything else are tests, un-used parts and so on. They do not effect the analytics. So be free to add as many scenes as your computer can handle.

5 Top, Left icons

In the top left corner. Under the Analytics icon. You can see 5 icons. These are 5 button that you will use quite often.

• New Scene. Short cut N. Will add a new scene node to the Story Editor. To connect just drag output dot into an input dot in another node. Just like in Blender.
• Link Asset. Short cut L. Will let you link an asset to the Story Editor. You can see on the image. I have quite a lot of assets just hanging arround in the story editor space.
• Link File. Short cut I. Will let you link any file to the Story Editor space. Also you can link files from the assets by clicking on the little folder icons on the assets. And copy files to the assets by connecting the files to the folder inputs on the assets. First one ( green ) let's you input only blend files. And other 3 ( yellow ) only image files.
• Mark. Short cut M. Will give you a little marker object that will never go out of the frame. By clicking on one you will be teleported to it.
• Event. Short cut E. (Appears only if something is selected) Will make a dark frame around selected items. To visually group things together. Similar to blender's frames.

Top panel

In the top panel you can see 2 sections. The longer one, on the left is the current project's progress bar. And the time passed bar ( in blue ). Ideally you never should see the Blue one. Clicking on it will give you an analytics window.

The other one. On the right. Is the current scheduled task. Clicking on it will transfer you to the current item being scheduled.

6 Icons on the Right

On the right there are 6 icons. Group of 4 in the top. One toward the center. And one in the bottom. Let's talk about them real quick.

• Characters. Will give you all the character assets.
• Vehicles. Will give you all the vehicle assets.
• Locations. Will give you all the location assets.
• Other. Will give you the rest of the assets.
• Sound / Music. Will open a /mus/ folder.
• Project's Folder. Will open the project's Folder.

Another 4 icons on the left

Under the 5 icons that we talked about earlier. Which do various things in the story editor. There are another 4 icons. 2 towards the center. And 2 at the bottom.

• Current Renders. Will give you to manage currently rendering blend files from shots.
• Video Editors. A list of Blend files to edit the final movie.
• Multiuser. (Not implemented yet) A system of sharing the project between multiple machines.
• Settings. That where you can edit various things. Like name of the project, director and set the Start date and a Deadline.

Starting editing or Accessing assets / files.

When you click on the nodes 1 time. They are selected. When you click on selected nodes. They are launched. So double clicking on any node will make you enter the node. If it's a scene node. Then you will go to Script Editor to edit the actuall text of the scene. If it's an asset node. You will be transferred to the asset's manager. And if it's a file node. The file will be launched in the system.

Advanced explanation

The folowing part of the article is for hard core nerdy people who want to know how everything works. And contains redundant information for a simple person that just want to use VCStudio. Anyway here it is.

Files

The best documentation is to read the code of the software directly. For the story editor I recommend:

• studio/story.py Reads, Writes and does various things with the story file.
• studio/studio_storyLayer.py Draws the complex story editor thing with all the selections and stuff.
• studio/studio_nodes.py Draws all the various types of nodes, dots and connection between dots. Contains some of the logic.

Is there any difference between Project Manager and Story Editor?

Yes. If you look closely at project_manager/pm_gtk.py and studio/studio_gtk.py you can see that most of the code is the same. But some stuff is different. Mainly because inside of the project I use a lot more stuff. A lot more rendering logic. That is just not nessesary in a simple project chooser. For example. When rendering windows on top of the main layer in project manajer I still draw the main layer on each frame. Then the blur() is applied to it. Then the top layer is drawn. To do the same in the project when main layer is the story editor is quite computationally expencive. In other words. It lags quite hard. So when the current layer is not story editor. I'm not redrawing the story editor. I cash the last frame it was drawn and add the blur() ontop of the cashed version. You can see it in action by resizing the window while something is drawn on top. In the Project Manager the background will resize with the window. In the studio the background will stay the same and be cut off.

One more thing that I do in the studio that I don't do in the project manager is dialogs.

Of course there are other little things like variables for project's analytics, story and other logic related to it.

How do you draw the nodes?

Short answer read this. Long answer: It's compicated. There is a block of data inside the win object. Which is actually the Gtk.Window() object. I just used the ability to assign variables to it in order to have some trully global variables. For example win.current and win.previous are all the variables that I might need to compare between 2 frames. Like for exmple the key presses are stored in win.current["keys"]. And I can know what keys were pressed on previous frame by looking in win.previous["keys"].

But there are also things like win.story for example. This variable contains a very large dictionary. You can look at the /pln/story.vcss file to see what I mean. ( It's secretly a JSON file. ) This dictionary contains an entire data base of every item in the story editor space. Names, linktypes, coordinates, sizes. Everything is there. For scene. The entire scene text is also there.

To draw the nodes I itterate over for example win.story["scenes"] and read what name and where each is should be drawn. And send this data to the studio/studio_nodes.py. But I have to always add the win.story["camera"] to every coordinate. Or else travelling through the story space will not be possible. Everything will just stay static.

How do connections between nodes work?

There is a variable called win.story["arrows"] whichs stores data of connections between 2 nodes. Each node has an input and an output dot. They are rendered using the same node_dot() function. But the function is very complex. Basically if it's an output node it will record it's position on the screen into a variable called win.out_dots and when an input node comes by. It will look through the win.story["arrows"] see if it's connected to anything. See if this anything is in win.out_dots. And if yes. Draws a line.

For the logic of dragging one into another think about both of them being little tiny buttons. If you press on the output dot it will start a special operation with it's coordinates and some metadata. And if you press the input button while this operation is running. This input dot will add an instance into win.story["arrows"] using it's own metadata and the metadata of the output node that started the operation. It's a bit simplified. So if you want to know exactly how it works. Just read the node_dot() function.

How do events change their shape with the contents inside?

I'm using for this a little function called rectangle_surround() from UI/UI_math.py. And simplified explanation will be... There is a gloabal variable. Some kind of list of 4 coordinates X, Y, SizeX, SizeY. This will represent either the event box. Or the selection box. Or anything like this. And you add to the function each coordinate of everything inside this box. You compare whether one is already inside the other or not. And if the thing that should be inside actually outside. We move the coordinate of the surrounding box out a little to include that object.

Now keep in mind that this is all done before a single frame is rendered and presented to the user. So from the user's perspective the surrounding box always outside of the items. But behind the scenes there were few itterations before it was outside all of the items.

How does collision of 2 rectangles work for the selection?

In order to detect intersection. Or collision of 2 rectangles I use a very primitive method. Look at rectangle_overlap() from UI/UI_math.py. Basically I'm checking two 1D lines for intersecting. The X axis of both rectangles and the Y axis of both rectangles. Look at line_overlap() from UI/UI_math.py. I could use some math to check how far the intersection is. But I found it to be unnessesary in this application. ( Maybe I will do it eventually ). So the idea is to check whether first point of the line 0 is anywhere between the points of the line 1. If yes. Detected. If not. Check the second point. If not yet. Swap the lines and do another 2 checks. So at most for 2 rectanles I'm checking 8 times.

Are images read from the file each time?

No. They are not. Look at image() from /UI/UI_elements.py. There is a global variable win.images which is a dictionary of various cario surfaces. Cashed 1 time from the image files. Basically the function image() is called. A filename is given to it. It looks into the dictionary and checks whether this image is there already or not. If not. It loads the image. If yes it draws the image. This is why you can see sometimes that images are loading one after the other.

The algorithm it self is a little bit more complex then this. For example Cairo it self can read only PNG images. Which is not cool. So other types are loaded in other various ways. Like JPEGs and such loaded using GdkPixbuf.Pixbuf object. And BlendFiles are loaded using blender-thumbnailer.py that you can find in any blender installation.