Visual Novel Engine RenJS

[lunafromthemoon]

Hi! I'm a developer from Argentina and I just released a visual novel engine based on Phaser and inspired by Ren'Py, called RenJS. The stories are written in yaml on a list of actions, and then interpreted and executed with Javascript and Phaser. It's easy to use by non programmers and it's super easy to extend and modify for anyone that knows a bit of phaser. I invite you to check the tutorial game I made with the engine itself in https://lunafromthemoon.itch.io/renjs, you can also get the code from https://gitlab.com/lunafromthemoon/RenJSTutorial, download it, play it locally and grab the files to make your own visual novels.

There's no official documentation of it yet, but I'm working on it. I hope to get some feedback from you all, thank you!

[rich]

Looks excellent

[Angelkaoz]

Amazing! I will study your work in detail. Thanks Argentino

Asombroso! Estudiare en detalle tu trabajo. Gracias Argentino 

[gaelbeltran]

This looks excellent!

Lo probare cuando tenga tiempo. Llevaba tiempo buscando un engine para novelas visuales en HTML5

[totor]

Awesome! Exactly what i was looking for : renpy in js.

just one thing : maybe explain first the blinking star and the icons in the right part of the messagebox.
and a few questions :
is it possible to have multicolor text in the messagebox,
is it possible to trigger scene transitions with clickable hotpoints,
is there inventory,
is there a switch case or only nested if?

i just followed the tut but didn't read the docs, will probably make a minigame with it this WE to further test.

[lunafromthemoon]

On 9/18/2017 at 8:16 AM, rich said:

Looks excellent

 

16 hours ago, Angelkaoz said:

Amazing! I will study your work in detail. Thanks Argentino

Asombroso! Estudiare en detalle tu trabajo. Gracias Argentino 

Thanks!

4 hours ago, gaelbeltran said:

This looks excellent!

Lo probare cuando tenga tiempo. Llevaba tiempo buscando un engine para novelas visuales en HTML5

Gracias! Yo también, y es la razón principal por lo cual lo hice. Ren'py está bueno, pero nadie quiere descargar un juego (corto) hoy día.

1 hour ago, totor said:

Awesome! Exactly what i was looking for : renpy in js.

just one thing : maybe explain first the blinking star and the icons in the right part of the messagebox.
and a few questions :
is it possible to have multicolor text in the messagebox,
is it possible to trigger scene transitions with clickable hotpoints,
is there inventory,
is there a switch case or only nested if?

i just followed the tut but didn't read the docs, will probably make a minigame with it this WE to further test.

Thanks! I made the engine because I couldn't find any good web alternative to renpy.

I'll see to add that explanation to the tutorial, thanks so much for the feedback.

I haven't yet added any mark up for the text, but will soon add it.

Not yet, imagemaps (or image choices) are next on the dev backlog.

No inventory yet, but added to the backlog.

No case, only if.

There are some more actions than the ones shown in the tutorial, one of the most interesting I think is "call", that calls your own function with the parameters you want, so if you want to e.g. implement your own inventory or battle system, you can then call it's api directly from the story with this action. You basically do "call myfunction:" and then add that function inside the CustomContent.js file.

Thanks all for your feedback!

[boomgt123]

hi I want to change the language file. Change the language within the game. Thank God Bless screen

Edited September 26, 2017 by boomgt123

[bonder]

Great work!

It would be great if a writer could organize a large story into multiple script files. 

Also,  can you point to an example of using the call command? 

Thanks for making this! 

[lunafromthemoon]

Hello everyone, I wanted to let you know I updated the project with some bugfixes today, and also with a new feature: Visual Choices! Check the tutorial again to see how to use them. Also, the documentation is up, and while it's still not complete, the API is documentation is there! https://lunafromthemoon.github.io/RenJS/api/

On 9/26/2017 at 3:32 PM, boomgt123 said:

hi I want to change the language file. Change the language within the game. Thank God Bless screen

Hi, still working on that feature!

On 9/27/2017 at 9:28 AM, bonder said:

Great work!

It would be great if a writer could organize a large story into multiple script files. 

Also,  can you point to an example of using the call command? 

Thanks for making this! 

Hey! It's possible to do it. You can have as many files as needed, but these extra files must be listed as story files in the RenJSBootstrap.js file (it's a really small file where the game is initialized). Here you'll find the config for phaser and some other things, like the screen size.

The call command is documented here: https://lunafromthemoon.github.io/RenJS/api/call/

But I'll show you a simple example:

In your story, you call it like this:

Then in the file CustomContent.js, you add a function with the same name. The params will come all together in a map. You can do whatever you want here, but remember to call RenJS.resolve() at the end.

And that's it! Hope it's useful.

[Iftah]

Excellent job! 

I love it!

[WanOnOne]

Very amazing job which is exactly what I need as a newbie to html5 game. However I would like to know if there is a formal way to customize the canvas size and also the controls.  Is trying to customize the UI but not find an official way to do that. And as you know , html5 games usually run on mobile devices and for mobile phone users display  portrait would be better. It is not the traditional galgame's way but would be friendly to mobile users. Maybe you can guide me how to customize the UI?

[Garland]

Great work!
I'll start to learn, seems a nice option to make a VN

Looking forward for updates

[kanatos-kun]

Sound cool, want to try-it when i have time :3.

I already know Phaser and get some view into ren'py for creating VN ^^

[lunafromthemoon]

On 10/15/2017 at 12:26 PM, WanOnOne said:

Very amazing job which is exactly what I need as a newbie to html5 game. However I would like to know if there is a formal way to customize the canvas size and also the controls.  Is trying to customize the UI but not find an official way to do that. And as you know , html5 games usually run on mobile devices and for mobile phone users display  portrait would be better. It is not the traditional galgame's way but would be friendly to mobile users. Maybe you can guide me how to customize the UI?

You can customize everything, in fact, i'm currently working on a tiny pixel art visual novel. The way to change the size is a bit tricky because to create the Phaser game object you need those numbers right away, so they are a bit hidden, but nonetheless there. You can find the size in the file RenJSBootstrap.js, it's a tiny file so it won't be hard to find where to change it. It's the object phaserConfig that has w and h sizes.

The UI is all contained in the GUI.yaml file, there you'll find that it loads the images for the ui, such as the text, name and choice boxes, and also the menus. It's a bit complex, but not hard to get, if you play the tutorial game I linked above, the last part contains an explanation of how to change the UI a bit.

As for the controls, the game already uses standard onTap events, so it should work on mobile without problem. A click or a tap are the same for the game, is what I mean. If you want to make something more complex, most of this functionality is in the file RenJS.js.

I can help you as much as you need, just post the questions or send me a pm! I hope you do use RenJS for your games.

 

[Raúl]

Message removed as not in English

Edited January 15, 2018 by rich

[rich]

Raul - please only post to the forum in English.

[blossy]

First, thank you for creating and sharing RenJS!

Second, I'm having trouble with calling custom functions - even your helloworld() example throws this error:

VM1378:6 Uncaught (in promise) TypeError: Cannot read property 'param1' of null
    at Object.helloworld (<anonymous>:6:22)
    at <anonymous>:195:47
    at new Promise (<anonymous>)
    at StoryManager.interpretAction (<anonymous>:66:16)
    at <anonymous>:220:36
    at new Promise (<anonymous>)
    at StoryManager.interpret (<anonymous>:206:16)
    at <anonymous>:222:47
    at <anonymous>

I wanted to use a custom function to load music files a bit before they're needed as preloading them all at the start of the game seems to take quite a bit of time. Unfortunately, I'm not very experienced with JavaScript and couldn't figure out the reason for the error.

If you could check this, I'd be very thankful! 

[lunafromthemoon]

On 2/6/2018 at 7:02 PM, blossy said:

First, thank you for creating and sharing RenJS!

Second, I'm having trouble with calling custom functions - even your helloworld() example throws this error:

VM1378:6 Uncaught (in promise) TypeError: Cannot read property 'param1' of null
    at Object.helloworld (<anonymous>:6:22)
    at <anonymous>:195:47
    at new Promise (<anonymous>)
    at StoryManager.interpretAction (<anonymous>:66:16)
    at <anonymous>:220:36
    at new Promise (<anonymous>)
    at StoryManager.interpret (<anonymous>:206:16)
    at <anonymous>:222:47
    at <anonymous>

I wanted to use a custom function to load music files a bit before they're needed as preloading them all at the start of the game seems to take quite a bit of time. Unfortunately, I'm not very experienced with JavaScript and couldn't figure out the reason for the error.

If you could check this, I'd be very thankful! 

If you read the helloworld function that's in the file "CustomContent.js" you will see it's expecting two parameters inside the object "params", called "param1" and "param2". When you call this from your story, you need to send those parameters, like this:
 

- call helloworld:

  param1: asdf

  param2: qwer

This is just an example function, you should make the function you need and send whatever parameters you need to use inside it.

[Alupi]

Thank you for creating RenJS, it is exactly what I was looking for ! My end goal is to make an online dating game separated in several episodes and I think I can use RenJS to achieve that, would you be OK with me using your engine in that way ?

I also have another question concerning the call action. I tried calling a custom function but I always get the same error in my console logs : Uncaught (in promise) TypeError: RenJS.customContent[actor] is not a function

Here is how I call my function :

  - show deuzi: normal
  - deuzi says: La variable est à {genre}
  - call get_variables:
    - param1: parametre
  - deuzi says: La fonction a été exécutée

 

And the CustomContent.js file :

RenJS.customContent = {
	
	get_variables: function (params) {
		console.log("get_variables function called "+params.param1);
		RenJS.resolve();
	}
	
}

 

I don't know if that could be the source of the problem but I am executing this code inside an iframe, the files are in a folder in a Wordpress theme and I call the index.php within an iframe on my frontpage.

If anyone knows how to help me , I would be very thankful !

[lunafromthemoon]

 

18 hours ago, Alupi said:

Thank you for creating RenJS, it is exactly what I was looking for ! My end goal is to make an online dating game separated in several episodes and I think I can use RenJS to achieve that, would you be OK with me using your engine in that way ?

Hi! Of course you can use it for whatever game you want. If you can mention the engine in the credits of the game I will be pleased too, since I want more people to know about it.

18 hours ago, Alupi said:

I also have another question concerning the call action.

There's a little problem with the call in the yaml file. Yaml parses each element on the list (whatever you write after "-") as the same element. What you need to send is each param as a key-value pair as the child of the call action. What you are sending right now is a list (every time you use a "-" you're saying that's an element of a list), and it's also with the wrong indentation, making this list a "brother" of the main call action.

So the way to call it is like this:

  - call get_variables:
      param1: parametre

Take into account: There's two spaces to the first "-" indicating the call action is inside a scene. There's six spaces in the next line: 2 for scene indentation, 2 for "inside a list" indentation, 2 more for "child of action" indentation.

This indentation issue is something that happens because of the yaml format, but shouldn't be such a problem.

Just in case, be sure to start with the latest code, that you can find in the Quickstart (the tutorial might be a bit outdated), it includes now different mobile/desktop ports and also multi language possibility.

Documentation: https://lunafromthemoon.github.io/RenJS/games/

Quickstart: https://gitlab.com/lunafromthemoon/RenJSQuickstart

Hope to hear from you again!

[Alupi]

Oh my god, thank you so much for the quick response ! I've been spending too much time trying to fix a syntaxe mistake, ahah ! 

Of course we'll be crediting you, I'm hoping to code this game with a friend of mine, might take a while but we'll get there ?. I'll check out the Quickstart code, I was indeed only using the tutorial as reference.

Are you still working on the documentation ? I remember it said it was still in construction a while back but it seems much more complete now. Is there a place where people can chat about your engine and ask questions ? I don't wanna spam this thread and bother you everytime I don't know how to read a documentation ?

Thanks again !

 

Edit : I'm now trying to pass a variable as a parameter in my function but I get "{genre: null}" when I would have wanted something like "{genre: boy}" or just "boy". Is it possible to pass variables as parameters ? I know my variable is not null, I used a "says" action in my yaml file and it displayed it correctly.

[lunafromthemoon]

Merci! I'm still working on the documentation, though it should be a lot better now. I'm going to open a forum in itch.io for this purpose soon, and it would be helpful if you could report errors or problems you find either in the engine or the documentation, I'm working alone in this project and it's not yet very popular.

 

10 hours ago, Alupi said:

I'm now trying to pass a variable as a parameter in my function but I get "{genre: null}" when I would have wanted something like "{genre: boy}" or just "boy". Is it possible to pass variables as parameters ? I know my variable is not null, I used a "says" action in my yaml file and it displayed it correctly.

You can't currently pass the variable as a parameter now, because I hadn't thought about it. You still can read a variable (setted with the "var" action) straight in your function. If you check the last part of the call action docs (https://lunafromthemoon.github.io/RenJS/actions/call/), there's a list of handy things to use inside your own functions. One of this is the object RenJS.logicManager.vars, which contains all the vars setted during game by the "var" action. In short, to check the value of the "genre" variable inside your function you just have to call it from this object like: RenJS.logicManager.vars.genre.

RenJS.customContent = {
		//put here your own functions

		helloworld: function (params) {
			console.log("helloworld function");
			console.log("genre is "+RenJS.logicManager.vars.genre);
			RenJS.resolve();
		}
	}

 

[Alupi]

I see, thanks a lot ! Passing variables as parameters could maybe come in handy for some circumstances but I will be able to do what I was planning to with RenJS.logicManager.vars for now. Keep us informed about the forum, I'll gladly be a part of it and if I can help in anyway by reporting bugs I encounter, that would be great ! I hope your project sparks the attention of others, from what I've seen now it seems really well done and could be the root of some great visual novels ?

[Dinfangion]

Hi @lunafromthemoon ,

I tested your engine and it's a great tool for browser based stories.

Do you take feature requests?

Can you add a basic Dice roller in the core functionallity?

For example: instead of making a choice, just show 'roll dice', click, and show that random output and the next step resulting on that output.

[scion.miyazaki]

Hello @lunafromthemoon

Dis ... tu es francaise ?
Congratulations for your project.