Hi, Some time ago i presented a program that I was working on called Interactive media center, but it was still in early stages, so weren't able to really show a lot of it. But now that its starting to enter the final stages i thought i would present it in a bit more details.

The overall idea behind it is to make a program that will allow users to create interactive story driven projects using images and videos. So instead of just watching the story unfold the viewer can decide how the story should be. 

So i created a range of images to try to explain how it works and show some of the features.

1. Current user interface

A toolbox which will allow to add images, videos, triggers and so forth to the project. A navigation overview that keeps tracks of the project and how pages are connected to each other.

2. Workflow

All projects are executed in full screen, so the whole layout is part of the work area. Each element, in this case an image, comes with some basic controls that can be used to manipulate it, such as size, angle and opacity. 

3. Text elements

Text elements can be used for a lot of things in a project besides just showing text. These are also used for video subtitles, HUD elements, showing variables and as interaction points. 

4. Triggers

Interaction in projects are added primarily through trigger elements. Which comes in 4 different forms "Timer", "Click", "Attribute" and "Go to page".

But also videos can be used as triggers and will automatically fire its trigger when its done playing. The image below shows a simple setup of a "Click" trigger linked to a "Go to page" trigger. A green line with an arrow indicate that the "Go to page" trigger is linked to the "Click" trigger, a red line from the "Click" trigger to the text element shows that its currently being used as a button for the trigger. Which means that when the viewer click "Start" the "Go to page" will be executed and a new page will be loaded. The top right corner shows an example of how pages are linked together so pages that links to the current page, shown in the middle, and what current page links to shown under output. Clicking the pages in the navigation window is one way of navigating a project, but also hotkeys are available.

5. Variables

Ability to add variables to use in projects comes in two forms, strings and numbers. All variables are global which means they can be added and changed at any point during a project.  

6. Showing variables

Variables can be linked to text elements which will show the current value stored in it. The image below shows how they can be used for making a character sheet for a project.

7. Adding interaction to variables using trigger

The attribute trigger makes it possible to manipulate and test against numbers, strings or other variables. The image below shows how a "Click" trigger is used together with an attribute trigger through an image to add functionality to the character sheet and allow the health attribute to be increased as the user clicks the "+" sign. Also another "Click" trigger is used with a "Go to page" trigger linked to a text element. 

1. Speech bubbles

Speech bubbles can be added to a project and comes in 8 basic forms which can be scaled, flipped and rotated to fit into place. 

9. Randomize

Randomization can be added to a story to create more interesting and unexpected outcomes. In this example it is used together with a "Click" trigger. First a variable called "Random roll" will be given a value between 0 and 100 through an attribute trigger. Two other attribute triggers are linked to this one and uses the value of "Random roll" to test which outcome will happen. The top right window shows that a Test against the variable "Leadership" will be made and it needs to be "Greater than" the variable "Random roll" for it to go to the page which is linked to it. The other attribute trigger will test whether "Leadership" is "Lower or equal" to "Random roll" and if that is the case then it will go to that page instead.

10. Finalizing project

When a project is done it can be finalized which will make it possible to run the project and play out the story, this also allow the story to be shared with others which can view it through the Interactive player which automatically gets copied during the finalization, Triggers, connections and other elements that are not part of the story are of course removed when the story is played through the player, so are only visible when designing a project.

Final word

This is a quick overview of some of the features in the program. Showing how to create a story. Features not covered are working with videos, audio, image counters and HUD elements and varies general settings.

The program is designed to be very easy and fast to use with a graphical approach. 

Anyway hope it give an impression or ideas of what the program is all about.

this looks awesome

Ah so, it is a type of Visual Novel Game, but fully video animated.  

this looks awesome

Thanks for that

Ah so, it is a type of Visual Novel Game, but fully video animated.  

You can make visual novel games in it as in the examples. But you can also use it to create comic books or combine videos and images into a single story. Personally i enjoy creating stories/comics and would normally use PS or Gimp to setup things. But i found that to be rather slow because they are not really designed for something like that, so tried to see if there was a program out there which could do what i wanted, but weren't able to find such. So it all started as something just for my own needs, but since there are a lot of people out there that uses Poser/Daz3D to make graphics. I thought, that im probably not the only one that would think it could be fun to create stories with there content. And always enjoying a good story, it have always annoyed me a little bit that you couldn't play a part in it. So making it possible to also add interaction to them was just the next step, and then it just kind of went a bit overboard with videos, audio and the ability to turn stories more into games. So its not solely designed to make games, it can also just be used for create stories, creating lightboxes etc.

Some features seem very reminiscent of MotionArtist by SmithMicro, which I've considered acquiring on numerous occasions (but haven't yet).

However, I don't believe MotionArtist has the ability to track variables, create your own "stats", and do decisions based on those. This looks really cool to me 3D-Mobster.

Does it only "export" to one format when you finalize the project?

And when can I get my hands on it? :D 

Hi, Some time ago i presented a program that I was working on called Interactive media center, but it was still in early stages, so weren't able to really show a lot of it. But now that its starting to enter the final stages i thought i would present it in a bit more details.

This looks very nice!

Could you put together a video showing a basic overview of what it does? Even a "beta" video, with the admission that the product wasn't yet complete, would be awesome.

Some features seem very reminiscent of MotionArtist by SmithMicro, which I've considered acquiring on numerous occasions (but haven't yet).

However, I don't believe MotionArtist has the ability to track variables, create your own "stats", and do decisions based on those. This looks really cool to me 3D-Mobster.

Does it only "export" to one format when you finalize the project?

And when can I get my hands on it? :D 

Yeah think you are right in regards to Motion artist, I have only tried a demo of it so can't say for sure. But you can also animate in there program, that is limitation in mine, because to really make it cool, it would need to be 3D but then I need an engine capable of that and its beyond me as one person, unfortunately :). And 2D animation using High quality renders like flash animation i don't think would be very useful or give very good end results, but works fine if its simple graphic, but think you would end up having lighting issues and very stiff looking animations. However have thought about adding parallax as it can make some cool effects i think. If you are not sure what it looks like here is an example where it works quite well i think: Link: Nevermind the bulletsBut I do think my program stands out when it comes to the variables, because they allow you to create stories that can force or put the viewer in surprising situations, which of course makes it funnier i think as its harder to predict how things might turn out.

So my aim is to make it so you can make things thought of like:

Game of Thrones game

https://www.youtube.com/watch?v=nfohvHENZFk

Life is strange

https://www.youtube.com/watch?v=AURVxvIZrmU

Which of course have 3D controls, but are very story driven games, where mine is probably less game and more story due to the lack of actually moving a character around :).

Regarding export, when the project is finalized you get a program that you run like you would any other exe file. Which is the Interactive player capable of reading the project files. So the final project is like you would run Poser or some other program and it will play you project.

Hi, Some time ago i presented a program that I was working on called Interactive media center, but it was still in early stages, so weren't able to really show a lot of it. But now that its starting to enter the final stages i thought i would present it in a bit more details.

This looks very nice!

Could you put together a video showing a basic overview of what it does? Even a "beta" video, with the admission that the product wasn't yet complete, would be awesome.

I plan on making a video at some point and probably a demo as well. But I keep adding stuff and making a video takes time which i can spend adding things :D, so i have to prioritize, so adding things at the moment seems best to me. But will add some screenshots, so at least an idea of what can be done is possible and then make the video later on.

This post focus on image counter and how to use them with triggers to create a simple combat system.

Image counter

These have two purposes which are shared with text objects. These being able to present values in a graphical way when used with a Timer trigger or in this example as a progress bar to keep track of health for the player and an enemy.

1. Adding image counter

When added it will be represented by an empty place holder. Some standard editing tools are available to easily adjust the counter. 

2. Loading counter

Clicking the load images button will let you select an image from your computer. All images in the folder of the select image will automatically be loaded into the counter and can consist of 50 frames.

3. Creating combat system using variables

For the combat system to save progress after the fight and to be able to update it as the fight unfold. A series of variables will keep track of the health of the player and the enemy.

4. Link variables to image counters

To setup a working image counter and make it work as a progress bar. The checkbox "Use as progress bar" is selected. This will open the progress bar settings menu, which will allow you to tell what should control it. In this case i have selected the Player image counter and told it that as Maximum value it should use the variable "Player Maximum health" and for progress "Player Current health", same is done for the enemy image counter.

5. Setting up attack options

Empty image placeholders will be used to give the player options of where they would like to attack. In this case three have been added and there opacity lowered so its easier to see the image below. Image holders that haven't gotten an image loaded will automatically be invisible in the player. 

6. Load custom cursor

To make each of the attack option work an Click trigger is added. In this example its just for the head, but would require the same setup for each option. To make the attack system more visual, a custom cursor is loaded and will be used whenever the cursor is over the object which the "Click" trigger is linked to. In this case the image covering the enemies head. A small gray box next to the loaded cursor allows to test how the cursor will appear in the Interactive player. 

7. Setting up combat system

To make the combat more interesting a variable called "Player Attack Rating" is created and an attribute trigger is linked to the click trigger and setup to test whenever the enemies head is clicked, that the value of the variable is Greater than or equal a random roll of 100. To make the combat even more interesting a system that would reduce the chance of hitting the head but cause more damage could be made, making it up to the player to decide whether damage is more important than accuracy.

8. Damage system

To give the enemy damage another attribute trigger with a "Set" value is linked to the "Test" trigger. Since a "Test" trigger will only activate what is linked to it if the performed test is true, damage to the enemy will only happen as long as "Player Attack Rating" is greater than or equal to the random roll. In that case 1 will be subtracted from "Enemy Current health". To see what it would look like in the player you can use the preview button in the navigation window.

9. Preview project

As the enemy head is clicked and the test for hitting is successful its health bar will go down. Since this is just an example I haven't added anything to allow the enemy to hit the player or what will happen when someones health reaches 0.

This post shows how to create a menu, use custom fonts, some new triggers types and the functionality of the HUD object.

1. Custom fonts

Several default font type comes with the program which are those that you will find in Windows by default. However these are not all that exciting when creating stories. So I added the ability to add custom fonts to the program which is done in 2 steps.

1. Find a font that will suit the project and install it in Windows by dropping it into the fonts folder.
2. Open the Custom fonts file and add the font name and the path to the list.

After that the font will be available for all future project and can be selected in the font list.

1. Creating a menu and new trigger types

In this case the menu is build using text objects, but it could also have be done using images. Three new types of triggers have been added to the program. A "Save" trigger which will let the viewer save there progress as they watch, play or read the story at a later time. A load trigger which will load the progress and an exit program trigger. These are simply added to the program as any other trigger and have no special options, so they only require to be linked to something that can activate them, such as a Click trigger.

An update to the Go to page trigger have been added, so its now possible to tell it to always return to the last page from which it came. This is useful for situations like menus, character sheets and in general for pages where content need to be reused. When activated the icon change to red, since im using it for a menu i tell it to also create a link to page 2, which will in case that there are no last page, such as when the story have just been started, that it will use this page instead of the last page.

1. HUD objects

In this example i have created a page of what a comic book could look like, all the gray box should of course be replaced with actually images. But in this case it shows an example of how its possible to design the layout before rendering the actually content, so the correct sizes of the images can be decided. As the comic might contain lots of pages. It would be annoying to have to flip through all the pages every time I wanted to get to the menu or if some character sheet was used. So to make this task easy, the HUD object can be used to quickly setup some default controls and will make it so any objects linked to it will appear as if they are part of a HUD and will by default be added to all pages in the project. The HUD tool menu allows for pages to be excluded, so in this example I exclude page 1 since that is where i made my menu and i don't want it to appear there. The menu also allow it to be used as if it was a button, this is done by simply turning on "clickable" and to make it work I hook it up to a Go to page trigger and tell it to go to page 1 where my menu is, so now regardless of what page im on i will always be able to go to the menu.

Wow! that is fantastic!

Thanks for that Boni

Since most of the focus so far have been on still images, this one will be about the movie object, subtitles and how movies can interact with other triggers and how itself can work as one.

1. Adding movies

These are added the same way as images, image counters and audio files. When you add a movie you will get an empty movie holder and by pressing the "Load movie" button you can select one from your computer. All movies files need to be in .webm format to reduce size since they are loaded on the fly. So I found a movie of a bird eating some food which original size is 486 mb 1920x1080 and after converting the file its now 31 mb. The video in the screenshots have been resized, but the original is still 1920x1080 so could be scaled even further if needed. Working with movies are very easy, for instant holding down "T" with the mouse cursor above a movie clip allow you to scroll through it at the "Step" interval chosen in the toolbox by scrolling the mouse wheel.

1. Activating movies through triggers

By default a movie will always be paused and invisible in the player. But can be activated through a trigger such as a "On page start" which will make it start the moment the page is shown, an audio file or as in this example through a "Click" trigger.

1. Link text to objects

To avoid having to move everything around individually, text objects can be linked to other objects such as a movie clip. So when the movie is moved the text will move with it. Which is simply done by clicking the "link to" button and choose the object it should be linked to.

1. Setting up subtitle

Before a subtitle can be used it need to be activated in the movie object, this is done by clicking the checkbox "Use subtitles" after that a menu will show up. Here its possible to choose which text object should be used as subtitle and is done the same way as everything else. Simply by point and click.

1. Adding subtitles

These are added at a given time, so as you scroll through the movie you can see at what time a certain subtitle will show and these will appear until another subtitle overwrites it. So in this example the first subtitle will show 6 seconds into the movie and last until 12 second where the next one takes over and so forth.The background color of the text object only appear to be far wider than the text is in the editor, in the player the background will match the width of the actual text. So this is only so its easier when working with the object in the editor.

1. Z.order

How images and movies overlap each other can be control through there Z-order, the higher the Z-order the more dominant the object. This allow for images to be placed on top of movies and vice versa. In this example i have added a window frame around the movie. This also allow for making animated background for menus and mix animation into for example a comic book.

1. Movie as trigger

As with a "Click" trigger the movie can also be used as a trigger and will occur when the movie is done playing. Therefore one movie can be used to trigger another one, an audio file or in this example a page change. Which of course is useful if you want to make a introduction, credits or a fighting scene and so on.