WebStory Engine - A Visual Novel Engine for the Web

For discussion and support of other visual novel engines.
Message
Author
Keul
Regular
Posts: 49
Joined: Wed May 06, 2009 3:42 am
Location: France - Strasbourg
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#46 Post by Keul »

Wow, I was thinking about developing such a thing (I was planning to name it XML-VN) and I still have my draft with some ideas written on it.

In fact, I think that the most important part is the XML one. having a standard for storing VNs would be great.
Then, the VN would be playable with native apps (in javascript/python/java/... and maybe even renpy ^^)
There would also be possible to make a more "visual" editor (or multiple editors, like for HTML) that would generate the XML, so people don't have to learn the XML-VN language reference (or choose to edit the XML directly if they prefer)

One point: it should be possible to play game online and offline, where the offline version is a .zip file that you extract and click in the index.html that would launch the game (there's no need to have a local web server to load local web pages, the only restriction is that Chrome must be launched with a specific parameter to be able to load xml files, Firefox can open them directly).

I was also thinking what would be the best: using only the canvas element, or using HTML elements

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#47 Post by leon »

Wow! This is awesome!

Much less limiting than similar engines I've seen.

I did a quick test converting the beginning of our WIP and it worked great. I think this would work great as a quick demo even with the engine being in beta stage.

Thank you for making this. :D

User avatar
C7N
Regular
Posts: 72
Joined: Sun Jul 22, 2012 6:21 pm
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#48 Post by C7N »

@Keul:
If there is demand for specifying a standard XML dialect for visual novels, I would surely be willing to help with it. The possibility of having another application generate a WebStory file was one of the reasons why I chose the XML format in the first place.

Regarding your offline ideas, I agree that it should be playable offline. But I don't think it is feasable to do that using the file:// "protocol". Since you need to download the content in some way or another anyway, I guess the app cache is pretty much what we want here. With it, you would visit the URL of a WebStory and then it would be downloaded automatically. It would then be possible to visit that URL in offline mode, too, since the content has been cached on your computer, and the game would work just fine. The default savegame mechanism saves the data on the client side anyway, so you don't need to be online for that.

By the way: If you are interested in helping out with the engine, that would be much appreciated!

I experimented with both the canvas and a pure DOM version of the engine. And my conclusion was that the DOM version is the better choice. Overall, it seems to be faster for these kind of games and it is also easier to develop since you can use all the typical DOM events and don't have to re-invent the wheel there. Also, saving the current state of the game is a little easier this way, too. But it really is not a question of either this or that. The effects/animation library I wrote for the engine, MO5, offers canvas support, too. For example, there is a canvas version of textboxes in it as well as a canvas ImagePack implementation. It also has a rain effect. The only thing needed to make use of it would be some kind of bridge asset in the WebStory Engine. This doesn't need to be in the core of the engine, it can also be an extension.

As I mentioned before, I already wrote a basic container app for WebStories. If there was a good Ren'Py <--> WebStory converter, maybe this container app would not be needed anymore. But I'm not sure whether a converter like that would be possible. The biggest difficulty I see is making the game look anywhere near the same in both engines. It is one thing to convert the logic of the game; converting the look and feel really is another thing altogether. But then again, I have never developed a game using Ren'Py and I don't know much about the internals of the engine.

@leon:
You're welcome! Well, the reason that the engine is still in beta stage is that I didn't get much feedback yet. It doesn't necessarily mean that it is buggy. I'm not a fan of eternal beta stages, but I also don't think it would be right to just declare it to be a final version without other people having tested it in the wild.
WebStory Engine - Visual Novel Engine For The Web:
http://lemmasoft.renai.us/forums/viewto ... =4&t=16722

Keul
Regular
Posts: 49
Joined: Wed May 06, 2009 3:42 am
Location: France - Strasbourg
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#49 Post by Keul »

C7N wrote:@Keul:
But I don't think it is feasable to do that using the file:// "protocol".
I use relative path, not absolute path. I've already finished a quizz program that I use for my association, witch work offline and online. I can send it to you after I got your mail. The only thing is that it stores questions in .js file and not in XML one. Storing in .xml one require Google Chrome to be launched with this argument "--allow-file-access-from-files" (http://stackoverflow.com/questions/4804 ... -in-chrome - http://www.steveborn.com/codenotes/LoadingXML.htm)

Load local picture/audio/video:

Code: Select all

imgtest=new Image();
imgtest.src="./gamefolder/res/image.jpg"
imgtest.onload=function(){ alert('loaded'); }
Load local js file:

Code: Select all

newelement=document.createElement('script');
newelement.type='text/javascript';
newelement.src=file;
document.head.appendChild(newelement);
Load local XML file:

Code: Select all

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "./gamefolder/scripts/"+xml_file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send(null);
vn.xmldata = xmlhttp.responseXML;
vn.loaded_xml(vn.xmldata);
The user download the whole game in a zip file, extract it and double-click on the index.html. Then, the javascript engine process the xml file and display images/videos....
C7N wrote:I guess the app cache is pretty much what we want here. With it, you would visit the URL of a WebStory and then it would be downloaded automatically. It would then be possible to visit that URL in offline mode, too, since the content has been cached on your computer, and the game would work just fine. The default savegame mechanism saves the data on the client side anyway, so you don't need to be online for that.
cookies are limited 1-10 Ko, LocalStorage can contains 5-10Mo.
Browsers internal cache is managed by the browser, varies a lot (6Mo on my smartphone, 1Go on my PC) and depends on the browsed websites/configuration...
C7N wrote: By the way: If you are interested in helping out with the engine, that would be much appreciated!
Where do I subscribe? :) (I'm sending you my email in PV)
C7N wrote: I experimented with both the canvas and a pure DOM version of the engine. And my conclusion was that the DOM version is the better choice. Overall, it seems to be faster for these kind of games
On the other side, canvas can be more faster with the actual browsers improvements and can manage more image modifications (YES, this is HTML5, no flash: https://developer.mozilla.org/fr/demos/ ... ananabread )
C7N wrote: and it is also easier to develop since you can use all the typical DOM events and don't have to re-invent the wheel there.
I agree, detecting event will be more simpler.
C7N wrote: Also, saving the current state of the game is a little easier this way, too. But it really is not a question of either this or that.
As long as we don't want to have savegame compatibility with different implementation of XML-VN game interpreters
C7N wrote: The effects/animation library I wrote for the engine, MO5, offers canvas support, too. For example, there is a canvas version of textboxes in it as well as a canvas ImagePack implementation. It also has a rain effect. The only thing needed to make use of it would be some kind of bridge asset in the WebStory Engine. This doesn't need to be in the core of the engine, it can also be an extension.
In fact, I think that the more important thing is how you define it in the XML file. If in the XML file, you have a grayscale/zoom effect, it's not important if you do it with canvas or DOM as long as the result is what's excepted from the XML file
C7N wrote: As I mentioned before, I already wrote a basic container app for WebStories. If there was a good Ren'Py <--> WebStory converter, maybe this container app would not be needed anymore. But I'm not sure whether a converter like that would be possible.
container app?
C7N wrote: The biggest difficulty I see is making the game look anywhere near the same in both engines.
I think that the content must also remain a priority.
HTML can work with small screens or high dpi (like retina) screens without any problems, because fonts are vectorized and web page structure can be stretched easilly.
PDF document, (used for pixel prefect / exact repro) can't be readed as easilly on such screens (it's a pain to read on my ebook, when i zoom, text column size aren't reduced...)
C7N wrote: It is one thing to convert the logic of the game; converting the look and feel really is another thing altogether. But then again, I have never developed a game using Ren'Py and I don't know much about the internals of the engine.
Renpy games sometimes includes python code. You won't be able to convert all without adaptations.

User avatar
C7N
Regular
Posts: 72
Joined: Sun Jul 22, 2012 6:21 pm
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#50 Post by C7N »

@Keul:

Thanks for the suggestions! I guess I will have to look into that, although I still do think that the app cache does what we want.
You are right, localStorage is limited, in most browsers you can only store 2,5mb per site. But that is enough to store hundreds of savegames.

You can participate on GitHub. The Local Container is also on GitHub.
If you want to further discuss technical details of the engine, I guess it would be a good idea to do that in the developer forums.
The 0.3 branch is the currently developed one. The master branch is used for bugfixes for the current release.

Compatible savegames is an issue I didn't really think about yet. Thanks for pointing that out! Compatible savegames would be awesome because you could synchronize the state of your game across all implementations, like the Kindle platform does for ebooks, for example. :D But as long as we are the only once interested in a generic VN XML format it doesn't make much sense to worry about that now. We'll have to cross that bridge when we get to it.

The python code in Ren'Py games is a big hurdle, I agree.

Regarding screen sizes, one idea I had was to allow developers to define some kind of constants for assets and measurements. You would have a new section in the XML file where you'd define something like "if screen width > 1200 use my_image_1080p.jpg" etc...

EDIT:

I just added a wiki page on how to write extensions for anyone who wants to do that:
http://webstoryengine.org/extensions
WebStory Engine - Visual Novel Engine For The Web:
http://lemmasoft.renai.us/forums/viewto ... =4&t=16722

Keul
Regular
Posts: 49
Joined: Wed May 06, 2009 3:42 am
Location: France - Strasbourg
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#51 Post by Keul »

C7N wrote:@Keul:
Thanks for the suggestions! I guess I will have to look into that, although I still do think that the app cache does what we want.
You are right, localStorage is limited, in most browsers you can only store 2,5mb per site. But that is enough to store hundreds of savegames.
localStorage is designed to store applications like gmail or Google Docs to be able to use them offline.
Problem: VN can't fit in local storage due to the size of image backgrounds and musics.
If you have to play online, you can also store save-games online, so localStorage is not needed.
C7N wrote: You can participate on GitHub. The Local Container is also on GitHub.
I have to learn how to use GitHub then :)
C7N wrote: If you want to further discuss technical details of the engine, I guess it would be a good idea to do that in the developer forums.
The 0.3 branch is the currently developed one. The master branch is used for bugfixes for the current release.

Code: Select all

Bonk
Something funky happened. Please bear with us while we iron out the kinks.
Seems out now. Will register on it later and continue the discussions on it.

SJnova22
Newbie
Posts: 4
Joined: Tue Oct 09, 2012 10:58 pm
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#52 Post by SJnova22 »

Sorry to intrude on your conversation but I was interested in this, but I just want to know; does this work on Smackjeeves? Since that is the host I am currently using. I don't know whether or not I will have my own, but I don't know if Smackjeeves takes it or not. Do you know?

SJnova22
Newbie
Posts: 4
Joined: Tue Oct 09, 2012 10:58 pm
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#53 Post by SJnova22 »

Actually, I do want to know that, but I want to know about the web server and stuff. I am new to this an-d I don't really- understand how to use this, can you elaboratw please? I don't know- how to get the program running.- -I love the concept, and the program is promising. Renpy I like but I want to do an online VN and I want to see if there is an alternate to Flash. Flash is so hard... Would this ever become an .exe? I don't understand the web server thing, sorry.

User avatar
C7N
Regular
Posts: 72
Joined: Sun Jul 22, 2012 6:21 pm
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#54 Post by C7N »

@Keul:

No, I guess you mixed up app cache and localStorage. App cache is meant to make web apps available offline. localStorage is a way to save some data that the application uses on the client. It's not meant to cache the whole application.

Unfortunately, for bigger visual novels, you might still be right about that you can't cache them offline. The specification doesn't impose a size limit on the app cache, but the browser vendors do. Some don't seem to allow more than 50mb per page to be stored offline... I guess we will have to run some tests to get exact numbers.

Also, no, it does make a difference whether the default save option is localStorage or a server. Because if the deault location for savegames is on the client, you don't need software on the server side. E.g. the engine works on Dropbox as it is right now. If you use server software to save games, you limit the number of available hosting options.

@SJnova22:
I don't know what you can do with Smackjeeves. If it allows you to upload whole directories I guess it should work. If you try that, please let us know whether it worked.

The games could potentially be made into an .exe by using the Local Container. But it's not ready yet. To get the engine running you need to upload it to a web server, that is you need some kind of hosting, a place where you can put files that can be accessed by other people through http:// links. It doesn't really matter what kind of web hosting you use, all of them should work. I can't tell you exactly how uploading works because it's different from hoster to hoster. Your hoster should be able to help you with the process of uploading your stuff.
WebStory Engine - Visual Novel Engine For The Web:
http://lemmasoft.renai.us/forums/viewto ... =4&t=16722

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#55 Post by leon »

Dropbox is probably the most convenient way to develop a VN with this engine, since it doesn't require uploading/FTP-ing and it's very simple to use. A slightly more complicated alternative is to install a web server like WAMP locally. You just put the stuff in your Dropbox Public folder and get a link to index.html. Once developed, you will probably want to find a different solution, as public links for free Dropbox accounts may not use more than 10GB of bandwidth per day.

However, from dropbox website:
New Dropbox accounts created after October 4, 2012 no longer have a Public folder.
Old Dropbox users are not effected by this - public folder still works. The files need to be in the Public folder, or they will get displayed, instead of executed (you'll see the contents on index.html, if you share it from a different location).

If you have a new Dropbox account, there is a simple solution - just click here https://www.dropbox.com/enable_public_folder to enable the Public folder.

User avatar
TheGuraGuraMan
Veteran
Posts: 365
Joined: Sat Nov 03, 2012 3:48 pm
Location: France
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#56 Post by TheGuraGuraMan »

Wow, this is a revolution, you created the best way to make VNs works on tablets !!!!

User avatar
planktheory
Regular
Posts: 35
Joined: Thu Aug 30, 2007 4:44 am
itch: mykanthrope
Location: Washington State
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#57 Post by planktheory »

I personally have sized the Visual Novel I'm making with WSE to fit on my phone. I think web release is what works for me best.

User avatar
C7N
Regular
Posts: 72
Joined: Sun Jul 22, 2012 6:21 pm
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#58 Post by C7N »

Hi! Just wanted to let you know that I found a possible solution for the caching issue. It will take a lot of time developing it because it spans two different storage solutions, but it will work in Chrome and Firefox (and maybe even Internet Explorer 10?).

For those interested in the technical stuff:
For Chrome, there is the Filesystem API with which it is possible to download whole files in the background, save them in a sandboxed file system on the player's device and reference them in src attributes on HTML elements.
In Firefox, IndexedDb can save whole files, too. These can then be transformed into something called "object URLs" which in turn can be used in src attributes as well.
Both these solutions ask the player to save data offline, but do not have an upper size limit, so it will probably be possible to download all assets of the game only once and then use them over and over again.
WebStory Engine - Visual Novel Engine For The Web:
http://lemmasoft.renai.us/forums/viewto ... =4&t=16722

User avatar
Shad12ow
Regular
Posts: 168
Joined: Tue Nov 15, 2011 9:20 pm
Projects: Kage's Room
Location: Indonesia
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#59 Post by Shad12ow »

Hey, I've just found this thread after searching for it.
I just wanted to thank you for taking your time developing this as this is exactly what I'm looking for.
Good work and I really hope that you will continue to develop this. Hehehe...

User avatar
C7N
Regular
Posts: 72
Joined: Sun Jul 22, 2012 6:21 pm
Contact:

Re: WebStory Engine - A Visual Novel Engine for the Web

#60 Post by C7N »

@Shad12ow:

You are welcome. I develop it because it's fun.

I will release a new version soon. I cannot say when exactly, but version 0.3 is not too far away. I recently created a roadmap page in the wiki:
http://webstoryengine.org/roadmap

There you can see what changes the new version brings and there's also a little preview of the "relative dimensions" support (or whatever you'd like to call it) that I'm working on. I need to rewrite some things for it, mainly effects, because they are all pixel-based. I tried the preview on Android on a smartphone in Chrome and Android browser and on a tablet in Chrome and Amazon Silk.
For non-geeks: It basically means that you can write games that fill the whole browser window without necessarily scaling the character images, so that you can write a game once and it looks fine on smartphones as well as full HD displays.
WebStory Engine - Visual Novel Engine For The Web:
http://lemmasoft.renai.us/forums/viewto ... =4&t=16722

Post Reply

Who is online

Users browsing this forum: No registered users