Tuesday JS visual novel engine / ビジュアルノベル・エンジン

is a simple web-based, free and open-source visual novel editor that can be used in a web browser. It is written in JavaScript without using any third party libraries and thus does not require additional software installation. The engine uses standard HTML5 document elements such as div and img. This allows the use of any media format supported by browsers including vector graphics svg, gif animations and css styles. There is a version of the editor available as a standalone application for Android devices and desktops. All versions are fully compatible with each other and have the same interface.

は無駄を排した作りの、無償かつオープンソースのビジュアルノベル作成ソフトウェアです。ゲームの制作もプレイもウェブブラウザ上で可能です。JavaScriptで開発したソフトウェアですが、サードパーティ製ライブラリーを一切使用していないので、他のソフトウェアをインストールする手間は不要です。divやimgといった標準HTML5文章でお馴染みのタグや要素でゲームのスクリプトを記述し、svg形式のベクターイメージ、gif形式のアニメーション、CSSスタイルシートなど、ブラウザが扱えるファイルなら何でも使用可能です。 アンドロイド機器並びにパソコン版WindowsとMac用の単体で動作するダウンロード版もあります。各々のバージョン間には完全な互換性があり、インターフェイスも共通しています。

est un éditeur de roman visuel facile à utiliser. Gratuit et open source il tourne sur n'importe quel navigateur Web. Il est écrit en JavaScript, n'utilise pas de bibliothèques tierces et ne nécessite donc pas d'installation logicièle supplémentaire. Le moteur utilise des éléments HTML5 standard tels que div et img et permet d'utiliser n'importe quel format multimédia pris en charge par les navigateurs, y compris les graphiques vectoriels svg, les animations gif et les styles css. Il existe une version de l'éditeur disponible en tant qu'application autonome pour les appareils Android et les ordinateurs de bureau. Toutes les versions sont entièrement compatibles entre elles et partagent la même interface.




Visualization /ビジュアライゼーション

The visual editor allows you to create graphics or kinetic novels without any programming knowledge. If is necessary, it is possible to expand the basic functionality using JavaScript and css.

個々の選択肢や、選択の結果起こる結果などと併せてスクリプトの全体像を目で見て分かるように表示します。スクリプトの構造を明確に確認できるので、ナビやスクリプトを編集しやすくします。

L'éditeur affiche entièrement la structure du scénario avec tous les éléments tels que les options de dialogue et les conséquences des réponses choisies. La navigation et la modification du scénario en est ainsi facilité.


tuesday js visualization structure script


Scene editor / シーンエディター

The scene editor can arrange all the elements in their places. It also shows how the scene will change on different screens. In the scene layout you can use standard HTML units in percentage pixels or centimeters to better adapt the scene to different screens.

機能では、全種類の要素を分類して管理できます。加えて、制作環境と異なる画面環境でゲームを動作させたときの画面構成の変化を確認できます。 標準HTML用のパーセント単位でもセンチメートル単位でもレイアウトを指定できるので、環境に合わせた適切な画面構成が作れます。

Cet éditeur vous permet d'organiser les éléments sur une scène. Il montre également comment la scène va changer sur différents écrans. Dans la mise en page de la scène, vous pouvez utiliser des objets HTML standard dont les dimensions s'expriment en pourcentage de pixels ou en centimètres pour mieux adapter la scène aux différents écrans.


tuesday js visual Drag and drop scene editor


Localization / ローカリゼーション

Tuesday JS provides ample opportunities for adapting stories into other languages. You can set the localized translation for almost any element of your project including text and graphics. The preview function allows you to run the project in the selected language. All language texts can also be exported to a table csv file for editing or adding localizations in another editor.

Tuesday JSには、翻訳版を制作するための機能も豊富です。 ゲームを構成するテキストやグラフィックといった要素一つ一つに翻訳版用ファイルを設定でき、プレビュー機能で用意した翻訳版の動作確認ができます。 CSV形式のテーブルデータとして出力できるので、他のテキストエディターで翻訳文章を編集したり追加したりすることもできます。

De nombreuses possibilités d'adaptation les histoires dans d'autres langues. Vous pouvez définir la traduction de presque tous les éléments de votre projet, tels que le texte et les graphiques. La fonction d'aperçu vous permet d'exécuter le projet dans la langue sélectionnée. Tous les textes peuvent être exportés vers un fichier csv pour édition et ajout de localisations dans un autre éditeur, tel qu'un tableur.




JSON

A story script has all the elements stored in a JSON structure. Almost any programming language can work with this format. This allows you to port your script to another engine or platform. The editor has a built-in tool to work with JSON. This will allow you to edit the entire contents of the script or just the selected element.

ゲームスクリプトは、全要素をJSON形式で保存します。JSONは、一部を除く全てのプログラム言語で扱えるので、他のゲームエンジンやコンピューターにTuesday JSで作成したスクリプトを移植できます。 JSONを編集するツールを内蔵していおり、スクリプト全体をJSONとして編集することも、任意の箇所のみを編集することも可能です。

Tous les éléments du scénario sont stockés dans une structure JSON, un format universel lisible par la quasi totalité des langages de programmation. Vous pouvez ainsi porter votre scénario sur un autre moteur ou une autre plateforme. L'éditeur dispose d'un outil intégré pour travailler la structure JSON qui vous permet de modifier l'intégralité du scénario ou uniquement un élément spécifique.


tuesday js JSON editor tool


Preview / プレビュー

Preview allows you to start a project from a certain point in the script with the selected localization.

各々の言語設定で、任意の時点から動作をテストできるプレビュー機能があります。

L'aperçu vous permet de démarrer un projet à partir de n'importe quel point du scénario et avec la localisation sélectionnée.


tuesday js Preview project



Games


tuesday js Preview project tuesday js Preview project


Warning for Android version

Minimum version of Android 5.1

If you have problems with files on Android 10 and higher, then you need to specify 'Allow access to manage all files' in the application settings in 'Permissions' section.

Tuesday JS error Android 10 access files


if you have any questions about this engine, write me tuesdayjsengine@gmail.com I will be happy to help.


The project is available on GitHub: https://github.com/Kirilllive/tuesday-js



I will be glad to support the project onx patreon or PayPal



Useful tutorials

Tuesday js Tutorial for creating visual novels
Creation mobile project for iOS and Android
Creation desctop project for Windows MacOS and Linux
How to make your own font
Blender 3D Freestyle draw contour simulation 2D art
How to make a full screen image suitable for portrait and landscape mode.


Updated 3 hours ago
StatusIn development
CategoryTool
PlatformsWindows, macOS, Linux, Android, HTML5
PublisherKirill Live
Release date Sep 07, 2020
Rating
(20)
AuthorKirill Live
GenreInteractive Fiction, Visual Novel
Made withInkscape
Tagsandroid, Game Design, Game engine, GameMaker, GitHub, Kinetic Novel, Open Source, Twine
LicenseApache License 2.0
Average sessionDays or more
LanguagesEnglish
InputsKeyboard, Mouse, Touchscreen
LinksSteam, Homepage, Source code, Patreon, Twitter, YouTube

Download

Download NowName your own price

Click download now to get access to the following files:

TuesdayJS_Beta_0.94_web_recommend.zip 108 kB
TuesdayJS_Beta_0.94_android.apk 356 kB
TuesdayJS_Beta_0.94_mac.dmg 111 MB
TuesdayJS_Beta_0.94_win.zip 101 MB
Tuesday JS press kit 9 MB
Example my story.zip 2 MB
Example interactive movie.zip 18 MB
Example hidden objects.zip 487 kB
Example Rock paper scissors.zip 11 MB
Example custom cursor.zip 2 kB

Also available on

Development log

View all posts

Comments

Log in with itch.io to leave a comment.

(+1)

does it run without internet ?

YES!

all versions do not need the Internet to work

(1 edit) (+1)

Kirill, why Android Version is 355KB and the Windows Version is 100MB?

Win and Mac versions is based on NW.js and has its own web engine, making it not nearly operating system independent. Mobile version is completely dependent on the Android distribution, as it uses the built-in WebView of the operating system. Because of this, such a difference in size, 
If there is a free space issue, you can use the web version on a PC offline with a suitable browser, which is equivalent to the desktop versions.

(+1)

Make sense

Hi uhm i maybe have a little problem on the android app because whenever i play or save it wont work it always says "No working Folders Selected error 9"And ive selected an new file ive created and Putted The needed pictures/music/etc there.. please help mee!?!!!! 

(+2)

This app is bloated with beautiful features and the documentation is outstanding.

(+1)

Hello Kirill,

After I load back the project from cloud storage, I can not edit any text, pressing "Edit" won't work. Is the project being read-only? I can add scene, but can not add or modify text.

Hello thanks! It's really weird, I'll see what I can do

Hello Kirill,

Maybe i'm not using it right, but i don't manage to stop music even with the stop sound function:

I can only add new music to skip the previous one.

If you do not need to loop it is better to use the "Play sound" element. "Stop sound" can only stop the sound started by "Play sound".

If you are using music for a scene, then to stop it try to write "false", "off" or something else.

"False" is working well, thanks a lot!

(+1)

Hello Kirill,

Some small display bugs on live preview.
- personalized CSS style won't show
- personalized Font won't show

Example (with rollover effect and Moms typewriter font):



(1 edit)

Hello! thanks! but this cannot be fixed

External CSS will not show up in the scene editor because if you apply your own CSS it can affect the editor itself and cause problems. The entire editor interface is written in css

Thanks for reporting problems, i appreciate it 👍

Ok thanks Kirill. You're welcome, you really deserve feedback.

(+1)

Hello Kirill,

How to make a choice button to point to a web page (to patreon ie)?

I'm currently testing Tuesday JS and i must say it's a real nice tool, complete enough to make a good VN. I think i will make my whole VN with this tool, i'm excited by the way your app develop quickly.

I used to work on tyranobuilder and cloudnovel and i must say it's just missing 3 important stuff:
- skip option (i'm not using the back button and have game over options)
- having the possibility of making a save/load screen with more than one slot
- a mute/unmute function.

I also suggest some bonus functions for the future:
- a rollover effect on buttons (i know it's possible with CSS, but making different rollover options depending on each buttons type seems complicated for a non-developer, especially using arts instead of color)
- being able to use sprite sheets
- add your fabulous puzzle maker in the app options
- being able to show variables (to make a hp bar or money bar ie)
- having something like a dice game with aleatory numbers

Keep up the good work, and thanks again for that engine !

(2 edits)

Thank you for your feedback, I wrote down your suggestions in the development plan, there may be problems with sprite sheets, not all browsers do it correctly, I have already tried it.

The external link is currently set by the JS command: 

 window.open ('https://kirill-live.itch.io/tuesday-js');  

it needs to be added to the parameters of the "JavaScript" button


If you port the game to a PC using NW.js or Electron, then other commands are used there

To display a variable in the text, you must use the variable name in angle brackets <variable_name>.  if the variable is not showing, try clearing storage and turning off autosave for the project.


(+1)

Thanks for your answer Kirill.

The window.open works well for the browser, thanks, but i plan to make a version of my game for windows, mac and linux. What commands need to be used for exporting to a pc (i'm using web2executable, so nw.js)? Because on a windows export, it open the url in a new restricted window, not in your browser. And will it be another command for android?

"To display a variable in the text, you must use the variable name in angle brackets <variable_name>. (I checked, I probably broke this feature, I will fix it in the next release)"

Do you have a screen or example because i really don't see what you meant? Even if the feature is broken, at least i will know how to do it when the next release is online.

And i found another bug (sorry). On my main screen, when i click on "load" button, if there was no previous save game, buttons disappear. And of course a new player doesn't have a previous save game...

Before clicking:

After clicking on load button:

(1 edit)

for nw.js the command would be like this:

nw.Shell.openExternal("https://kirill-live.itch.io/tuesday-js")  

for Android, if you use Cordova as in the guide, then there is the same as in the browser. 

window.open ('https://kirill-live.itch.io/tuesday-js');  

For a demonstration of working with variables, try this example https://kirilllive.github.io/tuesday-js/example/example_quiz_or_test.zip the value from the variable into the text can be inserted like this

With the problematic "load" button, thanks for saying 👍

(5 edits) (+1)

Nice example for the variables, i will try it soon.

If you made a banner/button to advertise your great engine, i will be happy to add it in my game.

"for nw.js the command would be like this: nw.Shell.openExternal(\"https://kirill-live.itch.io/tuesday-js\")"

I tried but it wasn't working so i googled your command and found the correct one. Thanks a lot, it will be usefull :)

nw.Shell.openExternal('url');
(+1)

Hello Kirill,

Just a small annoying bug, the windows app crash when you make a right click.

Hello Thanks! I will definitely correct

(1 edit)

Now that i don't have this issue again, while i had it a few hours ago, i can't help to tell you what is causing this trouble.

(1 edit) (+1)

Hello,

Is there specific size for images ? When i create a scene, some pngs that are in the selected folder are missing.
In a folder where i got 52 pngs, just a dozen appear in arts...

Hello, there are no restrictions for images, this is possible if the files have read and access restrictions.

(1 edit)

Unfortunately, no read and access restriction differences between "accepted and rejected" png. ie first png appear in art, second one doesnt appear while they have exactly the same read/access:


the screenshot shows that you have a different problem, the file format is written in capital letters, there is no such option in the program, rename .PNG to .png

(+1)

Thanks a lot, yeah that was it. Problem resolved !

(1 edit) (+1)

Hello, I have run into a huge problem. I can´t open saved projects or locate files like pictures. Whether it is the ones that I made or the ones that I downloaded ("example interactive movie" → time gal). Please help.

PS: Windows

Hello! You must select a folder with a file, not a specific file. Did you stay so?

(+1)

Okay, thanks. I was confused because when I select the file it translates the text to "do you want to upload the files to a web" which really confused me since I work on desktop. Also sometimes, especially on my first start up, there were bugs were the app wouldn´t lunch properly or at all (pure white screen) and maybe also that when I tried to load the project it also buged and didn´t lunched.

As far as I am trying right now, everything seems to work properly. Thank you very much.

if the problem persists, try using the web version. it is the same as for desktops and can work offline

(1 edit) (+3)

I cannot access gallery and music in js even tho i already give access.(Redmi 9c Android 10)

(1 edit) (+1)

sorry for the long answer

For Android 10 and higher, then you need to specify 'Allow access to manage all files' in the application settings in 'Permissions' section.

Unfortunately, Google has become very strict about access to personal data, including access to files, because of this, you must enable extended file access yourself.

(1 edit) (+1)

It different from my phone.

Thanks for the screenshots, if this version is not from Google Play, then I have not encountered such a situation yet. I will let you know when I find a solution to this problem.

My android 5 cannot install the app ; - ;

Unfortunately, the minimum version of Android 5.1

This is great! Thank you very much for making it free for android, haha. The dark theme update is nice, but unfortunately it's the story block is unreadable unless you switch it to light mode :[ 

can you take a screenshot of this problem? or is the text too contrasting?

the content is readable, but not the original story block

(1 edit) (+1)

thanks! I've already changed the colors for both themes and added a function to add my own color. it will appear in the next update.

In the current version, you can only change the color manually using the JSON tool, you need to find the "blocks" setting, and there you can specify any block color in HEX or RGB format.


(+1)

Nice tool

(+1)

Excelent tool but im stuck in a problem, i want to write  some text

like

this

cookie

(i really dont know how it would be called on english.. next line? ) but when i try in the editor, it just render everything together (i will put a screenshot to ilustrate) it is a bug ? or im just doing something wrong?


Thanks! I fixed this issue.
An updated version is available on GitHub: https://kirilllive.github.io/tuesday-js/tuesday_visual.html



If you have other problems, please report it.

(+1)

I was looking for something more or less like this for Mobile, when I ran the apk it was working very well, however when it came to creating scenes and importing images ... it either had lag or crashed

Thanks, Unfortunately, the mobile version is still in development, so it cannot handle files and preview projects. This will be fixed in the future.

(+1)

Okay, I’m looking forward to the next Updates

(+2)

This engine work to all language, is possible work in pixelart?

(+1)

Perhaps something similar to your game "Hickey's House". but the editor is more vector graphics oriented.

Regarding language support, localization is present, the engine itself determines the browser language and, if there is an appropriate localization, uses it. otherwise, the first language in the list of localizations will be selected. There is also a manual language selection.

(+2)

thanks!

(+3)

Came across this completely accidentally. First second looking at the front page, I knew this was something interesting. Fiddling with it for a bit only strengthened that opinion.

As someone who does a lot of development, a lot of tools, and a fair amount of web apps, the quality of this tool just made me quiver.

I never even wanted to make a VN, but this tool is just so *muah*. It's like finding the perfect axe, and suddenly getting the urge to chop a tree only to have an excuse to use it.

What a powerful, smooth, and well presented tool. The .js file could do with some documentation / comments to make it a little easier to read, contribute to, and customize, but it's just so smooth as butter that I'm really impressed.

(+2)

wow thanks!!! I'm glad you liked it

JS file structure is described here.

https://kirilllive.github.io/tuesday-js/tuesday_doc

a basic tutorial on the editor is here

https://kirilllive.github.io/tuesday-js/tutorial.html

(+1)

these were my thoughts exactly! Like never have I ever had a desire to make a VN. But finding this program makes me want to make one just because I can!

Cool! thanks )

In it you can create not only VN, it is suitable for creating a presentation or interactive slideshow. Can be used as a tool for Storyboard or dialog tree. This is used by teachers to create tests to test students' knowledge or psychological tests.Once, for a test, I made an interactive guide to Tokyo attractions in it )))

(+3)

This engine is great... It's Beginner Friendly... Your tutorial is well enough for starter... I want to try this engine earlier... But I only had a chance now...

And I create my first VN game with this engine... :3.

Hope for Good Future for this Engine...!!!

(+3)

Wow! Thanks )

(+3)

wow! thanks! Great video

(+3)

Thanks... :3. Glad You Like It... :3.

(+2)

This is amazing thanks!  I did not even realize its out already haha I was waiting for Steam launch but then again I am too new to itch io anyway to know this or to html things.. 

(+2)

Thanks!
The Steam version will be completely the same as the browser version.

(+2)

Oh right.. I never use any browser tools, like ever xD prefer to have them on computer really. I have not used your vn maker yet but it looks awesome!

(+1)

Hey! Thank you for making such a nice engine. Just a question, is it possible to run the engine on android mobile now with cloud service available?  accessing the mobile storage wasn't possible, but except that HTML5 has been running quite nicely on mobile browser.  

(1 edit) (+1)

Hello! thanks )

Unfortunately, the editor will not be able to work on mobile devices.

I have visited making mobile versions of the editor through a browser or as a native app. besides the problems with loading the project, there were still many problems with the interface and management.
Maybe in the future I will make a light version of the editor for Android and iOS


(+1)

Oh okay, thanks for the reply :)

(+1)

Its amazing as desktop or laptop for sure! its very very good! Looks so light and nice!

(+1)

Unfortunately, the current version does not work on mobile devices. (((

(+1)

Hello, I just started using this engine. Thank you for making such a convenient engine. For me who only have basic programming knowledge, this really helps a lot.

But I have a question, how do I make the button have a hover effect? I tried for a long time, but the effect is only display on the Edit screen

The hover effects disappeared If I run the preview Project  >_<


(1 edit) (+1)

Hello! thanks )

In the editor, this function is not provided because css gives more options for hover effects.  How to do it:

1. you need to create a style.css file and add code to it:

.choice:hover { /*'choice' style name, it can be anything with a dot at the beginning*/
    background-color: #ccc; /* hover color*/
}
.choice {
    background-color: #888; /* main color*/
}

2. add the created file to the working folder and specify it in the project settings.


3. In scene editor, specify the name of style in the “ClassName

It is important to remove the color from the “Color” settings otherwise it will not work.


(+1)

It works now! Thank you for the reply <3 

(+1)

this is simplest editor I've tried

(+2)

Thank you!

(+3)

this is rly cool!

will check it out :)))

(+3)

It's amazingly glad you liked it.👍

(+4)

Oh my god ! That's awesome ! Thanks for sharing,have a great day !

(+2)

Thank you, if you have any questions or suggestions, be sure to write to me

(+3)

Hello, i am a teacher. I see your vn engine and i am interested on it. I want to make some quiz style vn for my student. 

i using the html part to include the quiz. The quiz is using javascript (i found the source online ) and when i run, it didnt show the html page properly. 

So, i change the html quiz with only html and css (also found it online). It doing well, it shown when i run it. But the html is keep running, and i cant figure it out on how to add or show button to continue to next scene.

Thankyou.

(+1)

Hello! Quiz you can do on tuesday js

To add a button with a choice of answers, you need to select a dialog, click on the pencil icon and select "Scen edit".



There, on the right side, there will be an item "Buttons & Сhoice" where you can create selection buttons.


I recommend reading tutorial https://kirilllive.github.io/tuesday-js/tutorial.html

Thank you.

(+2)

Thank you for your respons. I've already read the tutorial.

About quiz that i have in my mind is like:

#There will be questions you should answer, and then the answer will be compared with the correct one. If it correct you got some points. If you collect enough points you can go to next scene

or

# there are questions, with clickable multiple choices, right choices will add points.

(+1)

The first option can be done. There is no option with multiple options.

You will also need to use the functionality of the variable.

I can give you an example and send it to the mail with an explanation

Write me to Email tuesdayjsengine@gmail.com

(+5)

Could I get a tutorial on how to do some of these things? Im very new to coding and just started

(+3)

The visual editor is still under development, so there is no tutorial for it at the moment.

You can try to figure out how to use file the tuesday.js engine, there is documentation for that. to create the basis for your novel, follow this guide:
https://kirilllive.github.io/tuesday-js/tuesday_doc.html#structure

If you have any questions or if you fail, email me at tuesdayjsengine@gmail.com

(+4)

ok! Thank you for your help!  Also good luck on your project! I shall bless u with UwUs and OwOs to help u on ur journey!!!!

(+3)

Thanks for the words of support !!! I think that by the spring it will be ready for full operation. 😀👍

(+7)

Looks promising, hopefully soon it will be

(1 edit) (+7)

Seems like a very cool project but unfortunately, I couldn't make run the project from the repository (example_tour_guide) even when putting the tuesday.js file into the folder. Any clues about that ? It returns error : 

[Error] SyntaxError: Unexpected identifier 'story'
(anonymous function) (index.html:8)
[Error] SyntaxError: Unexpected identifier 'story_json'
(anonymous function) (tuesday.js:1)

(1 edit) (+6)

Hi! Thanks for your feedback,

I fixed the error, it was caused by the latest update. Update your tuesday.js file, or better use the example on this page.

because example_tour_guide from github won't work in chrome browser due to its "cross domen" protection (I haven't figured out how to solve this yet)

If you add tuesday.js to your project folder, you will also change the path to that file in index.html.

From this one:

<script type="text/javascript" src="../tuesday.js"></script>

to this one:

<script type="text/javascript" src="tuesday.js"></script>
(+7)

Hi Kirill ! Unfortunately, there's still a problem (safari & chrome on Mac) 

Message error : Error load json file Cross-Origin Resource Sharing (CORS)

Here's the structure of my folder and, as you wrote, changed ../tuesday.js to ../tuesday.js

(1 edit) (+6)

(CORS) will prevent the project from running locally on the computer. (I haven't figured out how to solve this yet).

To get around this, you need to copy the content from the json file to index.html as a javascript array. I described this problem in more detail here:
https://kirilllive.github.io/Tuesday/tuesday_doc.html#cross_domain_error

try running example_tour_guide.zip downloaded from this page (https://kirill-live.itch.io/tuesday), it is exactly the same but can be run locally.
Or start the "insurance_agent" from same repository.


(1 edit) (+6)

there is still an option to run through the visual editor
https://kirilllive.github.io/Tuesday/tuesday_visual.html

1 click on the open project button,


2 Choose a folder with a project

3 press button run


(+7)

Thanks Kirill ! I understand ! 

Well, your first example works fine ! 

But I can't load the folder project in the editor.  Project doesn't appear in window. I on Mac, tried with Chrome and Safari

(+6)

Super!!! 

But the project is not displayed in the window, this is not expected for me, I tested it on Mac os on Safari and Chrome. did not notice the anomaly. You can send a screenshot or tell us more?

(+8)

absolutely great ! excellent job man , i wanna make my own game engine one day :)

(+7)

Look, don't say "one day", do it now; then you can look back later on this as an achievement, rather than a to-do list item or a regret... you know what I mean?

(+6)

Thanks bro!!! 

I fully agree with Arcade Holdings, this is a great opportunity to test your skills and learn new things.

(+7)

Doesn't look too shabby. Nice work.

(+7)

thanks bro, still ahead

(+7)

I see you're hard at work on this project. Nice. Keep up the good work.

(+7)

Thank you 🤜🤛 , I want to finish the basics quickly,  that it could already be used this.