iiYO Community

Hello! I'm a completely hopeless programming idiot in the midst of planning out my visual novel. By completely hopeless I mean that I don't even understand how websites work -- but I'm still really excited to try WebStory out! Unfortunately, the documentation is pretty incomplete so far, which means that newbies like me are likely to be confused on how to even get started. I've just gone through the Zero to Visual Novel guide. Here are some questions I have about it:

1. Local Development Server
Um... I'm dumb, but after reading the guide on this site, I assume "local development server" means something like being able to open a file that's stored in your computer using web browsers like Chrome and Firefox...? I followed the instructions quoted below:

Quote:Python SimpleHTTPServer

Python comes bundled with an HTTP server that you can easily set up to run on your local machine.

To do that, you just need to install Python and then on the command line of your OS, change into the folder that you want to be the root directory for the server and type:

python -m SimpleHTTPServer

You can get Python for Windows and Mac OS X on the official site.

I downloaded Python 2.7 from the site, clicked on the command line icon (it says Python (command line) on my computer) and typed in "python -m SimpleHTTPServer" like that, but the message I got was this. Am I doing something wrong? I probably am

2. Text Editors

Quote:To run the engine and develop with it, you need at least the following things:
A good text editor, preferably one with syntax highlighting for XML.

Unfortunately, I'm not familiar with text editor... brands? at all, so could you suggest anything I can look into? I do have the jEdit I downloaded for Ren'py; is that sufficient?

3. Title Screen
I notice that the mock game about the tourist and the fisherman does not have a title screen. Judging from the game that is put up on the home page of the site, it is possible to create one, but it's either that a guide to create the title screen does not exist, or I'm a douchebag and I just missed it. Could you direct me to where I can read up more about making a title screen?

4. Settings
The mock game requires users to click in order to advance. I recall somewhere that it's possible to make it such that certain (multiple?) keys can advance/rollback (?) instead. How can I do this?

Also, is it possible to have a settings page that can adjust text speeds and music/sound volumes, like in normal visual novels?

5. Assets/Styles
The documentation only mentioned positioning of your textbox, but not much on other customisable options. If I choose to have my character name not a separate textbox but I want the name to have a different font to the dialogue, is this possible? Also, is it possible to insert side images?

As for images, is it possible to layer images on top of another? Let's say I want to have a base sprite and different expressions, so I will have one base sprite image, and a happy expression. Can I load the happy expression on the base image, or should I have a sprite that already has their expressions on them instead?

Finally, I don't think I've seen anything that teaches you how to adjust transitions as well. What kind of transitions/simple animation do you support, and what are the tags? Is it possible to change the sizes/colours/etc. of fonts within the dialogue -- like increasing the text size when someone is shouting very loudly, for instance?

6. Preparing assets for the web
I'm an artist, but while I've drawn stuff that I used to test the Ren'py engine out with, I'm afraid to say that I'm completely new to the world of website development. Does anyone have any tips on recommended file sizes and -- most importantly -- recommended resolutions? I'm thinking of making something 1024 x 600 -- is this too big? Too small?

Sorry for all the questions! This is all that I can think of off the top of my head for now. I might come back with more! [strike]I wish we had a tutorial game...[/strike]

Hi jnoyume!

Welcome to the forums!

1.) From the screenshot it seems that what you did was running a python shell directly. What you should do instead is open the normal windows shell. Press on start, execute command, type "cmd" and hit enter. Then you navigate to the directory on your computer that you want to have as the root directory for your development server and then you type the "python -m SimpleHTTPServer" to start the server. You should then be able to point your browser to http://localhost:8000/ to access your server.

2.) I am not familiar with jEdit, but I guess it should work. If not, try Notepad++.

3.) The title screen is just a normal scene that displays an image using HTML inside a textbox:

<pre>
<line s="n">
{img src="/images/webstory-engine-logo-medium" alt="logo" style="margin-top: -50px;" /}{br /} Please click on the screen to start.{br /} Inside the story, you can also press the {b}RIGHT ARROW{/b} key to go to the next line.
</line>
</pre>

The textbox is set to fill the entire screen. The 'style=margin-top: -50px;' helps centering the image and text vertically. Give the textbox asset an attribute called cssid to give it a unique ID. E.g. 'cssid="MyTextbox"'. To have text in a textbox align in the middle, you must edit the CSS file of the engine.

You can just append the following line at the end of the CSS file:
<pre>
#MyTextbox {
text-align: center;
}
</pre>

4.) You need to define a trigger for activating keys. Write this in the settings section of your WebStory to advance on hitting the right arrow key:

<pre>
<triggers>
<trigger name="next_by_right" event="keyup" key="RIGHT_ARROW" special="next"/>
</triggers>
</pre>

And in a scene, you need to activate the trigger:
<pre>
<trigger name="next_by_right" action="activate"/>
</pre>

To add another key, just copy the trigger element and change the key attribute. Common keys besides RIGHT_ARROW are SPACE and ENTER. A complete list of keys can be found here:
http://webstoryengine.org/language:attributes:key

5.) It is possible to style the name differently, even if it is part of the text. You need to change the CSS file to do that. The ID of the character name field in a textbox is "[id of the textbox]_name", e.g. "MyTextbox_name".

In the CSS file, you can then write:
<pre>
# MyTextbox_name {
font-family: Verdana, Helvetica, sans-serif;
}
</pre>

Please be aware that you can only use fonts that the player has installed on their computer. To use custom fonts that the player might not have, you will have to define an @font-face section in your CSS file and provide the font file along with the assets. Here's a guide on how to apply an @font-face:
http://www.css3.info/preview/web-fonts-with-font-face/

As for your question about layering images, forum user @lykanthrope wrote about that here:
http://lykanproject.tumblr.com/post/3225...t-the-fuck

You can use separate Imagepack assets for that, one for the character itself, one for the expressions and maybe another one for clothing . Just give them the same x and y values and the clothing and expression layer a slightly higher z value.

Your question about transitions is too vague to really answer. I guess you should read:
http://webstoryengine.org/language:elements:transform
http://webstoryengine.org/language:elements:move

With the transform and the animation asset you can define animations that you can start and stop from within your story, but that run in the "background" without affecting the general flow of the game. The move command can be used to move any visible asset once.

Unfortunately, the transform element is only available as part of an Animation asset. It will probably be available in the normal scenes in future versions, too. You can manipulate anything with it that is based on decimal values. That means, changing colors does not work with it yet, because it is either hexadecimal or a vector of three or four decimal values (RGB/RGBA). You will have to wait for a future version of the engine for this feature.

If you really need this feature badly, write me a PM.

6.) The question is: What kind of devices do you want to support? On normal desktop PCs, you can use pretty much any resolution you want to. If you want to work it on smaller tablets, keeping it below 1280*800 would be a good idea. Research what resolutions the devices you want to target support and make a decision based on that. Another thing to consider is the internet connection speed of your potential players. If you think that a lot of them will have slow connections, you should probably use smaller images. Also be aware that large images can have a performance impact on older or budget tablets.

I guess 1024*600 should be okay for pretty much all devices. If you want to target smartphones, maybe use a bit less than 1024px, but again: you need to research that.


I hope that helps!

P.S.: Please open different threads for different topics next time. Your range of questions here is rather broad. It will help other users find what they are looking for if different questions have distinct threads. Thanks.

Thank you for your reply, C7N! And sorry about that -- I realise that I am lumping a lot of questions together, but I also didn't want to spam the forum with multiple threads. XD; But I will do that if you prefer next time.

Thank you for the solutions! I tried the method that you mentioned -- click start, type in "cmd", etc, but the message I got was "'python' is not recognised as an internal or external command, operable program or batch file". Just to clarify -- by this part

"you navigate to the directory on your computer that you want to have as the root directory for your development server"

... that means I open the folder where all my project files will be stored in, in the background, and type the SimpleHTTPServer command into the... shell... like that, right?

Regarding transitions, I was wondering if you had a list of transitions that this engine supports. :'D I assume you're familiar with the Ren'py tutorial game, but if not, the tutorial game actually had a list of what transitions Ren'py supports and demonstrated them as well, such as [wiper right], [dissolve], [fade], or [vpunch], among others. I was also wondering if it's possible to adjust the timing for those as well.

A couple of questions are unanswered, so I hope you don't mind me repeating them here (or should I open a new topic...?).

1. Is it possible to have a settings page that can adjust text speeds and music/sound volumes, like in normal visual novels? If not, how can I provide these different options to different players?

2. Is it possible to insert side images?

Sorry for all the questions! I'm dumb and am still trying to understand the capabilities of this engine, so I can better decide on what kind of game to make to test it with. It's looking really great so far, so great job, really. *_*

... I've just thought of more questions, and I'm not sure if this warrants a thread of its own so excuse me (I think it makes more sense to continue lumping them here, since they're all related to the Beginner's Guide);

Quote:Scene: A scene is a series of commands. It has a unique ID to reference it. The commands inside a scene are executed in the order they appear from top to bottom. The engine can be told to jump to another scene using either a choice menu, a <goto> command or a <sub> command. The <goto> command jumps to another scene and does not return to the scene from where it jumped. The <sub> command will also jump to another scene but if there are no more commands to execute in the other scene, the engine will return to the scene where the <sub> command is and execute the remaining commands in that scene. If no more commands are available in a scene and there is no other scene to return to, the game is over.

Choice menu: A choice menu is a menu that enables the player to select one of many options displayed on screen. Each option can be tied to a scene so that if the user clicks on the option, the engine will jump to the other scene that is associated with the option. This is a technique called branching and it enables the player to have some influence on the outcome of the story.

I keep reading this section again and again, but I don't... really understand it. XD Can you explain this section again, perhaps using specific examples? Also, about the choice section, if I had a scene that goes something like this:

Quote:Ben: What would you like to have for lunch?

<b>Option 1: Fish and chips</b>

Susan: Let's get some fish and chips.
Narrator: We went to get some fish and chips.

<b>Option 2: Dim sum</b>

Susan: Let's have some dim sum.
Narrator: We went to a Chinese restaurant and had dim sum.

Ben: Whew, I'm full.

How would that translate to coding?

Sorry for needing so many specific examples; I'm still not used to all the programming terms. ^^;

Hi jnoyume!

No, you don't open the folder in Windows Explorer but in the shell. See here:
http://www.yilmazhuseyin.com/blog/dev/us...tp-server/

I don't know why the python command is not recognised on your system. Maybe you missed some steps when you installed python? Use this guide:
http://docs.python.org/2/faq/windows#how...er-windows

Did you read the language reference? All available elements, including those that trigger transitions, are explained there:
http://webstoryengine.org/language:elements

Elements that trigger transitions right now are: flash, flicker, hide, move, set, show...
On these elements, you can use duration=, effect=, easing= and direction= to customize the transition.
Duration is the length of the transition in milliseconds.
Effect is the effect to use. Right now only "slide" (movement) or "fade" (opacity).
Easing is how the duration is applied to the transition, e.g. easeIn* means the transition will start slow and end fast while with easeOut* it is the other way round. easeInOut* does both start slow and end slow and is fast in the middle. To have a falling effect use easeOutBounce.
Direction is only used for effect "slide". Meant is the direction in which the asset is moved.

1. No, there is no settings menu yet. There is no text speed and you can adjust the volume on your device since there is no difference between audio effects and music. Maybe a settings menu will be added in future versions, but I don't think it is needed yet.

2. Yes, that is possible. Just use a normal ImagePack and give it a z value higher than the textbox's z value and move it to where you see fit using the x and y values.

Regarding scenes and control flow:

Let's say you have these two scenes:

<pre>
<scene id="scene1">
<command1 />
<sub scene="scene2" />
<command3 />
<goto scene="scene2" />
<command4 />
</scene>
<scene id="scene2">
<command2 />
</scene>
</pre>

When you start in scene1, the command1 is executed, then the sub command takes you to scene2. In scene2 command2 is executed. Then you will be taken back to scene1 and command3 will be executed. Then with the goto command, you go to scene2 again and the command2 is executed again. But since goto was used and not sub, you will not be taken back to scene1 after command2 is executed this time. That means command4 will never be reached.
So the commands executed will be: command1, command2, command3, command2.
When you reference a scene in a choice menu, the goto command is used so that you won't be taken back to the scene where the choice menu is written in.
Do you understand?

Your example dialog can be expressed in the WebStory language as follows:

<pre>
<scene id="scene1">
<choice>
<option label="Fish and chips">
<var name="decision" value="fish" />
</option>
<option label="Dim Sum">
<var name="decision" value="dim" />
</option>
<choice />
<sub ifvar="decision" ifvalue="fish" scene="fish_scene" />
<sub ifvar="decision" ifvalue="dim" scene="dim_scene" />
<line s="b">Whew, I'm full.</line>
</scene>
<scene id="fish_scene">
<line s="s">Let's get some fish and chips.</line>
<line s="n">We went to get some fish and chips.</line>
</scene>
<scene id="dim_scene">
<line s="s">Let's have some dim sum.</line>
<line s="n">We went to a Chinese restaurant and had some dim sum..</line>
</scene>
</pre>

@jnoyume:

I just posted an extension that makes using side images much easier. You can find it here:
https://iiyo.org/f/discussion/29/side-images#Item_5