Giter VIP home page Giter VIP logo

kirilllive / tuesday-js Goto Github PK

View Code? Open in Web Editor NEW
440.0 11.0 59.0 134.83 MB

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 HTML 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.

Home Page: https://kirilllive.github.io/tuesday-js/

License: Apache License 2.0

HTML 98.01% JavaScript 1.99%
interactive-fiction visual-novel-engine visual-novel screenplay web-application web-editor web-based-application web-based-game visual-novel-maker visual-novel-framework

tuesday-js's Introduction

Tuesday js visual novels engine

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用の単体で動作するダウンロード版もあります。各々のバージョン間には完全な互換性があり、インターフェイスも共通しています。

Простой и бесплатный веб-редактор визуальных новелл с открытым исходным кодом, который можно использовать в браузере. Он написан на JavaScript без использования каких-либо сторонних библиотек и не требует установки дополнительного программного обеспечения. Движок использует стандартные элементы HTML5 документа, такие как div и img. Это позволяет использовать любой медиаформат поддерживаемый браузерами включая векторную графику svg, gif-анимацию и стили css. Есть версии редактора доступные для Android устройств и настольных компьютеров. Все версии полностью совместимы друг с другом и имеют одинаковый интерфейс.

Run in browser: https://kirilllive.github.io/tuesday-js/translate/en_tuesday_visual.html

Download builds for macOS, Windows, Android, Web

GitHub: https://github.com/Kirilllive/tuesday-js/releases

Patreon: https://www.patreon.com/kirill_live

Boosty: https://boosty.to/kirilllive

Tutorials

EN - A quick tutorial to create a visual novel

JA - Tuesday JSでビジュアルノベルを作ってみよう

ES - Una guía rápida para crear una novela visual

RU - Краткое руководство по созданию визуальной новеллы

PT - Um guia rápido para criar uma visual novel

Blogs

Twitter: https://twitter.com/TuesdayJS_vn

Reddit: https://www.reddit.com/r/TuesdayJS/

Patreon

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.

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

Редактор отображает структуру сценария со всеми элементами, такими как параметры диалога и последствия выбора. Это облегчает навигацию и редактирование сценария.

Tuesday JS script structure

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用のパーセント単位でもセンチメートル単位でもレイアウトを指定できるので、環境に合わせた適切な画面構成が作れます。

Позволяет расположить все элементы по своим местам. Он также показывает, как будет выглядеть сцена на разных экранах. В макете сцены вы можете использовать стандартные параметры HTML как проценты, пиксели или сантиметры, чтобы лучше адаптировать сцену к различным экранам.

Tuesday JS scene editor

Translate tool / 内蔵翻訳支援ツール

The built-in translation editing tool allows you to quickly add a new translation and edit all the texts in your project without leaving the editor. In addition, it displays the number of completed translations for each language.

Tuesday JSが内蔵する翻訳支援ツールなら、他の言語版用の翻訳文を、プロジェクトで使用している元のテキストを対訳表のように参照しながら追加していけるので、別のテキストエディターを起動する手間が省けます。また、翻訳の進捗率を言語ごとに確認できます。

Встроенный инструмент редактирования перевода позволяет быстро добавлять новый перевод и отредактировать все тексты в вашем проекте, не выходя из редактора. Кроме того, он отображает количество выполненного переводова для каждого языка.

Tuesday JS preview

Preview / プレビュー

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

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

Предварительный просмотр позволяет запустить проект с определенной точки в сценарии с выбранной локализацией.

Tuesday JS preview

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として編集することも、任意の箇所のみを編集することも可能です。

Сценарий истории сохраняется в структуре JSON. Практически любой язык программирования может работать с этим форматом что позволяет вам перенести ваш сценарий на другой движок или платформу. Редактор имеет встроенный инструмент для работы с JSON это позволит вам отредактировать все содержимое истории или только выбранный элемент.

Tuesday JS json edit

ASCII art / アスキーアート (AA)

The engine is adapted to use ASCII graphics. With its help, you can diversify the texts with images and patterns made up of text characters.

Tuesday JSエンジンはアスキーアート(AA)を適切に表示できます。テキストで様々な絵や模様を作ることができます。

Движок адаптирован для использования ASCII-графики. С ее помощью вы сможете разнообразить тексты изображениями и узорами составленых из текстовых символов.

Tuesday JS preview

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形式のテーブルデータとして出力できるので、他のテキストエディターで翻訳文章を編集したり追加したりすることもできます。

Tuesday JS предоставляет обширные возможности для адаптации историй на другие языки. Вы можете локализировать перевод практически любого элемента проекта, включая текст и графику. Функция предварительного просмотра позволяет запускать проект на выбранном языке. Все тексты могут быть экспортированы в файл csv таблицы для редактирования или добавления локализаций в другом редакторе.

Tuesday JS localization

Creating a СhatBot / チャットボット作成機能

The project can be exported as a bot for the Telegram messenger. You can easily create an online assistant for your business to automate customer service and improve service levels. Step-by-step guide to running a local server with Node.JS: https://kirilllive.github.io/tuesday-js/doc_editor.html#bot_telegram

Tuesday JSで作成したプロジェクトは、チャットアプリTelegram上で動作するチャットボットとして出力可能なので、アクセスして来たお客様に24時間自動で応対するサービスが楽々制作できます。 従来より一段階優れた顧客対応の実現に役立つこと間違い無しです。

Проект можно экспортировать как бота для мессенджера Telegram. Вы можете легко создать онлайн-помощника для вашего бизнеса чтобы автоматизировать обслуживания клиентов и повысить уровень своего сервиса.

Tuesday JS localization

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 access files on Android

Tutorial for RunTime

step 1 The engine file "tuesday.js" downloaded from https://kirilllive.github.io/tuesday-js/tuesday.js

step 2 Index.html file with id = 'tuesday' elements to display the novel

<html>
    <head>
    </head>
    <!--After loading, the load_story function is launched, indicating a file or array with history-->
    <body onload="load_story('file','story.json')">
        <!--display area-->
        <div id='tuesday' style='width:100%; height:90vh;'></div>
        <!--path to the engine file, always at the end of the page-->
        <script type="text/javascript" src="tuesday.js"></script>
    </body>
</html>

step 3 Create a story file story.json

{
    "parameters": {
        "text_panel": {
            "size": ["95%","25%"],
            "color": "#9cf",
            "indent_bottom": "32px",
            "size_text": "20px",
            "dialog_speed": 20
        },
        "name_panel": {
            "size": ["0","48px"],
            "position": ["0","0","-48px","0"],
            "size_text": "18px"
        },
        "launch_story": "main_menu",
        "languares": ["en"],
        "buttons": [
            {
                "name": "tue_back",
                "position": ["0","55%","0","8px"],
                "size": ["52px","52px"],
                "color": "#888",
                "size_text": "48px",
                "text":"<"
            },{
                "name": "tue_next",
                "position": ["55%","0","0","8px"],
                "size": ["52px","52px"],
                "color": "#888",
                "size_text": "48px",
                "text":">"
            }
        ]
    },
    "main_menu":[
        {
            "dialogs":[
                {
                    "choice":[
						{
                            "go_to": "story",
                            "position": ["50%","0","0","50%"],
                            "size": ["128px","48px"],
                            "color": "#888",
                            "color_text": "#fff",
                            "text": "Start"
                        }
                    ]
                }
            ]
        }
    ],
    "story": [
        {
            "dialogs":[
                {
                    "back_to": "main_menu",
                    "text":"1234567890",
                    "name":"numbers"
                },{
                    "go_to": "main_menu",
                    "text":"ABCDEFZHIKLMNOPQRSTVX",
                    "name":"letters"
                }
            ]
        }
    ]
}

Possible startup problems RunTime и устройстве сценария в JSON

Index.html file with id = 'tuesday' elements to display the novel

<html>
    <head>
    </head>
    <!--Change load_story value from ('file', 'story.json') to ('data', story) -->
    <body onload="load_story('data',story)">
    <div id='tuesday' style='width:100%; height:90vh;'></div>
        <!-- Add script tag before tuesday.js --> ;
        <script>
            let story = <!--insert content from story.json --> ;
        </script>
        <script type="text/javascript" src="tuesday.js"></script>
    </body>
</html>

More information about RunTime and JSON script you can be found in

documentation: https://kirilllive.github.io/tuesday-js/doc_runetime.html

Tuesday JS visual novels engine Akihabara 秋葉原

The goal of Tuesday JS is to make project development no more difficult than working in an office program to make presentations, and does not require special skills from the user.

Japanes translation and adaptation by Onigi

Russian translation and adaptation by LolerFox

Spanish translation and adaptation by Suki Novels

Portuguese translation and adaptation by Sarah Camargo

Patreon

tuesday-js's People

Contributors

goldenxp avatar kirilllive avatar kurrrat avatar lolerfox avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tuesday-js's Issues

Rich text formatting

Is it currently possible to use rich text formatting (bold, italic, color, etc) within Tuesday.js? I often find that there are times where being able to draw attention to a word or passage of text would be really helpful. I've tried using both HTML and Markdown and neither appear to work.

User Input/Prompt

It's amazing how this engine has been and how constant the updates are for only 1 dev. Thank you.

Going to the point, is it currently possible to have a user input after a dialogue for example to change the "name" variable? If it's not could you please add it. It's something that I really need to make my project so the character would give a sense of closure to the player. Thank you once again!

Importing text translation

Is it possible to import a language-translation file? The export of the language-translation file is possible.

User Text Input

Hi,

I was experimenting with tuesday js, and I am trying to figure out how to get player input, for example at the beginning of the game I would like to get player name (https://fsvieira.github.io/thecorporation/).

Does this feature exists ? If not, is it possible to add it using the html js features, how?

Great project, I tried to check the code, but its a little bit confusing to me.

Choice buttons with multiple languages don't show up

I fixed this in my local branch but my client is using the main web build which rejected my pull request for this fix.
Basically, values_button tries to get a string from an object and fails so no buttons show up.

Uncaught TypeError: Cannot read properties of undefined (reading 'resolutions')

Снимок экрана 2023-11-06 в 15 56 53

Hello, I am getting an error when trying to launch the preview screen.
A couple of days ago everything was working, I didn’t change anything much, but the preview screen stopped working and gave the error Uncaught TypeError: Cannot read properties of undefined (reading 'resolutions'). Please tell me what could be the problem?

Small visual glitch after switching scenes through a button

Scenario:

  • Block 1 - Scene 1 : display a dialog (1)
  • Block 1 - Scene 2 : make a new with a button that goes to a new block (block)
  • Block 1 - Scene 1 : display a dialog (2)
    Bug: just before transitioning ti dialog 2, dialog 1 is briefly displayed again.

Sample code attached

{ "parameters": { "text_panel": { "size": [ "95%", "25%" ], "color": "#efefff", "color_text": "#000", "indent_text": "8px", "indent_bottom": "32px", "size_text": "20px", "style": "border-radius:16px;", "dialog_speed": "10", "art": { "en": "" }, "className": "", "position": [ "0", "0", "0" ], "font_family": "Arial" }, "name_panel": { "size": [ "222px", "48px" ], "position": [ "0", "0", "-48px", "0" ], "indent_text": "8px", "size_text": "18px", "color_text": "#000", "align": [ "flex-start", "center" ], "art": { "en": "" }, "className": "", "font_family": "", "color": "" }, "title": { "en": "new novel" }, "launch_story": "block_1", "key": { "next": "", "back": "", "save": "", "load": "", "full_screen": "", "launch_story": "", "load_autosave": "" }, "languares": [ "en" ], "buttons": [ { "name": "tue_back", "style": "border-radius:26px;", "position": [ "2.5%", "0", "0", "32px" ], "size": [ "38px", "38px" ], "color": "", "color_text": "#000", "size_text": "28px", "text": "<", "art": { "en": "" }, "sound": { "en": "" }, "hotspot": [ "0%", "0%" ] }, { "name": "tue_next", "style": "border-radius:26px;", "position": [ "0", "2.5%", "0", "32px" ], "size": [ "38px", "38px" ], "color": "", "color_text": "#000", "size_text": "28px", "text": ">", "art": { "en": "" }, "sound": { "en": "" }, "hotspot": [ "0%", "0%" ] } ], "style_file": "", "autosave": false, "font": "Arial", "font_size": "18px", "variables": {}, "sounds": {}, "characters": {}, "plugins": [] }, "blocks": { "block_1": [ "319px", "219.5px", "block", false ], "block_2": [ "698px", "287.5px", "block", false ] }, "block_1": [ { "dialogs": [ { "text": "Message 1 - This message is going to flash after clicking on the button, it's a bug" } ] }, { "dialogs": [ { "choice": [ { "go_to": "block_2", "position": [ "19.93%", 0, 0, "42.52%" ], "size": [ 0, null ], "color": "#efefff", "color_text": "#000", "text": { "en": "Click me to go to the next block. There will be a flashing dialog in between (bug)" }, "indent_text": "8px", "art": { "en": "" }, "sound": { "en": "" }, "hotspot": [ "0%", "0%" ] } ] } ] } ], "block_2": [ { "dialogs": [ { "text": "2. done" } ] } ] }

Prev/Next Button with no text prevents Choice buttons from appearing

In a scenario where global interface prev and next buttons are purely iconic with no text, an error occurs which prevents choice buttons from showing up.

To reproduce:

  1. Make a new project. Add story block. Add a scene.
  2. Add a choice with one button. Preview. Observe a button named "button" is visible in the center.
  3. Return to editor. Perform "Scene edit"
  4. Go to interface buttons global and delete the text < and > .
  5. Assign a unique color to each button and observe circular buttons in the editor.
  6. Click "back" to exit scene edit and run the preview project. Observe same button named "button" is not visible.
  7. Open DevTools and observe the error.
Uncaught TypeError: e.matchAll is not a function
    at values_button (<anonymous>:1:29575)
    at creation_dialog (<anonymous>:1:22730)
    at creation_scene (<anonymous>:1:13402)
    at base_creation (<anonymous>:1:7009)
    at load_story (<anonymous>:1:676)
    at <anonymous>:1:1574
    at play_novel (tuesday_visual.html:1303)
    at HTMLTableCellElement.onclick (tuesday_visual.html:318)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.